Initial status homepage

2023-02-25 03:37:45 +01:00 · 2023-02-25 03:37:45 +01:00 · c9f0a03c12
commit c9f0a03c12
1 changed files with 100 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Giller</title>
+    <style>
+        body {
+            background-color: #1a1a1a;
+            color: #aaa;
+            font-family: "Fira Code", "Fira Mono", "Roboto Mono", "Lucida Console", "Courier New", monospace;
+            font-size: 16px;
+            line-height: 1.5;
+            margin: 0;
+            padding: 0;
+        }
+
+        .info {
+            color: #fff;
+        }
+
+        #sleep {
+            margin-top: 2em;
+        }
+
+        #container {
+            display: flex;
+            height: 100vh;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #vertical-center {
+            display: flex;
+            flex-direction: column;
+            width: 100vw;
+        }
+
+        #vertical-center,
+        #vertical-center>* {
+            align-items: center;
+            text-align: center;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="container">
+        <div id="vertical-center">
+            Currently:
+            <span id="status" class="info">...</span>
+
+            <div id="sleep"></div>
+
+        </div>
+    </div>
+
+    <script>
+        const url = "https://giller.dev/g/my-status";
+
+        function setText(id, text) {
+            document.getElementById(id).innerHTML = text;
+        }
+
+        function formatRemainingTime(totalSeconds) {
+            if (totalSeconds <= 0) {
+                return "should wake up anytime now"
+            }
+
+            const hours = Math.floor(totalSeconds / 3600);
+            if (hours > 24) {
+                return "over a day";
+            } else if (hours > 0) {
+                return hours + " hours remaining";
+            }
+
+            const minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
+            if (minutes > 0) {
+                return minutes + " minutes remaining";
+            }
+
+            const seconds = totalSeconds - (hours * 3600) - (minutes * 60);
+            return seconds + " seconds remaining";
+        }
+
+        fetch(url)
+            .then(response => response.json())
+            .then(data => {
+                setText("status", data.status);
+
+                if (data.status.toLowerCase() === "sleeping") {
+                    const remainingText = formatRemainingTime(data.time_until_wake);
+                    setText("sleep", "Time until wake up:<br><span class='info'>" + remainingText + "</span>");
+                }
+            });
+    </script>
+</body>
+
+</html>