Add html/home_page.html

html/home_page.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Porygon</title>
+
+    <style>
+        .server {
+            margin: 10px 0;
+        }
+
+        .status {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+
+        .online {
+            background-color: lightgreen;
+        }
+
+        .offline {
+            background-color: black;
+        }
+        
+    body {
+    background: url("background.png") center / cover no-repeat fixed;
+    }
+    
+    </style>
+</head>
+
+
+<body>
+
+<font size=5><p>Hypervisors</p></font>
+
+<div class="server">
+    <span id="hypervisor-status" class="status"></span>
+    <a href="hypervisor/">hypervisor</a>
+</div>
+
+<font size=5><p>On-Prem</p></font>
+
+<div class="server">
+    <span id="realserver-status" class="status"></span>
+    <a href="realserver/">realserver</a>
+</div>
+
+<font size=5><p>Cloud</p></font>
+
+<div class="server">
+    <span id="vps-status" class="status"></span>
+    <a href="vps/">vps</a>
+</div>
+
+<script>
+fetch("status.json")
+    .then(response => response.json())
+    .then(status => {
+        for (const server in status) {
+            const element = document.getElementById(server + "-status");
+            if (!element) continue;
+            if (status[server]) {
+                element.classList.add("online");
+            } else {
+                element.classList.add("offline");
+            }
+        }
+    });
+</script>
+
+</body>
+</html>