45 lines
1.7 KiB
HTML
45 lines
1.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>M-Spacer Controller</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: system-ui, sans-serif; background: #0f1113; color: #e8eaec; padding: 2rem; max-width: 600px; margin: 0 auto; }
|
||
|
|
button { background: #c8a45c; color: #000; border: 0; padding: 0.75rem 1.5rem; font-weight: bold; border-radius: 4px; cursor: pointer; }
|
||
|
|
button:hover { opacity: 0.9; }
|
||
|
|
.card { background: #16191c; border: 1px solid #2a2f34; padding: 1.5rem; border-radius: 8px; margin-top: 1rem; }
|
||
|
|
.status { color: #9aa3ab; font-size: 0.9rem; margin-top: 0.5rem; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>M-Spacer / Apollo Controller</h1>
|
||
|
|
<p>Custom Web Bluetooth controller for smart motor workout board.</p>
|
||
|
|
|
||
|
|
<button id="connectBtn">Connect Board</button>
|
||
|
|
|
||
|
|
<div className="card">
|
||
|
|
<h3>Device Status</h3>
|
||
|
|
<div id="status" className="status">Disconnected</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.getElementById('connectBtn').addEventListener('click', async () => {
|
||
|
|
const statusEl = document.getElementById('status');
|
||
|
|
try {
|
||
|
|
statusEl.innerText = "Scanning for BLE board...";
|
||
|
|
const device = await navigator.bluetooth.requestDevice({
|
||
|
|
acceptAllDevices: true,
|
||
|
|
optionalServices: ['0000ffe0-0000-1000-8000-00805f9b34fb']
|
||
|
|
});
|
||
|
|
statusEl.innerText = `Connecting to ${device.name || 'Board'}...`;
|
||
|
|
const server = await device.gatt.connect();
|
||
|
|
statusEl.innerText = `Connected to ${device.name || 'Board'}!`;
|
||
|
|
} catch (err) {
|
||
|
|
statusEl.innerText = `Connection failed: ${err.message}`;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|