From c297d84ec407307b1b157856e9969fb86a6996f0 Mon Sep 17 00:00:00 2001
From: Dottere <balogh.t.1333@gmail.com>
Date: Tue, 6 Oct 2026 17:59:29 +0200
Subject: [PATCH] reverting AI look since it's horrible

---
 web/index.html          | 358 ++--------------------------------------
 web/original_index.html |  17 --
 2 files changed, 11 insertions(+), 364 deletions(-)
 delete mode 100644 web/original_index.html

diff --git a/web/index.html b/web/index.html
index b1af0c0..17fabec 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,353 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>System Monitor Dashboard</title>
-
-    <!-- Load Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-
-    <!-- Load Phosphor Icons for sleek iconography -->
-    <script src="https://unpkg.com/@phosphor-icons/web"></script>
-
-    <!-- Load Google Fonts (Inter) -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
-    <!-- Custom Styles for animations and glassmorphism fine-tuning -->
-    <style>
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: #0f172a;
-            background-image:
-                radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
-                radial-gradient(at 50% 0%, hsla(225,39%,30%,0.2) 0, transparent 50%),
-                radial-gradient(at 100% 0%, hsla(339,49%,30%,0.2) 0, transparent 50%);
-            background-attachment: fixed;
-            color: #e2e8f0;
-        }
-
-        .glass-card {
-            background: rgba(30, 41, 59, 0.4);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid rgba(255, 255, 255, 0.08);
-            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-        }
-
-        /* Smooth progress bar transitions */
-        .progress-bar-fill {
-            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-    </style>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+	<script src="js/script.js"></script>
 </head>
-<body class="min-h-screen flex flex-col items-center justify-center p-4 sm:p-8 relative overflow-x-hidden">
-
-    <!-- Decorative background blobs for glassmorphism contrast -->
-    <div class="absolute top-[-10%] left-[-10%] w-96 h-96 bg-indigo-600/20 rounded-full blur-[100px] z-0 pointer-events-none"></div>
-    <div class="absolute bottom-[-10%] right-[-10%] w-96 h-96 bg-emerald-600/10 rounded-full blur-[100px] z-0 pointer-events-none"></div>
-
-    <main class="w-full max-w-5xl z-10 flex flex-col gap-8">
-
-        <!-- Header -->
-        <header class="flex items-center justify-between mb-2">
-            <div>
-                <h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white flex items-center gap-3">
-                    <i class="ph-fill ph-hard-drives text-indigo-400"></i>
-                    System Monitor
-                </h1>
-                <p class="text-slate-400 mt-1 text-sm md:text-base">Real-time server performance metrics</p>
-            </div>
-            <div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium shadow-[0_0_15px_rgba(16,185,129,0.1)]">
-                <span class="relative flex h-2.5 w-2.5">
-                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                  <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
-                </span>
-                Live Data
-            </div>
-        </header>
-
-        <!-- Dashboard Grid -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-
-            <!-- Uptime Card -->
-            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300">
-                <div class="flex items-center gap-3 mb-4">
-                    <div class="p-2 bg-indigo-500/20 rounded-lg text-indigo-400">
-                        <i class="ph ph-clock text-xl"></i>
-                    </div>
-                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">System Uptime</h2>
-                </div>
-                <div class="mt-auto">
-                    <p id="uptime-val" class="text-2xl lg:text-3xl font-bold text-white tracking-tight">Waiting...</p>
-                </div>
-            </div>
-
-            <!-- CPU Load Card -->
-            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300">
-                <div class="flex items-center gap-3 mb-4">
-                    <div class="p-2 bg-amber-500/20 rounded-lg text-amber-400">
-                        <i class="ph ph-activity text-xl"></i>
-                    </div>
-                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">CPU Load (1, 5, 15m)</h2>
-                </div>
-                <div class="mt-auto flex items-baseline gap-2">
-                    <p id="cpu-load-val" class="text-2xl lg:text-3xl font-bold text-white tracking-tight">-- -- --</p>
-                </div>
-            </div>
-
-            <!-- Temperature Card -->
-            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300">
-                <div class="flex items-center gap-3 mb-4">
-                    <div class="p-2 bg-rose-500/20 rounded-lg text-rose-400">
-                        <i class="ph ph-thermometer text-xl"></i>
-                    </div>
-                    <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">CPU Temperature</h2>
-                </div>
-                <div class="mt-auto">
-                    <p id="temperature-val" class="text-2xl lg:text-3xl font-bold text-white tracking-tight">-- C°</p>
-                </div>
-            </div>
-
-            <!-- CPU Usage Card (Span 2 cols on tablet, 1 on desktop if desired, but we'll let it flow naturally or span full on smaller) -->
-            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300 lg:col-span-2">
-                <div class="flex items-center justify-between mb-4">
-                    <div class="flex items-center gap-3">
-                        <div class="p-2 bg-blue-500/20 rounded-lg text-blue-400">
-                            <i class="ph ph-cpu text-xl"></i>
-                        </div>
-                        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">Total CPU Usage</h2>
-                    </div>
-                    <span id="cpu-usage-val" class="text-2xl font-bold text-white">--%</span>
-                </div>
-
-                <div class="mt-auto pt-4">
-                    <div class="w-full bg-slate-700/50 rounded-full h-3 overflow-hidden border border-slate-700">
-                        <div id="cpu-usage-bar" class="progress-bar-fill bg-gradient-to-r from-blue-500 to-indigo-400 h-full rounded-full relative" style="width: 0%">
-                            <!-- Subtle highlight inside the bar -->
-                            <div class="absolute inset-0 bg-white/20 w-full h-full rounded-full blur-[2px]"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Memory Usage Card (Span 2 cols on tablet) -->
-            <div class="glass-card rounded-2xl p-6 flex flex-col hover:bg-slate-800/50 transition-colors duration-300 lg:col-span-1 md:col-span-2">
-                <div class="flex items-center justify-between mb-4">
-                    <div class="flex items-center gap-3">
-                        <div class="p-2 bg-emerald-500/20 rounded-lg text-emerald-400">
-                            <i class="ph ph-memory text-xl"></i>
-                        </div>
-                        <h2 class="text-sm font-semibold uppercase tracking-wider text-slate-400">Memory Usage</h2>
-                    </div>
-                </div>
-
-                <div class="mt-auto">
-                    <p id="memory-val" class="text-xl font-bold text-white mb-3">-- GB / -- GB</p>
-                    <div class="w-full bg-slate-700/50 rounded-full h-3 overflow-hidden border border-slate-700">
-                        <div id="memory-bar" class="progress-bar-fill bg-gradient-to-r from-emerald-500 to-teal-400 h-full rounded-full relative" style="width: 0%">
-                            <div class="absolute inset-0 bg-white/20 w-full h-full rounded-full blur-[2px]"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </main>
-
-    <script>
-        // --- State Variables ---
-        let prevCPUIdle = 0;
-        let prevCPUKernel = 0;
-        let prevCPUUser = 0;
-
-        // --- Core UI Update Logic ---
-        function updateDashboard(data) {
-            const GB = 1024 * 1024 * 1024;
-
-            let currentCPUIdle = data.processor_info.IdleTimeSinceBoot;
-            let currentCPUKernel = data.processor_info.KernelTimeSinceBoot;
-            let currentCPUUser = data.processor_info.UserTimeSinceBoot;
-
-            // Calculate metrics
-            let loadText = data.load_average.Load1.toFixed(2) + "  " + data.load_average.Load5.toFixed(2) + "  " + data.load_average.Load15.toFixed(2);
-            let cpuUsageNum = calculateCPUUsage(currentCPUIdle, currentCPUKernel, currentCPUUser);
-
-            let usedMem = (data.memory_info.SystemMemory - data.memory_info.AvailableMemory) / GB;
-            let totalMem = data.memory_info.SystemMemory / GB;
-            let memPercent = (usedMem / totalMem) * 100;
-
-            // DOM Updates
-            document.getElementById("cpu-load-val").innerText = loadText;
-
-            document.getElementById("cpu-usage-val").innerText = cpuUsageNum.toFixed(1) + "%";
-            // Clamp value between 0 and 100 for visual bar
-            document.getElementById("cpu-usage-bar").style.width = Math.min(Math.max(cpuUsageNum, 0), 100) + "%";
-            // Change color if CPU usage is high
-            const cpuBar = document.getElementById("cpu-usage-bar");
-            if(cpuUsageNum > 85) {
-                cpuBar.className = "progress-bar-fill bg-gradient-to-r from-rose-500 to-red-400 h-full rounded-full relative";
-            } else if (cpuUsageNum > 60) {
-                cpuBar.className = "progress-bar-fill bg-gradient-to-r from-amber-500 to-orange-400 h-full rounded-full relative";
-            } else {
-                cpuBar.className = "progress-bar-fill bg-gradient-to-r from-blue-500 to-indigo-400 h-full rounded-full relative";
-            }
-
-            document.getElementById("memory-val").innerText = usedMem.toFixed(2) + " GB / " + totalMem.toFixed(2) + " GB";
-            document.getElementById("memory-bar").style.width = Math.min(Math.max(memPercent, 0), 100) + "%";
-
-            document.getElementById("temperature-val").innerText = checkTemperatureAvailability(data.temperature_info);
-            document.getElementById("uptime-val").innerText = formatUptime(data.uptime_info);
-        }
-
-        // --- Helper Functions ---
-        function calculateCPUUsage(currentIdle, currentKernel, currentUser) {
-            if (prevCPUIdle === 0 || prevCPUKernel === 0 || prevCPUUser === 0) {
-                prevCPUIdle = currentIdle;
-                prevCPUKernel = currentKernel;
-                prevCPUUser = currentUser;
-                return 0;
-            }
-
-            let deltaIdle = currentIdle - prevCPUIdle;
-            let deltaKernel = currentKernel - prevCPUKernel;
-            let deltaUser = currentUser - prevCPUUser;
-
-            let deltaTotal = deltaIdle + deltaKernel + deltaUser;
-
-            // Prevent division by zero
-            if (deltaTotal === 0) return 0;
-
-            let totalCPUUsage = ((deltaKernel + deltaUser) / deltaTotal) * 100;
-
-            prevCPUIdle = currentIdle;
-            prevCPUKernel = currentKernel;
-            prevCPUUser = currentUser;
-
-            return totalCPUUsage;
-        }
-
-        function checkTemperatureAvailability(temperatureStruct) {
-            if (temperatureStruct.Supported) {
-                // Formatting to 1 decimal place for cleaner look
-                return parseFloat(temperatureStruct.Celsius).toFixed(1) + " C°";
-            } else {
-                return "Unsupported";
-            }
-        }
-
-        function formatUptime(uptimeStruct) {
-            let total = Math.round(uptimeStruct.Uptime);
-            if (total < 60) {
-                return Math.floor(total) + "s";
-            }
-            let s = total % 60;
-            let m = Math.floor(total / 60) % 60;
-
-            if (total < 3600) {
-                return m + "m " + String(s).padStart(2, '0') + "s";
-            }
-
-            let h = Math.floor(total / 3600) % 24;
-            if (total < 86400) {
-                return h + "h " + String(m).padStart(2, '0') + "m " + String(s).padStart(2, '0') + "s";
-            }
-
-            let d = Math.floor(total / 86400);
-            return  d + "d " + String(h).padStart(2, '0') + "h " + String(m).padStart(2, '0') + "m";
-        }
-
-        // --- STREAMING_CHUNK:EventSource Connection and Mock Fallback Configuration... ---
-
-        // Mock Data Generators (for preview/fallback purposes)
-        let mockUptime = 315480; // Start with a realistic uptime (e.g., a few days)
-        let mockIdle = 100000;
-        let mockKernel = 20000;
-        let mockUser = 30000;
-
-        function generateMockData() {
-            mockUptime += 1;
-
-            // Simulate typical CPU ticks
-            // Mostly idle, varying amounts of user and kernel time
-            let idleTick = Math.random() * 150 + 50;
-            let kernelTick = Math.random() * 15 + 2;
-            let userTick = Math.random() * 40 + 5;
-
-            // Sometimes spike the CPU
-            if(Math.random() > 0.9) {
-                userTick += Math.random() * 300;
-                kernelTick += Math.random() * 100;
-                idleTick = Math.random() * 10;
-            }
-
-            mockIdle += idleTick;
-            mockKernel += kernelTick;
-            mockUser += userTick;
-
-            const totalMem = 16 * 1024 * 1024 * 1024; // 16GB
-            // Fluctuating available memory
-            const availableMem = (8 + Math.sin(mockUptime / 10) * 1 + Math.random() * 0.5) * 1024 * 1024 * 1024;
-
-            return {
-                processor_info: {
-                    IdleTimeSinceBoot: mockIdle,
-                    KernelTimeSinceBoot: mockKernel,
-                    UserTimeSinceBoot: mockUser
-                },
-                load_average: {
-                    Load1: 0.15 + Math.random() * 0.5,
-                    Load5: 0.20 + Math.random() * 0.2,
-                    Load15: 0.10 + Math.random() * 0.1
-                },
-                memory_info: {
-                    SystemMemory: totalMem,
-                    AvailableMemory: availableMem
-                },
-                temperature_info: {
-                    Supported: true,
-                    Celsius: 45.0 + Math.sin(mockUptime / 5) * 5 + Math.random() * 2
-                },
-                uptime_info: {
-                    Uptime: mockUptime
-                }
-            };
-        }
-
-        // Attempt Real Connection, fallback to Mock Data
-        try {
-            const eventSource = new EventSource("/api/events");
-
-            eventSource.onmessage = function (event) {
-                try {
-                    const data = JSON.parse(event.data);
-                    updateDashboard(data);
-                } catch (e) {
-                    console.error("Error parsing event data:", e);
-                }
-            };
-
-            eventSource.onerror = function(err) {
-                console.warn("EventSource failed (expected in preview environment). Falling back to mock data.");
-                eventSource.close();
-                startMockDataLoop();
-            };
-        } catch (error) {
-            console.warn("Could not create EventSource. Falling back to mock data.");
-            startMockDataLoop();
-        }
-
-        function startMockDataLoop() {
-            // Generate initial data to populate immediately
-            updateDashboard(generateMockData());
-            // Then update every second to mimic SSE
-            setInterval(() => {
-                updateDashboard(generateMockData());
-            }, 1000);
-        }
-
-    </script>
+<body>
+<h1>Hello world!</h1>
+<p id="cpu-load">Waiting for load data...</p>
+<p id="cpu-usage">Waiting for usage data...</p>
+<p id="memory">Waiting for memory data...</p>
+<p id="temperature">Waiting for temperature data...</p>
+<p id="uptime">Waiting for uptime data...</p>
 </body>
 </html>
diff --git a/web/original_index.html b/web/original_index.html
deleted file mode 100644
index 17fabec..0000000
--- a/web/original_index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Document</title>
-	<script src="js/script.js"></script>
-</head>
-<body>
-<h1>Hello world!</h1>
-<p id="cpu-load">Waiting for load data...</p>
-<p id="cpu-usage">Waiting for usage data...</p>
-<p id="memory">Waiting for memory data...</p>
-<p id="temperature">Waiting for temperature data...</p>
-<p id="uptime">Waiting for uptime data...</p>
-</body>
-</html>