improving design of web interface

HTML/styles.css

@@ -1,6 +1,6 @@
 /*========== VARIABLES CSS ==========*/
 :root {
-  --header-height: 3.5rem;
+  --header-height: 4.0rem;
   --nav-width: 220px;
 
   /*========== Colors ==========*/
@@ -82,8 +82,8 @@ img {
 }
 
 .header__img {
-  width: 50px;
-  height: 50px;
+  width: 3.0rem;
+  height: 3.0rem;
   border-radius: 5%;
 }
 
@@ -249,10 +249,10 @@ img {
 
 @media screen and (min-width: 768px) {
   body {
-    padding: 1rem 3rem 0 6rem;
+    padding: 1rem 3rem 0 5rem;
   }
   .header {
-    padding: 0 3rem 0 6rem;
+    padding: 0 3rem 0 5rem;
   }
   .header__container {
     height: calc(var(--header-height) + .5rem);
@@ -275,7 +275,7 @@ img {
   .nav {
     left: 0;
     padding: 1.2rem 1.5rem 0;
-    width: 68px; /* Reduced navbar */
+    width: 5.0rem; /* Reduced navbar */
   }
   .nav__items {
     row-gap: 1.7rem;
@@ -335,9 +335,8 @@ input, .btn, .lab, textarea {
 .lab {border: none;}
 
 textarea {
-	height: 3.0rem;
-	width: auto;
-	margin:10px;
+	height: 4.0rem;
+	margin:auto;
 	vertical-align: top;
 }
 
@@ -354,9 +353,9 @@ textarea {
 
 .masonry-layout__panel {
   break-inside: avoid;
-  padding: 5px;
 }
 .masonry-layout__panel-content {
+  margin: 10px 0 0 10px;
   padding: 10px;
   border-radius: 10px;
   border:solid 1px #CCCCCC;

HTML/system.html

@@ -24,8 +24,8 @@
 				PrintTextInput('Имя пользователя:','lgn','~login~', 3, 31 );
 				PrintTextInput('Пароль пользователя:','psn','~pass~', 5, 31 );
 				PrintCheckBox('Включить OTA обновление','ota','~ota~',null);</script></table>
-				<table class='cntr'><tr><td align="center">URL файла обновления:</td></tr>
-				<tr><td align="center"><textarea type="text" cols="40" raws="5" name='otaurl'  title="64 символа" ">~otaurl~</textarea></td></tr>
+				<table class='cntr'><tr><td align="center">URL файла обновления:</td></tr></table>
+				<table class='cntr'><tr><td><textarea type="text"  raws="5" name='otaurl'  title="64 символа" ">~otaurl~</textarea></td></tr>
 				</table>
 				<table class='cntr'><script>
 				PrintSep();
@@ -93,4 +93,26 @@
 		linkColor.forEach(l => l.addEventListener('click', colorLink))
 		</script>		
     </body>
+    <script>
+	function updateStatus(data) {
+	var dat = JSON.parse(data);
+	try
+		{
+		document.getElementById('eth').innerHTML= dat.ethstat;
+		document.getElementById('wfi').innerHTML= dat.wfstat;
+		document.getElementById('gpr').innerHTML= dat.gsmstat;
+		document.getElementById('adp').innerHTML= dat.defadp;
+		document.getElementById('mq1').innerHTML= dat.mqtt1st;
+		document.getElementById('mq2').innerHTML= dat.mqtt2st;
+		document.getElementById('mem').innerHTML= dat.freeram;
+		document.getElementById('mmem').innerHTML= dat.minram;
+		}
+	catch(e){return;}
+	}
+	function ReadAndUpdate() {
+	GetDataFile("/api/stat.json", function(data){updateStatus(data);});
+	}
+	ReadAndUpdate();
+	setInterval("ReadAndUpdate()",1000);
+	</script>
 </html>

components/webguiapp

@@ -1 +1 @@
-Subproject commit 4b4b4cda4267f2251c0a5fb9668f74c3887d80d7
+Subproject commit 876f7dada9ab0f77090a47a76f43db0d1883b522