From 25076c2acb53b0b0f3eca4c51067f2af2760390b Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tobiastime.xyz>
Date: Sun, 11 Oct 2026 00:15:30 +0000
Subject: [PATCH] Upload files to "templates"

---
 templates/home_page.html       | 75 ++++++++++++++++++++++++++++++++++
 templates/main-page-paste.html |  4 ++
 templates/metrics_page.html    | 45 ++++++++++++++++++++
 templates/root.ini             |  2 +
 templates/user.ini             |  8 ++++
 5 files changed, 134 insertions(+)
 create mode 100644 templates/home_page.html
 create mode 100644 templates/main-page-paste.html
 create mode 100644 templates/metrics_page.html
 create mode 100644 templates/root.ini
 create mode 100644 templates/user.ini

diff --git a/templates/home_page.html b/templates/home_page.html
new file mode 100644
index 0000000..1584c87
--- /dev/null
+++ b/templates/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>
diff --git a/templates/main-page-paste.html b/templates/main-page-paste.html
new file mode 100644
index 0000000..7def9c3
--- /dev/null
+++ b/templates/main-page-paste.html
@@ -0,0 +1,4 @@
+<div class="server">
+    <span id="$HOSTNAME-status" class="status"></span>
+    <a href="http://192.168.0.70/files/temp/$HOSTNAME/">$HOSTNAME</a>
+</div>
diff --git a/templates/metrics_page.html b/templates/metrics_page.html
new file mode 100644
index 0000000..406d571
--- /dev/null
+++ b/templates/metrics_page.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+        background-color: black;
+        color: white;
+    }
+</style>
+</head>
+<body>
+
+<title>Server Stats</title>
+<h1 id="hostname">Loading...</h1>
+
+<p>Uptime: <span id="uptime">-</span></p>
+<p>CPU usage: <span id="cpu">-</span>%</p>
+<p>CPU count: <span id="cpu-count">-</span></p>
+<p>RAM usage: <span id="ram">-</span>%</p>
+<p>RAM total: <span id="ram-total">-</span> GB</p>
+<p>Swap usage: <span id="swap">-</span>%</p>
+<p>Swap total: <span id="swap-total">-</span> GB</p>
+<p>Disk total: <span id="disk-total">-</span> GB</p>
+<p>Disk usage: <span id="disk">-</span>%</p>
+<p>Last updated: <span id="timestamp">-</span></p>
+
+<script>
+fetch("stats.json")
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById("hostname").textContent = data.hostname;
+        document.getElementById("uptime").textContent = data.uptime;
+        document.getElementById("cpu").textContent = data.cpu_usage;
+        document.getElementById("cpu-count").textContent = data.cpu_count;
+        document.getElementById("ram").textContent = data.ram_usage;
+        document.getElementById("ram-total").textContent = data.ram_total_gb;
+        document.getElementById("swap").textContent = data.swap_usage;
+        document.getElementById("swap-total").textContent = data.swap_total_gb;
+        document.getElementById("disk-total").textContent = data.disk_total_gb;
+        document.getElementById("disk").textContent = data.disk_usage;
+        document.getElementById("timestamp").textContent = data.timestamp;
+    });
+</script>
+</body>
+</html>
diff --git a/templates/root.ini b/templates/root.ini
new file mode 100644
index 0000000..128cee6
--- /dev/null
+++ b/templates/root.ini
@@ -0,0 +1,2 @@
+[server]
+server ansible_host="$IP"
diff --git a/templates/user.ini b/templates/user.ini
new file mode 100644
index 0000000..2b85808
--- /dev/null
+++ b/templates/user.ini
@@ -0,0 +1,8 @@
+[servers]
+server ansible_host="$IP"
+
+[servers:vars]
+ansible_user="$USER"
+ansible_become=true
+ansible_become_method=sudo
+ansible_become_user=root