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

improving design of web interface

Browse Source
This commit is contained in:
Bogdan Pilyugin 2022-08-27 18:22:54 +02:00
parent 12a15dceed
commit adbf57f71b
3 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
HTML/styles.css
View File

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

26
HTML/system.html
View File

@ -24,8 +24,8 @@
PrintTextInput('Имя пользователя:','lgn','~login~', 3, 31 ); PrintTextInput('Имя пользователя:','lgn','~login~', 3, 31 );
PrintTextInput('Пароль пользователя:','psn','~pass~', 5, 31 ); PrintTextInput('Пароль пользователя:','psn','~pass~', 5, 31 );
PrintCheckBox('Включить OTA обновление','ota','~ota~',null);</script></table> PrintCheckBox('Включить OTA обновление','ota','~ota~',null);</script></table>
<table class='cntr'><tr><td align="center">URL файла обновления:</td></tr> <table class='cntr'><tr><td align="center">URL файла обновления:</td></tr></table>
<tr><td align="center"><textarea type="text" cols="40" raws="5" name='otaurl' title="64 символа" ">~otaurl~</textarea></td></tr> <table class='cntr'><tr><td><textarea type="text" raws="5" name='otaurl' title="64 символа" ">~otaurl~</textarea></td></tr>
</table> </table>
<table class='cntr'><script> <table class='cntr'><script>
PrintSep(); PrintSep();
@ -93,4 +93,26 @@
linkColor.forEach(l => l.addEventListener('click', colorLink)) linkColor.forEach(l => l.addEventListener('click', colorLink))
</script> </script>
</body> </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> </html>

2
components/webguiapp

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