under construction

2022-11-04 20:14:26 -07:00
parent 40ea5014dd
commit ec22cebeac
4 changed files with 405 additions and 1 deletions
--- a/tmp/index.html
+++ b/tmp/index.html
@ -0,0 +1,99 @@
+<!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&trade;</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>