Skip to content

Commit

Permalink
Live Hackathoning website update (#326)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@jenseni-git
jenseni-git authored Aug 17, 2024
1 parent 1c2190e commit 3ccc135
Showing 1 changed file with 205 additions and 187 deletions.
392 changes: 205 additions & 187 deletions static/hackathon_countdown.html
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 3ccc135

Please sign in to comment.