<!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>