design and styles for the new web interface

HTML/adapters.html

@@ -19,7 +19,7 @@
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
 				 <form name="conf1" method="post">
-				<h3>Ethernet</h3>				  
+				<div class="mlhdr">ETHERNET</div>				  
 				<table class='cntr'><tr>
 				<script>PrintCheckBox('Включить ETHERNET','ethen','~ethen~','configIPBoxes()');
 				PrintCheckBox('Включить DHCP','dhcp','~ecbdh~','configIPBoxes()');
@@ -41,11 +41,15 @@
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
 				<form name="conf2" method="post">
-					<h3>WiFi</h3>
+				<div class="mlhdr">WiFi</div>
 				<table class='cntr'>
 				<tr><td class='rl'>Включить WiFi</td><td><input type="checkbox" name="wifien" value="1"  ~wfen~/></td></tr>
-				<td class='rl'>Режим WiFi</td></td><td><input name="netm" type="radio" value="2" onclick="configIPBoxes()" ~cln~>Клиент(CLN)</input></td></tr>
+				
-				<tr><td></td><td><input name="netm" type="radio" value="1" onclick="configIPBoxes()" ~apn~>Точка доступа(AP)</input></td></tr>
+				
+				<tr><td class='rl'>Режим WiFi:</td><td><input name="netm" type="radio" value="2" onclick="configIPBoxes()" ~cln~>Клиент(CLN)</input></br>
+				<input name="netm" type="radio" value="1" onclick="configIPBoxes()" ~apn~>Точка доступа(AP)</input></td></tr>
+				
+				
 				<script>PrintTextInput('Имя WiFi сети(AP):','wfiap','~ssidap~',3,31);
 				PrintTextInput('Ключ WiFi сети(AP):','wfpap','~wkeyap~',8,31);
 				PrintIPInput('IP адрес(AP):','ipaap','~ipap~');
@@ -70,7 +74,7 @@
 			  
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
-				<h3>GPRS</h3>
+				<div class="mlhdr">GPRS</div>
 				<form name="conf3" method="post">			
 				<table class='cntr'>
 				<script>PrintCheckBox('Включить GSM','gsmen','~gsmen~',null);

HTML/espfs.paths

@@ -1,3 +1,4 @@
+adapters.html
 api
 api/dbg.json
 api/dbg2.json
@@ -13,12 +14,12 @@ favicon.ico
 iconsfont.css
 iconsfont.woff2
 index.html
+logo.png
 main.js
 reboot.html
 res
 res.js
 res/ca_cert.pem
-set_adapters.html
+services.html
-set_services.html
-set_system.html
 styles.css
+system.html

HTML/index.html

@@ -21,20 +21,20 @@
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
 				
-				<h3>Application1</h3>				  
+				<div class="mlhdr">Application 1</div>				  
 			
 				</div>
 			  </div>
 			  
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
-				<h3>Application2</h3>
+				<div class="mlhdr">Application 2</div>
 				</div>
 			  </div>
 			  
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
-				<h3>Application3</h3>
+				<div class="mlhdr">Application 3</div>
 				</div>
 			  </div>
 

HTML/res.js

@@ -1,7 +1,7 @@
 var hedmen = `
         <header class="header">
             <div class="header__container">
-                <img src="youlogo.gif" alt="LOGO" class="header__img">
+                <img src="logo.png" alt="LOGO" class="header__img"/>
                 <a href="index.html" class="header__logo">YouDevice</a>
                 <div class="header__toggle">
                     <i class='icon-menu' id="header-toggle"></i>
@@ -47,8 +47,8 @@ var hedmen = `
 
                                 <div class="nav__dropdown-collapse">
                                     <div class="nav__dropdown-content">
-										<a href="set_network.html" class="nav__dropdown-item">Adapters</a>
+										<a href="adapters.html" class="nav__dropdown-item">Adapters</a>
-										<a href="set_services.html" class="nav__dropdown-item">Services</a>
+										<a href="services.html" class="nav__dropdown-item">Services</a>
                                     </div>
                                 </div>
 
@@ -56,13 +56,13 @@ var hedmen = `
 							<div class="nav__dropdown">
 								<a href="#" class="nav__link">
                                     <i class='icon-cog-alt nav__icon' ></i>
-                                    <span class="nav__name">STSTEM</span>
+                                    <span class="nav__name">DEVICE</span>
                                     <i class='icon-down-open nav__icon nav__dropdown-icon'></i>
                                 </a>
 
                                 <div class="nav__dropdown-collapse">
                                     <div class="nav__dropdown-content">
-                                        <a href="set_system.html" class="nav__dropdown-item">System</a>
+                                        <a href="system.html" class="nav__dropdown-item">Maintain</a>
                                     </div>
                                 </div>
 							</div>
@@ -84,7 +84,7 @@ function PrintMACInput(title,name,value){document.write("<tr><td class='rl'>"+ti
 function PrintTextInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов A-Za-z0-9_\-*!<>)(.@,/'  pattern='^[0-9a-zA-Z_\\-*!<>.@\,/)(\s]{"+min+","+max+"}$' /></td></tr>");}
 function PrintHexInput(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов A-Fa-f0-9'  pattern='^[0-9a-fA-F]{"+min+","+max+"}$' /></td></tr>");}
 function PrintTextInputNoReg(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='text' required size='20' name='"+name+"' value="+value+" title='"+min+"-"+max+" символов'/></td></tr>");}
-function PrintLabel(title,value){document.write("<tr><td class='rl'>"+title+"</td><td align='left'>"+value+"</td></tr>");}
+function PrintLabel(title,value){document.write("<tr><td class='rl lab'>"+title+"</td><td align='left' class='lab'>"+value+"</td></tr>");}
 function PrintSpanLabel(title,idx){document.write("<tr><td class='rl'>"+title+"</td><td align='left'><span id='"+idx+"'>?</span></td></tr>");}
 function PrintCheckBox(title,name,checked,action){document.write("<tr><td class='rl'>"+title+"</td><td><input type='checkbox' name='"+name+"' value='1' onclick="+action+" "+checked+" /></td></tr>");}
 function PrintInt(title,name,value,min,max){document.write("<tr><td class='rl'>"+title+"</td><td><input type='number' required min='"+min+"' max='"+max+"' name='"+name+"' value ='"+value+"'/></td></tr>");}

HTML/services.html

@@ -19,7 +19,7 @@
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
 				 <form name="conf1" method="post">
-				<h3>SNTP</h3>				  
+				<div class="mlhdr">SNTP</div>				  
 									
 				<table class='cntr'>
 				<tr><td class='rl'>Включить SNTP клиент</td><td><input type="checkbox" name="sntpen" value="1" ~sntpen~></td></tr>
@@ -45,7 +45,7 @@
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
 				<form name="conf2" method="post">
-				<h3>MQTT</h3>
+				<div class="mlhdr">MQTT</div>
 				<table class='cntr'>
 				<script>PrintCheckBox('Включить MQTT 1','mqttenb1','~mqtten1~',null);
 				PrintTextInput('URL шлюза сообщений','cld1','~ipcld1~',3,31);

HTML/styles.css

@@ -1,6 +1,3 @@
-/*========== GOOGLE FONTS ==========*/
-
-
 /*========== VARIABLES CSS ==========*/
 :root {
   --header-height: 3.5rem;
@@ -10,10 +7,10 @@
   --first-color: #FFFFFF;
   --first-color-light: #90C0E0;
   --title-color: #336699;
-  --text-color: #444444;
+  --text-color: #404040;
   --text-color-light: #336699;
   --body-color: #FFFFFF;
-  --container-color: #3399CC;
+  --container-color: #90C0E0;
 
   /*========== Font and typography ==========*/
   --body-font: 'Arial', sanf-serif;
@@ -210,6 +207,7 @@ img {
   font-size: var(--smaller-font-size);
   font-weight: var(--font-medium);
   color: var(--text-color);
+  margin: 5px 3px;
 }
 
 .nav__dropdown-item:hover {
@@ -316,25 +314,43 @@ img {
   }
 }
 
-.btn {color:var(--text-color);
+.rl{text-align:right;}
-		font: 14px consolas,monospace;padding:15px 5px;
-		min-width:100px;
-		border-style:border:solid 1px #CCCCCC;;
-}
 
-input {
+
-	color:#000;
+
-	font:14px consolas,monospace;
+input, .btn, .lab, textarea {
+	font:.8rem consolas,monospace;
 	padding-left:3px;
 	border:solid 1px #CCCCCC;
+	border-radius: 5px;
 	height:2.0rem;
+	margin: 3px 3px;
+	vertical-align: middle;
+}
+
+.btn{min-width:100px;}
+.btn:active{background-color:  #CCCCCC;}
+.btn:hover {border:solid 1px #999999;}
+
+.lab {border: none;}
+
+textarea {
+	height: 3.0rem;
+	width: auto;
+	margin:10px;
+	vertical-align: top;
 }
 
 .cntr {
    margin:auto;
-		   color:#000;
+   font: .8rem consolas, monospace;}
-		   font:14px consolas, monospace;}
 
+.mlhdr {
+	font:16px consolas,monospace;
+	font-weight:bold;
+	color: var(--title-color);
+	margin: auto;
+}		   
 
 .masonry-layout__panel {
   break-inside: avoid;

HTML/system.html

@@ -19,12 +19,10 @@
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
 				 <form name="conf1" method="post">
-				<h3>SYSTEM</h3>				  
+				<div class="mlhdr">SYSTEM</div>				  
 				<table class='cntr'><script>PrintTextInputNoReg('Имя устройства:','nam','~dname~', 3, 31 );
 				PrintTextInput('Имя пользователя:','lgn','~login~', 3, 31 );
-				PrintTextInput('Пароль пользователя','psn','~pass~', 5, 31 );
+				PrintTextInput('Пароль пользователя:','psn','~pass~', 5, 31 );
-				PrintCheckBox('Подтверждать TCP','tcpdel','~tcpdel~',null);
-				PrintCheckBox('Подтверждать LoRaWAN','lrdel','~lrdel~',null);
 				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>
@@ -46,20 +44,19 @@
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
 				<form name="conf2" method="post">
-				<h3>STAT</h3>
+				<div class="mlhdr">STAT</div>
 				<table class='cntr'>
-				<tr><td class='rl'>Ethernet:</td><td><span id='eth'>?</span></td></tr>
+				<tr><td class='rl lab'>Ethernet:</td><td><span id='eth'>?</span></td></tr>
-				<tr><td class='rl'>WiFi:</td><td><span id='wfi'>?</span></td></tr>
+				<tr><td class='rl lab'>WiFi:</td><td><span id='wfi'>?</span></td></tr>
-				<tr><td class='rl'>GPRS:</td><td><span id='gpr'>?</span></td></tr>
+				<tr><td class='rl lab'>GPRS:</td><td><span id='gpr'>?</span></td></tr>
-				<tr><td class='rl'>LoRaWAN:</td><td><span id='lrw'>?</span></td></tr>
 				<tr><td height='20px'></td></tr>
-				<tr><td class='rl'>Основной адаптер:</td><td><span id='adp'>?</span></td></tr>
+				<tr><td class='rl lab'>Основной адаптер:</td><td><span id='adp'>?</span></td></tr>
 				<tr><td height='20px'></td></tr>
-				<tr><td class='rl'>MQTT соединение 1:</td><td><span id='mq1'>?</span></td></tr>
+				<tr><td class='rl lab'>MQTT соединение 1:</td><td><span id='mq1'>?</span></td></tr>
-				<tr><td class='rl'>MQTT соединение 2:</td><td><span id='mq2'>?</span></td></tr>
+				<tr><td class='rl lab'>MQTT соединение 2:</td><td><span id='mq2'>?</span></td></tr>
 				<tr><td height='20px'></td></tr>
-				<tr><td class='rl'>Свободной памяти:</td><td><span id='mem'>?</span></td></tr>
+				<tr><td class='rl lab'>Свободной памяти:</td><td><span id='mem'>?</span></td></tr>
-				<tr><td class='rl'>Минимум памяти:</td><td><span id='mmem'>?</span></td></tr>
+				<tr><td class='rl lab'>Минимум памяти:</td><td><span id='mmem'>?</span></td></tr>
 				</table>
 				</form>
 				</div>
@@ -68,7 +65,7 @@
 			  <div class="masonry-layout__panel">
 				<div class="masonry-layout__panel-content">
 				<form name="conf2" method="post">
-				<h3>CONTROL</h3>
+				<div class="mlhdr">CONTROL</div>
 				<div style='margin:auto;text-align:center'>
 				</br>
 				<button type="submit" class ='btn' name='cmd' value='1'>BAT ON</button>

components/webguiapp

@@ -1 +1 @@
-Subproject commit 936d2db0807024fc99c6fe92c1ca46ac315072e7
+Subproject commit 4b4b4cda4267f2251c0a5fb9668f74c3887d80d7