66 lines
1.7 KiB
HTML
66 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Count down to some event.">
|
|
<title>????</title>
|
|
<style>
|
|
html {
|
|
text-align: center;
|
|
}
|
|
body {
|
|
color: #121421;
|
|
background-color: #e2e4e8;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-55%, -55%);
|
|
font-size: 200%;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
color: #e2e4e8;
|
|
background-color: #121421;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<noscript>This page requires JavaScript to be enabled.</noscript>
|
|
<h1 id="clock">0d 00:00:00</h1>
|
|
<h2 id="event">Until: ????</h2>
|
|
|
|
<script>
|
|
// Config
|
|
let pageTitle = "TITLE";
|
|
let eventName = "NAME";
|
|
let eventTime = "1970-01-01T00:00:00.000+00:00";
|
|
// End Config
|
|
|
|
document.title = pageTitle;
|
|
document.getElementById("event").innerHTML = "Until: " + eventName;
|
|
|
|
let countdownDate = new Date(eventTime).getTime();
|
|
let x = setInterval(function() {
|
|
let now = new Date().getTime();
|
|
distance = countdownDate - now;
|
|
|
|
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
clock = document.getElementById("clock");
|
|
clock.innerHTML = days + "d " + ("00" + hours).slice(-2) + ":" +
|
|
("00" + minutes).slice(-2) + ":" + ("00" + seconds).slice(-2);
|
|
|
|
if (distance < 0) {
|
|
clearInterval(x);
|
|
clock.innerHTML = "!!!HYPE!!!";
|
|
document.getElementById("event").innerHTML = "It's " + eventName + " time!";
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
</body>
|