reverting AI look since it's horrible
This commit is contained in:
lin committed
1 parent
4eba40832b
commit
c297d84ec4
2 files changed
+11
-364
No files matched your search
+11
-347
@@ -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>
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user