userbogd/WebguiappTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design and styles for the new web interface

Browse Source
This commit is contained in:
Bogdan Pilyugin 2022-08-26 18:07:07 +02:00
parent 93288cff63
commit 12a15dceed
9 changed files with 72 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
HTML/set_adapters.html → HTML/adapters.html
View File

@ -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);

7
HTML/espfs.paths
View File

@ -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
set_services.html
set_system.html
services.html
styles.css
system.html

6
HTML/index.html
View File

@ -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>

BIN
HTML/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

12
HTML/res.js
View File

@ -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="set_services.html" class="nav__dropdown-item">Services</a>
<a href="adapters.html" class="nav__dropdown-item">Adapters</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>");}

4
HTML/set_services.html → HTML/services.html
View File

@ -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);

46
HTML/styles.css
View File

@ -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);
font: 14px consolas,monospace;padding:15px 5px;
min-width:100px;
border-style:border:solid 1px #CCCCCC;;
}
.rl{text-align:right;}
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:14px consolas, monospace;}
font: .8rem consolas, monospace;}
.mlhdr {
font:16px consolas,monospace;
font-weight:bold;
color: var(--title-color);
margin: auto;
}
.masonry-layout__panel {
break-inside: avoid;

27
HTML/set_system.html → HTML/system.html
View File

@ -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 );
PrintCheckBox('Подтверждать TCP','tcpdel','~tcpdel~',null);
PrintCheckBox('Подтверждать LoRaWAN','lrdel','~lrdel~',null);
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>
@ -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'>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'>LoRaWAN:</td><td><span id='lrw'>?</span></td></tr>
<tr><td class='rl lab'>Ethernet:</td><td><span id='eth'>?</span></td></tr>
<tr><td class='rl lab'>WiFi:</td><td><span id='wfi'>?</span></td></tr>
<tr><td class='rl lab'>GPRS:</td><td><span id='gpr'>?</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'>MQTT соединение 2:</td><td><span id='mq2'>?</span></td></tr>
<tr><td class='rl lab'>MQTT соединение 1:</td><td><span id='mq1'>?</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'>Минимум памяти:</td><td><span id='mmem'>?</span></td></tr>
<tr><td class='rl lab'>Свободной памяти:</td><td><span id='mem'>?</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>

2
components/webguiapp

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