index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>System Information Dashboard</title>
    <script>
        function fetchSystemInfo() {
            fetch('/system_info')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('memory_total').textContent = (data.memory.total / (1024 ** 3)).toFixed(2) + ' GB';
                    document.getElementById('memory_used').textContent = (data.memory.used / (1024 ** 3)).toFixed(2) + ' GB';
                    document.getElementById('memory_available').textContent = (data.memory.available / (1024 ** 3)).toFixed(2) + ' GB';
                    document.getElementById('memory_percent').textContent = data.memory.percent + '%';

                    document.getElementById('disk_total').textContent = (data.disk.total / (1024 ** 3)).toFixed(2) + ' GB';
                    document.getElementById('disk_used').textContent = (data.disk.used / (1024 ** 3)).toFixed(2) + ' GB';
                    document.getElementById('disk_free').textContent = (data.disk.free / (1024 ** 3)).toFixed(2) + ' GB';
                    document.getElementById('disk_percent').textContent = data.disk.percent + '%';
                });
        }

        setInterval(fetchSystemInfo, 5000); // Fetch every 5 seconds
    </script>
</head>
<body onload="fetchSystemInfo()">
    <h1>System Information Dashboard</h1>
    <h2>Memory</h2>
    <p>Total: <span id="memory_total"></span></p>
    <p>Used: <span id="memory_used"></span></p>
    <p>Available: <span id="memory_available"></span></p>
    <p>Usage: <span id="memory_percent"></span></p>

    <h2>Disk</h2>
    <p>Total: <span id="disk_total"></span></p>
    <p>Used: <span id="disk_used"></span></p>
    <p>Free: <span id="disk_free"></span></p>
    <p>Usage: <span id="disk_percent"></span></p>
</body>
</html>