62 lines
2.1 KiB
HTML
62 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Moniteur Système</title>
|
|
<style>
|
|
/* Un peu de style pour que ce soit joli */
|
|
body { font-family: sans-serif; background: #222; color: #eee; }
|
|
.container { max-width: 600px; margin: 40px auto; padding: 20px; background: #333; border-radius: 8px; }
|
|
.stat { margin-bottom: 15px; font-size: 1.5em; }
|
|
.label { display: inline-block; width: 150px; color: #aaa; }
|
|
.value { color: #fff; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Statut du Système</h1>
|
|
|
|
<div class="stat">
|
|
<span class="label">Température CPU:</span>
|
|
<span class="value" id="temp">-- °C</span>
|
|
</div>
|
|
|
|
<div class="stat">
|
|
<span class="label">Usage CPU:</span>
|
|
<span class="value" id="cpu">-- %</span>
|
|
</div>
|
|
|
|
<div class="stat">
|
|
<span class="label">Usage RAM:</span>
|
|
<span class="value" id="ram">-- %</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Ce script s'exécute dans le navigateur
|
|
|
|
async function updateData() {
|
|
try {
|
|
// 1. Appelle notre backend Python
|
|
const response = await fetch('/api/data');
|
|
const data = await response.json();
|
|
|
|
// 2. Met à jour les valeurs dans le HTML
|
|
document.getElementById('temp').innerText = data.cpu_temp.toFixed(1) + " °C";
|
|
document.getElementById('cpu').innerText = data.cpu_percent.toFixed(1) + " %";
|
|
document.getElementById('ram').innerText = data.ram_percent.toFixed(1) + " %";
|
|
|
|
} catch (error) {
|
|
console.error("Erreur de rafraîchissement:", error);
|
|
}
|
|
}
|
|
|
|
// Met à jour les données toutes les 2 secondes (2000 ms)
|
|
setInterval(updateData, 2000);
|
|
|
|
// Lance une première fois au chargement
|
|
updateData();
|
|
</script>
|
|
</body>
|
|
</html>
|