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: #1f1f1f; color: white; text-align: center; padding: 1.5rem; font-size: 1.8rem; text-transform: uppercase; border-bottom: 2px solid #4caf50; } .info-panel { position: fixed; top: 15px; left: 15px; background: #1e1e1e; color: white; padding: 10px 20px; border-radius: 10px; font-size: 14px; line-height: 1.8; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); width: auto; text-align: left; } .info-panel div { margin: 5px 0; display: flex; justify-content: space-between; } .info-panel span { font-weight: bold; color: #4caf50; } main { max-width: 900px; margin: 50px auto; padding: 1rem; } .card { background: #393939; padding: 1.5rem; border-radius: 10px; margin-bottom: 2rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } .device-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .device-card { background-color: #2f2f2f; border-radius: 10px; padding: 1rem; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); } .device-card h4 { margin-bottom: 10px; color: #4caf50; } .device-card p { margin: 5px 0; } button { padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; margin: 5px; font-size: 14px; } button.wake { background-color: #4caf50; color: white; font-weight: bold; } button.shutdown { background-color: #f44336; color: white; font-weight: bold; } button.delete { background-color: #616161; color: white; font-weight: bold; } button:hover { opacity: 0.9; } .status { display: inline-block; padding: 5px 10px; border-radius: 5px; 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: 8px; opacity: 0; transition: opacity 0.5s ease; font-size: 16px; } .popup.show { opacity: 1; } </style> </head> <body> <header> Smart Office Control </header> <div class="info-panel"> <div>CPU: <span id="cpu">Loading...</span>%</div> <div>Memory: <span id="memory">Loading...</span>%</div> <div>Temperature: <span id="temperature">Loading...</span>°C</div> </div> <main> <div class="card"> <h2>Add Device</h2> <form id="add-form"> <select name="device" id="device" style="width: 70%; padding: 10px; margin-bottom: 10px;"> <option disabled>Loading devices...</option> </select> <input type="text" name="name" placeholder="Custom Name" required style="padding: 10px; width: 70%;"> <button type="submit" style="padding: 10px 20px; background-color: #4caf50; color: white; border-radius: 5px;">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> </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 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 = ""; 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); }); } if (data.saved.length === 0) { deviceList.innerHTML = "<p>No saved devices</p>"; } else { data.saved.forEach(pc => { const div = document.createElement("div"); div.className = "device-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 class="wake" onclick="wake('${pc.mac}')">Wake</button> <button class="shutdown" onclick="shutdown('${pc.name}')">Shutdown</button> <button class="delete" onclick="deletePC('${pc.name}')">Delete</button> `; deviceList.appendChild(div); }); } }); } function wake(mac) { fetch("/wake", { method: "POST", body: new URLSearchParams({ mac }) }) .then(response => response.json()) .then(data => { showPopup(data.message || "Error waking device", data.success); updateDevices(); }); } function shutdown(name) { fetch("/shutdown", { method: "POST", body: new URLSearchParams({ name }) }) .then(response => response.json()) .then(data => { showPopup(data.message || "Error shutting down device", data.success); updateDevices(); }); } 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(); }); } function updateSystemInfo() { fetch("/api/system-info") .then(response => response.json()) .then(data => { document.getElementById("cpu").textContent = data.cpu; document.getElementById("memory").textContent = data.memory; document.getElementById("temperature").textContent = data.temperature; }); } 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(); }); }); setInterval(updateSystemInfo, 500); setInterval(updateDevices, 2000); updateDevices(); updateSystemInfo(); </script> </body> </html>
Leave a Comment