99 lines
2.8 KiB
HTML
99 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Under Construction</title>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
background-color: #f2f2f2;
|
|
padding: 1rem;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
justify-content: center;
|
|
align-content: center;
|
|
display: grid;
|
|
}
|
|
|
|
#hero {
|
|
padding: 4rem;
|
|
background-color: white;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
#hero img {
|
|
width: 16rem;
|
|
}
|
|
|
|
p {
|
|
font-family: sans-serif;
|
|
margin-bottom: 2rem;
|
|
margin-top: 2rem;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.0.4/luxon.min.js" integrity="sha512-XdACFfCJeqqfVU8mvvXReyFR130qjFvfv/PZOFGwVyBz0HC+57fNkSacMPF2Dyek5jqi4D7ykFrx/T7N6F2hwQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<p style="font-size:2.5rem;color:#505050">Coming Soon™</p>
|
|
<div id="hero">
|
|
<img src="/crane.svg">
|
|
</div>
|
|
<p>
|
|
Under Construction for <br />
|
|
<span id="counter" style="margin-top:0.5rem"></span>
|
|
</p>
|
|
</main>
|
|
</body>
|
|
|
|
<script>
|
|
function u(v, unit) {
|
|
if (v === 1) {
|
|
return `${v} ${unit}`;
|
|
}
|
|
else {
|
|
return `${v} ${unit}s`;
|
|
}
|
|
}
|
|
|
|
function f(n) {
|
|
let s = n.toString();
|
|
if (s.length == 1) {
|
|
return '0' + s;
|
|
}
|
|
return s;
|
|
}
|
|
|
|
const start = luxon.DateTime.fromSeconds(1634529923);
|
|
function setDuration() {
|
|
var diff = luxon.DateTime.now().diff(start);
|
|
const years = Math.floor(diff.as('years'));
|
|
diff = diff.minus(luxon.Duration.fromObject({years}));
|
|
const months = Math.floor(diff.as('months'));
|
|
diff = diff.minus(luxon.Duration.fromObject({months}));
|
|
const days = Math.floor(diff.as('days'));
|
|
diff = diff.minus(luxon.Duration.fromObject({days}));
|
|
const hours = Math.floor(diff.as('hours'))
|
|
diff = diff.minus(luxon.Duration.fromObject({hours}));
|
|
const minutes = Math.floor(diff.as('minutes'));
|
|
diff = diff.minus(luxon.Duration.fromObject({minutes}));
|
|
const seconds = Math.floor(diff.as('seconds'));
|
|
diff = diff.minus(luxon.Duration.fromObject({seconds}));
|
|
const millis = diff.as('milliseconds');
|
|
|
|
const timeString = `${u(years, "year")}, ${u(months, "month")}, ${u(days, "day")}, ${f(hours)}:${f(minutes)}:${f(seconds)}.${Math.floor(millis / 100)}`;
|
|
document.getElementById('counter').innerHTML = timeString;
|
|
|
|
window.setTimeout(setDuration, 10);
|
|
}
|
|
setDuration();
|
|
|
|
</script>
|
|
|
|
</html> |