Add templates/index.html

2026-04-17 22:42:54 +00:00
parent 8dfd647359
commit 28bdd27214
1 changed files with 75 additions and 0 deletions
@@ -0,0 +1,75 @@
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <title>Pi Zero HID Web Controller</title>
    <style>
        body { font-family: sans-serif; background: #111; color: #eee; text-align: center; }
        button { padding: 10px 20px; margin: 5px; font-size: 18px; }
        #mousepad {
            width: 400px; height: 300px;
            background: #222; margin: 20px auto;
            border: 2px solid #555; border-radius: 10px;
        }
    </style>
 </head>
 <body>
 <h1>Pi Zero HID Web Controller</h1>
 <h2>Keyboard</h2>
 <input id="keycode" type="number" placeholder="HID keycode">
 <button onclick="sendKey()">Send Key</button>
 <h2>Mouse</h2>
 <div id="mousepad"></div>
 <button onclick="mouseClick(1)">Left Click</button>
 <button onclick="mouseClick(2)">Right Click</button>
 <script>
 function sendKey() {
    const code = document.getElementById("keycode").value;
    fetch("/key", {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: "code=" + code
    });
 }
 function mouseMove(dx, dy) {
    fetch("/mouse", {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: `dx=${dx}&dy=${dy}&buttons=0`
    });
 }
 function mouseClick(button) {
    fetch("/mouse", {
        method: "POST",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        body: `dx=0&dy=0&buttons=${button}`
    });
 }
 const pad = document.getElementById("mousepad");
 let lastX = 0, lastY = 0;
 pad.addEventListener("mousemove", e => {
    if (e.buttons !== 1) return;
    const rect = pad.getBoundingClientRect();
    const dx = e.clientX - lastX;
    const dy = e.clientY - lastY;
    lastX = e.clientX;
    lastY = e.clientY;
    mouseMove(dx, dy);
 });
 pad.addEventListener("mousedown", e => {
    lastX = e.clientX;
    lastY = e.clientY;
 });
 </script>
 </body>
 </html>