88 lines
No EOL
2.3 KiB
HTML
88 lines
No EOL
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>PC WOL Control</title>
|
|
<style>
|
|
body {
|
|
font-family: monospace;
|
|
background: #111;
|
|
color: #eee;
|
|
text-align: center;
|
|
padding: 40px;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 25px;
|
|
margin: 10px;
|
|
font-size: 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#wakeBtn {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
#shutdownBtn {
|
|
background: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
#statusText {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
margin-top: 20px;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>PC Remote Control</h1>
|
|
|
|
<span id="statusText">Checking status...</span>
|
|
<br>
|
|
<button id="wakeBtn" onclick="wakePC()">Wake PC</button>
|
|
<button id="shutdownBtn" onclick="shutdownPC()">Shutdown PC</button>
|
|
|
|
<script>
|
|
async function refreshStatus() {
|
|
try {
|
|
const res = await fetch('/api/status');
|
|
const data = await res.json();
|
|
|
|
document.getElementById('statusText').textContent =
|
|
data.online ? "🟢 Online" : "🔴 Offline";
|
|
|
|
document.getElementById('wakeBtn').disabled = data.online;
|
|
document.getElementById('shutdownBtn').disabled = !data.online;
|
|
} catch (e) {
|
|
document.getElementById('statusText').textContent = "⚠️ Error";
|
|
document.getElementById('wakeBtn').disabled = false;
|
|
document.getElementById('shutdownBtn').disabled = false;
|
|
}
|
|
}
|
|
|
|
async function wakePC() {
|
|
document.getElementById('statusText').textContent = "Sending WOL packet...";
|
|
await fetch('/api/wake', { method: 'POST' });
|
|
setTimeout(refreshStatus, 3000);
|
|
}
|
|
|
|
async function shutdownPC() {
|
|
document.getElementById('statusText').textContent = "Sending shutdown command...";
|
|
await fetch('/api/shutdown', { method: 'POST' });
|
|
setTimeout(refreshStatus, 3000);
|
|
}
|
|
|
|
refreshStatus();
|
|
setInterval(refreshStatus, 5000);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |