<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script type="module" src="app.js"></script> <title>Contrôle du robot</title> </head> <body> <main> <h1>Contrôle du robot sans fils</h1> <p> Cette page permet de contrôler le robot depuis un PC portable connecté au WiFi du robot. Elle est destinée aux personnes n'ayant pas de smartphone. </p> <section class="infos"> <div> <h2>Paramètres de contrôle</h2> <p> Ici vous pourrez paramétrer les contrôles du robot, rentrer son adresse IP ainsi que lui indiquer la distance à parcourir ou l'angle de rotation désiré. </p> </div> <div> <h2>Contrôle</h2> <p> Amusez vous ! Pour contrôler le robot, utilisez les flèches directionnelles pour le diriger et la barre espace pour le stopper. </p> </div> </section> <section class="inputs"> <form class="settings" id="settings"> <label> <span>Adresse IP du robot</span> <input type="text" name="ip-address" title="Adresse IP du robot (ex: 192.168.0.1)" pattern="\d+\.\d+\.\d+\.\d+(:\d+)?" placeholder="192.168.0.0" required /> </label> <button>Se connecter</button> </form> <div class="input-controls"> <label> <span>Rotation en degrés</span> <input id="rotate-input" type="number" title="Rotation en degrés (-360° à 360°)" min="-360" max="360" step="1" placeholder="90" /> </label> <label> <span>Distance en cm</span> <input id="move-input" type="number" title="Distance en cm (-2^31 à 2^31)" min="-2147483647" step="1" max="2147483647" placeholder="10" /> </label> </div> </section> <section class="touch-controls" id="touch-controls"> <span class="placeholder"></span> <button title="Avancer" data-command="forward" data-value="2"> ⬆️ </button> <span class="placeholder"></span> <button title="Tourner à gauche" data-command="left" data-value="5" > ⬅️ </button> <button title="Arrêter" data-command="stop" data-value="0"> ⏸️ </button> <button title="Tourner à droite" data-command="right" data-value="5" > ➡️ </button> <span class="placeholder"></span> <button title="Reculer" data-command="backward" data-value="2"> ⬇️ </button> <span class="placeholder"></span> </section> </main> </body> </html>