feat: simple web page with sliders

This commit is contained in:
əlemi 2024-11-10 02:28:48 +01:00
parent 673327efc1
commit e47e69ba09
Signed by: alemi
GPG key ID: A4895B84D311642C

37
src/web/index.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link crossorigin rel="stylesheet" href="https://cdn.alemi.dev/web/alemi.css">
<title>mmp</title>
</head>
<body>
<div class="container">
<h1>mmp</h1>
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-1"></p>
<hr/>
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-2"></p>
<hr/>
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-3"></p>
<hr/>
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-4"></p>
<hr/>
<p><input type="range" min="0" max="255" value="0" class="w-100" id="ctrl-5"></p>
</div>
<script>
let socket = new WebSocket("wss://api.alemi.dev/mmp");
socket.addEventListener("message", (event) => console.warn("unexpected websocket message", event));
for (let i = 0; i < 5; i++) {
let inpt = document.getElementById("ctrl-" + (i+1));
inpt.addEventListener("input", (ev) => {
socket.send(JSON.stringify([i, parseInt(ev.target.value)]));
});
}
</script>
</body>
</html>