From 883534c5338f08c622a9311d87fcf0aa0487c730 Mon Sep 17 00:00:00 2001
From: Isaac Beh <isaacwbeh@gmail.com>
Date: Tue, 6 Aug 2024 20:19:14 +1000
Subject: [PATCH] Made a hackathon countdown

---
 static/hackathon_countdown.html | 191 ++++++++++++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 static/hackathon_countdown.html
diff --git a/static/hackathon_countdown.html b/static/hackathon_countdown.html
new file mode 100644
index 0000000..c98b6a8
--- /dev/null
+++ b/static/hackathon_countdown.html
@@ -0,0 +1,191 @@
+<html>
+<head>
+    <style>
+        :root {
+          	--bg-color: #fcfcfc;
+          	--border: solid #6f6f6f 2px;
+        	--border-rad: 0.4em;
+        	--padding: 0.4em;
+        }
+
+        #background {
+        	--scale: 1.3;
+        	border: solid black 0;
+        	z-index: -1;
+        	position: fixed;
+        	width: 100%;
+        	height: 100%;
+        	margin: auto;
+        	top: 0;
+        	left: 0;
+        	transform: scale(var(--scale));
+        }
+
+        #options-button {
+        	border-radius: var(--border-rad);
+        	aspect-ratio: 1/1;
+        	border: var(--border);
+        	background: var(--bg-color);
+        }
+
+        #options-button svg {
+            width: 2em;
+            height: 2em;
+            vertical-align: -0.35em;
+        }
+
+        #options, #announcements {
+        	margin-top: var(--padding);
+        	padding: var(--padding);
+        	width: max(25vw, min(300px, 95vw));
+	
+        	background: var(--bg-color);
+        	border: var(--border);
+        	border-radius: var(--border-rad);
+	    }
+
+        #options {
+        	display: none; /* Toggled with JS */
+        	grid-template-columns: 1fr 4fr;
+        	grid-gap: var(--padding) var(--padding);
+        }
+
+        #options input[type="checkbox"] {
+            justify-self: start;
+            margin: 0;
+        }
+
+        #announcements {
+        	display: none; /* Toggled with JS */
+        }
+
+        #announcements h1 {
+            margin: 0 0 var(--padding) 0;
+            font-size: 2em;
+        	font-weight: bold;
+        	font-family: Lucida Console, monospace;
+        }
+
+        #announcements div {
+            border: none;
+            height: fit-content;
+            width: 100%;
+            resize: none;
+            overflow: hidden;
+        	font-family: Lucida Console, monospace;
+            font-size: 1.2em;
+        }
+
+        #timer {
+        	--size: 8em;
+        	position: fixed;
+        	font-family: Lucida Console, monospace;
+        	font-size: var(--size);
+        	font-weight: bold;
+        	text-shadow:
+            3px 3px 0 #FFF,
+            -3px 3px 0 #FFF,
+            -3px -3px 0 #FFF,
+            3px -3px 0 #FFF;
+        	top: 50%;
+        	left: 50%;
+        	/* bring your own prefixes */
+        	transform: translate(-50%, -50%);
+        }
+    </style>
+    <title>Hackathon Countdown</title>
+    <meta name="robots" content="noindex">
+</head>
+<body>
+	<iframe id="background"
+			  frameBorder="0"
+			  allowFullScreen
+			  allow="autoplay"
+			  src="https://youtube.com/embed/dtiU_Ut9xlY?playlist=dtiU_Ut9xlY&autoplay=1&controls=0&showinfo=0&autohide=1&mute=1&loop=1">
+	</iframe>
+	<button id="options-button" onclick="toggle_options()"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg></button>
+	<form id="options">
+		<label for="video-link">Video Link: </label><input id="video-link" type="text" value="https://www.youtube.com/watch?v=dtiU_Ut9xlY">
+		<label for="scaling-size">Video Scaling: </label><input id="scaling-size" type="number" value="1.3" step="0.1">
+		<label for="timer-size">Timer Size: </label><input id="timer-size" type="text" value="8em">
+		<label for="deadline">Deadline: </label><input id="deadline" type="datetime-local" value="2024-08-18T14:30">
+		<label for="show-announcements">Announcements: </label><input id="show-announcements" type="checkbox">
+	</form>
+    <section id="announcements">
+        <h1>Announcements</h1>
+        <div contenteditable></div>
+    </section>
+	<span id="timer"></span>
+
+    <script>
+        function toggle_options() {
+          const options = document.getElementById("options");
+          if (options.style.display === "none") {
+            options.style.display = "grid";
+          } else {
+            options.style.display = "none";
+          }
+        } 
+
+        function leftpad_with_zeros(s, n) {
+            let x = "" + s;
+            while (x.length < n) {
+                x = "0" + x;
+            }
+            return x;
+        }
+
+        const scale_option = document.getElementById("scaling-size");
+        const background_video = document.getElementById("background");
+        scale_option.addEventListener("change", (event) => {
+        	background_video.style.setProperty("--scale", scale_option.value);
+        });
+
+        const size_option = document.getElementById("timer-size");
+        const timer = document.getElementById("timer");
+        size_option.addEventListener("change", (event) => {
+        	timer.style.setProperty("--size", size_option.value);
+        });
+
+        const video_link_option = document.getElementById("video-link");
+        video_link_option.addEventListener("change", (event) => {
+        	const youtube_watch = video_link_option.value.match(/\?v=[a-zA-Z0-9\-_]*/g)
+        	if (youtube_watch.length > 0) {
+        		background_video.src = "https://youtube.com/embed/" + youtube_watch[0].substring(3) + "?playlist=" + youtube_watch[0].substring(3) + "&autoplay=1&controls=0&showinfo=0&autohide=1&mute=1&loop=1";
+        	} else {
+        		alert("Invalid youtube link. Make sure to copy the URL from the video in full.");
+        	}
+        });
+
+        const deadline_element = document.getElementById("deadline");
+        let deadline = new Date(deadline_element.value + "+1000");
+        let time_diff = Date.now() - deadline.getTime();
+        let text = "";
+        setInterval(() =>{
+        	deadline = new Date(deadline_element.value + "+1000");
+        	time_diff = deadline.getTime() - Date.now();
+            if (time_diff <= 0) {
+                text = "00:00:00";
+            } else {
+                let hours = Math.floor(time_diff / (1000 * 60 * 60));
+                let minutes = Math.floor(time_diff / (1000 * 60)) % 60;
+                let seconds = Math.floor(time_diff / 1000) % 60;
+                text = "" + leftpad_with_zeros(hours, 2) + ":" + leftpad_with_zeros(minutes, 2) + ":" + leftpad_with_zeros(seconds, 2);
+            }
+        	timer.textContent = text;
+        }, 1000);
+
+        const announcements_option = document.getElementById("show-announcements");
+        const announcements_element = document.getElementById("announcements");
+        announcements_option.addEventListener("change", (event) => {
+          if (announcements_option.checked) {
+            announcements_element.style.display = "block";
+          } else {
+            announcements_element.style.display = "none";
+          }
+            
+        });
+        
+    </script>
+</body>
+</html>
