Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made a hackathon countdown #325

Merged
merged 1 commit into from
Aug 8, 2024
Merged

Made a hackathon countdown #325

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 191 additions & 0 deletions static/hackathon_countdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading