ElixirForge/WiFiManager
1
0
Fork 0
mirror of https://github.com/alexhopeoconnor/WiFiManager.git synced 2026-10-22 10:42:10 +10:00
Code Releases Activity

adds some style, clean up css, adds new tokens

Browse Source 
#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
Download Patch File Download Diff File Expand all files Collapse all files
extras/WiFiManager.template.html
+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 -->
extras/test.html
+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>