82 lines
1.9 KiB
HTML
82 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>The day that changed the world.</title>
|
|
<style>
|
|
body {
|
|
margin-top: 20px !important;
|
|
}
|
|
|
|
body, html {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
margin: 0;
|
|
|
|
main, div {
|
|
max-width: fit-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div id='c'>Soon</div>
|
|
<div id='l'>Earth</div>
|
|
<!-- <div id='d'>Unknown, Return later</div> -->
|
|
</main>
|
|
<script>
|
|
function go() {
|
|
const reckoning = Date.parse("2025-08-17T00:00:00.000Z");
|
|
const data = [
|
|
[ "Seattle, Washington, United States of America" ],
|
|
[ "Berlin, Germany" ],
|
|
[ "Paris, France" ],
|
|
[ "Geneva, Switzerland" ],
|
|
[ "District of Columbia, United States of America" ]
|
|
];
|
|
|
|
const countdown = document.getElementById('c');
|
|
const location = document.getElementById('l');
|
|
|
|
function updateCountdown() {
|
|
let p = "";
|
|
let o = reckoning - Date.now();
|
|
|
|
let years, months, days, hours, minutes, seconds;
|
|
o-= (years = Math.floor(o / 31557600000)) * 31557600000;
|
|
o-= (months = Math.floor(o / 2629800000)) * 2629800000;
|
|
o-= (days = Math.floor(o / 86400000)) * 86400000;
|
|
o-= (hours = Math.floor(o / 3600000)) * 3600000;
|
|
o-= (minutes = Math.floor(o / 60000)) * 60000;
|
|
o-= (seconds = Math.floor(o / 1000)) * 1000;
|
|
|
|
if (years) p += `${years}Y `;
|
|
if (months) p += `${months}M `;
|
|
if (days) p += `${days}D `;
|
|
if (hours) p += `${hours}h `;
|
|
if (minutes) p += `${minutes}m `;
|
|
if (seconds) p += `${seconds}s `;
|
|
|
|
countdown.textContent = p.substring(0, p.length - 1);
|
|
}
|
|
|
|
function updateLocation() {
|
|
let area = data[Math.floor(Math.random() * data.length)];
|
|
|
|
location.textContent = area[0];
|
|
}
|
|
|
|
updateLocation();
|
|
updateCountdown();
|
|
|
|
setInterval(updateCountdown, 1000);
|
|
}
|
|
|
|
go();
|
|
</script>
|
|
</body>
|
|
</html>
|