didays.de/src/pages/index.astro

---
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-2 text-center mx-auto w-fit mb-8 opacity-0"
             id="countdown">
          <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
            <span class="countdown font-mono text-4xl">
              <span id="days" style="--value:0;" aria-live="polite" aria-label="0">0</span>
            </span>
            Tag(e)
          </div>
          <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
            <span class="countdown font-mono text-4xl">
              <span id="hours" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
            </span>
            Std.
          </div>
          <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
            <span class="countdown font-mono text-4xl">
              <span id="minutes" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
            </span>
            Min.
          </div>
          <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
            <span class="countdown font-mono text-4xl">
              <span id="seconds" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
            </span>
            Sek.
          </div>
        </div>
        <h1 class="text-6xl font-bold">
          DIDAYS 2026
        </h1>
        <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
        </p>
        <div class="aura aura-rainbow">
          <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-2xl mx-auto text-center text-xl/8">
    <p>
      Der <a class="link" href="https://hamburg.ccc.de">CCC Hansestadt Hamburg e.V.</a> und die <a class="link" href="https://www.wauland.de">Wau Holland Stiftung</a> veranstalten vom 2. bis 4. Oktober zusammen mit Hamburger Stadtteilinitiativen,
      Maker- und Hackerspaces und weiteren zivilgesellschaftlichen Organisationen aus der Region die ersten Digital
      Independence Days in Hamburg.<br><br>
      Euch erwartet ein Programm rund um digitale Unabhängigkeit: Messenger,
      Office-Programm, oder die eigene Cloud.<br><br>
      Wenn ihr euch mit eurer Stadtteil-Initiative, Computer-Stammtisch oder
      Aktivisty-Gruppe an den DIDAYS beteiligen möchtet, dann schaut
      doch <a class="link" href="einladung-initiativen">in unsere Einladung an Gruppen</a>.
      Wir freuen uns auf die Zusammenarbeit!
    </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">
        <a class="link" href="https://hamburg.ccc.de/imprint/">Kontakt & Impressum</a>
        <a class="link" href="https://hamburg.ccc.de/privacy-notice/">Datenschutzerklärung</a>
        <a class="link" rel="me" href="https://chaos.social/@didays">Fediverse</a>
      </div>
      <div class="flex flex-col items-center">
        <a href="https://hamburg.ccc.de">
          <img alt="Logo des Chaos Computer Club Hamburg e.V." src="/ccchh.svg" class="max-w-40"/>
        </a>
      </div>
      <div class="flex flex-col items-center">
        <a href="https://www.wauland.de">
          <img alt="Logo der Wau-Holland-Stiftung" src="/wauland.svg" class="max-w-40"/>
        </a>
      </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))
          daysElement.innerText = String(days)
          daysElement.setAttribute("aria-label", String(days))
          hoursElement.style.setProperty("--value", String(hours))
          hoursElement.innerText = String(hours)
          hoursElement.setAttribute("aria-label", String(hours))
          minutesElement.style.setProperty("--value", String(minutes))
          minutesElement.innerText = String(minutes)
          minutesElement.setAttribute("aria-label", String(minutes))
          secondsElement.style.setProperty("--value", String(seconds))
          secondsElement.innerText = String(seconds)
          secondsElement.setAttribute("aria-label", String(seconds))
      }

      if (new Date() < targetDateTime) {
          updateCountdown()
          setInterval(updateCountdown, 1000)
      }
  </script>
</Layout>