Lucca Pirovano
69 lines
2.4 KiB
HTML
69 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Fan Speed Control</title>
|
||
<style>
|
||
body { font-family: Arial; text-align: center; padding: 2rem; background: #f4f4f4; }
|
||
.btn {
|
||
font-size: 1.5rem; padding: 1rem 1.5rem; margin: 0.5rem;
|
||
background: #007bff; color: white; border: none; border-radius: 8px;
|
||
cursor: pointer; width: 80px;
|
||
}
|
||
.btn:hover { background: #0056b3; }
|
||
.btn.stop { background: #dc3545; }
|
||
.btn.stop:hover { background: #b02a37; }
|
||
.btn.full { background: #28a745; }
|
||
.btn.full:hover { background: #218838; }
|
||
#status { margin-top: 1rem; font-size: 1.2rem; color: #333; }
|
||
.keys { margin-top: 2rem; font-size: 1rem; color: #666; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Fan Speed Control</h1>
|
||
<p>Click buttons or press keys: <strong>0–9, f, s</strong></p>
|
||
|
||
<div>
|
||
<button class="btn stop" onclick="send('s')">S<br>Stop</button>
|
||
<button class="btn" onclick="send('1')">1<br>~11%</button>
|
||
<button class="btn" onclick="send('2')">2<br>~20%</button>
|
||
<button class="btn" onclick="send('3')">3<br>~30%</button>
|
||
<button class="btn" onclick="send('4')">4<br>~40%</button>
|
||
<button class="btn" onclick="send('5')">5<br>50%</button>
|
||
<button class="btn" onclick="send('6')">6<br>~60%</button>
|
||
<button class="btn" onclick="send('7')">7<br>~70%</button>
|
||
<button class="btn" onclick="send('8')">8<br>~80%</button>
|
||
<button class="btn" onclick="send('9')">9<br>~90%</button>
|
||
<button class="btn full" onclick="send('f')">F<br>Full</button>
|
||
</div>
|
||
|
||
<div id="status">Ready. Press keys or click buttons.</div>
|
||
<div class="keys">Keyboard: 0–9, f = full, s = stop</div>
|
||
|
||
<script>
|
||
function send(key) {
|
||
fetch(`/cmd/${key}`)
|
||
.then(r => r.json())
|
||
.then(data => {
|
||
if (data.status === 'ok') {
|
||
document.getElementById('status').textContent = `Sent: ${key.toUpperCase()} → Fan updated`;
|
||
}
|
||
})
|
||
.catch(() => {
|
||
document.getElementById('status').textContent = 'Error: Is Arduino connected?';
|
||
});
|
||
}
|
||
|
||
// Keyboard control
|
||
document.addEventListener('keydown', (e) => {
|
||
const k = e.key.toLowerCase();
|
||
if ('0123456789fs'.includes(k)) {
|
||
e.preventDefault();
|
||
send(k);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|