56 lines
1.5 KiB
HTML
56 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>System Monitor (No Heading)</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
color: white;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
.stat {
|
|
font-size: 1.2em;
|
|
margin-bottom: 10px;
|
|
}
|
|
.descriptor {
|
|
font-weight: 300; /* Light */
|
|
}
|
|
.value {
|
|
font-weight: 700; /* Bold */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stat">
|
|
<span class="descriptor">CPU Usage:</span>
|
|
<span class="value" id="cpu-usage"></span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="descriptor">Memory Usage:</span>
|
|
<span class="value" id="memory-usage"></span>
|
|
</div>
|
|
|
|
<script>
|
|
function fetchStats() {
|
|
fetch('http://localhost:8000/stats')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('cpu-usage').textContent = `${data.cpu_percent}%`;
|
|
document.getElementById('memory-usage').textContent = `${data.memory_percent}%`;
|
|
})
|
|
.catch(error => console.error('Error fetching system stats:', error));
|
|
}
|
|
|
|
// Fetch stats every 2 seconds
|
|
setInterval(fetchStats, 2000);
|
|
|
|
// Initial fetch
|
|
fetchStats();
|
|
</script>
|
|
</body>
|
|
</html>
|