add countdown and more content

package.json

@@ -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"

pnpm-lock.yaml

@@ -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

src/pages/index.astro

@@ -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>