most of the wifi functionality working, + new style

html/css/app.css

@@ -0,0 +1,588 @@
+/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+*, *:before, *:after {
+  box-sizing: border-box; }
+
+html {
+  font-family: sans-serif;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/**
+ * Remove default margin.
+ */
+body {
+  margin: 0; }
+
+/* HTML5 display definitions
+   ========================================================================== */
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+figure,
+nav
+ {
+  display: block; }
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+canvas,
+progress
+ {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+[hidden]
+ {
+  display: none; }
+
+/* Links
+   ========================================================================== */
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+a {
+  background-color: transparent; }
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+a:active,
+a:hover {
+  outline: 0; }
+
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+b
+ {
+  font-weight: bold; }
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+h2 {
+  font-size: 2em;
+  margin: 0.67em 0; }
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+small {
+  font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline; }
+
+sup {
+  top: -0.5em; }
+
+sub {
+  bottom: -0.25em; }
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+img {
+  border: 0; }
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+svg:not(:root) {
+  overflow: hidden; }
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+  box-sizing: content-box;
+  height: 0; }
+
+/**
+ * Contain overflow in all browsers.
+ */
+pre {
+  overflow: auto; }
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+code,
+pre
+ {
+  font-family: monospace;
+  font-size: 1em; }
+
+/* Forms
+   ========================================================================== */
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+button,
+input,
+select,
+textarea {
+  color: inherit;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+  margin: 0;
+  /* 3 */ }
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+button {
+  overflow: visible; }
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+button,
+select {
+  text-transform: none; }
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+button,
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */
+  cursor: pointer;
+  /* 3 */ }
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+html input[disabled] {
+  cursor: default; }
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0; }
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+input {
+  line-height: normal; }
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+/**
+ * Define consistent border, margin, and padding.
+ */
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+textarea {
+  overflow: auto; }
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+/* Tables
+   ========================================================================== */
+/**
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+td,
+th {
+  padding: 0; }
+
+html {
+  box-sizing: border-box; }
+
+*, *::after, *::before {
+  box-sizing: inherit; }
+
+.hidden {
+  display: none !important; }
+
+[onclick] {
+  cursor: pointer; }
+
+html {
+  font-family: Arial, sans-serif;
+  color: #D0D0D0;
+  background: #131315; }
+
+html, body {
+  border: 0 none;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; }
+
+a, a:visited, a:link {
+  cursor: pointer;
+  color: #5abfff;
+  text-decoration: none; }
+
+a:hover {
+  color: #5abfff;
+  text-decoration: underline; }
+
+.Box {
+  display: block;
+  max-width: 900px;
+  margin-top: 1rem;
+  padding: 0.61805rem 1rem;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 0.07); }
+  @media screen and (max-width: 544px) {
+    .Box {
+      margin-top: 0.61805rem;
+      padding: 0.23608rem 0.38198rem; } }
+
+body {
+  position: relative;
+  padding: 1rem;
+  overflow-y: auto; }
+  @media screen and (max-width: 544px) {
+    body {
+      padding: 0.61805rem; } }
+  body > * {
+    margin-left: auto;
+    margin-right: auto; }
+  body h1 {
+    text-align: center;
+    font-size: 2.02729em;
+    margin-top: 0;
+    margin-bottom: 1rem; }
+    @media screen and (max-width: 544px) {
+      body h1 {
+        font-size: 1.42383em;
+        margin-bottom: 0.61805rem; } }
+    @media screen and (min-width: 545px) and (max-width: 1000px) {
+      body h1 {
+        font-size: 1.80203em; } }
+  body td, body th {
+    padding: 0.38198rem;
+    white-space: nowrap; }
+    @media screen and (max-width: 544px) {
+      body td, body th {
+        padding: 0.23608rem; } }
+  body tbody th {
+    text-align: right;
+    width: 130px;
+    color: white; }
+    @media screen and (max-width: 544px) {
+      body tbody th {
+        width: auto; } }
+  body tbody td input[type="text"], body tbody td input[type="number"] {
+    width: 10em; }
+    @media screen and (max-width: 544px) {
+      body tbody td input[type="text"], body tbody td input[type="number"] {
+        width: 8em; } }
+
+#loader {
+  position: absolute;
+  right: 1.618rem;
+  top: 1.618rem;
+  transition: opacity .2s;
+  opacity: 0; }
+  @media screen and (max-width: 544px) {
+    #loader {
+      top: 1rem;
+      right: 1rem; } }
+  #loader.show {
+    opacity: 1; }
+
+button, input[type=submit] {
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  border-radius: 2px;
+  padding: 0 0.6em;
+  border: 0 none;
+  outline: 0 none !important;
+  line-height: 1.8em;
+  font-size: 1.1em;
+  margin-bottom: 3px;
+  min-width: 5em;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.6);
+  background-color: #3983cd;
+  box-shadow: 0 3px 0 #265f98;
+  text-decoration: none !important; }
+  button:active, input[type=submit]:active {
+    position: relative;
+    top: 2px; }
+  button.narrow, input[type=submit].narrow {
+    min-width: initial; }
+  button, button:link, button:visited, input[type=submit], input[type=submit]:link, input[type=submit]:visited {
+    color: #FEFEFE; }
+  button:hover, button:active, button.active, button.selected, input[type=submit]:hover, input[type=submit]:active, input[type=submit].active, input[type=submit].selected {
+    background-color: #2076C6;
+    color: #FEFEFE; }
+  button:hover, button.selected, button.active, input[type=submit]:hover, input[type=submit].selected, input[type=submit].active {
+    box-shadow: 0 3px 0 #154c80; }
+  button:active, input[type=submit]:active {
+    box-shadow: 0 1px 0 #154c80; }
+
+button, input[type=submit] {
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  border-radius: 2px;
+  padding: 0 0.6em;
+  border: 0 none;
+  outline: 0 none !important;
+  line-height: 1.8em;
+  font-size: 1.1em;
+  margin-bottom: 3px;
+  min-width: 5em;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.6);
+  background-color: #3983cd;
+  box-shadow: 0 3px 0 #265f98;
+  text-decoration: none !important; }
+  button:active, input[type=submit]:active {
+    position: relative;
+    top: 2px; }
+  button.narrow, input[type=submit].narrow {
+    min-width: initial; }
+  button, button:link, button:visited, input[type=submit], input[type=submit]:link, input[type=submit]:visited {
+    color: #FEFEFE; }
+  button:hover, button:active, button.active, button.selected, input[type=submit]:hover, input[type=submit]:active, input[type=submit].active, input[type=submit].selected {
+    background-color: #2076C6;
+    color: #FEFEFE; }
+  button:hover, button.selected, button.active, input[type=submit]:hover, input[type=submit].selected, input[type=submit].active {
+    box-shadow: 0 3px 0 #154c80; }
+  button:active, input[type=submit]:active {
+    box-shadow: 0 1px 0 #154c80; }
+
+input[type="number"], input[type="password"], input[type="text"], textarea, select {
+  border: 0 none;
+  border-bottom: 2px solid #214e7a;
+  background-color: #303030;
+  color: white;
+  padding: 6px;
+  line-height: 1em;
+  outline: 0 none !important;
+  -moz-outline: 0 none !important;
+  font-weight: normal; }
+  input[type="number"]:focus, input[type="number"]:hover, input[type="password"]:focus, input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover, textarea:focus, textarea:hover, select:focus, select:hover {
+    border-bottom-color: #2972ba; }
+
+#ap-list {
+  column-count: 3;
+  column-gap: 0;
+  margin: 0 -0.23608rem; }
+  @media screen and (min-width: 545px) and (max-width: 1000px) {
+    #ap-list {
+      column-count: 2; } }
+  @media screen and (max-width: 544px) {
+    #ap-list {
+      column-count: 1; } }
+
+#ap-loader {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+  padding: 0.38198rem;
+  margin-bottom: 0.38198rem; }
+
+#ap-box {
+  padding-bottom: 0.38198rem; }
+
+.AP {
+  break-inside: avoid-column;
+  max-width: 500px;
+  padding: 0.23608rem; }
+  .AP.selected .inner {
+    background: #42a6f9 !important;
+    cursor: default;
+    top: 0 !important; }
+  .AP .inner {
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    position: relative;
+    border-radius: 3px;
+    color: #222;
+    background: #afafaf;
+    transition: background-color 0.5s;
+    display: flex; }
+    .AP .inner:active {
+      left: 0;
+      top: 1px; }
+    .AP .inner:hover {
+      background: white; }
+    .AP .inner > * {
+      padding: 0.61805rem;
+      white-space: nowrap;
+      word-wrap: normal; }
+    .AP .inner .rssi {
+      min-width: 2.5rem;
+      flex: 0 0 15%;
+      text-align: right; }
+      .AP .inner .rssi:after {
+        padding-left: 0.09018rem;
+        content: '%';
+        font-size: 0.88889em; }
+    .AP .inner .essid {
+      flex: 1 1 70%;
+      min-width: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      font-weight: bold; }
+    .AP .inner .auth {
+      flex: 0 0 15%; }
+
+.page-term #screen {
+  font-family: monospace;
+  font-size: 16pt;
+  white-space: nowrap;
+  background: #111213;
+  padding: 6px;
+  display: inline-block;
+  border: 2px solid #3983CD; }
+  .page-term #screen span {
+    white-space: pre;
+    cursor: pointer; }
+    .page-term #screen span:hover {
+      outline: 1px solid rgba(255, 255, 255, 0.5); }
+.page-term #buttons {
+  margin-top: 10px;
+  white-space: nowrap; }
+  .page-term #buttons button {
+    margin: 0 3px;
+    padding: 10px 0;
+    width: 18%;
+    max-width: 65px;
+    min-width: initial;
+    cursor: pointer;
+    font-weight: bold; }
+
+#termwrap {
+  text-align: center; }
+
+/*# sourceMappingURL=app.css.map */

html/script.js

@@ -1 +0,0 @@
-function mk(a){return document.createElement(a)}function q1(a){return document.querySelector(a)}function qa(a){return document.querySelectorAll(a)}(function(){var a,j;var k={a:false,x:0,y:0,suppress:false,hidden:false};var m=[];var f=["#111213","#CC0000","#4E9A06","#C4A000","#3465A4","#75507B","#06989A","#D3D7CF","#555753","#EF2929","#8AE234","#FCE94F","#729FCF","#AD7FA8","#34E2E2","#EEEEEC"];function n(){m.forEach(function(p,q){p.t=" ";p.fg=7;p.bg=0;c(p)})}function b(q,p){return m[q*a+p]}function h(){return b(k.y,k.x)}function o(p){k.hidden=!p;k.a&=p;c(h(),k.a)}function e(q,p){k.suppress=true;c(h(),false);k.x=p;k.y=q;k.suppress=false;c(h(),k.a)}function c(q,p){var t=q.e,r,s;r=p?q.bg:q.fg;s=p?q.fg:q.bg;t.innerText=(q.t+" ")[0];t.style.color=d(r);t.style.backgroundColor=d(s);t.style.fontWeight=r>7?"bold":"normal"}function g(){m.forEach(function(q,r){var p=k.a&&(r==k.y*a+k.x);c(q,p)})}function i(s){k.x=s.x;k.y=s.y;if(s.w!=a||s.h!=j){Term.init(s);return}var u=0,A=0,w=s.screen;var p=7,v=0;while(u<w.length&&A<a*j){var y=m[A++];var r=w[u];if(r!=","){p=y.fg=parseInt(w[u++],16);v=y.bg=parseInt(w[u++],16)}else{u++;y.fg=p;y.bg=v}var z=y.t=w[u++];var q=0;switch(w[u]){case"r":q=1;break;case"s":q=2;break;case"t":q=3;break;case"u":q=4;break;default:q=0}if(q>0){var x=parseInt(w.substr(u+1,q));u=u+q+1;for(;x>0&&A<a*j;x--){y=m[A++];y.fg=p;y.bg=v;y.t=z}}}g()}function d(p){p=parseInt(p);if(p<0||p>15){p=0}return f[p]}function l(t){a=t.w;j=t.h;var s,p,r=q1("#screen");while(r.firstChild){r.removeChild(r.firstChild)}m=[];for(var q=0;q<a*j;q++){s=mk("span");(function(){var u=q%a;var v=Math.floor(q/a);s.addEventListener("click",function(){Kinp.onTap(v,u)})})();if((q>0)&&(q%a==0)){r.appendChild(mk("br"))}r.appendChild(s);p={t:" ",fg:7,bg:0,e:s};m.push(p);c(p)}setInterval(function(){k.a=!k.a;if(k.hidden){k.a=false}if(!k.suppress){c(h(),k.a)}},500);i(t)}window.Term={init:l,load:i,setCursor:e,enableCursor:o,clear:n}})();(function(){var g="ws://"+window.location.host+"/ws/update.cgi";var d;function c(i){console.log("CONNECTED")}function b(i){console.error("SOCKET CLOSED")}function f(i){try{console.log("RX: ",i.data);Term.load(JSON.parse(i.data))}catch(j){console.error(j)}}function e(i){console.error(i.data)}function a(i){console.log("TX: ",i);if(d.readyState!=1){console.error("Socket not ready");return}if(typeof i!="string"){i=JSON.stringify(i)}d.send(i)}function h(){d=new WebSocket(g);d.onopen=c;d.onclose=b;d.onmessage=f;d.onerror=e;console.log("Opening socket.")}window.Conn={ws:null,init:h,send:a}})();(function(){function a(e){Conn.send("STR:"+e)}function b(f,e){Conn.send("TAP:"+f+","+e)}function d(e){Conn.send("BTN:"+e)}function c(){window.addEventListener("keypress",function(h){var g=+h.which;if(g>=32&&g<127){var f=String.fromCharCode(g);a(f)}});window.addEventListener("keydown",function(g){var f=g.keyCode;switch(f){case 8:a("\x08");break;case 13:a("\x0d\x0a");break;case 27:a("\x1b");break;case 37:a("\x1b[D");break;case 38:a("\x1b[A");break;case 39:a("\x1b[C");break;case 40:a("\x1b[B");break}});qa("#buttons button").forEach(function(e){e.addEventListener("click",function(){d(+this.dataset.n)})})}window.Kinp={init:c,onTap:b}})();function init(a){Term.init(a);Conn.init();Kinp.init()};

html/style.css

@@ -1 +0,0 @@
-html,body{background:#48505f;color:#eee;font-family:monospace;font-size:16pt;text-align:center}header{font-weight:bold;font-size:14pt;padding:6px;display:block}#screen{white-space:nowrap;background:#111213;border-radius:3px;padding:6px;box-shadow:inset 0 0 5px black;display:inline-block}#screen span{white-space:pre;cursor:pointer}#screen span:hover{outline:1px solid rgba(255,255,255,0.5)}#buttons{margin-top:10px;white-space:nowrap}button{margin:0 3px;padding:10px 0;width:18%;max-width:65px;cursor:pointer;font-weight:bold}

html/term.tpl

@@ -1 +1,33 @@
-<!doctype html><meta charset=utf-8><title>ESP8266 Remote Terminal</title><meta name=viewport content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel=stylesheet href=style.css><script src=script.js></script><header>ESP8266 Remote Terminal</header><div id=screen></div><div id=buttons><button data-n=1>1</button><button data-n=2>2</button><button data-n=3>3</button><button data-n=4>4</button><button data-n=5>5</button></div><script>init(%screenData%)</script>
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>ESP8266 Remote Terminal</title>
+	<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+
+	<link rel="stylesheet" href="/css/app.css">
+	<script src="/js/app.js"></script>
+</head>
+<body class="page-term">
+
+<h1 onclick="location.href='/wifi'">ESP8266 Remote Terminal</h1>
+
+<div id="termwrap">
+	<div id="screen"></div>
+
+	<div id="buttons">
+		<button data-n="1" class="btn-blue">1</button><!--
+		--><button data-n="2" class="btn-blue">2</button><!--
+		--><button data-n="3" class="btn-blue">3</button><!--
+		--><button data-n="4" class="btn-blue">4</button><!--
+		--><button data-n="5" class="btn-blue">5</button>
+	</div>
+</div>
+
+<script>
+	_root = window.location.host;
+	termInit(%screenData%);
+</script>
+
+</body>
+</html>

html/wifi.tpl

@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+
+	<title>WiFi Settings - ESP8266 Remote Terminal</title>
+
+	<link rel="stylesheet" href="/css/app.css">
+	<script src="/js/app.js"></script>
+</head>
+<body class="page-wifi">
+
+<img src="/img/loader.gif" alt="Loading…" id="loader">
+
+<h1 onclick="location.href='/'">WiFi settings</h1>
+
+<div class="Box">
+	<table>
+		<tr>
+			<th>WiFi mode:</th>
+			<td>%WiFiMode%</td>
+		</tr>
+		<tr>
+			<th></th>
+			<td>%WiFiapwarn%</td>
+		</tr>
+		<tr>
+			<th><label for="channel">AP channel:</label></th>
+			<td>
+				<form action="/wifi/setchannel" method="GET">
+					<input name="ch" id="channel" type="number" step=1 min=1 max=14 value="%WiFiChannel%">&nbsp;
+					<input type="submit" value="Set" class="narrow btn-green">
+				</form>
+			</td>
+		</tr>
+		<tr>
+			<th><label for="channel">AP name:</label></th>
+			<td>
+				<form action="/wifi/setname" method="GET">
+					<input name="name" type="text" value="%APName%">&nbsp;
+					<input type="submit" value="Set" class="narrow btn-green">
+				</form>
+			</td>
+		</tr>
+	</table>
+</div>
+
+<div class="Box" id="ap-box">
+	<h2>Select AP to join</h2>
+	<div id="ap-loader">Scanning<span class="anim-dots">.</span></div>
+	<div id="ap-list" style="display:none"></div>
+</div>
+
+<script>
+	_root = window.location.host;
+	wifiInit({curSSID: '%currSsid%'});
+</script>
+</body>
+</html>