From c8100fd036f1851d29ceba126c4ab989154258fe Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Tue, 25 Jun 2024 11:43:34 +0200
Subject: [PATCH] feat(client): :sparkles: refactor settings and controls forms
 and update attributes to fit expected datas

---
 client/index.html | 58 +++++++++++++++++++++++++++++------------------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/client/index.html b/client/index.html
index 2d4af5a..c39cd29 100644
--- a/client/index.html
+++ b/client/index.html
@@ -18,29 +18,43 @@
 			adresse IP ainsi que lui indiquer la distance à parcourir ou l'angle
 			de rotation désiré.
 		</p>
-		<form id="form">
-			<label for="ip">Adresse IP du robot</label>
-			<input
-				type="text"
-				id="ip"
-				placeholder="192.168.0.0"
-				oninput="storeInput()"
-			/><br />
-			<label for="valueRot">Rotation en degrés</label>
-			<input
-				type="text"
-				id="valueRot"
-				placeholder="90"
-				oninput="storeInput()"
-			/><br />
-			<label for="valueLength">Longueur en cm</label>
-			<input
-				type="text"
-				id="valueLength"
-				placeholder="10"
-				oninput="storeInput()"
-			/>
+		<form class="settings">
+			<label>
+				<span>Adresse IP du robot</span>
+				<input
+					type="text"
+					title="Adresse IP du robot (ex: 192.168.0.1)"
+					pattern="\d+\.\d+\.\d+\.\d+"
+					placeholder="192.168.0.0"
+					required
+				/>
+			</label>
+			<button>Se connecter</button>
 		</form>
+		<div class="controls">
+			<label>
+				<span>Rotation en degrés</span>
+				<input
+					type="number"
+					title="Rotation en degrés (0° - 360°)"
+					min="0"
+					max="360"
+					step="1"
+					placeholder="90"
+				/>
+			</label>
+			<label for="valueLength">
+				<span>Longueur en cm</span>
+				<input
+					type="number"
+					title="Longueur en cm (0 - 2^31)"
+					min="-2147483647"
+					step="1"
+					max="2147483647"
+					placeholder="10"
+				/>
+			</label>
+		</div>
 		<h2>Contrôle</h2>
 		<p>
 			Amusez vous ! Pour contrôler le robot, utilisez les flèches