Update index.html

2025-05-31 16:49:13 +02:00
parent 0398250b54
commit 85ef65beff
1 changed files with 32 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <title>Doctor Who Season 2 Finale</title>
+  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

@@ -74,20 +75,48 @@
 </head>
 <body>

-  <h1>Countdown to Doctor Who Season 2 Finale</h1>
+  <h1>🛸 Doctor Who Season 2 Finale</h1>
  <div id="countdown">Loading...</div>
  <div id="localTime"></div>

+  <audio id="themeMusic" preload="auto">
+    <source src="audio/doctor-who-remix-m1ck.wav" type="audio/wav">
+    Your browser does not support the audio element.
+  </audio>
+
  <script>
    const targetDateUTC = new Date(Date.UTC(2025, 4, 31, 17, 50, 0));
+    let countdownInterval;
+    const audio = document.getElementById("themeMusic");
+
+    function launchConfetti() {
+      confetti({
+        particleCount: 200,
+        spread: 100,
+        origin: { y: 0.6 },
+        colors: ['#00ffc3', '#00d4ff', '#ffffff']
+      });
+    }
+
+    function playThemeMusic() {
+      const playPromise = audio.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(() => {
+          document.body.addEventListener('click', () => audio.play(), { once: true });
+        });
+      }
+    }

    function updateCountdown() {
      const now = new Date();
      const diff = targetDateUTC - now;

      if (diff <= 0) {
-        document.getElementById("countdown").textContent = "🌟 The Event Has Started!";
+        clearInterval(countdownInterval);
+        document.getElementById("countdown").textContent = "🎉 The episode is out — go watch now!";
        document.getElementById("localTime").textContent = '';
+        launchConfetti();
+        playThemeMusic();
        return;
      }

@@ -108,7 +137,7 @@
    }

    updateCountdown();
-    setInterval(updateCountdown, 1000);
+    countdownInterval = setInterval(updateCountdown, 1000);
  </script>
 </body>
 </html>