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 bg-base-200 min-h-screen">
<div class="hero-content text-center"> <div class="hero-content text-center">
<div class="max-w-md"> <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"> id="countdown">
<div class="flex flex-col items-center"> <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-4xl">
<span id="days" style="--value:0;" aria-live="polite" aria-label="0">0</span> <span id="days" style="--value:0;" aria-live="polite" aria-label="0">0</span>
</span> </span>
Tage Tag(e)
</div> </div>
<div class="flex flex-col items-center"> <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-4xl">
<span id="hours" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span> <span id="hours" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
</span> </span>
Stunden Std.
</div> </div>
<div class="flex flex-col items-center"> <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-4xl">
<span id="minutes" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span> <span id="minutes" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
</span> </span>
Minuten Min.
</div> </div>
<div class="flex flex-col items-center"> <div class="bg-neutral rounded-box text-neutral-content p-2 flex flex-col items-center text-sm">
<span class="countdown font-mono text-5xl"> <span class="countdown font-mono text-4xl">
<span id="seconds" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span> <span id="seconds" style="--value:0;--digits: 2" aria-live="polite" aria-label="0">0</span>
</span> </span>
Sekunden Sek.
</div> </div>
</div> </div>
<h1 class="text-7xl font-bold"> <h1 class="text-6xl font-bold">
DIDAYS 2026 DIDAYS 2026
</h1> </h1>
<p class="py-6 text-xl leading-10"> <p class="py-6 text-xl leading-10">
02.-04.10.2026<br> 02.-04.10.2026<br>
<a class="link" href="https://www.kulturpalast-harburg.com">Kultur Palast Harburg</a><br> <a class="link" href="https://www.kulturpalast-harburg.com">Kultur Palast Harburg</a><br>
Eintritt frei<br> Eintritt frei
veranstaltet vom <a class="link" href="https://hamburg.ccc.de">
CCCHH
</a> & <a class="link" href="https://www.wauland.de">
WHS
</a>
</p> </p>
<div class="aura aura-rainbow"> <div class="aura aura-rainbow">
<a href="/didays2026.ics" class="btn btn-lg" target="_blank"> <a href="/didays2026.ics" class="btn btn-lg" target="_blank">
@ -140,16 +135,16 @@ import {Calendar} from "@lucide/astro"
<script> <script>
const countdownElement: HTMLElement = document.getElementById("countdown")! const countdownElement: HTMLElement = document.getElementById("countdown")!
const daysElement: HTMLElement = countdownElement.querySelector('#days')! const daysElement: HTMLElement = countdownElement.querySelector("#days")!
const hoursElement: HTMLElement = countdownElement.querySelector('#hours')! const hoursElement: HTMLElement = countdownElement.querySelector("#hours")!
const minutesElement: HTMLElement = countdownElement.querySelector('#minutes')! const minutesElement: HTMLElement = countdownElement.querySelector("#minutes")!
const secondsElement: HTMLElement = countdownElement.querySelector('#seconds')! const secondsElement: HTMLElement = countdownElement.querySelector("#seconds")!
const targetDateTime = new Date(2026, 9, 2, 10, 0, 0) const targetDateTime = new Date(2026, 9, 2, 10, 0, 0)
const second = 1000; const second = 1000
const minute = 60 * second; const minute = 60 * second
const hour = 60 * minute; const hour = 60 * minute
const day = 24 * hour; const day = 24 * hour
function updateCountdown() { function updateCountdown() {
countdownElement.classList.add("opacity-50") countdownElement.classList.add("opacity-50")
@ -162,9 +157,17 @@ import {Calendar} from "@lucide/astro"
const seconds = Math.floor((diff % minute) / second) const seconds = Math.floor((diff % minute) / second)
daysElement.style.setProperty("--value", String(days)) daysElement.style.setProperty("--value", String(days))
daysElement.innerText = String(days)
daysElement.setAttribute("aria-label", String(days))
hoursElement.style.setProperty("--value", String(hours)) hoursElement.style.setProperty("--value", String(hours))
hoursElement.innerText = String(hours)
hoursElement.setAttribute("aria-label", String(hours))
minutesElement.style.setProperty("--value", String(minutes)) minutesElement.style.setProperty("--value", String(minutes))
minutesElement.innerText = String(minutes)
minutesElement.setAttribute("aria-label", String(minutes))
secondsElement.style.setProperty("--value", String(seconds)) secondsElement.style.setProperty("--value", String(seconds))
secondsElement.innerText = String(seconds)
secondsElement.setAttribute("aria-label", String(seconds))
} }
if (new Date() < targetDateTime) { if (new Date() < targetDateTime) {