2023-12-18 09:45:45 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<!--
|
2024-07-08 08:45:36 +00:00
|
|
|
(c) Sangelo 2024
|
|
|
|
|
v1.0.2
|
|
|
|
|
----------------
|
2023-12-18 09:45:45 +00:00
|
|
|
Simple countdown webpage that can be used as a startpage
|
|
|
|
|
You can feed the date the counter should be counting down to in the URL like this:
|
|
|
|
|
http://<countdown>/?date=YYYY-MM-DDTHH:MM:SS
|
2024-07-08 08:45:36 +00:00
|
|
|
or you can display the current time using ?time parameter like this:
|
|
|
|
|
http://<countdown>/?time
|
2023-12-18 09:45:45 +00:00
|
|
|
-->
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Countdown Timer</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
background: radial-gradient(circle, #414144, #202123);
|
|
|
|
|
background-size: 100% 500%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family: monospace, monospace;
|
|
|
|
|
color: #ffffff75;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#countdown {
|
|
|
|
|
font-size: 200px;
|
|
|
|
|
margin: 0 20px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transition: opacity 0.5s;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.completed {
|
|
|
|
|
color: #fff; /* Full opacity when countdown is completed */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="countdown">000:00:00:00</div>
|
|
|
|
|
|
|
|
|
|
<script async>
|
|
|
|
|
function formatWithLeadingZeros(number, length) {
|
|
|
|
|
return number.toLocaleString('en-US', {minimumIntegerDigits: length, useGrouping: false});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const countdownElement = document.getElementById("countdown");
|
|
|
|
|
const countdownDate = getDateFromUrl();
|
2024-07-08 08:45:36 +00:00
|
|
|
const showCurrentTime = getTimeFromUrl();
|
2023-12-18 09:45:45 +00:00
|
|
|
|
|
|
|
|
function updateCountdown() {
|
|
|
|
|
const now = new Date().getTime();
|
|
|
|
|
const distance = countdownDate - now;
|
|
|
|
|
|
|
|
|
|
if (distance <= 0) {
|
|
|
|
|
countdownElement.innerHTML = "🥳";
|
|
|
|
|
countdownElement.classList.add("completed");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
|
|
|
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
|
|
|
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
|
|
|
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
|
|
|
|
|
|
const formattedDays = formatWithLeadingZeros(days, 3);
|
|
|
|
|
const formattedHours = formatWithLeadingZeros(hours, 2);
|
|
|
|
|
const formattedMinutes = formatWithLeadingZeros(minutes, 2);
|
|
|
|
|
const formattedSeconds = formatWithLeadingZeros(seconds, 2);
|
|
|
|
|
|
|
|
|
|
countdownElement.innerHTML = `${formattedDays}:${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
|
|
|
|
|
requestAnimationFrame(updateCountdown);
|
|
|
|
|
}
|
|
|
|
|
|
2024-07-08 08:45:36 +00:00
|
|
|
function updateTime() {
|
|
|
|
|
const now = new Date();
|
|
|
|
|
const hours = formatWithLeadingZeros(now.getHours(), 2);
|
|
|
|
|
const minutes = formatWithLeadingZeros(now.getMinutes(), 2);
|
|
|
|
|
const seconds = formatWithLeadingZeros(now.getSeconds(), 2);
|
|
|
|
|
|
|
|
|
|
countdownElement.innerHTML = `${hours}:${minutes}:${seconds}`;
|
|
|
|
|
requestAnimationFrame(updateTime);
|
|
|
|
|
}
|
|
|
|
|
|
2023-12-18 09:45:45 +00:00
|
|
|
function getDateFromUrl() {
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
const dateParam = urlParams.get('date');
|
|
|
|
|
if (dateParam) {
|
|
|
|
|
const timestamp = Date.parse(dateParam);
|
|
|
|
|
if (!isNaN(timestamp)) {
|
|
|
|
|
return timestamp;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return new Date("1970-01-01T00:00:00").getTime();
|
|
|
|
|
}
|
|
|
|
|
|
2024-07-08 08:45:36 +00:00
|
|
|
function getTimeFromUrl() {
|
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
|
return urlParams.has('time');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (showCurrentTime) {
|
|
|
|
|
requestAnimationFrame(updateTime);
|
|
|
|
|
} else {
|
|
|
|
|
requestAnimationFrame(updateCountdown);
|
|
|
|
|
}
|
2023-12-18 09:45:45 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
