<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Status Serveur</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <h1>Status Serveur</h1>

    <div class="card">
        CPU: <span id="cpu">--</span>%
    </div>

    <div class="card">
        RAM: <span id="ramUsed">--</span> / <span id="ramTotal">--</span> MiB
        <div class="file-type"><span id="ramPercent">--</span>%</div>
    </div>

    <div class="card">
        SWAP: <span id="swapUsed">--</span> / <span id="swapTotal">--</span> MiB
        <div class="file-type"><span id="swapPercent">--</span>%</div>
    </div>

    <div class="card">
        <a href="index.php">⟵ Back</a>
    </div>
</div>

<footer>
    Mise à jour toutes les secondes
</footer>

<script>
function updateStats() {
    fetch("stats.php")
    .then(r => r.json())
    .then(data => {
        document.getElementById("cpu").textContent = data.cpu;
        document.getElementById("ramUsed").textContent = data.ram.used;
        document.getElementById("ramTotal").textContent = data.ram.total;
        document.getElementById("ramPercent").textContent = data.ram.percent;
        document.getElementById("swapUsed").textContent = data.swap.used;
        document.getElementById("swapTotal").textContent = data.swap.total;
        document.getElementById("swapPercent").textContent = data.swap.percent;
    });
}

setInterval(updateStats, 1000);
updateStats(); // first call right away
</script>

</body>
</html>
