initial round countdown

IEEEUCSC · Jan 25, 2024 · 84b8803 · 84b8803
1 parent 10e8efa
commit 84b8803
Show file tree

Hide file tree

Showing 4 changed files with 309 additions and 174 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -408,9 +408,19 @@ h6 {
   vertical-align: middle;
 }
 .glitch-container {
-  display: flex;
-  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto; /* Center the container horizontally */
+  font-size: 35px;
+  text-transform: uppercase; /* Convert text to uppercase */
+  color: #38BEA6; /* Set the font color to a blue shade (you can change the color as needed) */
+}
+
+@media (max-width: 600px) {
+  .glitch-container {
+    padding: 10px;
+  }
 }
+
 .background-image {
   width: 90%;
   height: auto;
@@ -2332,7 +2342,149 @@ filter: blur(2px); */
   }
 }
 
+/* styles for newly added hero section before initial round */
+
+#countdown {
+  position: center;
+  font-size: 3em;
+  color: #00FFED; /* Change the font color */
+}
+
+@media (max-width: 768px) {
+  #countdown {
+    font-size: 2em;
+    position: center;
+  }
+}
+
+@media (max-width: 480px) {
+  #countdown {
+    font-size: 1.5em;
+    position: center;
+  }
+}
+
+.buttonContainer {
+  position: absolute;
+  bottom: 40px; /* Adjust the distance from the bottom */
+  left: 50%; /* Center the button horizontally */
+  transform: translateX(-50%);
+  display: flex;
+
+}
+
+.buttonContainer .inner-border {
+  margin-right: 35px; /* Adjust the margin between buttons */
+  position: relative;
+
+}
+
+.buttonContainer .inner-border:hover .button {
+  background-color: #00FFED;
+  color: #000000;
+  border-color: #00FFED;
+}
+
+.buttonContainer .inner-border:hover {
+  border-color: #00FFED;
+}
+
+.buttonContainer .inner-border:hover .text-container {
+  color: #00FFED;
+}
+
+.inner-border {
+  width: 150px;
+  height: 150px;
+  padding: 16px 18px;
+  border: 2px solid #ADADAD;
+  border-radius: 10px;
+  color: #ADADAD;
+  transition: border-color 0.3s ease, color 0.3s ease;
+}
+
+.button {
+  position: absolute;
+  right: 18px;
+  bottom: 18px;
+  width: 35px;
+  height: 35px;
+  background-color: #ADADAD;
+  padding: 2px;
+  border: 2px solid #ADADAD;
+  border-radius: 5px;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+.arrow {
+  font-size: 1em;
+  color: transparent;
+}
+
+/* Media Query for Mobile Responsiveness */
+@media (max-width: 767px) {
+  .buttonContainer {
+    flex-direction: row;
+    position: absolute;
+    bottom: -5px;
+    left: 50%; /* Center the button horizontally */
+    transform: translateX(-50%); /* Adjust to center the button */
+    display: flex;
+
+  }
+
+  .buttonContainer .inner-border {
+    margin-right: 0;
+    margin-right: 35px;
+  }
+}
+
+/* Existing Styles */
+
+/* Additional Styles for Larger Border */
+.inner-border.large-border {
+  width: 200px; /* Adjust the width as needed */
+  height: 150px;
+  margin-left: 550px;
+
+}
+
+/* Media Query for Mobile Responsiveness */
+@media (max-width: 767px) {
+  .buttonContainer {
+    position: absolute;
+    left: 50%; /* Center the button horizontally */
+    transform: translateX(-50%); /* Adjust to center the button */
+    display: flex;
+
+  }
+
+  /* Existing Styles */
+
+/* Additional Styles for Larger Border */
+  .inner-border {
+    width: auto; /* Adjust the width as needed */
+    height: 120px; /* Adjust the height as needed */
+    margin-right: 5px;
+    margin-bottom: 15px;
+    font-size: 0.78em;
+  }
 
+  .inner-border.large-border {
+    width: auto; /* Adjust the width as needed */
+    height: 120px; /* Adjust the height as needed */
+    margin-right: 5px;
+    margin-bottom: 15px;
+    margin-left: 0px;
+    font-size: 0.78em;
+  }
+  .button {
+    width: 28px; /* Adjust the width as needed for mobile */
+    height: 28px; /* Adjust the height as needed for mobile */
+    padding: 1px; /* Adjust the padding as needed for mobile */
+  }
+
+}
 
+/* end of styles for newly added hero section before initial round */
 
-/* form */
diff --git a/assets/css/test.html b/assets/css/test.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Countdown Timer</title>
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      text-align: center;
+      background-color: #f4f4f4;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+
+    #countdown {
+      font-size: 2em;
+      color: #333;
+    }
+  </style>
+</head>
+<body>
+
+<div id="countdown"></div>
+
+<script>
+  // Set the date we're counting down to
+  const countDownDate = new Date("Jan 31, 2024 00:00:00").getTime();
+
+  // Update the countdown every 1 second
+  const x = setInterval(function() {
+
+    // Get the current date and time
+    const now = new Date().getTime();
+
+    // Calculate the remaining time
+    const distance = countDownDate - now;
+
+    // Calculate days, hours, minutes, and seconds
+    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+    // Display the countdown
+    document.getElementById("countdown").innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s`;
+
+    // If the countdown is over, display a message
+    if (distance < 0) {
+      clearInterval(x);
+      document.getElementById("countdown").innerHTML = "EXPIRED";
+    }
+  }, 1000);
+</script>
+
+</body>
+</html>
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -294,5 +294,49 @@
    * Initiate Pure Counter 
    */
   new PureCounter();
+
+
+  //countDown
+
+  const countDownDate = new Date("Jan 31, 2024 00:00:00").getTime();
+
+  // Update the countdown every 1 second
+  const x = setInterval(function() {
+
+    // Get the current date and time
+    const now = new Date().getTime();
+
+    // Calculate the remaining time
+    const distance = countDownDate - now;
+
+    // Calculate days, hours, minutes, and seconds
+    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+    // Specify the multiplier for spaces
+    const spaceMultiplier = 7;
+
+    // Generate the non-breaking spaces based on the multiplier
+    const spaces = "&nbsp;".repeat(spaceMultiplier);
+
+    // Set the countdown with increased spaces
+    document.getElementById("countdown").innerHTML = `<span style="font-size: 0.8em;"><strong>${days}</strong></span>&nbsp;<span style="font-size: 0.6em;">DAYS</span>${spaces}
+                                                      <span style="font-size: 0.8em;"><strong>${hours}</strong></span>&nbsp;<span style="font-size: 0.6em;">HOURS</span>${spaces}
+                                                      <span style="font-size: 0.8em;"><strong>${minutes}</strong></span>&nbsp;<span style="font-size: 0.6em;">MINUTES</span>${spaces}
+                                                      <span style="font-size: 0.8em;"><strong>${seconds}</strong></span>&nbsp;<span style="font-size: 0.6em;">SECONDS</span>`;
+
+    // If the countdown is over, display a message
+    if (distance < 0) {
+      clearInterval(x);
+      document.getElementById("countdown").innerHTML = "EXPIRED";
+    }
+  }, 1000);
+
+  function handleButtonClick(buttonName) {
+    // Handle button click event (customize as needed)
+    alert(`You clicked ${buttonName}`);
+  }
 
 })()