add countdown and more content
This commit is contained in:
parent
f7e40853b8
commit
f65e47bf45
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
3 changed files with 138 additions and 4 deletions
|
|
@ -12,6 +12,7 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@lucide/astro": "^1.23.0",
|
||||
"@tailwindcss/vite": "^4.3.2",
|
||||
"astro": "^7.0.6",
|
||||
"tailwindcss": "^4.3.2"
|
||||
|
|
|
|||
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
|
|
@ -8,6 +8,9 @@ importers:
|
|||
|
||||
.:
|
||||
dependencies:
|
||||
'@lucide/astro':
|
||||
specifier: ^1.23.0
|
||||
version: 1.23.0(astro@7.0.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.2)(jiti@2.7.0))
|
||||
'@tailwindcss/vite':
|
||||
specifier: ^4.3.2
|
||||
version: 4.3.2(vite@8.1.3(esbuild@0.28.1)(jiti@2.7.0))
|
||||
|
|
@ -527,6 +530,11 @@ packages:
|
|||
'@jridgewell/trace-mapping@0.3.31':
|
||||
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
|
||||
|
||||
'@lucide/astro@1.23.0':
|
||||
resolution: {integrity: sha512-SP5JHwI46QJjCJGzS8BTQsUXcHJoGkVIeywN12NraSiTEt4uh0iNLPs4hEHTSJr+LbZeHxc3W1BiRJPF2tS5Yw==}
|
||||
peerDependencies:
|
||||
astro: ^4 || ^5 || ^6 || ^7
|
||||
|
||||
'@napi-rs/wasm-runtime@1.1.6':
|
||||
resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
|
||||
peerDependencies:
|
||||
|
|
@ -1902,6 +1910,10 @@ snapshots:
|
|||
'@jridgewell/resolve-uri': 3.1.2
|
||||
'@jridgewell/sourcemap-codec': 1.5.5
|
||||
|
||||
'@lucide/astro@1.23.0(astro@7.0.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.2)(jiti@2.7.0))':
|
||||
dependencies:
|
||||
astro: 7.0.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.2)(jiti@2.7.0)
|
||||
|
||||
'@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)':
|
||||
dependencies:
|
||||
'@emnapi/core': 1.11.1
|
||||
|
|
|
|||
|
|
@ -1,15 +1,43 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro"
|
||||
import {Calendar} from "@lucide/astro"
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="hero bg-base-200 min-h-screen">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-md">
|
||||
<div class="grid auto-cols-max grid-flow-col gap-5 text-center mx-auto w-fit mb-8 opacity-0"
|
||||
id="countdown">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="countdown font-mono text-5xl">
|
||||
<span id="days" style="--value:0;" aria-live="polite" aria-label="0">0</span>
|
||||
</span>
|
||||
Tage
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="countdown font-mono text-5xl">
|
||||
<span id="hours" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
|
||||
</span>
|
||||
Stunden
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="countdown font-mono text-5xl">
|
||||
<span id="minutes" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
|
||||
</span>
|
||||
Minuten
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="countdown font-mono text-5xl">
|
||||
<span id="seconds" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
|
||||
</span>
|
||||
Sekunden
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-7xl font-bold">
|
||||
DIDAYS 2026
|
||||
</h1>
|
||||
<p class="py-6">
|
||||
<p class="py-6 text-xl leading-10">
|
||||
02.-04.10.2026<br>
|
||||
<a class="link" href="https://www.kulturpalast-harburg.com">Kultur Palast Harburg</a><br>
|
||||
Eintritt frei<br>
|
||||
|
|
@ -20,19 +48,77 @@ import Layout from "../layouts/Layout.astro"
|
|||
</a>
|
||||
</p>
|
||||
<div class="aura aura-rainbow">
|
||||
<a href="/didays2026.ics" class="btn btn-lg" target="_blank">Save the Date</a>
|
||||
<a href="/didays2026.ics" class="btn btn-lg" target="_blank">
|
||||
<Calendar/>
|
||||
Im Kalender speichern
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container p-8 my-40 max-w-xl mx-auto">
|
||||
<div class="container p-8 my-40 max-w-2xl mx-auto text-center text-xl/8">
|
||||
<p>
|
||||
Der CCC Hansestadt Hamburg e.V. veranstaltet vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen,
|
||||
Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital
|
||||
Independance Days in Hamburg. Euch erwartet ein Programm rund um digitale Unabhängigkeit: Messenger,
|
||||
Independence Days in Hamburg.<br><br>
|
||||
Euch erwartet ein Programm rund um digitale Unabhängigkeit: Messenger,
|
||||
Office-Programm, oder die eigene Cloud.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 py-40">
|
||||
<div class="container p-8 max-w-2xl mx-auto">
|
||||
<h2 class="text-4xl font-semibold mb-8">
|
||||
Digitale Unabhängigkeit
|
||||
</h2>
|
||||
<p>
|
||||
Im Dezember 2025 wurde die Initiative Digital Independence Day ins Leben gerufen, um allen Menschen
|
||||
Möglichkeiten zu zeigen, sich von Big Tech unabhängig zu machen: Bessere Messenger, bessere Office-Software,
|
||||
unabhängige Clouds.<br>
|
||||
In über 100 Städten in Deutschland und darüber hinaus gibt es regelmäßig zum ersten Sonntag im Monat
|
||||
Veranstaltungen mit Vorträgen, Workshops und Austauschformaten. Und auf <a class="link"
|
||||
href="https://diday.org">DIDAY.org</a>
|
||||
gibt es viele Informationen,
|
||||
wie man selbst den Wechseln zu offeneren Alternativen hinbekommen kann.<br><br>
|
||||
|
||||
Das Ziel ist es, euch mehr Kompetenz und Mündigkeit im Umgang mit moderner Technik zu vermitteln.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container p-8 my-40 max-w-2xl mx-auto">
|
||||
<h2 class="text-4xl font-semibold mb-8">
|
||||
DIDAYS - Ein Wochenende digitale Selbstbestimmung
|
||||
</h2>
|
||||
<p>
|
||||
Am Wochenende vom 2. bis 4. Oktober gibt es diese und noch mehr Themen kompakt: Vorträge, Workshops und Austausch
|
||||
zwischen Interessierten. Neben dem praktischen “Wie” wollen wir auch über gesellschaftliche und politische Themen
|
||||
reden, wie z.B. den Einfluss von Künstlicher Intelligenz, oder die Digitalisierung von Stadt und Verwaltung in
|
||||
Hamburg.
|
||||
|
||||
Wir haben dazu den Kultur Palast Harburg (ehem. Rieckhof) als Location gewinnen können. Von Freitagnachmittag bis
|
||||
Sonntagnachmittag haben Besucher*innen die Möglichkeit, in Vorträgen und Workshops zu erfahren, wie sie sich
|
||||
unabhängiger machen können. Natürlich ist der Eintritt kostenlos.
|
||||
|
||||
Das Programm ist abgestimmt auf Menschen, die mehr oder minder spontan für ein paar Stunden vorbeikommen und “mal
|
||||
schauen” möchten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 py-40">
|
||||
<div class="container p-8 max-w-2xl mx-auto">
|
||||
<h2 class="text-4xl font-semibold mb-8">
|
||||
Kontakt und Infos
|
||||
</h2>
|
||||
<p>
|
||||
Ihr findet alle Informationen auf dieser Webseite. Wenn ihr Wünsche und Anregungen habt, schreibt uns gerne
|
||||
eine Email an <a class="link" href="mailto:orga@didays.de">orga@didays.de</a>.<br><br>
|
||||
|
||||
Deine Gruppe möchte sich gerne beteiligen? Dann schau dir gerne unsere Einladung für Gruppen an.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="bg-base-300 pb-20">
|
||||
<div class="container p-8 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-3 items-center gap-12">
|
||||
<div class="flex flex-col items-center">
|
||||
|
|
@ -51,4 +137,39 @@ import Layout from "../layouts/Layout.astro"
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const countdownElement: HTMLElement = document.getElementById("countdown")!
|
||||
const daysElement: HTMLElement = countdownElement.querySelector('#days')!
|
||||
const hoursElement: HTMLElement = countdownElement.querySelector('#hours')!
|
||||
const minutesElement: HTMLElement = countdownElement.querySelector('#minutes')!
|
||||
const secondsElement: HTMLElement = countdownElement.querySelector('#seconds')!
|
||||
const targetDateTime = new Date(2026, 9, 2, 10, 0, 0)
|
||||
|
||||
const second = 1000;
|
||||
const minute = 60 * second;
|
||||
const hour = 60 * minute;
|
||||
const day = 24 * hour;
|
||||
|
||||
function updateCountdown() {
|
||||
countdownElement.classList.add("opacity-50")
|
||||
countdownElement.classList.remove("opacity-0")
|
||||
const diff = targetDateTime.getTime() - Date.now()
|
||||
|
||||
const days = Math.floor(diff / day)
|
||||
const hours = Math.floor((diff % day) / hour)
|
||||
const minutes = Math.floor((diff % hour) / minute)
|
||||
const seconds = Math.floor((diff % minute) / second)
|
||||
|
||||
daysElement.style.setProperty("--value", String(days))
|
||||
hoursElement.style.setProperty("--value", String(hours))
|
||||
minutesElement.style.setProperty("--value", String(minutes))
|
||||
secondsElement.style.setProperty("--value", String(seconds))
|
||||
}
|
||||
|
||||
if (new Date() < targetDateTime) {
|
||||
updateCountdown()
|
||||
setInterval(updateCountdown, 1000)
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue