CCCHH/didays.de
1
0
Fork 0
Code Issues 1 Pull requests 1 Activity Actions

improve layout

Browse source
This commit is contained in:
kritzl 2026-07-07 14:40:20 +02:00
commit 91bcd33c44
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
1 changed files with 31 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/pages/index.astro
View file

@ -7,45 +7,40 @@ import {Calendar} from "@lucide/astro"
<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"
<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="flex flex-col items-center">
<span class="countdown font-mono text-5xl">
<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>
Tage
Tag(e)
</div>
<div class="flex flex-col items-center">
<span class="countdown font-mono text-5xl">
<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>
Stunden
Std.
</div>
<div class="flex flex-col items-center">
<span class="countdown font-mono text-5xl">
<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>
Minuten
Min.
</div>
<div class="flex flex-col items-center">
<span class="countdown font-mono text-5xl">
<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>
Sekunden
Sek.
</div>
</div>
<h1 class="text-7xl font-bold">
<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<br>
veranstaltet vom <a class="link" href="https://hamburg.ccc.de">
CCCHH
</a> & <a class="link" href="https://www.wauland.de">
WHS
</a>
Eintritt frei
</p>
<div class="aura aura-rainbow">
<a href="/didays2026.ics" class="btn btn-lg" target="_blank">
@ -140,16 +135,16 @@ import {Calendar} from "@lucide/astro"
<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 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;
const second = 1000
const minute = 60 * second
const hour = 60 * minute
const day = 24 * hour
function updateCountdown() {
countdownElement.classList.add("opacity-50")
@ -162,9 +157,17 @@ import {Calendar} from "@lucide/astro"
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) {