Téléverser les fichiers vers "/"
This commit is contained in:
61
index.html
Normal file
61
index.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user