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>
Leave a Comment