pm
/
ESP-1ch-Gateway


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
							<!-- HTTP_HEAD -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/>
		<title>{v}</title>
<!-- /HTTP_HEAD -->
<!-- HTTP_STYLE -->
<style>

:root{
	 /* CSS VARIABLE THEME COLOR */
	/*--primarycolor:#9933CC;*/
	--primarycolor:#1fa3ec;
}

body.invert,
body.invert a,
body.invert h1 {
	background-color:#060606;
	color:white;
}
body.invert .msg{
	background-color: #282828;
	border-top: 1px solid #555;
	border-right: 1px solid #555;
	border-bottom: 1px solid #555;
	color:#fff;
}
body.invert .q[role=img] {
    -webkit-filter: invert(1);
    filter: invert(1);
}
.c,
body {
    text-align: center;
    font-family: verdana
}
.wrap {
	text-align:left;
	display:inline-block;
	min-width:260px;
	max-width:500px;
}
div,
input {
    padding: 5px;
    font-size: 1em;
    /*width: 100%;*/
    margin:5px 0;
	box-sizing: border-box;
}
input,button,.msg{
	border-radius:.3rem;
    width: 100%;
}
button,input[type="button"],input[type="submit"] {
    border: 0;
    background-color: var(--primarycolor);
    color: #fff;
    line-height: 2.4rem;
    font-size: 1.2rem;
}
input[type="file"]{
	border: 1px solid var(--primarycolor);
}
a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
}
a:hover {
    color: var(--primarycolor);
    text-decoration: underline;
}
.h {
	display: none;
}
.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;
}

.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-left-color: #777;
}

.msg h4 {
    margin-top: 0;
	margin-bottom: 5px;
}
.msg.P {
    border-left-color: var(--primarycolor);
}
.msg.P h4 {
    color: var(--primarycolor);
}
/*.msg.S {
    border-left-color: #5cb85c;
}
.msg.S h4 {
    color: #5cb85c;
}*/
.msg.D {
    border-left-color: #dc3630;
}
.msg.D h4 {
    color: #dc3630;
}

dt {
	font-weight: bold;
}
dd {
	margin: 0;
	padding: 0 0 0.5em 0;
}
td {
	vertical-align: top;
}
button.D{
	background-color:#dc3630;
}

input:disabled {
	opacity: 0.5;
}

</style>
<!-- /HTTP_STYLE -->
<!-- HTTP_SCRIPT -->
		<script>
		function c(l){document.getElementById('s').value=l.innerText||l.textContent;
		p = l.nextElementSibling.classList.contains('l');
		document.getElementById('p').disabled = !p;
		if(p)document.getElementById('p').focus()};
		</script>
<!-- /HTTP_SCRIPT -->
<!-- HTTP_HEAD_END -->
	</head>
	<body class="invert">
		<div class='wrap'>
		<!-- <div class='wrap ql qinv'> -->
<!-- /HTTP_HEAD_END -->
			<!-- SAMPLE -->
			<h2>/</h2><hR>
			<!-- /SAMPLE -->
			<!-- HTTP_PORTAL_OPTIONS -->
			<!-- /HTTP_PORTAL_OPTIONS -->
			<!-- HTTP_PORTAL_MENU[] -->
			<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='/info' method='get'><button>Info</button></form><br/>
			<form action='/param' method='get'><button>Setup</button></form><br/>
			<Hr><br/>
			<form action='/close' method='post'><button>Close</button></form><br/>
			<form action='/erase' method='post'><button class='D'>Erase</button></form><br/>
			<form action='/restart' method='post'><button>Restart</button></form><br/>
			<form action='/exit' method='post'><button>Exit</button></form><br/>
			<!-- /HTTP_PORTAL_MENU -->
			<!-- 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-4 l'></div><div class='q '>100%</div></div>
			<div><a href='#p' onclick='c(this)'>Acccess Point 11</a><div role='img' aria-label='10%' title='10%' class='q q-3'></div><div class='q '>70%</div></div>
			<div><a href='#p' onclick='c(this)'>Acccess Point 12</a><div role='img' aria-label='10%' title='10%' class='q q-1 l'></div><div class='q '>10%</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 h'></div><div class='q '>100%</div></div>
			<div><a href='#p' onclick='c(this)'>Acccess Point 14</a><div class='q'>66%</div></div>
			<div><a href='#p' onclick='c(this)'>Acccess Point 15</a><div class='q'>56%</div></div>
			<!-- /SAMPLE -->
			<!-- HTTP_ITEM -->
			<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'><label for='s'>SSID</label><br/><input id='s' name='s' length=32 placeholder='SSID'><br/><label for='p'>Password</label><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>
			<!-- /HTTP_FORM_END -->
			<!-- HTTP_SCAN_LINK -->
			<br/><form action='/wifi' method='get'><button>Refresh</button></form>
			<!-- /HTTP_SCAN_LINK -->
			<!-- HTTP_SAVED -->
			<div class='msg'><h4>Saving Credentials</h4>Trying to connect ESP to network.<br />If it fails reconnect to AP to try again</div>
			<!-- /HTTP_SAVED -->
			<!-- HTTP_STATUS_ON -->
			<div class='msg P'><strong>Connected</strong> to {v}<br/><em><small>with IP {i}</small></em></div>
			<!-- /HTTP_STATUS_ON -->     	
			<!-- HTTP_STATUS_OFF -->
			<div class='msg {c}'><strong>Not Connected</strong> to {v}{r}</div>
			<!-- /HTTP_STATUS_OFF --> 
			<!-- sample -->
			<div class='msg D'><strong>Not Connected</strong> to apname
			<!-- /sample -->
			<!-- HTTP_STATUS_OFFPW -->
				<br/>Authentication Failure
			<!-- /HTTP_STATUS_OFFPW -->
			<!-- HTTP_STATUS_OFFNOAP -->
				<br/>AP not found
			<!-- /HTTP_STATUS_OFFNOAP -->	
			<!-- HTTP_STATUS_OFFFAIL -->
				<br/>Could not Connect
			<!-- /HTTP_STATUS_OFFFAIL -->	
			</div>
			<!-- HTTP_STATUS_NONE -->
			<div class='msg'>No AP set</div>
			<!-- /HTTP_STATUS_NONE -->
			<!-- SAMPLE -->
			<div class='msg P'><h4>H4 Color Header</h4>content</div>
			<!-- /SAMPLE -->
			<!-- SAMPLE -->
			<h2>/info</h3><hr>
			<dl>
				<dt>Chip ID</dt><dd>123456</dd>
				<dt>Flash Chip ID</dt><dd>1234556</dd>
				<dt>IDE Flash Size</dt><dd>4194304 bytes</dd>
				<dt>Real Flash Size</dt><dd>4194304 bytes</dd>
				<dt>Empty</dt><dd></dd>
				<dt>Soft AP IP</dt><dd>192.168.4.1</dd>
				<dt>Soft AP MAC</dt><dd>00:00:00:00:00:00</dd>
				<dt>Station MAC</dt><dd>00:00:00:00:00:00</dd>
			</dl>
			<!-- /SAMPLE -->
			<!-- HTTP_HELP -->
		 		<br/><h3>Available Pages</h3><hr>
		 		<table class='table'>
		 		<thead><tr><th>Page</th><th>Function</th></tr></thead><tbody>
		 		<tr><td><a href='/'>/</a></td>
		 		<td>Menu page.</td></tr>
		 		<tr><td><a href='/wifi'>/wifi</a></td>
		 		<td>Show WiFi scan results and enter WiFi configuration.(/0wifi noscan)</td></tr>
		 		<tr><td><a href='/wifisave'>/wifisave</a></td>
		 		<td>Save WiFi configuration information and configure device. Needs variables supplied.</td></tr>
		 		<tr><td><a href='/close'>/close</a></td>
		 		<td>Close the configuration server and configuration WiFi network.</td></tr>
		 		<tr><td><a href='/info'>/info</a></td>
		 		<td>Information page</td></tr>
 				<tr><td><a href='/close'>/close</a></td>
 				<td>Close the captiveportal popup,configportal will remain active</td></tr>
		 		<tr><td><a href='/exit'>/exit</a></td>
		 		<td>Exit Config Portal, configportal will close</td></tr>
		 		<tr><td><a href='/restart'>/restart</a></td>
		 		<td>Reboot the device</td></tr>
		 		<tr><td><a href='/erase'>/erase</a></td>
		 		<td>Erase WiFi configuration and reboot Device. Device will not reconnect to a network until new WiFi configuration data is entered.</td></tr>
		 		</table>
		 		<p/>More information about WiFiManager at <a href='https://github.com/tzapu/WiFiManager'>https://github.com/tzapu/WiFiManager</a>
			<!-- /HTTP_HELP -->
			<!-- FORM_UPLOAD -->
			<Br/><br/>Form UPLOAD<br/><form method='POST' action='u' enctype='multipart/form-data'><input type='file' name='update' accept='.bin,application/octet-stream'><button type='submit' value='Submit'>Submit</button></form>
			<!-- /FORM_UPLOAD -->	

<!-- HTTP_END -->
    </div>
	</body>
</html>
<!-- /HTTP_END -->