Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Office Control</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #121212; color: #e0e0e0; margin: 0; padding: 0; }
        header { background-color: #1f1f1f; color: #007BFF; text-align: center; padding: 1rem; font-size: 1.5rem; }
        main { max-width: 800px; margin: auto; padding: 1rem; }
        .info { display: flex; gap: 1rem; padding: 0.5rem; margin-bottom: 1rem; }
        .info span { font-weight: bold; color: #FFA500; }
        .card { background: #1f1f1f; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; }
        .device-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
        button { padding: 0.5rem; border: none; border-radius: 5px; cursor: pointer; }
        .status { padding: 0.2rem 0.5rem; border-radius: 5px; display: inline-block; }
        .status.online { background-color: #007BFF; }
        .status.offline { background-color: #FF5722; }
    </style>
</head>
<body>
    <header>
        SMART OFFICE CONTROL
    </header>
    <main>
        <div class="card info">
            <p>CPU: <span id="cpu">0%</span></p>
            <p>Memory: <span id="memory">0%</span></p>
            <p>Temperature: <span id="temp">0°C</span></p>
        </div>
        <div class="card">
            <h2>Add Device</h2>
            <form id="add-form">
                <select name="device" id="device">
                    <option disabled>Loading devices...</option>
                </select>
                <input type="text" name="name" placeholder="Custom Name" required>
                <button type="submit">Add Device</button>
            </form>
        </div>
        <div class="card">
            <h2>Saved Devices</h2>
            <div id="device-list" class="device-grid"></div>
        </div>
    </main>
    <script>
        function updateDevices() {
            fetch("/api/pcs")
                .then(response => response.json())
                .then(data => {
                    const deviceList = document.getElementById("device-list");
                    const deviceDropdown = document.getElementById("device");
                    deviceList.innerHTML = "";
                    deviceDropdown.innerHTML = "";

                    // Update available devices
                    data.available.forEach(device => {
                        const option = document.createElement("option");
                        option.value = `${device.ip}|${device.mac}`;
                        option.textContent = `${device.name} (${device.ip})`;
                        deviceDropdown.appendChild(option);
                    });

                    // Update saved devices
                    data.saved.forEach(pc => {
                        const div = document.createElement("div");
                        div.className = "card";
                        div.innerHTML = `
                            <h4>${pc.name}</h4>
                            <p>IP: ${pc.ip}</p>
                            <p>MAC: ${pc.mac}</p>
                            <p>Status: <span class="status ${pc.status === 'Online' ? 'online' : 'offline'}">${pc.status}</span></p>
                            <button onclick="wake('${pc.mac}')">Wake</button>
                        `;
                        deviceList.appendChild(div);
                    });
                });
        }

        function updateStats() {
            fetch("/api/stats")
                .then(response => response.json())
                .then(stats => {
                    document.getElementById("cpu").textContent = `${stats.cpu}%`;
                    document.getElementById("memory").textContent = `${stats.memory}%`;
                    document.getElementById("temp").textContent = `${stats.temperature}°C`;
                });
        }

        setInterval(updateStats, 1000);
        setInterval(updateDevices, 2000);
        updateDevices();
        updateStats();
    </script>
</body>
</html>
Editor is loading...