diff --git a/HTML/api/stat.json b/HTML/api/stat.json index 982b3cf..2a5c9f3 100644 --- a/HTML/api/stat.json +++ b/HTML/api/stat.json @@ -1,11 +1,14 @@ -{ -"ethstat":"~ethstat~", -"wfstat":"~wfstat~", -"gsmstat":"~gsmstat~", -"lrstat":"~lrstat~", -"mqtt1st":"~mqtt1st~", -"mqtt2st":"~mqtt2st~", -"defadp":"~defadp~", -"freeram":"~freeram~", -"minram":"~minram~" +{ +"ethstat":"~ethstat~", +"wfstat":"~wfstat~", +"gsmstat":"~gsmstat~", +"lrstat":"~lrstat~", +"mqtt1st":"~mqtt1st~", +"mqtt2st":"~mqtt2st~", +"defadp":"~defadp~", +"freeram":"~freeram~", +"minram":"~minram~", +"fver":"~fver~", +"fverav":"~fverav~", +"updstat":"~updstat~" } \ No newline at end of file diff --git a/HTML/res/styles.css b/HTML/res/styles.css index 61a159b..5159eae 100644 --- a/HTML/res/styles.css +++ b/HTML/res/styles.css @@ -1,374 +1,375 @@ -/*========== VARIABLES CSS ==========*/ -@import "./appstyles.css"; -:root { - --header-height: 50px; - --nav-width: 200px; - /*========== z index ==========*/ - --z-fixed: 100; -} - -@media screen and (min-width: 1024px) { - :root { - --normal-font-size: 1.0rem; - --small-font-size: .9rem; - --smaller-font-size: .8rem; - } -} - -/*========== BASE ==========*/ -*, ::before, ::after { - box-sizing: border-box; -} - -body { - margin: var(--header-height) 0 0 0; - padding: 0 0 0; - font-family: var(--body-font); - font-size: var(--normal-font-size); - background-color: var(--body-color); - color: var(--text-color); -} - -h3 { - margin: 0; -} - -a { - text-decoration: none; -} - -img { - max-width: 100%; - height: auto; -} - -/*========== HEADER ==========*/ -.header { - position: fixed; - top: 0; - left: 0; - width: 100%; - background-color: var(--header-color); - box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1); - padding: 0 1rem; - z-index: var(--z-fixed); -} - -.header__container { - display: flex; - align-items: center; - height: var(--header-height); - justify-content: space-between; -} - -.header__img { - width: 35px; - height: 35px; - border-radius: 5%; -} - -.header__logo { - color: var(--title-color); - font-weight: var(--font-medium); - font-size: var(--large-font-size); - - margin-left: 150px; - display: none; -} - -.header__icon, -.header__toggle { - font-size: 1.2rem; -} - -.header__toggle { - color: var(--title-color); - cursor: pointer; -} - -/*========== NAV ==========*/ -.nav { - position: fixed; - top: 0; - left: -100%; - height: 100vh; - padding: 1rem 1rem 0; - background-color: var(--container-color); - box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1); - z-index: var(--z-fixed); - transition: .4s; -} - -.nav__container { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - padding-bottom: 3rem; - overflow: auto; - scrollbar-width: none; /* For mozilla */ -} - -/* For Google Chrome and others */ -.nav__container::-webkit-scrollbar { - display: none; -} - -.nav__logo { - font-weight: var(--font-semi-bold); - margin-bottom: 2.5rem; -} - -.nav__list, -.nav__items { - display: grid; -} - -.nav__list { - row-gap: 2.5rem; -} - -.nav__items { - row-gap: 1.5rem; -} - -.nav__subtitle { - font-size: var(--normal-font-size); - text-transform: uppercase; - letter-spacing: .1rem; - color: var(--text-color-light); -} - -.nav__link { - display: flex; - align-items: center; - color: var(--text-color); -} - -.nav__link:hover { - color: var(--first-color); -} - -.nav__icon { - font-size: 1.2rem; - margin-right: .5rem; -} - -.nav__name { - font-size: var(--small-font-size); - font-weight: var(--font-medium); - white-space: nowrap; -} - -.nav__logout { - margin-top: 5rem; -} - -/* Dropdown */ -.nav__dropdown { - overflow: hidden; - max-height: 21px; - transition: .4s ease-in-out; -} - -.nav__dropdown-collapse { - background-color: var(--first-color-light); - border-radius: .5rem; - margin-top: 1rem; -} - -.nav__dropdown-content { - display: grid; - row-gap: .5rem; - padding: .75rem 2.5rem .75rem 2.5rem; -} - -.nav__dropdown-item { - font-size: var(--small-font-size); - font-weight: var(--font-medium); - color: var(--text-color); - margin: 3px 3px; -} - -.nav__dropdown-item:hover { - color: var(--first-color); -} - -.nav__dropdown-icon { - margin-left: auto; - transition: .4s; -} - -/* Show dropdown collapse */ -.nav__dropdown:hover { - max-height: 100rem; -} - -/* Rotate icon arrow */ -.nav__dropdown:hover .nav__dropdown-icon { - transform: rotate(180deg); -} - -/*===== Show menu =====*/ -.show-menu { - left: 0; -} - -/*===== Active link =====*/ -.active { - color: var(--first-color); -} - -/* ========== MEDIA QUERIES ==========*/ -/* For small devices reduce search*/ -@media screen and (max-width: 320px) { - .header__search { - width: 70%; - } -} - -@media screen and (min-width: 768px) { - body { - padding: 0 0 0 4rem; - } - .header { - padding: 0 3rem 0 4rem; - } - .header__container { - height: var(--header-height); - } - .header__search { - width: 300px; - padding: .55rem .75rem; - } - .header__toggle { - display: none; - } - .header__logo { - display: block; - } - .header__img { - width: 40px; - height: 40px; - order: 1; - } - .nav { - left: 0; - padding: 1.2rem 1.2rem 0; - width: 4.0rem; /* Reduced navbar */ - } - .nav__items { - row-gap: 2.0rem; - } - .nav__icon { - font-size: 1.0rem; - } - - /* Element opacity */ - .nav__logo-name, - .nav__name, - .nav__subtitle, - .nav__dropdown-icon { - opacity: 0; - transition: .3s; - } - - - /* Navbar expanded */ - .nav:hover { - width: var(--nav-width); - - } - - /* Visible elements */ - .nav:hover .nav__logo-name { - opacity: 1; - } - .nav:hover .nav__subtitle { - opacity: 1; - } - .nav:hover .nav__name { - opacity: 1; - } - .nav:hover .nav__dropdown-icon { - opacity: 1; - } -} - -.rl{text-align:right;} - -input, .btn, .lab, textarea { - font:.85rem 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: 4.0rem; - margin:auto; - vertical-align: top; -} - -.stg td{width:auto;padding:1px;margin:0} -.stg input, select {height:25px} -input[type="radio"] { margin-top: -1px; vertical-align: middle;} -.stg table{margin: 5px auto} -.dot {height: 30px; - width: 30px; - background-color: #d0d0d0; - border-radius: 40%; - display: inline-block; - margin: 7px 20px} - -.cntr { - margin:auto; - font: .85rem consolas, monospace;} - -.mlhdr { - font:16px consolas,monospace; - font-weight:bold; - color: var(--title-color); - margin: auto; -} - -.mlp { - break-inside: avoid; -} -.mlpc { - margin: 0 0 10px 10px; - padding: 10px; - border:solid 1px #CCCCCC; -} - -.ml { - column-count: 1; - column-gap: 0; - padding: 10px 10px 0 0; -} -@media (min-width: 900px) { - .ml { - column-count: 2; - } -} -@media (min-width: 1400px) { - .ml { - column-count: 3; - } -} - -.hide{ - display:none; -} - - - - +/*========== VARIABLES CSS ==========*/ +@import "./appstyles.css"; +:root { + --header-height: 50px; + --nav-width: 200px; + /*========== z index ==========*/ + --z-fixed: 100; +} + +@media screen and (min-width: 1024px) { + :root { + --normal-font-size: 1.0rem; + --small-font-size: .9rem; + --smaller-font-size: .8rem; + } +} + +/*========== BASE ==========*/ +*, ::before, ::after { + box-sizing: border-box; +} + +body { + margin: var(--header-height) 0 0 0; + padding: 0 0 0; + font-family: var(--body-font); + font-size: var(--normal-font-size); + background-color: var(--body-color); + color: var(--text-color); +} + +h3 { + margin: 0; +} + +a { + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; +} + +/*========== HEADER ==========*/ +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: var(--header-color); + box-shadow: 0 1px 0 rgba(22, 8, 43, 0.1); + padding: 0 1rem; + z-index: var(--z-fixed); +} + +.header__container { + display: flex; + align-items: center; + height: var(--header-height); + justify-content: space-between; +} + +.header__img { + width: 35px; + height: 35px; + border-radius: 5%; +} + +.header__logo { + color: var(--title-color); + font-weight: var(--font-medium); + font-size: var(--large-font-size); + + margin-left: 150px; + display: none; +} + +.header__icon, +.header__toggle { + font-size: 1.2rem; +} + +.header__toggle { + color: var(--title-color); + cursor: pointer; +} + +/*========== NAV ==========*/ +.nav { + position: fixed; + top: 0; + left: -100%; + height: 100vh; + padding: 1rem 1rem 0; + background-color: var(--container-color); + box-shadow: 1px 0 0 rgba(22, 8, 43, 0.1); + z-index: var(--z-fixed); + transition: .4s; +} + +.nav__container { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-bottom: 3rem; + overflow: auto; + scrollbar-width: none; /* For mozilla */ +} + +/* For Google Chrome and others */ +.nav__container::-webkit-scrollbar { + display: none; +} + +.nav__logo { + font-weight: var(--font-semi-bold); + margin-bottom: 2.5rem; +} + +.nav__list, +.nav__items { + display: grid; +} + +.nav__list { + row-gap: 2.5rem; +} + +.nav__items { + row-gap: 1.5rem; +} + +.nav__subtitle { + font-size: var(--normal-font-size); + text-transform: uppercase; + letter-spacing: .1rem; + color: var(--text-color-light); +} + +.nav__link { + display: flex; + align-items: center; + color: var(--text-color); +} + +.nav__link:hover { + color: var(--first-color); +} + +.nav__icon { + font-size: 1.2rem; + margin-right: .5rem; +} + +.nav__name { + font-size: var(--small-font-size); + font-weight: var(--font-medium); + white-space: nowrap; +} + +.nav__logout { + margin-top: 5rem; +} + +/* Dropdown */ +.nav__dropdown { + overflow: hidden; + max-height: 21px; + transition: .4s ease-in-out; +} + +.nav__dropdown-collapse { + background-color: var(--first-color-light); + border-radius: .5rem; + margin-top: 1rem; +} + +.nav__dropdown-content { + display: grid; + row-gap: .5rem; + padding: .75rem 2.5rem .75rem 2.5rem; +} + +.nav__dropdown-item { + font-size: var(--small-font-size); + font-weight: var(--font-medium); + color: var(--text-color); + margin: 3px 3px; +} + +.nav__dropdown-item:hover { + color: var(--first-color); +} + +.nav__dropdown-icon { + margin-left: auto; + transition: .4s; +} + +/* Show dropdown collapse */ +.nav__dropdown:hover { + max-height: 100rem; +} + +/* Rotate icon arrow */ +.nav__dropdown:hover .nav__dropdown-icon { + transform: rotate(180deg); +} + +/*===== Show menu =====*/ +.show-menu { + left: 0; +} + +/*===== Active link =====*/ +.active { + color: var(--first-color); +} + +/* ========== MEDIA QUERIES ==========*/ +/* For small devices reduce search*/ +@media screen and (max-width: 320px) { + .header__search { + width: 70%; + } +} + +@media screen and (min-width: 768px) { + body { + padding: 0 0 0 4rem; + } + .header { + padding: 0 3rem 0 4rem; + } + .header__container { + height: var(--header-height); + } + .header__search { + width: 300px; + padding: .55rem .75rem; + } + .header__toggle { + display: none; + } + .header__logo { + display: block; + } + .header__img { + width: 40px; + height: 40px; + order: 1; + } + .nav { + left: 0; + padding: 1.2rem 1.2rem 0; + width: 4.0rem; /* Reduced navbar */ + } + .nav__items { + row-gap: 2.0rem; + } + .nav__icon { + font-size: 1.0rem; + } + + /* Element opacity */ + .nav__logo-name, + .nav__name, + .nav__subtitle, + .nav__dropdown-icon { + opacity: 0; + transition: .3s; + } + + + /* Navbar expanded */ + .nav:hover { + width: var(--nav-width); + + } + + /* Visible elements */ + .nav:hover .nav__logo-name { + opacity: 1; + } + .nav:hover .nav__subtitle { + opacity: 1; + } + .nav:hover .nav__name { + opacity: 1; + } + .nav:hover .nav__dropdown-icon { + opacity: 1; + } +} + +.rl{text-align:right;} + +input, .btn, .lab, textarea { + font:.85rem 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: 4.0rem; + margin:auto; + vertical-align: top; + min-width: 350px; +} + +.stg td{width:auto;padding:1px;margin:0} +.stg input, select {height:25px} +input[type="radio"] { margin-top: -1px; vertical-align: middle;} +.stg table{margin: 5px auto} +.dot {height: 30px; + width: 30px; + background-color: #d0d0d0; + border-radius: 40%; + display: inline-block; + margin: 7px 20px} + +.cntr { + margin:auto; + font: .85rem consolas, monospace;} + +.mlhdr { + font:16px consolas,monospace; + font-weight:bold; + color: var(--title-color); + margin: auto; +} + +.mlp { + break-inside: avoid; +} +.mlpc { + margin: 0 0 10px 10px; + padding: 10px; + border:solid 1px #CCCCCC; +} + +.ml { + column-count: 1; + column-gap: 0; + padding: 10px 10px 0 0; +} +@media (min-width: 900px) { + .ml { + column-count: 2; + } +} +@media (min-width: 1400px) { + .ml { + column-count: 3; + } +} + +.hide{ + display:none; +} + + + + diff --git a/HTML/system.html b/HTML/system.html index 6c3a418..6582f8a 100644 --- a/HTML/system.html +++ b/HTML/system.html @@ -40,19 +40,19 @@