we wish you a merry christmas, we wish you a merry christmas, we wish…

… you a merry christmas, and a happy new year!

css/index.css

@@ -34,6 +34,33 @@ body {
     color: #00ffff;
 }
 
+#time {
+    font-size: 35px;
+}
+
+#happynewyear {
+    background-color: #ff000015;
+    backdrop-filter: blur(7px);
+    color: #ff0000;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 0, 0, 0.18);
+    animation: newyear 1.5s ease-in-out infinite;
+}
+
+@keyframes newyear {
+    0% {
+        color: #ff0000;
+    }
+
+    50% {
+        color: #ff000000;
+    }
+
+    100% {
+        color: #ff0000;
+    }
+}
+
 button {
     background-color: #161616;
     border: none;
@@ -387,4 +414,5 @@ td, th {
 
 .columninnertext h5 {
     font-weight: normal;
-}
+}
+

index.html

@@ -34,6 +34,12 @@
             <marquee>
                 <h2>The footer is back, but as always, welcome to my website!</h2>
             </marquee>
+            <div class="socials">
+                <a id="socialstext">Time until 2025 starts</a>
+                <br>
+                <a id="time">Please wait...</a>
+            </div>
+            <br>
             <a>Welcome! This is the official website of mpax235!</a>
             <p>This website is currently a W.I.P, so for more stuff come back soon.</p>
             <div class="socials">

js/index.js

@@ -1,3 +1,27 @@
 //setTimeout(function() {
 //    window.location.href = "https://mpax235.github.io/maintenance.html";
-//}, 0);
+//}, 0);
+
+function updateCountdown() {
+    const now = new Date();
+    const targetDate = new Date('January 1, 2025 00:00:00');
+    const timeDifference = targetDate - now;
+
+    if (timeDifference <= 0) {
+        document.getElementById('time').innerHTML = '<div id="happynewyear">HAPPY NEW YEAR!</div>';
+        clearInterval(interval);
+        return;
+    }
+
+    const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)).toString().padStart(2, '0');
+    const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0');
+    const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
+    const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000).toString().padStart(2, '0');
+
+    document.getElementById('time').innerHTML = `
+        <div>${days}:${hours}:${minutes}:${seconds}</div>
+    `;
+}
+
+const interval = setInterval(updateCountdown, 1000);
+updateCountdown();