From 9c1d85422361564fa06fce17b6b83322ded45fdd Mon Sep 17 00:00:00 2001
From: Oleg Kalachev <okalachev@gmail.com>
Date: Thu, 20 May 2021 18:04:03 +0300
Subject: [PATCH] Redesign web part a bit

---
 clover/www/index.html | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/clover/www/index.html b/clover/www/index.html
index f5f9214f..9cb74c9c 100644
--- a/clover/www/index.html
+++ b/clover/www/index.html
@@ -1,18 +1,25 @@
+<style>
+	body { font-family: sans-serif; }
+	main { max-width: 600px; margin: 50px auto; }
+</style>
+
 <title>Clover Drone Kit Tools</title>
 
-<h1>Clover Drone Kit Tools</h1>
+<main>
+	<h1>Clover Drone Kit Tools</h1>
 
-<ul>
-	<li><a href="docs">View documentation</a> (snapshot of <a href="https://clover.coex.tech">clover.coex.tech</a>)</li>
-	<li><a href="" id="wvs">View image topics</a> (<code>web_video_server</code>)</li>
-	<li><a href="" id="butterfly">Open web terminal</a> (<code>Butterfly</code>)</li>
-	<li><a href="viz.html">View 3D visualization</a> (<code>ros3djs</code>)</li>
-	<li><a href="aruco_map.html">3D visualization for markers map</a> (<code>ros3djs</code>)</li>
-	<li><a href="../clover_blocks/">Blocks programming</a> (<code>Blockly</code>)</li>
-	<li><a href="clover.err">Clover console</a> (<code>/tmp/clover.err</code>)</li>
-</ul>
+	<ul>
+		<li><a href="docs">View documentation</a> (snapshot of <a href="https://clover.coex.tech">clover.coex.tech</a>)</li>
+		<li><a href="" id="wvs">View image topics</a> (<code>web_video_server</code>)</li>
+		<li><a href="" id="butterfly">Open web terminal</a> (<code>Butterfly</code>)</li>
+		<li><a href="viz.html">View 3D visualization</a> (<code>ros3djs</code>)</li>
+		<li><a href="aruco_map.html">3D visualization for markers map</a> (<code>ros3djs</code>)</li>
+		<li><a href="../clover_blocks/">Blocks programming</a> (<code>Blockly</code>)</li>
+		<li><a href="clover.err">Clover console</a> (<code>/tmp/clover.err</code>)</li>
+	</ul>
 
-<div class="version"></div>
+	<div class="version"></div>
+</main>
 
 <script type="text/javascript">
 	document.querySelector("#wvs").href = location.protocol + '//' + location.hostname + ':8080';
@@ -22,7 +29,7 @@
 	fetch('clover_version').then(function(response) {
 		if (response.status !== 200) return;
 		response.text().then(function(text) {
-			document.querySelector('.version').innerHTML = 'Version: ' + text;
+			document.querySelector('.version').innerHTML = 'Version: <code>' + text + '</code>';
 		});
 	});
 </script>