Create index.html

2025-05-31 16:34:16 +02:00
parent 6769904454
commit 1544f9154b
1 changed files with 115 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Doctor Who Season 2 Finale</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
+
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: 'Orbitron', sans-serif;
+      background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+      color: #ffffff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      text-align: center;
+      animation: fadeIn 1.5s ease-in;
+    }
+
+    h1 {
+      font-size: 2.5em;
+      margin-bottom: 0.5em;
+      color: #00ffc3;
+      text-shadow: 0 0 10px #00ffc3, 0 0 20px #00ffc3;
+    }
+
+    #countdown {
+      font-size: 4em;
+      font-weight: bold;
+      color: #ffffff;
+      text-shadow: 0 0 10px #00fff2, 0 0 20px #00d4ff;
+      background: rgba(255, 255, 255, 0.1);
+      border: 2px solid #00ffc3;
+      border-radius: 15px;
+      padding: 20px 60px;
+      margin-bottom: 1em;
+      animation: glow 2s infinite alternate;
+    }
+
+    #localTime {
+      font-size: 1.2em;
+      color: #ddd;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(-20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes glow {
+      from {
+        box-shadow: 0 0 10px #00ffc3;
+      }
+      to {
+        box-shadow: 0 0 25px #00ffc3, 0 0 35px #00d4ff;
+      }
+    }
+
+    @media (max-width: 600px) {
+      #countdown {
+        font-size: 2.5em;
+        padding: 15px 30px;
+      }
+
+      h1 {
+        font-size: 1.8em;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <h1>Countdown to Doctor Who Season 2 Finale</h1>
+  <div id="countdown">Loading...</div>
+  <div id="localTime"></div>
+
+  <script>
+    // Target UTC time: May 31, 2025 at 17:50 UTC
+    const targetDateUTC = new Date(Date.UTC(2025, 4, 31, 17, 50, 0));
+
+    function updateCountdown() {
+      const now = new Date();
+      const diff = targetDateUTC - now;
+
+      if (diff <= 0) {
+        document.getElementById("countdown").textContent = "🌟 The Event Has Started!";
+        document.getElementById("localTime").textContent = '';
+        return;
+      }
+
+      const hours = Math.floor(diff / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+      document.getElementById("countdown").textContent =
+        `${hours.toString().padStart(2, '0')}h ` +
+        `${minutes.toString().padStart(2, '0')}m ` +
+        `${seconds.toString().padStart(2, '0')}s`;
+
+      const localTime = targetDateUTC.toLocaleString(undefined, {
+        dateStyle: 'full',
+        timeStyle: 'short',
+      });
+      document.getElementById("localTime").textContent = `🕒 Local Time: ${localTime}`;
+    }
+
+    updateCountdown();
+    setInterval(updateCountdown, 1000);
+  </script>
+</body>
+</html>