From 479234ef1dc37a17ec9c0a025b67ee48293d0429 Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Tue, 25 Jun 2024 14:55:30 +0200
Subject: [PATCH] feat(client): :lipstick: revamp ui and add css

---
 client/index.html | 289 +++++++++++++++++++++++++++++++++-------------
 1 file changed, 207 insertions(+), 82 deletions(-)
diff --git a/client/index.html b/client/index.html
index 495ace2..d56dcfe 100644
--- a/client/index.html
+++ b/client/index.html
@@ -6,88 +6,103 @@
 		<title>Contrôle du robot</title>
 	</head>
 	<body>
-		<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>
-		<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>
-		<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>
-		<div 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>
-		</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>
+		<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>
 	<script type="module">
 		// Input handlers
@@ -279,9 +294,119 @@
 		}
 	</script>
 	<style>
+		:root {
+			--translucent-high: rgba(255, 255, 255, 0.8);
+			--translucent-low: rgba(255, 255, 255, 0.4);
+			--padding: 0.5rem;
+			--padding-half: calc(var(--padding) / 2);
+			--border-size: 0.2rem;
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		html {
+			scroll-behavior: smooth;
+		}
+
+		body {
+			background-color: rgb(247, 234, 219);
+			height: 100dvh;
+			margin: 0;
+			padding: 0;
+
+			font-family: system-ui, -apple-system, BlinkMacSystemFont,
+				'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+				'Helvetica Neue', sans-serif;
+		}
+
+		h1,
+		h2 {
+			margin: 0;
+		}
+
+		h1 {
+			text-align: center;
+		}
+
+		main {
+			padding: var(--padding);
+			height: 100%;
+			text-wrap: pretty;
+		}
+
 		.touch-controls {
 			display: grid;
 			grid-template-columns: repeat(3, 1fr);
+			gap: var(--padding);
+			padding: var(--padding);
+
+			button {
+				height: 5.5rem;
+				font-size: 3rem;
+				border-radius: var(--padding);
+			}
+		}
+
+		button {
+			border: solid var(--border-size) var(--translucent-high);
+			background: var(--translucent-high);
+			border-radius: var(--padding-half);
+			transition: all 0.2s ease;
+			height: 100%;
+			font-size: 110%;
+
+			&:active {
+				border-color: var(--translucent-low);
+				background-color: var(--translucent-low);
+			}
+		}
+
+		.input-controls,
+		.settings {
+			padding: var(--padding);
+			display: flex;
+			gap: var(--padding);
+			border: solid var(--border-size) var(--translucent-high);
+			border-radius: var(--padding-half);
+			align-items: center;
+			justify-content: space-around;
+		}
+
+		.inputs {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(700px, 1fr));
+			gap: var(--padding);
+			width: 100%;
+		}
+
+		.infos {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
+			flex-wrap: wrap;
+			gap: var(--padding);
+			justify-content: space-between;
+		}
+
+		label {
+			display: grid;
+			gap: var(--padding);
+		}
+
+		input {
+			border: solid var(--border-size) var(--translucent-high);
+			background: var(--translucent-low);
+			border-radius: var(--padding-half);
+			transition: all 0.2s ease;
+			height: 100%;
+			padding: var(--padding-half);
+			font-family: 'Courier New', Courier, monospace;
+			outline: none;
+
+			&:focus {
+				background-color: var(--translucent-high);
+			}
 		}
 	</style>
 </html>
