html: more styling

Better styling of forms

esp32/www/com/max80.css

@@ -7,6 +7,9 @@ body {
     background: #e6c185;
     font-family: "arial", "sans-serif";
 }
+.mono {
+    font-family: "source code pro", "monospace";
+}
 div.title {
     width: 100%;
     white-space: nowrap;
@@ -76,17 +79,34 @@ form fieldset legend {
     padding: 0.25em;
     background: #af9365;
 }
+form div {
+    margin: 0;
+    padding: 0.5ch;
+    display: flex;
+}
 form label {
-    display: inline-block;
     width: 30ch;
-    margin: 0.5ch;
 }
-button {
-    width: 30ch;
-    margin: 1em;
+input[type=text], input[type=password] {
+    flex: 1;
+}
+input[type=file] {
+    font-family: "arial", "sans-serif";
+    font-size: 80%;
 }
-.showpwd {
+button.show {
     width: 6ch;
+    padding: 0;
+    margin: 0 0 0 1px;
+    font-size: 70%;
+}
+button {
+    width: 28ch;
+    margin: 1em 1ch 1em 1ch;
+    padding: 0.25em;
+    vertical-align: center;
+    font-family: "arial", "sans-serif";
+    font-size: 100%;
 }
 progress {
     display: inline-block;
@@ -94,7 +114,6 @@ progress {
 }
 .result {
     display: block;
-    font-family: "source code pro", "monospace";
     border: 2px solid black;
     padding: 0.5ch;
     border-radius: 5px;

esp32/www/en/config.html

@@ -24,22 +24,34 @@
 	  method="post" onsubmit="addextrainfo(event)">
       <fieldset>
 	<legend>Network</legend>
-	<label for="wifi.ssid">Network name (SSID):</label>
-	<input type="text" id="wifi.ssid" name="wifi.ssid" size="50" /><br />
-	<label for="wifi.psk">Network password (PSK):</label>
-	<input type="password" id="wifi.psk" name="wifi.psk" size="50" />
-	<button type="button" class="showpwd" onclick="showpwd('wifi.psk',this)">show</button>
+	<div>
+	  <label for="wifi.ssid">Network name (SSID):</label>
+	  <input type="text" id="wifi.ssid" name="wifi.ssid" />
+	</div>
+	<div>
+	  <label for="wifi.psk">Network password (PSK):</label>
+	  <input class="mono" type="password" id="wifi.psk" name="wifi.psk" size="50" />
+	  <button type="button" class="show" onclick="showpwd('wifi.psk',this)">show</button>
+	</div>
       </fieldset>
       <fieldset>
 	<legend>Date and Time</legend>
-	<label for="TZ">Timezone configuration:</label>
-	<input type="text" id="TZ" name="TZ" size="50"><br />
-	<label for="sntp.enabled">Synchronize time from network:</label>
-	<input type="checkbox" id="sntp.enabled" name="sntp.enabled" /><br />
-	<label for="sntp.enabled">NTP server:</label>
-	<input type="text" id="sntp.server" name="sntp.server" size="50"><br />
-	<label for="ip4.dhcp.nosntp">Ignore DHCP-provided NTP server:</label>
-	<input type="checkbox" id="ip4.dhcp.nosntp" name="ip4.dhcp.nosntp" />
+	<div>
+	  <label for="TZ">Timezone configuration:</label>
+	  <input type="text" id="TZ" name="TZ" />
+	</div>
+	<div>
+	  <label for="sntp.enabled">Synchronize time from network:</label>
+	  <input type="checkbox" id="sntp.enabled" name="sntp.enabled" />
+	</div>
+	<div>
+	  <label for="sntp.enabled">NTP server:</label>
+	  <input type="text" id="sntp.server" name="sntp.server" />
+	</div>
+	<div>
+	  <label for="ip4.dhcp.nosntp">Ignore DHCP-provided NTP server:</label>
+	  <input type="checkbox" id="ip4.dhcp.nosntp" name="ip4.dhcp.nosntp" />
+	</div>
       </fieldset>
       <button type="submit" disabled>Update configuration</button>
     </form>

esp32/www/en/update.html

@@ -17,8 +17,12 @@
 	  <input type="file" name="file" required
 		 onchange="enablebutton('upload.start',files.length == 1)" />
 	</div>
-	<button id="upload.start" disabled>Update firmware</button><br />
-	<progress value="0"></progress>
+	<div>
+	  <button id="upload.start" disabled>Update firmware</button>
+	</div>
+	<div>
+	  <progress value="0"></progress>
+	</div>
 	<pre class="result hide"></pre>
       </fieldset>
     </form>