|
| 1 | +{% set targetDate = "2026-04-10T18:00:00Z" %} |
| 2 | +<div class="mt-8 text-center md:text-left"> |
| 3 | + <div class="mb-2 flex items-center justify-center md:justify-start gap-2"> |
| 4 | + <span class="text-2xl md:text-3xl font-bold text-primary">🎉</span> |
| 5 | + <span class="font-semibold text-lg md:text-xl text-base-content">Redbrick's 30th Anniversary Party</span> |
| 6 | + </div> |
| 7 | + <div class="inline-flex gap-2 items-end justify-center md:justify-start" id="countdown"> |
| 8 | + <div class="flex flex-col items-center"> |
| 9 | + <span id="days" class="text-3xl md:text-4xl font-mono font-bold text-primary">--</span> |
| 10 | + <span class="text-xs text-base-content/60">days</span> |
| 11 | + </div> |
| 12 | + <span class="text-2xl font-bold text-base-content/40">:</span> |
| 13 | + <div class="flex flex-col items-center"> |
| 14 | + <span id="hours" class="text-3xl md:text-4xl font-mono font-bold text-secondary">--</span> |
| 15 | + <span class="text-xs text-base-content/60">hours</span> |
| 16 | + </div> |
| 17 | + <span class="text-2xl font-bold text-base-content/40">:</span> |
| 18 | + <div class="flex flex-col items-center"> |
| 19 | + <span id="minutes" class="text-3xl md:text-4xl font-mono font-bold text-accent">--</span> |
| 20 | + <span class="text-xs text-base-content/60">mins</span> |
| 21 | + </div> |
| 22 | + <span class="text-2xl font-bold text-base-content/40">:</span> |
| 23 | + <div class="flex flex-col items-center"> |
| 24 | + <span id="seconds" class="text-3xl md:text-4xl font-mono font-bold text-base-content">--</span> |
| 25 | + <span class="text-xs text-base-content/60">secs</span> |
| 26 | + </div> |
| 27 | + </div> |
| 28 | +</div> |
| 29 | +<script> |
| 30 | + function updateCountdown() { |
| 31 | + const now = new Date().getTime(); |
| 32 | + const target = new Date("{{ targetDate }}").getTime(); |
| 33 | + const distance = target - now; |
| 34 | + const countdown = document.getElementById("countdown"); |
| 35 | + if (distance < 0) { |
| 36 | + countdown.innerHTML = '<span class="text-lg font-bold text-success">The party has started! 🎈</span>'; |
| 37 | + clearInterval(countdownInterval); |
| 38 | + return; |
| 39 | + } |
| 40 | + const days = Math.floor(distance / (1000 * 60 * 60 * 24)); |
| 41 | + const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); |
| 42 | + const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); |
| 43 | + const seconds = Math.floor((distance % (1000 * 60)) / 1000); |
| 44 | + document.getElementById("days").innerHTML = days.toString().padStart(2, '0'); |
| 45 | + document.getElementById("hours").innerHTML = hours.toString().padStart(2, '0'); |
| 46 | + document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, '0'); |
| 47 | + document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, '0'); |
| 48 | + } |
| 49 | + const countdownInterval = setInterval(updateCountdown, 1000); |
| 50 | + updateCountdown(); |
| 51 | +</script> |
0 commit comments