From 3ccc13551d0437949762295fb1324143245dab12 Mon Sep 17 00:00:00 2001
From: Iain Jensen <jenseniain@gmail.com>
Date: Sat, 17 Aug 2024 13:54:01 +1000
Subject: [PATCH] Live Hackathoning website update (#326)

* Re-formats indentation. No changes.

* iframe with youtube is disabled, preventing accidental clicking.

* re-completes formatting (no change)

* Adds hourly gong

* increases refresh rate of timer
---
 static/hackathon_countdown.html | 392 +++++++++++++++++---------------
 1 file changed, 205 insertions(+), 187 deletions(-)
diff --git a/static/hackathon_countdown.html b/static/hackathon_countdown.html
index c98b6a8..8f71e94 100644
--- a/static/hackathon_countdown.html
+++ b/static/hackathon_countdown.html
@@ -1,191 +1,209 @@
 <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;
+    <head>
+        <style>
+            :root {
+                --bg-color: #fcfcfc;
+                --border: solid #6f6f6f 2px;
+                --border-rad: 0.4em;
+                --padding: 0.4em;
             }
-            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);
+
+            #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%);
             }
-        	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";
-          }
+        </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" disabled>
+        </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">
             
-        });
-        
-    </script>
-</body>
-</html>
+            <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);
+
+                    if (hours <= 24 && minutes == 0 && seconds == 0) {
+                        let audio = new Audio('https://vetinari.net/bell.mp3');
+                        audio.play();
+                    }
+                }
+                timer.textContent = text;
+            }, 100);
+
+            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>
\ No newline at end of file
