Create countdown.html

Added a countdown page!
Freakybob-Team · Sep 20, 2024 · 663e347 · 663e347
1 parent bd2f941
commit 663e347
Showing 1 changed file with 143 additions and 0 deletions.
diff --git a/countdown.html b/countdown.html
@@ -0,0 +1,143 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="UTF-8">
+<meta name="description" content="The countdown...">
+<title>Countdown</title>
+
+<style>
+body {
+    background-color: rgb(50, 119, 96);
+}
+p {
+  text-align: center;
+  font-size: 60px;
+  margin-top: 100px;
+  color: rgb(219, 199, 12);
+}
+h1 {
+  text-align: center;
+  font-size: 30px;
+  margin-top: 100px;
+  color: rgb(214, 238, 1);
+}
+.button-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: 20px;
+        }
+        .button-container button {
+            background: none;
+            border: 2px solid #d1219c;
+            color: #17e0bf;
+            font-size: 18px;
+            cursor: pointer;
+            padding: 10px 20px;
+            border-radius: 5px;
+            transition: color 0.3s, background-color 0.3s;
+            margin: 5px;
+        }
+        .button-container button:hover {
+            color: #ffffff;
+            background-color: rgb(6, 110, 124);
+        }
+#countdown {
+    text-align: center;
+    margin-top: 100px;
+    color: rgb(214, 238, 1);
+    font-size: 20px;
+    width: 900px;
+    height: 270px;
+    background-color: rgb(6, 109, 100);
+    margin-left: auto;
+    margin-right: auto;
+}
+@media screen and (max-width: 600px) {
+    p {
+        font-size: 40px;
+    }
+
+    h1 {
+        font-size: 20px;
+    }
+    #countdown {
+        font-size: 15px;
+        width: 300px;
+        height: 300px;
+        margin-top: 50px;
+        margin-bottom: 10px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .button-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            margin: 20px;
+        }
+        .button-container button {
+            background: none;
+            border: 2px solid #d1219c;
+            color: #17e0bf;
+            font-size: 18px;
+            cursor: pointer;
+            padding: 10px 20px;
+            border-radius: 5px;
+            transition: color 0.3s, background-color 0.3s;
+            margin: 5px;
+        }
+        .button-container button:hover {
+            color: #ffffff;
+            background-color: rgb(6, 110, 124);
+        }
+}
+</style>
+</head>
+<body>
+    <div id="countdown">
+        <p id="time"></p>
+        <h1>Countdown for when freakybob.site will become 1 years old!</h1>
+    </div>
+    <div class="button-container">
+        <a href="https://freakybob.site">
+            <button>Go back to Main Website :3</button>
+        </a>
+        </div>
+  <audio>
+    <source src="EEK!.ogg" type="audio/ogg" autoplay loop>
+  </audio>
+<script>
+
+var countDownDate = new Date("August 19, 2025, 12:00 Pm").getTime();
+
+
+var x = setInterval(function() {
+
+
+  var now = new Date().getTime();
+
+
+  var distance = countDownDate - now;
+
+
+  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+
+  document.getElementById("time").innerHTML = days + "d " + hours + "h "
+  + minutes + "m " + seconds + "s ";
+
+
+  if (distance < 0) {
+    clearInterval(x);
+    document.getElementById("time").innerHTML = "If you are seeing this, we have payed for the domain :3";
+  }
+}, 1000);
+</script>
+
+</body>
+</html>