Add the countdown embed; refactoring

stogacs · Mar 5, 2024 · 1f9f735 · 1f9f735
1 parent 0b29224
commit 1f9f735
Show file tree

Hide file tree

Showing 7 changed files with 210 additions and 7 deletions.
diff --git a/hackstoga/embed/countdown/index.html b/hackstoga/embed/countdown/index.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" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Embeddable Component | Conestoga Computer Science Club</title>
+    <meta name="description" content="This page is intended to be embed in another page." />
+    <meta name="theme-color" content="#eaaded" />
+
+    <!--CSS re-used across stogacs.club -->
+    <link rel="stylesheet" href="/style/theme.css" />
+    <link rel="stylesheet" href="/style/main.css" />
+
+    <!-- Load in page specific CSS -->
+    <link rel="stylesheet" href="/style/hackstoga/countdown.css" />
+    <link rel="stylesheet" href="/style/tooltips.css" />
+
+    <!-- Load in external CSS Libraries -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+  </head>
+
+  <body>
+    <div class="screen pure-g">
+      <div class="pure-u-1-12"> </div>
+      <div class="pure-u-5-6">
+        <div class="pure-g">
+          <div class="pure-u-1-2" style="height: 100%">
+            <div class="pure-u-1-6">
+              <div id="countdownContainer">
+                <h1 id="countdown">Loading</h1>
+              </div>
+            </div>
+            <div class="pure-u-md-4-6" style="height: 45vh"> </div>
+            <div id="dimmedCountdownContainer">
+              <a href="http://hacksto.ga/submit"><h1 id="link">hacksto.ga/submit</h1></a>
+            </div>
+          </div>
+          <div class="pure-u-1-2 pure-g" style="height: 100%">
+            <div style="display: flex; justify-content: center; align-items: center; height: 100vh">
+              <img id="img" src="/media/misc/spinner.svg" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pure-u-1-12"></div>
+    </div>
+  </body>
+</html>
+
+<!-- Load in page specific scripts -->
+<script src="/scripts/utils.js"></script>
+<script src="/scripts/hackstoga/countdown.js"></script>
diff --git a/hackstoga/embedables/schedule/index.html → hackstoga/embed/schedule/index.html b/hackstoga/embedables/schedule/index.html → hackstoga/embed/schedule/index.html
diff --git a/hackstoga/index.html b/hackstoga/index.html
@@ -408,7 +408,7 @@ <h2 style="text-align: center">Teams & Projects</h2>
         <div class="pure-u-1-1 formatting-separator"></div>
         <h1 class="header">Schedule</h1>
         <iframe
-          src="./embedables/schedule"
+          src="./embed/schedule"
           style="width: 100%; height: 1000px; border: none; overflow: scroll"
         ></iframe>
         <div class="pure-u-1-1 formatting-separator"></div>

diff --git a/media/misc/spinner.svg b/media/misc/spinner.svg
diff --git a/robots.txt b/robots.txt
@@ -1,7 +1,6 @@
 User-agent: *
-# This is a hack to prevent the individual components of our logo from appearing on Google Images
-Disallow: https://stogacs.club/media/animated_logo/background.png
-Disallow: https://stogacs.club/media/animated_logo/brackets.png
-Disallow: https://stogacs.club/media/animated_logo/gold.png
-Disallow: https://stogacs.club/media/animated_logo/laptop.png
-Disallow: https://stogacs.club/media/animated_logo/scroll.png
+# Prevent individual components of our logo from appearing on Google Images
+Disallow: /media/animated_logo/
+
+# Prevent schedule, timer, etc from being indexed.
+Disallow: /hackstoga/embed/
diff --git a/scripts/hackstoga/countdown.js b/scripts/hackstoga/countdown.js
@@ -0,0 +1,42 @@
+var countDownDate = new Date('Mar 16, 2024 17:00:00').getTime();
+const countDownElement = document.getElementById('countdown');
+const img = document.getElementById('img');
+showDays = false;
+
+function getData() {
+  countDownDate = new Date(fetchConstant('hsconclusion')).getTime();
+  img.src = fetchConstant('hssubmitimg');
+
+  var now = new Date().getTime();
+  var distance = countDownDate - now;
+  var days = prependZero(Math.floor(distance / (1000 * 60 * 60 * 24)));
+  if (parseInt(days) != 0) {
+    showDays = true;
+  }
+}
+
+function timer() {
+  var now = new Date().getTime();
+  var distance = countDownDate - now;
+  var days = showDays ? prependZero(Math.floor(distance / (1000 * 60 * 60 * 24))) + ':' : '';
+  var hours = prependZero(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
+  var minutes = prependZero(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
+  var seconds = prependZero(Math.floor((distance % (1000 * 60)) / 1000));
+
+  countDownElement.innerHTML = days + hours + ':' + minutes + ':' + seconds;
+
+  if (distance < 0) {
+    clearInterval(startTimeInterval);
+    countDownElement.innerHTML = 'EXPIRED';
+  }
+}
+
+function prependZero(value) {
+  return value < 10 ? '0' + value : value;
+}
+
+// On page load
+document.addEventListener('DOMContentLoaded', async function () {
+  getData();
+  var TimeInterval = setInterval(timer, 1000);
+});
diff --git a/style/hackstoga/countdown.css b/style/hackstoga/countdown.css
@@ -0,0 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+body {
+  background-color: transparent !important;
+  background-image: url('/media/banners/resources.png');
+  background-size: cover;
+}
+
+/* @media (max-aspect-ratio: 16/9) {
+  body {
+    background-size: auto;
+  }
+} */
+
+a {
+  text-decoration: none !important;
+}
+
+#img {
+  border-radius: 1em;
+  width: 600px;
+  height: auto;
+}
+
+#countdown {
+  font-size: 116px;
+  color: white;
+  padding: 0.25em 0.5em;
+}
+
+#link {
+  font-size: 76px;
+  color: var(--garnet);
+  padding: 0.25em 0.5em;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+#dimmedCountdownContainer {
+  background-color: #00000052;
+  width: fit-content;
+  border-radius: 1em;
+}
+
+#countdownContainer {
+  background-color: #0000008a;
+  width: fit-content;
+  border-radius: 1em;
+}