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: #2e2e2e; color: #e0e0e0; margin: 0; padding: 0; }
        header { background-color: #3c3c3c; color: white; text-align: center; padding: 1rem; }
        main { max-width: 800px; margin: auto; padding: 1rem; }
        .card { background: #393939; 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; background-color: #5e5e5e; color: white; }
        button:hover { background-color: #707070; }
        .status { padding: 0.2rem 0.5rem; border-radius: 5px; display: inline-block; color: white; }
        .status.online { background-color: #4caf50; }
        .status.offline { background-color: #f44336; }
        .popup { position: fixed; bottom: 20px; right: 20px; background: #4caf50; color: white; padding: 10px 20px; border-radius: 5px; opacity: 0; transition: opacity 0.5s ease; }
        .popup.show { opacity: 1; }
        .popup .close-btn { background: none; border: none; color: white; font-size: 1.2rem; margin-left: 10px; cursor: pointer; }
        .progress-bar { width: 100%; background-color: #3c3c3c; border-radius: 5px; margin-top: 0.5rem; }
        .progress-bar-inner { height: 10px; width: 0%; background-color: #4caf50; border-radius: 5px; transition: width 1s linear; }
    </style>
</head>
<body>
    <header>
        <h1>Smart Office Control</h1>
    </header>
    <main>
        <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>
    <div class="popup" id="popup">
        <span id="popup-message"></span>
        <button class="close-btn" onclick="closePopup()">×</button>
    </div>
    <script>
        function showPopup(message, success = true) {
            const popup = document.getElementById("popup");
            const popupMessage = document.getElementById("popup-message");
            popupMessage.textContent = message;
            popup.style.background = success ? "#4caf50" : "#f44336";
            popup.classList.add("show");
            setTimeout(() => popup.classList.remove("show"), 5000);
        }

        function closePopup() {
            document.getElementById("popup").classList.remove("show");
        }

        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 = "";

                    // Populate available devices
                    if (data.available.length === 0) {
                        const option = document.createElement("option");
                        option.textContent = "No devices found";
                        option.disabled = true;
                        deviceDropdown.appendChild(option);
                    } else {
                        data.available.forEach(device => {
                            const option = document.createElement("option");
                            option.value = `${device.ip}|${device.mac}`;
                            option.textContent = `${device.name} (${device.ip} - ${device.mac})`;
                            deviceDropdown.appendChild(option);
                        });
                    }

                    // Populate saved devices
                    if (data.saved.length === 0) {
                        deviceList.innerHTML = "<p>No saved devices</p>";
                    } else {
                        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>
                                <p>Uptime: ${pc.uptime || "N/A"}</p>
                                <button onclick="wake('${pc.mac}', this)">Wake</button>
                                <button onclick="deletePC('${pc.name}')">Delete</button>
                                <div class="progress-bar" id="progress-${pc.mac}">
                                    <div class="progress-bar-inner"></div>
                                </div>
                            `;
                            deviceList.appendChild(div);
                        });
                    }
                });
        }

        function wake(mac, button) {
            fetch("/wake", { method: "POST", body: new URLSearchParams({ mac }) })
                .then(response => response.json())
                .then(data => {
                    showPopup(data.message || "Error waking device", data.success);
                    if (data.success) startProgressBar(mac);
                    updateDevices();
                });
        }

        function startProgressBar(mac) {
            const progressBar = document.getElementById(`progress-${mac}`).querySelector(".progress-bar-inner");
            progressBar.style.width = "100%";
            setTimeout(() => progressBar.style.width = "0%", 90000); // 90 seconds
        }

        function deletePC(name) {
            fetch("/delete", { method: "POST", body: new URLSearchParams({ name }) })
                .then(response => response.json())
                .then(data => {
                    showPopup(data.message || "Error deleting device", data.success);
                    updateDevices();
                });
        }

        document.getElementById("add-form").addEventListener("submit", function (e) {
            e.preventDefault();
            const formData = new FormData(e.target);
            fetch("/add", { method: "POST", body: new URLSearchParams(formData) })
                .then(response => response.json())
                .then(data => {
                    showPopup(data.message || "Device added successfully!", data.success);
                    updateDevices();
                });
        });

        updateDevices();
    </script>
</body>
</html>
Editor is loading...