adds some style, clean up css, adds new tokens

#415
This commit is contained in:
Shawn A
2017-09-08 16:08:35 -05:00
parent a93b601cd7
commit 81b37dfffc
4 changed files with 201 additions and 53 deletions
+25 -5
View File
@@ -560,15 +560,18 @@ void WiFiManager::handleWifi(boolean scan) {
DEBUG_WM(WiFi.SSID(indices[i]));
DEBUG_WM(WiFi.RSSI(indices[i]));
int quality = getRSSIasQuality(WiFi.RSSI(indices[i]));
uint8_t enc_type = WiFi.encryptionType(indices[i]);
if (_minimumQuality == -1 || _minimumQuality < quality) {
String item = FPSTR(HTTP_ITEM);
String rssiQ;
rssiQ += quality;
item.replace("{v}", WiFi.SSID(indices[i]));
item.replace("{r}", rssiQ);
item.replace("{q}", (String)round(map(quality,0,100,1,4)));
if (WiFi.encryptionType(indices[i]) != ENC_TYPE_NONE) {
item.replace("{v}", WiFi.SSID(indices[i])); // ssid no encoding
item.replace("{R}", (String)WiFi.RSSI(indices[i])); // rssi
item.replace("{e}", encryptionTypeStr(enc_type));
item.replace("{r}", rssiQ); // qualitypercent
item.replace("{q}", (String)round(map(quality,0,100,1,4))); //quality icon 1-4
if (enc_type != ENC_TYPE_NONE) {
item.replace("{i}", "l");
} else {
item.replace("{i}", "");
@@ -616,7 +619,7 @@ void WiFiManager::handleWifi(boolean scan) {
snprintf(parLength, 5, "%d", _params[i]->getValueLength());
pitem.replace("{l}", parLength);
pitem.replace("{v}", _params[i]->getValue());
pitem.replace("{c}", _params[i]->getCustomHTML());
pitem.replace("{c}", _params[i]->getCustomHTML()); // additional attributes not html
} else {
pitem = _params[i]->getCustomHTML();
}
@@ -929,6 +932,23 @@ boolean WiFiManager::validApPassword(){
return true;
}
String WiFiManager::encryptionTypeStr(uint8_t authmode) {
switch(authmode) {
case ENC_TYPE_NONE:
return "None";
case ENC_TYPE_WEP:
return "WEP";
case ENC_TYPE_TKIP:
return "WPA_PSK";
case ENC_TYPE_CCMP:
return "WPA2_PSK";
case ENC_TYPE_AUTO:
return "WPA_WPA2_PSK";
default:
return "Unknown";
}
}
// set mode without persistent
bool WiFiManager::wifimode(WiFiMode_t m) {
if(wifi_get_opmode() == (uint8) m) {
+15 -5
View File
@@ -24,15 +24,24 @@ extern "C" {
const char HTTP_HEAD[] PROGMEM = "<!DOCTYPE html><html lang='en'><head><meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'/><title>{v}</title>";
// const char HTTP_STYLE[] PROGMEM = "<style>.c{text-align: center;} div,input{padding:5px;font-size:1em;} input{width:95%;} body{text-align: center;font-family:verdana;} button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;} .q{float: right;width: 64px;text-align: right;} .l{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==') no-repeat left center;background-size: 1em;}</style>";
const char HTTP_STYLE[] PROGMEM = "<style>.c,body{text-align:center;font-family:verdana}div,input{padding:5px;font-size:1em}input{width:95%}button{border:0;border-radius:.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%}a{color:#000;font-weight:700;text-decoration:none}a:hover{color:#1fa3ec;text-decoration:underline}.q{height:16px;margin:0;padding:0 5px;text-align:right;min-width:38px}.q.q-0:after{background-position-x:0}.q.q-1:after{background-position-x:-16px}.q.q-2:after{background-position-x:-32px}.q.q-3:after{background-position-x:-48px}.q.q-4:after{background-position-x:-64px}.q.l:before{background-position-x:-80px;padding-right:5px}.left .q{float:left}.right .q{float:right}.invert .q{-webkit-filter:invert(1);filter:invert(1)}.q:after,.q:before{content:\"\";width:16px;height:16px;display:inline-block;background-repeat:no-repeat;background-position: 16px 0;"
const char HTTP_STYLE[] PROGMEM = "<style>"
".c,body{text-align:center;font-family:verdana}div,input{padding:5px;font-size:1em}input{width:95%;margin:5px 0}button{border:0;border-radius:.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%}"
".wrap {text-align:left;display:inline-block;min-width:260px}"
// links
"a{color:#000;font-weight:700;text-decoration:none}a:hover{color:#1fa3ec;text-decoration:underline}"
// quality icons
".q{height:16px;margin:0;padding:0 5px;text-align:right;min-width:38px;float:right}.q.q-0:after{background-position-x:0}.q.q-1:after{background-position-x:-16px}.q.q-2:after{background-position-x:-32px}.q.q-3:after{background-position-x:-48px}.q.q-4:after{background-position-x:-64px}.q.l:before{background-position-x:-80px;padding-right:5px}.ql .q{float:left}.qinv .q{-webkit-filter:invert(1);filter:invert(1)}.q:after,.q:before{content:'';width:16px;height:16px;display:inline-block;background-repeat:no-repeat;background-position: 16px 0;"
"background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pzcAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoAQ3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');}"
// @2x media query (32px rescaled)
// icons @2x media query (32px rescaled)
"@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.q:before,.q:after {"
"background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');"
"background-size: 95px 16px;}}"
// msg callouts
".msg{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px;border-left-color:#777}.msg h4{margin-top:0;margin-bottom:5px}.msg.P{border-left-color:#1fa3ec}.msg.P h4{color:#1fa3ec}.msg.D{border-left-color:#d9534f}.msg.D h4{color:#d9534f}"
"</style>";
const char HTTP_SCRIPT[] PROGMEM = "<script>function c(l){document.getElementById('s').value=l.innerText||l.textContent;document.getElementById('p').focus();}</script>";
const char HTTP_HEAD_END[] PROGMEM = "</head><body><div class='right' style='text-align:left;display:inline-block;min-width:260px;'>";
const char HTTP_HEAD_END[] PROGMEM = "</head><body><div class='wrap'>";
const char HTTP_PORTAL_OPTIONS[] PROGMEM = "<form action='/wifi' method='GET'><button>Configure WiFi</button></form><br/><form action='/0wifi' method='GET'><button>Configure WiFi (No Scan)</button></form><br/><form action='/i' method='GET'><button>Info</button></form><br/><form action='/r' method='GET'><button>Restart</button></form>";
const char HTTP_ITEM[] PROGMEM = "<div><a href='#p' onclick='c(this)'>{v}</a><div role='img' aria-label='{r}%' title='{r}%' class='q q-{q} {i}'></div></div>";
//const char HTTP_ITEM_PADLOCK[] PROGMEM = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==' width='13px'/>";
@@ -40,8 +49,8 @@ const char HTTP_FORM_START[] PROGMEM = "<form method='POST' action='wifisav
const char HTTP_FORM_LABEL[] PROGMEM = "<label for='{i}'>{p}</label>";
const char HTTP_FORM_PARAM[] PROGMEM = "<br/><input id='{i}' name='{n}' maxlength={l} placeholder='{p}' value='{v}' {c}>";
const char HTTP_FORM_END[] PROGMEM = "<br/><button type='submit'>Save</button></form>";
const char HTTP_SCAN_LINK[] PROGMEM = "<br/><div class='c'><a href='/wifi'>Scan</a></div>";
const char HTTP_SAVED[] PROGMEM = "<div>Credentials Saved<br />Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>";
const char HTTP_SCAN_LINK[] PROGMEM = "<br/><form action='/wifi' method='get'><button>Refresh</button></form>";
const char HTTP_SAVED[] PROGMEM = "<div class='msg'>Saving Credentials<br/>Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>";
const char HTTP_END[] PROGMEM = "</div></body></html>";
#define WIFI_MANAGER_MAX_PARAMS 10
@@ -208,6 +217,7 @@ class WiFiManager
boolean isIp(String str);
String toStringIp(IPAddress ip);
boolean validApPassword();
String encryptionTypeStr(uint8_t authmode);
boolean connect;
boolean configPortalActive = false;
+157 -39
View File
@@ -6,15 +6,125 @@
<title>{v}</title>
<!-- /HTTP_HEAD -->
<!-- HTTP_STYLE -->
<style>
.c{text-align: center;}
div,input{padding:5px;font-size:1em;}
input{width:95%;}
body{text-align: center;font-family:verdana;}
button{border:0;border-radius:0.3rem;background-color:#1fa3ec;color:#fff;line-height:2.4rem;font-size:1.2rem;width:100%;}
.q{float: right;width: 64px;text-align: right;}
.l{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==") no-repeat left center;background-size: 1em;}
</style>
<style>
.c,
body {
text-align: center;
font-family: verdana
}
.wrap {
text-align:left;
display:inline-block;
min-width:260px;
}
div,
input {
padding: 5px;
font-size: 1em;
}
input {
width: 95%;
margin:5px 0;
}
button {
border: 0;
border-radius: .3rem;
background-color: #1fa3ec;
color: #fff;
line-height: 2.4rem;
font-size: 1.2rem;
width: 100%;
}
a {
color: #000;
font-weight: 700;
text-decoration: none;
}
a:hover {
color: #1fa3ec;
text-decoration: underline;
}
.q {
height: 16px;
margin: 0;
padding: 0 5px;
text-align: right;
min-width: 38px;
float:right;
}
.q.q-0:after {
background-position-x: 0;
}
.q.q-1:after {
background-position-x: -16px;
}
.q.q-2:after {
background-position-x: -32px;
}
.q.q-3:after {
background-position-x: -48px;
}
.q.q-4:after {
background-position-x: -64px;
}
.q.l:before {
background-position-x: -80px;
padding-right: 5px
}
.ql .q {
float: left;
}
.qinv .q {
-webkit-filter: invert(1);
filter: invert(1);
}
.q:after,
.q:before {
content: '';width:16px;height:16px;display:inline-block;background-repeat:no-repeat;background-position: 16px 0;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAQCAMAAADeZIrLAAAAJFBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADHJj5lAAAAC3RSTlMAIjN3iJmqu8zd7vF8pzcAAABsSURBVHja7Y1BCsAwCASNSVo3/v+/BUEiXnIoXkoX5jAQMxTHzK9cVSnvDxwD8bFx8PhZ9q8FmghXBhqA1faxk92PsxvRc2CCCFdhQCbRkLoAQ3q/wWUBqG35ZxtVzW4Ed6LngPyBU2CobdIDQ5oPWI5nCUwAAAAASUVORK5CYII=');
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.q:before,
.q:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');
background-size: 95px 16px;
}
}
.msg {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
border-left-color: #777;
}
.msg h4 {
margin-top: 0;
margin-bottom: 5px;
}
.msg.P {
border-left-color: #1fa3ec;
}
.msg.P h4 {
color: #1fa3ec;
}
/*.msg.S {
border-left-color: #5cb85c;
}
.msg.S h4 {
color: #5cb85c;
}*/
.msg.D {
border-left-color: #d9534f;
}
.msg.D h4 {
color: #d9534f;
}
</style>
<!-- /HTTP_STYLE -->
<!-- HTTP_SCRIPT -->
<script>
@@ -24,53 +134,61 @@
<!-- HTTP_HEAD_END -->
</head>
<body>
<div style="text-align:left;display:inline-block;min-width:260px;">
<div class='wrap'>
<!-- /HTTP_HEAD_END -->
<!--
<div><a href='#' onclick='c(this)'>{v}</a> {r}% {i}</div>
<div><a href='#' onclick='c(this)'>{v}</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAMAAAC+Ge+yAAAACVBMVEUAAAC7u7v///9etNz6AAAAI0lEQVQI133GsQ3AMAAEoXv2H9qNJacKFbEaWTQJ+uQB/nMdEaYAXeJkZ9AAAAAASUVORK5CYII='/></div>
<div><a href='#' onclick='c(this)'>Vila17</a> 95% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAADFBMVEUAAAAAtgD///8AAADV1YIHAAAAA3RSTlMAAAD6dsTeAAAAHUlEQVR4AWMAAmYgYGBkArHAAMoEYnQmMxSQywQAKvMA3+mlSFAAAAAASUVORK5CYII='/></div>
<div><a href='#'>LilRid</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAABlBMVEUAAAD///+l2Z/dAAAAIklEQVR4AWNgZGRkAAIQBURQDEZAgM5kgAJGEAQDwkxkbQAOhgBBk64+mQAAAABJRU5ErkJggg=='/></div>
<div><a href='#'>Marcelica</a> 100% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAACVBMVEUAAAC7u7v///9etNz6AAAAJ0lEQVR4AY3GsREAIBSDUD77D63x4tlKw0MdmD0ijTO9f6SFnv7YXB4qAIVn0xoMAAAAAElFTkSuQmCC'/></div>
<div><a href='#'>PMica</a> 110% <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==' width="13px"/></div>
-->
<!--style>
.q{float: right;width: 64px;text-align: right;}
.l{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAALVBMVEX///8EBwfBwsLw8PAzNjaCg4NTVVUjJiZDRUUUFxdiZGSho6OSk5Pg4eFydHTCjaf3AAAAZElEQVQ4je2NSw7AIAhEBamKn97/uMXEGBvozkWb9C2Zx4xzWykBhFAeYp9gkLyZE0zIMno9n4g19hmdY39scwqVkOXaxph0ZCXQcqxSpgQpONa59wkRDOL93eAXvimwlbPbwwVAegLS1HGfZAAAAABJRU5ErkJggg==") no-repeat left center;background-size: 1em;}
</style-->
<!-- SAMPLE -->
<h2>/</h2><hR>
<!-- /SAMPLE -->
<!-- HTTP_PORTAL_OPTIONS -->
<form action=\"/wifi\" method=\"get\"><button>Configure WiFi</button></form><br/><form action=\"/0wifi\" method=\"get\"><button>Configure WiFi (No Scan)</button></form><br/><form action=\"/i\" method=\"get\"><button>Info</button></form><br/><form action=\"/r\" method=\"post\"><button>Reset</button></form>
<form action='/wifi' method='get'><button>Configure WiFi</button></form><br/><form action='/0wifi' method='get'><button>Configure WiFi (No Scan)</button></form><br/><form action='/i' method='get'><button>Info</button></form><br/><form action='/r' method='post'><button>Restart</button></form>
<!-- /HTTP_PORTAL_OPTIONS -->
<div><a href='#' onclick='c(this)'>{v}</a> <span class="q {i}">{r}%</span></div>
<div><a href='#'>PMisa</a> <span class="q l">100%</span> </div>
<div><a href='#'>Dragos_Networks</a>&nbsp;<span class="q l">10%</span> </div>
<div><a href='#'>PMisa</a> <span class="q l">8%</span> </div>
<!-- SAMPLE -->
<h2>/wifi</h2><hr>
<div><a href='#p' onclick='c(this)'>Acccess Point 01</a><div role='img' aria-label='88%' title='88%' class='q q-4 l'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 02</a><div role='img' aria-label='88%' title='88%' class='q q-4'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 03</a><div role='img' aria-label='60%' title='60%' class='q q-3 l'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 04</a><div role='img' aria-label='60%' title='60%' class='q q-3'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 05</a><div role='img' aria-label='60%' title='60%' class='q q-3'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 06</a><div role='img' aria-label='40%' title='40%' class='q q-2'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 07</a><div role='img' aria-label='40%' title='40%' class='q q-2 l'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 08</a><div role='img' aria-label='20%' title='20%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 09</a><div role='img' aria-label='20%' title='20%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 10</a><div role='img' aria-label='20%' title='20%' class='q q-1'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 11</a><div role='img' aria-label='10%' title='10%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 12</a><div role='img' aria-label='10%' title='10%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 13</a><div role='img' aria-label='10%' title='10%' class='q q-0'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 14</a><div role='img' aria-label='10%' title='10%' class='q q-0 l'></div></div>
<!-- /SAMPLE -->
<!-- HTTP_ITEM -->
<div><a href='#p' onclick='c(this)'>{v}</a>&nbsp;<span class='q {i}'>{r}%</span></div>
<div><a href='#p' onclick='c(this)'>{v}</a><div role='img' aria-label='{r}%' title='{r}%' class='q q-{q} {i}'></div></div>
<!-- /HTTP_ITEM -->
<!-- HTTP_FORM_START -->
<form method='get' action='wifisave'><input id='s' name='s' length=32 placeholder='SSID'><br/><input id='p' name='p' length=64 type='password' placeholder='password'><br/>
<!-- /HTTP_FORM_START -->
<!-- SAMPLE -->
<h3>custom parameter</h3><hr>
<br/><label for='custom'>Label for Custom Param</label>
<br/><input id='custom' name='custom' length='255' placeholder='placeholder' value='' {c}>
<!-- /SAMPLE -->
<!-- HTTP_FORM_LABEL -->
<br/><label for='{i}'>{p}</label>
<!-- /HTTP_FORM_LABEL -->
<!-- HTTP_FORM_PARAM -->
<br/><input id='{i}' name='{n}' length='{l}' placeholder='{p}' value='{v}' {c}>
<!-- /HTTP_FORM_PARAM -->
<!-- HTTP_FORM_END -->
<br/><button type='submit'>save</button></form>
<br/><button type='submit'>Save</button></form>
<!-- /HTTP_FORM_END -->
<!-- HTTP_SCAN_LINK -->
<br/><div class=\"c\"><a href=\"/wifi\">Scan</a></div>
<br/><form action='/wifi' method='get'><button>Refresh</button></form>
<!-- /HTTP_SCAN_LINK -->
<!-- HTTP_SAVED -->
<div>Credentials Saved<br />Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>
<div class='msg P'><h4>Saving Credentials</h4>Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>
<!-- /HTTP_SAVED -->
<!-- SAMPLE -->
<div class='msg'><h4>Information</h4>Connected to AP: homeAP</div>
<div class='msg D'><h4>Connect Failed</h4>An error occured</div>
<!-- /SAMPLE -->
<!-- HTTP_END -->
+4 -4
View File
@@ -92,15 +92,15 @@ a:hover {
padding-right: 5px
}
.left .q {
.ql .q {
float: left
}
.right .q {
.qr .q {
float: right
}
.invert .q {
.qinv .q {
-webkit-filter: invert(1);
filter: invert(1)
}
@@ -130,7 +130,7 @@ a:hover {
<body>
<!-- classes, left/right invert -->
<div class="right" style='text-align:left;display:inline-block;min-width:260px;'>
<div class="qr" style='text-align:left;display:inline-block;min-width:260px;'>
<div><a href='#p' onclick='c(this)'>Acccess Point 01</a><div role='img' aria-label='88%' title='88%' class='q q-4 l'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 02</a><div role='img' aria-label='88%' title='88%' class='q q-4'></div></div>
<div><a href='#p' onclick='c(this)'>Acccess Point 03</a><div role='img' aria-label='88%' title='88%' class='q q-3'></div></div>