mh
/
mhsw-espurna

<!DOCTYPE html><html>    <head>
        <title>ESPurna 0.0.0</title>        <meta charset="utf-8">        <link rel="shortcut icon" href="data:image/png;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABMLAAATCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJP/0AgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACT/9H8k//QfAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJP/0DAAAAAAAAAAAAAAAAAC6/zYj/vT/JP/0bwAAAAAAAAAAAAAAACT/9FYAAAAAAAAAAAAAAAAAAAAAAAAAACT/9JEk//SWJP/0JAAAAAAE0f6mGvH3/yX/9MsAAAAAANL/cxvy9/8k//QmAAAAAAAAAAAAAAAAAAAAAAAAAAAAkf8EHvX2+SX/9P8j8fXNBMv++A/l+/8V6/n/AsT+3Aau/v8m//TKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADJ/3MN3/v/E+v5/wBl//8Af///GJf0/wFb//8U0vn/JP/0WQAAAAAAAAAAAAAAAAAAAAAk//QIJP/0NST/9Ggm//OGC9z8/QXZ/v9QeNn/czjG/1pB0/8AZv//DJj8/x7b9v8l//TTJP70aQAAAAAAAAAAJP/0RiT/9KYk//T4Jf/0/xDi+v8Fs/7/Qmvf/7gbpP+xH6f/NFHm/wBm//8AXP//Eqv6/yX/9P8k//TzJP/0UwAAAAAAAAAAAAAAABXZ9ZQFtP3/A6v//zyO4v8NXvn/bznI/wBm//8Ij/3/EuL61xHn+ngp//MdAAAAAAAAAAAAAAAAAAAAAAy69BsLuvX/EeX6/w7g+/8Hzf3/AF7//wqN+/8Bcv//CoD8/yj/82MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAk/ISJf/0syb/9P8R5Pr/Brn9/wSi/v8K3vz/B9r9/w/S+v8j+PT7I//0BQAAAAAAAAAAAAAAAAAAAAAAAAAAJP/0OCT/9P8l//T/Dd/76QTN/u8Z8/j/Jv/z4ADL/0sN3/vhJf/0/yT/9IwAAAAAAAAAAAAAAAAAAAAAAAAAACT/9Lwk//R5AAAAAADM/6kI1Pw+JP/0/yT/9IsAAAAAAAAAACT/9CAk//TYJP/0HwAAAAAAAAAAAAAAACT/9AIAAAAAAAAAAAAAAAAAzf8WAAAAACT/9OYk//Q3AAAAAAAAAAAAAAAAAAAAACT/9BMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAk//SDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJP/0AgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/v8AAP5/AADcdwAAxEcAAMAPAADgDwAAAAMAAAAAAADgAwAAwA8AAMAHAADABwAAyGMAALp7AAD+/wAA/v8AAA==">        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- build:css style.css -->        <style>html {  -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;  font-family: sans-serif;}body {  margin: 0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {  display: block;}audio, canvas, progress, video {  display: inline-block;  vertical-align: baseline;}audio:not([controls]) {  display: none;  height: 0;}[hidden], template {  display: none;}a {  background-color: transparent;}a:active, a:hover {  outline: 0;}abbr[title] {  border-bottom: 1px dotted;}b, strong {  font-weight: 700;}dfn {  font-style: italic;}h1 {  font-size: 2em;  margin: 0.67em 0;}mark {  background: #ff0;  color: #000;}small {  font-size: 80%;}sub, sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}sup {  top: -0.5em;}sub {  bottom: -0.25em;}img {  border: 0;}svg:not(:root) {  overflow: hidden;}figure {  margin: 1em 40px;}hr {  -webkit-box-sizing: content-box;  box-sizing: content-box;  height: 0;}pre {  overflow: auto;}code, kbd, pre, samp {  font-family: monospace, monospace;  font-size: 1em;}button, input, optgroup, select, textarea {  color: inherit;  font: inherit;  margin: 0;}button {  overflow: visible;}button, select {  text-transform: none;}button, html input[type=button], input[type=reset], input[type=submit] {  -webkit-appearance: button;  cursor: pointer;}button[disabled], html input[disabled] {  cursor: default;}button::-moz-focus-inner, input::-moz-focus-inner {  border: 0;  padding: 0;}input {  line-height: normal;}input[type=checkbox], input[type=radio] {  -webkit-box-sizing: border-box;  box-sizing: border-box;  padding: 0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {  height: auto;}input[type=search] {  -webkit-appearance: textfield;  -webkit-box-sizing: content-box;  box-sizing: content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {  -webkit-appearance: none;}fieldset {  border: 1px solid silver;  margin: 0 2px;  padding: 0.35em 0.625em 0.75em;}legend {  border: 0;  padding: 0;}textarea {  overflow: auto;}optgroup {  font-weight: 700;}table {  border-collapse: collapse;  border-spacing: 0;}td, th {  padding: 0;}.hidden, [hidden] {  display: none !important;}.pure-img {  display: block;  height: auto;  max-width: 100%;}.pure-g {  -ms-flex-flow: row wrap;  -ms-flex-line-pack: start;  -webkit-align-content: flex-start;  -webkit-box-direction: normal;  -webkit-box-orient: horizontal;  -webkit-flex-flow: row wrap;  align-content: flex-start;  display: flex;  flex-flow: row wrap;  font-family: FreeSans, Arimo, Droid Sans, Helvetica, Arial, sans-serif;  letter-spacing: -0.31em;  text-rendering: optimizespeed;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {  table .pure-g {    display: block;  }
}.opera-only :-o-prefocus, .pure-g {  word-spacing: -0.43em;}.pure-u {  display: inline-block;  letter-spacing: normal;  text-rendering: auto;  vertical-align: top;  word-spacing: normal;  zoom: 1;}.pure-g [class*=pure-u] {  font-family: sans-serif;}.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24 {  display: inline-block;  letter-spacing: normal;  text-rendering: auto;  vertical-align: top;  word-spacing: normal;  zoom: 1;}.pure-u-1-24 {  width: 4.1667%;}.pure-u-1-12, .pure-u-2-24 {  width: 8.3333%;}.pure-u-1-8, .pure-u-3-24 {  width: 12.5%;}.pure-u-1-6, .pure-u-4-24 {  width: 16.6667%;}.pure-u-1-5 {  width: 20%;}.pure-u-5-24 {  width: 20.8333%;}.pure-u-1-4, .pure-u-6-24 {  width: 25%;}.pure-u-7-24 {  width: 29.1667%;}.pure-u-1-3, .pure-u-8-24 {  width: 33.3333%;}.pure-u-3-8, .pure-u-9-24 {  width: 37.5%;}.pure-u-2-5 {  width: 40%;}.pure-u-10-24, .pure-u-5-12 {  width: 41.6667%;}.pure-u-11-24 {  width: 45.8333%;}.pure-u-1-2, .pure-u-12-24 {  width: 50%;}.pure-u-13-24 {  width: 54.1667%;}.pure-u-14-24, .pure-u-7-12 {  width: 58.3333%;}.pure-u-3-5 {  width: 60%;}.pure-u-15-24, .pure-u-5-8 {  width: 62.5%;}.pure-u-16-24, .pure-u-2-3 {  width: 66.6667%;}.pure-u-17-24 {  width: 70.8333%;}.pure-u-18-24, .pure-u-3-4 {  width: 75%;}.pure-u-19-24 {  width: 79.1667%;}.pure-u-4-5 {  width: 80%;}.pure-u-20-24, .pure-u-5-6 {  width: 83.3333%;}.pure-u-21-24, .pure-u-7-8 {  width: 87.5%;}.pure-u-11-12, .pure-u-22-24 {  width: 91.6667%;}.pure-u-23-24 {  width: 95.8333%;}.pure-u-1, .pure-u-1-1, .pure-u-24-24, .pure-u-5-5 {  width: 100%;}.pure-button {  -moz-user-select: none;  -ms-user-select: none;  -webkit-box-sizing: border-box;  -webkit-user-drag: none;  -webkit-user-select: none;  box-sizing: border-box;  cursor: pointer;  display: inline-block;  line-height: normal;  text-align: center;  user-select: none;  vertical-align: middle;  white-space: nowrap;  zoom: 1;}.pure-button::-moz-focus-inner {  border: 0;  padding: 0;}.pure-button-group {  letter-spacing: -0.31em;  text-rendering: optimizespeed;}.opera-only :-o-prefocus, .pure-button-group {  word-spacing: -0.43em;}.pure-button-group .pure-button {  letter-spacing: normal;  text-rendering: auto;  vertical-align: top;  word-spacing: normal;}.pure-button {  background-color: #e6e6e6;  border: none transparent;  border-radius: 2px;  color: rgba(0, 0, 0, 0.8);  font-family: inherit;  font-size: 100%;  padding: 0.5em 1em;  text-decoration: none;}.pure-button-hover, .pure-button:focus, .pure-button:hover {  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));}.pure-button:focus {  outline: 0;}.pure-button-active, .pure-button:active {  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;}.pure-button-disabled,.pure-button-disabled:active,.pure-button-disabled:focus,.pure-button-disabled:hover,.pure-button[disabled] {  -webkit-box-shadow: none;  background-image: none;  border: 0;  box-shadow: none;  cursor: not-allowed;  opacity: 0.4;  pointer-events: none;}.pure-button-hidden {  display: none;}.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected {  background-color: #0078e7;  color: #fff;}.pure-button-group .pure-button {  border-radius: 0;  border-right: 1px solid rgba(0, 0, 0, 0.2);  margin: 0;}.pure-button-group .pure-button:first-child {  border-bottom-left-radius: 2px;  border-top-left-radius: 2px;}.pure-button-group .pure-button:last-child {  border-bottom-right-radius: 2px;  border-right: 0;  border-top-right-radius: 2px;}.pure-form input[type=color],.pure-form input[type=date],.pure-form input[type=datetime-local],.pure-form input[type=datetime],.pure-form input[type=email],.pure-form input[type=month],.pure-form input[type=number],.pure-form input[type=password],.pure-form input[type=search],.pure-form input[type=tel],.pure-form input[type=text],.pure-form input[type=time],.pure-form input[type=url],.pure-form input[type=week],.pure-form select,.pure-form textarea {  -webkit-box-shadow: inset 0 1px 3px #ddd;  -webkit-box-sizing: border-box;  border: 1px solid #ccc;  border-radius: 4px;  box-shadow: inset 0 1px 3px #ddd;  box-sizing: border-box;  display: inline-block;  padding: 0.5em 0.6em;  vertical-align: middle;}.pure-form input:not([type]) {  -webkit-box-shadow: inset 0 1px 3px #ddd;  -webkit-box-sizing: border-box;  border: 1px solid #ccc;  border-radius: 4px;  box-shadow: inset 0 1px 3px #ddd;  box-sizing: border-box;  display: inline-block;  padding: 0.5em 0.6em;}.pure-form input[type=color] {  padding: 0.2em 0.5em;}.pure-form input:not([type]):focus,.pure-form input[type=color]:focus,.pure-form input[type=date]:focus,.pure-form input[type=datetime-local]:focus,.pure-form input[type=datetime]:focus,.pure-form input[type=email]:focus,.pure-form input[type=month]:focus,.pure-form input[type=number]:focus,.pure-form input[type=password]:focus,.pure-form input[type=search]:focus,.pure-form input[type=tel]:focus,.pure-form input[type=text]:focus,.pure-form input[type=time]:focus,.pure-form input[type=url]:focus,.pure-form input[type=week]:focus,.pure-form select:focus,.pure-form textarea:focus {  border-color: #129fea;  outline: 0;}.pure-form input[type=checkbox]:focus,.pure-form input[type=file]:focus,.pure-form input[type=radio]:focus {  outline: 1px auto #129fea;}.pure-form .pure-checkbox, .pure-form .pure-radio {  display: block;  margin: 0.5em 0;}.pure-form input:not([type])[disabled],.pure-form input[type=color][disabled],.pure-form input[type=date][disabled],.pure-form input[type=datetime-local][disabled],.pure-form input[type=datetime][disabled],.pure-form input[type=email][disabled],.pure-form input[type=month][disabled],.pure-form input[type=number][disabled],.pure-form input[type=password][disabled],.pure-form input[type=search][disabled],.pure-form input[type=tel][disabled],.pure-form input[type=text][disabled],.pure-form input[type=time][disabled],.pure-form input[type=url][disabled],.pure-form input[type=week][disabled],.pure-form select[disabled],.pure-form textarea[disabled] {  background-color: #eaeded;  color: #cad2d3;  cursor: not-allowed;}.pure-form input[readonly],.pure-form select[readonly],.pure-form textarea[readonly] {  background-color: #eee;  border-color: #ccc;  color: #777;}.pure-form input:focus:invalid,.pure-form select:focus:invalid,.pure-form textarea:focus:invalid {  border-color: #e9322d;  color: #b94a48;}.pure-form input[type=checkbox]:focus:invalid,.pure-form input[type=file]:focus:invalid,.pure-form input[type=radio]:focus:invalid {  outline-color: #e9322d;}.pure-form select {  background-color: #fff;  border: 1px solid #ccc;  height: 2.25em;}.pure-form select[multiple] {  height: auto;}.pure-form label {  margin: 0.5em 0 0.2em;}.pure-form fieldset {  border: 0;  margin: 0;  padding: 0.35em 0 0.75em;}.pure-form legend {  border-bottom: 1px solid #e5e5e5;  color: #333;  display: block;  margin-bottom: 0.3em;  padding: 0.3em 0;  width: 100%;}.pure-form-stacked input:not([type]),.pure-form-stacked input[type=color],.pure-form-stacked input[type=date],.pure-form-stacked input[type=datetime-local],.pure-form-stacked input[type=datetime],.pure-form-stacked input[type=email],.pure-form-stacked input[type=file],.pure-form-stacked input[type=month],.pure-form-stacked input[type=number],.pure-form-stacked input[type=password],.pure-form-stacked input[type=search],.pure-form-stacked input[type=tel],.pure-form-stacked input[type=text],.pure-form-stacked input[type=time],.pure-form-stacked input[type=url],.pure-form-stacked input[type=week],.pure-form-stacked label,.pure-form-stacked select,.pure-form-stacked textarea {  display: block;  margin: 0.25em 0;}.pure-form-aligned .pure-help-inline,.pure-form-aligned input,.pure-form-aligned select,.pure-form-aligned textarea,.pure-form-message-inline {  display: inline-block;  vertical-align: middle;}.pure-form-aligned textarea {  vertical-align: top;}.pure-form-aligned .pure-control-group {  margin-bottom: 0.5em;}.pure-form-aligned .pure-control-group label {  display: inline-block;  margin: 0 1em 0 0;  text-align: right;  vertical-align: middle;  width: 10em;}.pure-form-aligned .pure-controls {  margin: 1.5em 0 0 11em;}.pure-form .pure-input-rounded, .pure-form input.pure-input-rounded {  border-radius: 2em;  padding: 0.5em 1em;}.pure-form .pure-group fieldset {  margin-bottom: 10px;}.pure-form .pure-group input, .pure-form .pure-group textarea {  border-radius: 0;  display: block;  margin: 0 0 -1px;  padding: 10px;  position: relative;  top: -1px;}.pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus {  z-index: 3;}.pure-form .pure-group input:first-child,.pure-form .pure-group textarea:first-child {  border-radius: 4px 4px 0 0;  margin: 0;  top: 1px;}.pure-form .pure-group input:first-child:last-child,.pure-form .pure-group textarea:first-child:last-child {  border-radius: 4px;  margin: 0;  top: 1px;}.pure-form .pure-group input:last-child,.pure-form .pure-group textarea:last-child {  border-radius: 0 0 4px 4px;  margin: 0;  top: -2px;}.pure-form .pure-group button {  margin: 0.35em 0;}.pure-form .pure-input-1 {  width: 100%;}.pure-form .pure-input-3-4 {  width: 75%;}.pure-form .pure-input-2-3 {  width: 66%;}.pure-form .pure-input-1-2 {  width: 50%;}.pure-form .pure-input-1-3 {  width: 33%;}.pure-form .pure-input-1-4 {  width: 25%;}.pure-form .pure-help-inline, .pure-form-message-inline {  color: #666;  display: inline-block;  font-size: 0.875em;  padding-left: 0.3em;  vertical-align: middle;}.pure-form-message {  color: #666;  display: block;  font-size: 0.875em;}@media only screen and (max-width: 5in) {  .pure-form button[type=submit] {    margin: 0.7em 0 0;  }
  .pure-form input:not([type]),  .pure-form input[type=color],  .pure-form input[type=date],  .pure-form input[type=datetime-local],  .pure-form input[type=datetime],  .pure-form input[type=email],  .pure-form input[type=month],  .pure-form input[type=number],  .pure-form input[type=password],  .pure-form input[type=search],  .pure-form input[type=tel],  .pure-form input[type=text],  .pure-form input[type=time],  .pure-form input[type=url],  .pure-form input[type=week],  .pure-form label {    display: block;    margin-bottom: 0.3em;  }
  .pure-group input:not([type]),  .pure-group input[type=color],  .pure-group input[type=date],  .pure-group input[type=datetime-local],  .pure-group input[type=datetime],  .pure-group input[type=email],  .pure-group input[type=month],  .pure-group input[type=number],  .pure-group input[type=password],  .pure-group input[type=search],  .pure-group input[type=tel],  .pure-group input[type=text],  .pure-group input[type=time],  .pure-group input[type=url],  .pure-group input[type=week] {    margin-bottom: 0;  }
  .pure-form-aligned .pure-control-group label {    display: block;    margin-bottom: 0.3em;    text-align: left;    width: 100%;  }
  .pure-form-aligned .pure-controls {    margin: 1.5em 0 0;  }
  .pure-form .pure-help-inline, .pure-form-message, .pure-form-message-inline {    display: block;    font-size: 0.75em;    padding: 0.2em 0 0.8em;  }
}.pure-menu {  -webkit-box-sizing: border-box;  box-sizing: border-box;}.pure-menu-fixed {  left: 0;  position: fixed;  top: 0;  z-index: 3;}.pure-menu-item, .pure-menu-list {  position: relative;}.pure-menu-list {  list-style: none;  margin: 0;  padding: 0;}.pure-menu-item {  height: 100%;  margin: 0;  padding: 0;}.pure-menu-heading, .pure-menu-link {  display: block;  text-decoration: none;  white-space: nowrap;}.pure-menu-horizontal {  white-space: nowrap;  width: 100%;}.pure-menu-horizontal .pure-menu-list {  display: inline-block;}.pure-menu-horizontal .pure-menu-heading,.pure-menu-horizontal .pure-menu-item,.pure-menu-horizontal .pure-menu-separator {  display: inline-block;  vertical-align: middle;  zoom: 1;}.pure-menu-item .pure-menu-item {  display: block;}.pure-menu-children {  display: none;  left: 100%;  margin: 0;  padding: 0;  position: absolute;  top: 0;  z-index: 3;}.pure-menu-horizontal .pure-menu-children {  left: 0;  top: auto;  width: inherit;}.pure-menu-active > .pure-menu-children,.pure-menu-allow-hover:hover > .pure-menu-children {  display: block;  position: absolute;}.pure-menu-has-children > .pure-menu-link:after {  content: "\25B8";  font-size: small;  padding-left: 0.5em;}.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {  content: "\25BE";}.pure-menu-scrollable {  overflow-x: hidden;  overflow-y: scroll;}.pure-menu-scrollable .pure-menu-list {  display: block;}.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list {  display: inline-block;}.pure-menu-horizontal.pure-menu-scrollable {  -ms-overflow-style: none;  -webkit-overflow-scrolling: touch;  overflow-x: auto;  overflow-y: hidden;  padding: 0.5em 0;  white-space: nowrap;}.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar {  display: none;}.pure-menu-horizontal .pure-menu-children .pure-menu-separator,.pure-menu-separator {  background-color: #ccc;  height: 1px;  margin: 0.3em 0;}.pure-menu-horizontal .pure-menu-separator {  height: 1.3em;  margin: 0 0.3em;  width: 1px;}.pure-menu-horizontal .pure-menu-children .pure-menu-separator {  display: block;  width: auto;}.pure-menu-heading {  color: #565d64;  text-transform: uppercase;}.pure-menu-link {  color: #777;}.pure-menu-children {  background-color: #fff;}.pure-menu-disabled, .pure-menu-heading, .pure-menu-link {  padding: 0.5em 1em;}.pure-menu-disabled {  opacity: 0.5;}.pure-menu-disabled .pure-menu-link:hover {  background-color: transparent;}.pure-menu-active > .pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {  background-color: #eee;}.pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited {  color: #000;}.pure-table {  border: 1px solid #cbcbcb;  border-collapse: collapse;  border-spacing: 0;  empty-cells: show;}.pure-table caption {  color: #000;  font: italic 85%/1 arial, sans-serif;  padding: 1em 0;  text-align: center;}.pure-table td, .pure-table th {  border-left: 1px solid #cbcbcb;  border-width: 0 0 0 1px;  font-size: inherit;  margin: 0;  overflow: visible;  padding: 0.5em 1em;}.pure-table td:first-child, .pure-table th:first-child {  border-left-width: 0;}.pure-table thead {  background-color: #e0e0e0;  color: #000;  text-align: left;  vertical-align: bottom;}.pure-table td {  background-color: transparent;}.pure-table-odd td, .pure-table-striped tr:nth-child(2n - 1) td {  background-color: #f2f2f2;}.pure-table-bordered td {  border-bottom: 1px solid #cbcbcb;}.pure-table-bordered tbody > tr:last-child > td {  border-bottom-width: 0;}.pure-table-horizontal td, .pure-table-horizontal th {  border-bottom: 1px solid #cbcbcb;  border-width: 0 0 1px;}.pure-table-horizontal tbody > tr:last-child > td {  border-bottom-width: 0;}
</style>        <style>@media screen and (min-width: 64em) {  .pure-u-lg-1,  .pure-u-lg-1-1,  .pure-u-lg-1-12,  .pure-u-lg-1-2,  .pure-u-lg-1-24,  .pure-u-lg-1-3,  .pure-u-lg-1-4,  .pure-u-lg-1-5,  .pure-u-lg-1-6,  .pure-u-lg-1-8,  .pure-u-lg-10-24,  .pure-u-lg-11-12,  .pure-u-lg-11-24,  .pure-u-lg-12-24,  .pure-u-lg-13-24,  .pure-u-lg-14-24,  .pure-u-lg-15-24,  .pure-u-lg-16-24,  .pure-u-lg-17-24,  .pure-u-lg-18-24,  .pure-u-lg-19-24,  .pure-u-lg-2-24,  .pure-u-lg-2-3,  .pure-u-lg-2-5,  .pure-u-lg-20-24,  .pure-u-lg-21-24,  .pure-u-lg-22-24,  .pure-u-lg-23-24,  .pure-u-lg-24-24,  .pure-u-lg-3-24,  .pure-u-lg-3-4,  .pure-u-lg-3-5,  .pure-u-lg-3-8,  .pure-u-lg-4-24,  .pure-u-lg-4-5,  .pure-u-lg-5-12,  .pure-u-lg-5-24,  .pure-u-lg-5-5,  .pure-u-lg-5-6,  .pure-u-lg-5-8,  .pure-u-lg-6-24,  .pure-u-lg-7-12,  .pure-u-lg-7-24,  .pure-u-lg-7-8,  .pure-u-lg-8-24,  .pure-u-lg-9-24 {    display: inline-block;    letter-spacing: normal;    text-rendering: auto;    vertical-align: top;    word-spacing: normal;    zoom: 1;  }
  .pure-u-lg-1-24 {    width: 4.1667%;  }
  .pure-u-lg-1-12, .pure-u-lg-2-24 {    width: 8.3333%;  }
  .pure-u-lg-1-8, .pure-u-lg-3-24 {    width: 12.5%;  }
  .pure-u-lg-1-6, .pure-u-lg-4-24 {    width: 16.6667%;  }
  .pure-u-lg-1-5 {    width: 20%;  }
  .pure-u-lg-5-24 {    width: 20.8333%;  }
  .pure-u-lg-1-4, .pure-u-lg-6-24 {    width: 25%;  }
  .pure-u-lg-7-24 {    width: 29.1667%;  }
  .pure-u-lg-1-3, .pure-u-lg-8-24 {    width: 33.3333%;  }
  .pure-u-lg-3-8, .pure-u-lg-9-24 {    width: 37.5%;  }
  .pure-u-lg-2-5 {    width: 40%;  }
  .pure-u-lg-10-24, .pure-u-lg-5-12 {    width: 41.6667%;  }
  .pure-u-lg-11-24 {    width: 45.8333%;  }
  .pure-u-lg-1-2, .pure-u-lg-12-24 {    width: 50%;  }
  .pure-u-lg-13-24 {    width: 54.1667%;  }
  .pure-u-lg-14-24, .pure-u-lg-7-12 {    width: 58.3333%;  }
  .pure-u-lg-3-5 {    width: 60%;  }
  .pure-u-lg-15-24, .pure-u-lg-5-8 {    width: 62.5%;  }
  .pure-u-lg-16-24, .pure-u-lg-2-3 {    width: 66.6667%;  }
  .pure-u-lg-17-24 {    width: 70.8333%;  }
  .pure-u-lg-18-24, .pure-u-lg-3-4 {    width: 75%;  }
  .pure-u-lg-19-24 {    width: 79.1667%;  }
  .pure-u-lg-4-5 {    width: 80%;  }
  .pure-u-lg-20-24, .pure-u-lg-5-6 {    width: 83.3333%;  }
  .pure-u-lg-21-24, .pure-u-lg-7-8 {    width: 87.5%;  }
  .pure-u-lg-11-12, .pure-u-lg-22-24 {    width: 91.6667%;  }
  .pure-u-lg-23-24 {    width: 95.8333%;  }
  .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-24-24, .pure-u-lg-5-5 {    width: 100%;  }
}
</style>        <style>body {  color: #777;}.pure-img-responsive {  height: auto;  max-width: 100%;}#layout, #menu, .menu-link {  -moz-transition: all 0.2s ease-out;  -ms-transition: all 0.2s ease-out;  -o-transition: all 0.2s ease-out;  -webkit-transition: all 0.2s ease-out;  transition: all 0.2s ease-out;}#layout {  left: 0;  padding-left: 0;  position: relative;}#layout.active #menu {  left: 10pc;  width: 10pc;}#layout.active .menu-link {  left: 10pc;}.content {  line-height: 1.6em;  margin: 0 auto 50px;  max-width: 50pc;  padding: 0 2em;}.header {  border-bottom: 1px solid #eee;  color: #333;  margin: 0;  padding: 2.5em 2em 0;  text-align: center;}.header h1 {  font-size: 3em;  font-weight: 300;  margin: 0.2em 0;}.header h2 {  color: #ccc;  font-weight: 300;  margin-top: 0;  padding: 0;}.content-subhead {  color: #888;  font-weight: 300;  margin: 50px 0 20px;}#menu {  -webkit-overflow-scrolling: touch;  background: #191818;  bottom: 0;  left: 0;  margin-left: -10pc;  overflow-y: auto;  position: fixed;  top: 0;  width: 10pc;  z-index: 1000;}#menu a {  border: 0;  color: #999;  padding: 0.6em 0 0.6em 0.6em;}#menu .pure-menu, #menu .pure-menu ul {  background: transparent;  border: 0;}#menu .pure-menu .menu-item-divided, #menu .pure-menu ul {  border-top: 1px solid #333;}#menu .pure-menu li a:focus, #menu .pure-menu li a:hover {  background: #333;}#menu .pure-menu-heading, #menu .pure-menu-selected {  background: #1f8dd6;}#menu .pure-menu-selected a {  color: #fff;}#menu .pure-menu-heading {  color: #fff;  font-size: 110%;  margin: 0;}.menu-link {  background: rgba(0, 0, 0, 0.7);  display: block;  font-size: 10px;  height: auto;  left: 0;  padding: 2.1em 1.6em;  position: fixed;  top: 0;  width: 2em;  z-index: 10;}.menu-link:focus, .menu-link:hover {  background: #000;}.menu-link span {  display: block;  position: relative;}.menu-link span, .menu-link span:after, .menu-link span:before {  background-color: #fff;  height: 0.2em;  width: 100%;}.menu-link span:after, .menu-link span:before {  content: " ";  margin-top: -0.6em;  position: absolute;}.menu-link span:after {  margin-top: 0.6em;}@media (min-width: 48em) {  .content, .header {    padding-left: 2em;    padding-right: 2em;  }
  #layout {    left: 0;    padding-left: 10pc;  }
  #menu {    left: 10pc;  }
  .menu-link {    display: none;    left: 10pc;    position: fixed;  }
  #layout.active .menu-link {    left: 10pc;  }
}@media (max-width: 48em) {  #layout.active {    left: 10pc;    position: relative;  }
}
</style>        <style>.iPhoneCheckContainer {  -webkit-transform: translate3d(0, 0, 0);  cursor: pointer;  height: 30px;  margin: 5px 0 10px;  overflow: hidden;  position: relative;}.iPhoneCheckContainer input {  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  left: 30px;  opacity: 0;  position: absolute;  top: 5px;}.iPhoneCheckContainer label {  cursor: pointer;  display: block;  font-family: Helvetica Neue, Arial, Helvetica, sans-serif;  font-size: 17px;  font-weight: 700;  height: 27px;  line-height: 17px;  overflow: hidden;  padding-top: 5px;  position: absolute;  top: 0;  white-space: nowrap;  width: auto;}.iPhoneCheckContainer, .iPhoneCheckContainer label {  -khtml-user-select: none;  -moz-user-select: none;  user-select: none;}.iPhoneCheckDisabled {  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  opacity: 0.5;}div.iPhoneCheckBorderOn {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAbCAYAAABbcS4wAAAA9UlEQVR4AWJkAAIFz1ppINULxDaMil516kDGMQCN44EdQQjDUGFpgPSenCi3yus5V26U3vsKvDtvAOvz/UzbPTquOwdQMK77/ulx279AUBCDl/3gAmo7KKzTOFDbBWsHlz6NGVS3EWoGJKTq24qYhkFoASmUEIIyCK5DeHEEF2OVYVMu4FUMS7bAwX8CaRgxl2NOqZy9Hk1oGG0JaACtje6gauAVwyjMCSw5ZRZmUCDfQRdMK1/KqSfMFhcacGOoZNAGRPzbgi/+DYKPgV8E/lHGFJOb3683DFi8hnH1+/1+9/H2gN/Pd0N/q+XOOAWKuQmgmAMAk5Uf/2+Z9s0AAAAASUVORK5CYII=);  background-repeat: no-repeat;  height: 100%;  left: 0;  position: absolute;  width: 4px;}label.iPhoneCheckLabelOn {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAbCAIAAADUE7lnAAAAnUlEQVQYGQXBwVFbURAEwJ5982UJfHA5AQjAiRAUaToEnwgB1bq77x+fAPr77c8SEb0evwSW9vEzGUu0P15lWLS3F5HE6rlugNU5FxA6EwCdzAaympmxi+hMrMjSkU0w2V49gOj9OgtC77cDhHayK1bSScwybM9IYpH2BJbomYQNqz2BJdsOa4P0TBYrUfucZCO79fwWCatf//4C+A9KeitWlsJe4gAAAABJRU5ErkJggg==);  background-repeat: repeat-x;  color: #fff;  left: 0;  margin-left: 4px;  margin-top: 0;  padding-top: 5px;  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);}label.iPhoneCheckLabelOn span {  padding-left: 4px;}label.iPhoneCheckLabelOff {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAbCAIAAADUE7lnAAAAmklEQVR4AUXNh2HFQAgDUAn0e1vIO3jgeLMUBeMm13d3AMdxxBYNw3Dg/fkAJujC6/k8dp7PhwECBvW4NzhT1+ut1w1S58sZfa6iCrYccCGVwFolhcwZvZPhPsbC6XwGbBOFiCBLICEp4T5VIBN0w8oIw92Oigy4gUKwi2m7kNhSiB3dgEA/fYwuFGX8+Q8d6+enfreh0/SFLf+a2DV1eUAGRAAAAABJRU5ErkJggg==);  background-repeat: repeat-x;  color: #8b8b8b;  margin-right: 4px;  margin-top: 0;  right: 0;  text-align: right;  text-shadow: 0 0 2px hsla(0, 0%, 100%, 0.6);}label.iPhoneCheckLabelOff span {  padding-right: 4px;}div.iPhoneCheckBorderOff {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAbCAYAAABbcS4wAAAA+0lEQVR4AWLw9/d/AsQrgFiaAQTq6+v/Z2Vl/w8MDHwLxFoMkyZN+t/b2/u/qKjof0hICICp8TBsAAaB4POPujyCx8m6WTBV4CpRj/bJvTdCr9crJH1wnWSuictlB9i+5kSRw2ABwDEG+mjovcPdwVoram1ord1AKQWhkSR4BP6AckHfEejeIYdEiHdAZpIwdrGWCq8OlfvSqDgPOJodOlS5kLcOM8LMED87qAN0Ut47ZAYawQew19kXyDF7jASg3kZy3uJSgohv7w+Q9L8vTP8ZgPDfP4Y3b1+DBHYzPHr06P/x4yf+r1279i0QazFs2LDhORCvBmJwzAEA+3M5kWzOkmcAAAAASUVORK5CYII=);  background-repeat: no-repeat;  height: 100%;  position: absolute;  width: 4px;}.iPhoneCheckHandle {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAbCAYAAABbcS4wAAAAz0lEQVR4AWJkAIJFixZJA6leILZhBHLUgYxjWlpaQpKSkgwsQE6Lnp6ekLCwMIDrsTisGIaC4MxK91ydgtJ2inEFYc43s1jzcHl7fycDeLhvGj4+P6HrqOpdqRUBlDrfzhtmgJJItwIBDcIeEgNA3eLjOWkS2EOYQ+yYAdlD9rIF6NakzH107ElnkB1oIXZnD8jeenLpNAruatHsYNOyy5+BnQR4/vv/I87tR31s25ZSChoC9Ks5d+7cu5s3bzL8+fMbEtjLly8HxdwEUMwBAEi7Lb9Bc6I2AAAAAElFTkSuQmCC);  background-repeat: no-repeat;  cursor: pointer;  display: block;  height: 27px;  left: 0;  padding-left: 4px;  position: absolute;  top: 0;  width: 0;}.iPhoneCheckHandleCenter {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAbCAIAAADUE7lnAAAAhUlEQVR4AU2Qwa3GMAyC+RzvP0SvHa2vM/AU5OhvTsZgEOG6Lp3H8zyyJAv6731nLXWRwRJqqNlrA2CuBqAwVXWMN4gIJMcAQnlkllFtmQ/VbARsrosS8eJrPTm2AcUa5GQlNBdExrfCSk0JDjOhZCJ9SA5x7xoGjoyo3Gut31fd963z/gEJqSZcGlcDuwAAAABJRU5ErkJggg==);  background-repeat: repeat-x;  height: 100%;  position: absolute;  width: 100%;}.iPhoneCheckHandleRight {  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAbCAYAAABbcS4wAAAAz0lEQVR4AWWPMW6EMBREx2PKVGlA2htswylys5zkFxApR8gVKKmpglJtlThL5wyEbznKiMGeLzPPwMzezezFzC7Yta5rnqYpa3CTr0xfCW3bou/7RwDPzMi4f9/RdR2kJ4YQAD0xRmj/0BwDyVeSQYFl0PwGFDGQoFw+iWdwNyV4B0kcCt7hFDhWYUez3OOk4Ow5T1RYccGacmyqAVldrGDJCOBP6R5Qfv9/aZb9BLZty+5hGD4bpyzLsq9vSCnleZ7zOI43+Qq9PuRX+QLpB8XPRQYYBqohAAAAAElFTkSuQmCC);  background-repeat: no-repeat;  height: 100%;  position: absolute;  right: 0;  width: 4px;}
</style>        <style>.jQWCP-wWidget {  background: #eee;  border: solid 1px #aaa;  border-radius: 4px;  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);  height: 180px;  padding: 10px;  position: absolute;  width: 250px;  z-index: 1001;}.jQWCP-wWidget.jQWCP-block {  border-color: #aaa;  box-shadow: inset 1px 1px 1px #ccc;  position: relative;}.jQWCP-wWheel {  -moz-border-radius: 50%;  -webkit-border-radius: 90px;  background-position: center;  background-repeat: no-repeat;  background-size: contain;  border: solid 1px #aaa;  border-radius: 50%;  cursor: crosshair;  float: left;  height: 180px;  margin: -1px 10px -1px -1px;  position: relative;  transition: border 0.15s;  width: 180px;}.jQWCP-wWheel:hover {  border-color: #666;}.jQWCP-wWheelOverlay {  -moz-border-radius: 50%;  -webkit-border-radius: 90px;  background: #000;  border-radius: 50%;  height: 100%;  left: 0;  opacity: 0;  position: absolute;  top: 0;  width: 100%;}.jQWCP-wWheelCursor {  border: solid 2px #fff;  border-radius: 50%;  box-shadow: 1px 1px 2px #000;  cursor: crosshair;  height: 8px;  left: 50%;  margin: -6px;  position: absolute;  top: 50%;  width: 8px;}.jQWCP-slider-wrapper, .jQWCP-wPreview {  float: left;  height: 180px;  margin-right: 10px;  position: relative;  width: 20px;}.jQWCP-slider-wrapper:last-child,.jQWCP-wPreview:last-child,.jQWCP-wWheel:last-child {  margin-right: 0;}.jQWCP-slider, .jQWCP-wPreviewBox {  -moz-border-radius: 4px;  border: solid 1px #aaa;  border-radius: 4px;  box-sizing: border-box;  height: 100%;  left: 0;  margin: -1px;  position: absolute;  top: 0;  transition: border 0.15s;  width: 100%;}.jQWCP-slider {  cursor: crosshair;}.jQWCP-slider-wrapper:hover .jQWCP-slider {  border-color: #666;}.jQWCP-scursor {  border: solid 2px #fff;  border-radius: 4px;  box-shadow: 1px 1px 2px #000;  cursor: crosshair;  height: 6px;  left: 0;  margin: -5px -1px -5px -3px;  position: absolute;  right: 0;  top: 0;}.jQWCP-wAlphaSlider, .jQWCP-wPreviewBox {  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEVAQEB/f39eaJUuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYRBDgK9dKdMgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAARSURBVAjXY/jPwIAVYRf9DwB+vw/x6vMT1wAAAABJRU5ErkJggg==) center center;}.jQWCP-overlay {  bottom: 0;  left: 0;  position: fixed;  right: 0;  top: 0;  z-index: 1000;}.jQWCP-mobile.jQWCP-wWidget {  border-radius: 0;  bottom: 0;  box-sizing: border-box;  height: 75%;  left: 0 !important;  max-height: 15pc;  position: fixed;  top: auto !important;  width: 100%;}
</style>        <style>#menu .pure-menu-heading {  font-size: 100%;  padding: 0.5em;  text-transform: initial;  white-space: normal;}.pure-g {  margin-bottom: 0;}.pure-form legend {  font-weight: 700;  letter-spacing: 0;  margin: 10px 0 1em;}.pure-form .pure-g > label {  margin: 0.4em 0 0.2em;}.pure-form input {  margin-bottom: 10px;}.pure-form input[type=text][disabled] {  color: #777;}@media screen and (max-width: 32em) {  .header > h1 {    font-size: 2em;    line-height: 100%;  }
}h2 {  font-size: 1em;}.panel {  display: none;}.block {  display: block;}.content {  margin: 0;}.page {  margin-top: 10px;}.hint {  color: #ccc;  font-size: 80%;  margin: -10px 0 10px;}.hint a {  color: inherit;}.module, .template, input[name=upgrade], legend.module {  display: none;}select {  margin-bottom: 10px;  width: 100%;}input.center {  margin-bottom: 0;}div.center {  margin: 0.5em 0 1em;}.webmode {  display: none;}#credentials {  font-size: 200%;  height: 75pt;  left: 50%;  margin-left: -200px;  margin-top: -50px;  position: fixed;  text-align: center;  top: 50%;  width: 25pc;}div.state {  border-top: 1px solid #eee;  margin-top: 20px;  padding-top: 30px;}.state div {  font-size: 80%;}.state span {  font-size: 80%;  font-weight: 700;}.right {  text-align: right;}.pure-g span.terminal, .pure-g textarea.terminal {  background-color: #000;  color: #0f0;  font-family: Courier New, monospace;  font-size: 80%;  line-height: 100%;}.pure-button {  border-radius: 4px;  color: #fff;  letter-spacing: 0;  margin-bottom: 10px;  padding: 8px;  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);}.main-buttons {  margin: 20px auto;  text-align: center;}.main-buttons button {  width: 75pt;}.button-dbg-clear,.button-del-network,.button-del-schedule,.button-ha-del,.button-reboot,.button-reconnect,.button-rfb-forget,.button-settings-factory,.button-upgrade {  background: #c00000;}.button-add-network,.button-apikey,.button-dbgcmd,.button-ha-add,.button-ha-config,.button-rfb-learn,.button-settings-backup,.button-settings-restore,.button-update,.button-update-password,.button-upgrade-browse {  background: #00c000;}.button-add-light-schedule, .button-add-switch-schedule {  background: #00c000;  display: none;}.button-more-network, .button-more-schedule, .button-rfb-send, .button-wifi-scan {  background: #ff8000;}.button-apikey,.button-dbgcmd,.button-ha-add,.button-upgrade,.button-upgrade-browse {  margin-left: 5px;}input.slider {  margin-top: 10px;}span.slider {  font-size: 70%;  letter-spacing: 0;  margin-left: 10px;  margin-top: 7px;}.loading {  background-image: url(data:image/gif;base64,R0lGODlhFAAUAJEDAMzMzLOzs39/f////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgADACwAAAAAFAAUAAACPJyPqcuNItyCUJoQBo0ANIxpXOctYHaQpYkiHfM2cUrCNT0nqr4uudsz/IC5na/2Mh4Hu+HR6YBaplRDAQAh+QQFCgADACwEAAIADAAGAAACFpwdcYupC8BwSogR46xWZHl0l8ZYQwEAIfkEBQoAAwAsCAACAAoACgAAAhccMKl2uHxGCCvO+eTNmishcCCYjWEZFgAh+QQFCgADACwMAAQABgAMAAACFxwweaebhl4K4VE6r61DiOd5SfiN5VAAACH5BAUKAAMALAgACAAKAAoAAAIYnD8AeKqcHIwwhGntEWLkO3CcB4biNEIFACH5BAUKAAMALAQADAAMAAYAAAIWnDSpAHa4GHgohCHbGdbipnBdSHphAQAh+QQFCgADACwCAAgACgAKAAACF5w0qXa4fF6KUoVQ75UaA7Bs3yeNYAkWACH5BAUKAAMALAIABAAGAAwAAAIXnCU2iMfaRghqTmMp1moAoHyfIYIkWAAAOw==);  display: none;  height: 20px;  margin: 8px 0 0 10px;  width: 20px;}#menu .small {  font-size: 60%;  padding-left: 9px;}#menu div.footer {  color: #999;  font-size: 80%;  padding: 10px;}#menu div.footer a {  padding: 0;  text-decoration: none;}#panel-rfb fieldset {  margin: 10px 2px;  padding: 20px;}#panel-rfb input {  margin-right: 5px;}#panel-rfb label {  padding-top: 5px;}#panel-rfb input {  text-align: center;}#upgrade-progress {  display: none;  height: 20px;  margin-top: 10px;  width: 100%;}#downloader, #uploader {  display: none;}#networks .pure-g, #schedules .pure-g {  border-bottom: 1px solid #eee;  margin-bottom: 10px;  padding: 10px 0;}#networks .more {  display: none;}#haConfig, #scanResult {  display: none;  margin-top: 10px;  padding: 10px;}#weblog {  height: 25pc;  margin-bottom: 10px;}
</style>        <!-- endbuild -->
    </head>
    <body>
        <div id="password" class="webmode">
            <div class="content">
                <form id="formPassword" class="pure-form" action="/" method="post">
                    <div class="panel block">
                        <div class="header">                            <h1>SECURITY</h1>                            <h2>Before using this device you have to change the default password for the user 'admin'. This password will be used for the <strong>AP mode hotspot</strong>, the <strong>web interface</strong> (where you are now) and the <strong>over-the-air updates</strong>.</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Admin password</label>                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" tabindex="1" autocomplete="false">                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode or to flash a new firmware over-the-air (OTA).<br>                                        It must have at least <strong>five characters</strong> (numbers and letters and any of these special characters: _,.;:~!?@#$%^&amp;*&lt;&gt;\|(){}[]) and at least <strong>one lowercase</strong> and <strong>one uppercase</strong> or <strong>one number</strong>.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Repeat password</label>                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" tabindex="2" autocomplete="false">                                </div>
                                <div class="pure-u-0 pure-u-lg-1-4 more"></div>                                <button class="pure-button button-update-password" type="button">Update</button>
                            </fieldset>                        </div>                    </div>
                </form>
            </div> <!-- content -->
        </div>
        <div id="layout" class="webmode">
            <a id="menuLink" class="menu-link">                <span></span>            </a>
            <div id="menu">                <div class="pure-menu">
                    <span class="pure-menu-heading" name="hostname">HOSTNAME</span>                    <span class="pure-menu-heading small" name="title">ESPurna 0.0.0</span>
                    <ul class="pure-menu-list">
                        <li class="pure-menu-item">                            <a href="#" class="pure-menu-link" data="panel-status">STATUS</a>                        </li>
                        <li class="pure-menu-item menu-item-divided">                            <a href="#" class="pure-menu-link" data="panel-general">GENERAL</a>                        </li>
                        <li class="pure-menu-item module module-dcz">                            <a href="#" class="pure-menu-link" data="panel-domoticz">DOMOTICZ</a>                        </li>
                        <li class="pure-menu-item module module-ha">                            <a href="#" class="pure-menu-link" data="panel-ha">HASS</a>                        </li>
                        <li class="pure-menu-item module module-idb">                            <a href="#" class="pure-menu-link" data="panel-idb">INFLUXDB</a>                        </li>
                        <li class="pure-menu-item module module-color">                            <a href="#" class="pure-menu-link" data="panel-color">LIGHTS</a>                        </li>
                        <li class="pure-menu-item module module-mqtt">                            <a href="#" class="pure-menu-link" data="panel-mqtt">MQTT</a>                        </li>
                        <li class="pure-menu-item module module-ntp">                            <a href="#" class="pure-menu-link" data="panel-ntp">NTP</a>                        </li>
                        <li class="pure-menu-item module module-rfb">                            <a href="#" class="pure-menu-link" data="panel-rfb">RF</a>                        </li>
                        <li class="pure-menu-item module module-sch">                            <a href="#" class="pure-menu-link" data="panel-schedule">SCHEDULE</a>                        </li>
                        
                        <li class="pure-menu-item module module-relay">                            <a href="#" class="pure-menu-link" data="panel-relay">SWITCHES</a>                        </li>
                        <li class="pure-menu-item module module-tspk">                            <a href="#" class="pure-menu-link" data="panel-thingspeak">THINGSPEAK</a>                        </li>
                        <li class="pure-menu-item">                            <a href="#" class="pure-menu-link" data="panel-wifi">WIFI</a>                        </li>
                        <li class="pure-menu-item menu-item-divided">                            <a href="#" class="pure-menu-link" data="panel-admin">ADMIN</a>                        </li>
                        <li class="pure-menu-item module module-dbg">                            <a href="#" class="pure-menu-link" data="panel-dbg">DEBUG</a>                        </li>
                    </ul>
                    <div class="main-buttons">                        <button class="pure-button button-update">Save</button>                        <button class="pure-button button-reconnect">Reconnect</button>                        <button class="pure-button button-reboot">Reboot</button>                    </div>
                    <div class="footer">                        &copy; 2016-2018<br>                        Xose Pérez<br>                        <a href="http://tinkerman.cat" target="_blank">http://tinkerman.cat</a><br>                        <a href="https://github.com/xoseperez/espurna" target="_blank">ESPurna @ GitHub</a><br>                        GPLv3 license<br>                    </div>
                </div>            </div>
            <div class="content">
                <div class="panel block" id="panel-status">
                    <div class="header">                        <h1>STATUS</h1>                        <h2>Current configuration</h2>                    </div>
                    <div class="page">
                        <form class="pure-form pure-form-aligned">                            <fieldset>
                                <div id="relays"></div>
                                <div id="colors"></div>
                                <div id="cct"></div>
                                <div id="channels"></div>
                                <div id="magnitudes"></div>
                                <div class="pure-u-1 pure-u-lg-1-2 state">
                                    <div class="pure-u-1-2">Manufacturer</div>                                    <div class="pure-u-11-24"><span class="right" name="manufacturer"></span></div>
                                    <div class="pure-u-1-2">Device</div>                                    <div class="pure-u-11-24"><span class="right" name="device"></span></div>
                                    <div class="pure-u-1-2">Chip ID</div>                                    <div class="pure-u-11-24"><span class="right" name="chipid"></span></div>
                                    <div class="pure-u-1-2">Wifi MAC</div>                                    <div class="pure-u-11-24"><span class="right" name="mac"></span></div>
                                    <div class="pure-u-1-2">SDK version</div>                                    <div class="pure-u-11-24"><span class="right" name="sdk"></span></div>
                                    <div class="pure-u-1-2">Core version</div>                                    <div class="pure-u-11-24"><span class="right" name="core"></span></div>
                                    <div class="pure-u-1-2">Firmware name</div>                                    <div class="pure-u-11-24"><span class="right" name="app_name"></span></div>
                                    <div class="pure-u-1-2">Firmware version</div>                                    <div class="pure-u-11-24"><span class="right" name="app_version"></span></div>
                                    <!--
                                    <div class="pure-u-1-2">Firmware revision</div>                                    <div class="pure-u-11-24"><span class="right" name="app_revision"></span></div>                                    -->
                                    <div class="pure-u-1-2">Firmware build date</div>                                    <div class="pure-u-11-24"><span class="right" name="app_build"></span></div>
                                    <div class="pure-u-1-2">Firmware size</div>                                    <div class="pure-u-11-24"><span class="right" name="sketch_size" post=" bytes"></span></div>
                                    <div class="pure-u-1-2">Free space</div>                                    <div class="pure-u-11-24"><span class="right" name="free_size" post=" bytes"></span></div>
                                </div>
                                <div class="pure-u-1 pure-u-lg-11-24 state">
                                    <div class="pure-u-1-2">Network</div>                                    <div class="pure-u-11-24"><span class="right" name="network"></span></div>
                                    <div class="pure-u-1-2">BSSID</div>                                    <div class="pure-u-11-24"><span class="right" name="bssid"></span></div>
                                    <div class="pure-u-1-2">Channel</div>                                    <div class="pure-u-11-24"><span class="right" name="channel"></span></div>
                                    <div class="pure-u-1-2">RSSI</div>                                    <div class="pure-u-11-24"><span class="right" name="rssi"></span></div>
                                    <div class="pure-u-1-2">IP</div>                                    <div class="pure-u-11-24"><a href=""><span class="right" name="deviceip"></span></a> (<a href=""><span class="right">telnet</span></a>)</div>
                                    <div class="pure-u-1-2">Free heap</div>                                    <div class="pure-u-11-24"><span class="right" name="heap" post=" bytes"></span></div>
                                    <div class="pure-u-1-2">Load average</div>                                    <div class="pure-u-11-24"><span class="right" name="loadaverage"></span><span>%</span></div>
                                    <div class="pure-u-1-2">VCC</div>                                    <div class="pure-u-11-24"><span class="right" name="vcc">? </span><span>mV</span></div>
                                    <div class="pure-u-1-2 module module-mqtt">MQTT Status</div>                                    <div class="pure-u-11-24 module module-mqtt"><span class="right" name="mqttStatus"></span></div>
                                    <div class="pure-u-1-2 module module-ntp">NTP Status</div>                                    <div class="pure-u-11-24 module module-ntp"><span class="right" name="ntpStatus"></span></div>
                                    <div class="pure-u-1-2 module module-ntp">Current time</div>                                    <div class="pure-u-11-24 module module-ntp"><span class="right" name="now"></span></div>
                                    <div class="pure-u-1-2">Uptime</div>                                    <div class="pure-u-11-24"><span class="right" name="uptime"></span></div>
                                    <div class="pure-u-1-2">Last update</div>                                    <div class="pure-u-11-24"><span class="right" name="ago">?</span><span> seconds ago</span></div>
                                </div>
                            </fieldset>
                        </form>                    </div>                </div>
                <form id="formSave" class="pure-form" action="/" method="post" enctype="multipart/form-data">
                    <div class="panel" id="panel-general">
                        <div class="header">                            <h1>GENERAL</h1>                            <h2>General configuration values</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Hostname</label>                                    <input name="hostname" class="pure-u-1 pure-u-lg-1-4" maxlength="32" type="text" action="reboot" tabindex="1">                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        This name will identify this device in your network (http://&lt;hostname&gt;.local).<br>                                        Hostname may contain only the ASCII letters 'a' through 'z' (in a case-insensitive manner), the digits '0' through '9', and the hyphen ('-'). They can neither start or end with an hyphen.<br>                                        For this setting to take effect you should restart the wifi interface by clicking the "Reconnect" button.                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Double click delay</label>                                    <input name="btnDelay" class="pure-u-1 pure-u-lg-1-4" type="number" action="reboot" min="0" step="100" max="1000" tabindex="6">                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        Delay in milliseconds to detect a double click (from 0 to 1000ms).<br>                                        The lower this number the faster the device will respond to button clicks but the harder it will be to get a double click.                                        Increase this number if you are having trouble to double click the button.                                        Set this value to 0 to disable double click. You won't be able to set the device in AP mode manually but your device will respond immediately to button clicks.<br>                                        You will have to <strong>reboot the device</strong> after updating for this setting to apply.                                    </div>                                </div>
                                <div class="pure-g module module-led">                                    <label class="pure-u-1 pure-u-lg-1-4">LED mode</label>                                    <select name="ledMode0" class="pure-u-1 pure-u-lg-1-4" tabindex="7">                                        <option value="1">WiFi status</option>                                        <option value="8">Relay status</option>                                        <option value="0">MQTT managed</option>                                        <option value="4">Find me</option>                                        <option value="9">Relay &amp; WiFi</option>                                        <option value="5">Find me &amp; WiFi</option>                                        <option value="6">Always ON</option>                                        <option value="7">Always OFF</option>                                    </select>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        This setting defines the behaviour of the main LED in the board.<br>                                        When in "WiFi status" it will blink at 1Hz when trying to connect. If successfully connected it will briefly blink every 5 seconds if in STA mode or every second if in AP mode.<br>                                        When in "Relay status" mode the LED will be ON whenever any relay is ON, and OFF otherwise. This is global status notification.<br>                                        When in "MQTT managed" mode you will be able to set the LED state sending a message to "&lt;base_topic&gt;/led/0/set" with a payload of 0, 1 or 2 (to toggle it).<br>                                        When in "Find me" mode the LED will be ON when all relays are OFF. This is meant to locate switches at night.<br>                                        When in "Relay &amp; WiFi" mode it will follow the WiFi status but will stay mostly off when relays are OFF, and mostly ON when any of them is ON.<br>                                        When in "Find me &amp; WiFi" mode is the opposite of the "Relay &amp; WiFi", it will follow the WiFi status but will stay mostly on when relays are OFF, and mostly OFF when any of them is ON.<br>                                        "Always ON" and "Always OFF" modes are self-explanatory.                                    </div>                                </div>
                                <div class="pure-g module module-alexa">                                    <label class="pure-u-1 pure-u-lg-1-4">Alexa integration</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="alexaEnabled" tabindex="13"></div>                                </div>
                            </fieldset>                        </div>                    </div>
                    <div class="panel" id="panel-relay">
                        <div class="header">                            <h1>SWITCHES</h1>                            <h2>Switch / relay configuration</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <legend class="module module-multirelay">General</legend>
                                <div class="pure-g module module-multirelay">                                    <label class="pure-u-1 pure-u-lg-1-4">Switch sync mode</label>                                    <select name="relaySync" class="pure-u-1 pure-u-lg-3-4" tabindex="3">                                        <option value="0">No synchronisation</option>                                        <option value="1">Zero or one switches active</option>                                        <option value="2">One and just one switch active</option>                                        <option value="3">All synchronised</option>                                    </select>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Define how the different switches should be synchronized.</div>                                </div>
                                <div id="relayConfig"></div>
                            </fieldset>
                        </div>                    </div>
                    <div class="panel" id="panel-color">
                        <div class="header">                            <h1>LIGHTS</h1>                            <h2>Lights configuration</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Use color</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="useColor" action="reload" tabindex="8"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Use the first three channels as RGB channels. This will also enable the color picker in the web UI. Will only work if the device has at least 3 dimmable channels.<br>Reload the page to update the web interface.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Use RGB picker</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="useRGB" action="reload" tabindex="11"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Use RGB color picker if enabled (plus brightness), otherwise use HSV (hue-saturation-value) style</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Use white channel</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="useWhite" action="reload" tabindex="9"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Use forth dimmable channel as (cold) white light calculated out of the RGB values.<br>Will only work if the device has at least 4 dimmable channels.<br>Enabling this will render useless the "Channel 4" slider in the status page.<br>Reload the page to update the web interface.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Use white color temperature</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="useCCT" action="reload" tabindex="10"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Use fifth dimmable channel as warm white light and the forth dimmable channel as cold white.<br>Will only work if the device has at least 5 dimmable channels and "white channel" above is also ON.<br>Enabling this will render useless the "Channel 5" slider in the status page.<br>Reload the page to update the web interface.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Use gamma correction</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="useGamma" tabindex="11"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Use gamma correction for RGB channels.<br>Will only work if "use colorpicker" above is also ON.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Use CSS style</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="useCSS" tabindex="12"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Use CSS style to report colors to MQTT and REST API. <br>Red will be reported as "#FF0000" if ON, otherwise "255,0,0"</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Color transitions</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="useTransitions" tabindex="13"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">If enabled color changes will be smoothed.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Transition time</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1" type="number" name="lightTime" min="10" max="5000" tabindex="14"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Time in millisecons to transition from one color to another.</div>                                </div>
                                <div class="pure-g">                                    <div class="pure-u-1 pure-u-lg-1-4"><label>MQTT group</label></div>                                    <div class="pure-u-1 pure-u-lg-3-4"><input name="mqttGroupColor" class="pure-u-1" tabindex="15" action="reconnect"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Sync color between different lights.</div>                                </div>
                            </fieldset>                        </div>                    </div>
                    <div class="panel" id="panel-admin">
                        <div class="header">                            <h1>ADMINISTRATION</h1>                            <h2>Device administration and security settings</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Settings</label>                                    <div class="pure-u-1-3 pure-u-lg-1-4"><button class="pure-button button-settings-backup pure-u-23-24">Backup</button></div>                                    <div class="pure-u-1-3 pure-u-lg-1-4"><button class="pure-button button-settings-restore pure-u-23-24">Restore</button></div>                                    <div class="pure-u-1-3 pure-u-lg-1-4"><button class="pure-button button-settings-factory pure-u-1">Factory Reset</button></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Admin password</label>                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" action="reboot" tabindex="11" autocomplete="false">                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in AP mode or to flash a new firmware over-the-air (OTA).<br>                                        It must have at least <strong>five characters</strong> (numbers and letters and any of these special characters: _,.;:~!?@#$%^&amp;*&lt;&gt;\|(){}[]) and at least <strong>one lowercase</strong> and <strong>one uppercase</strong> or <strong>one number</strong>.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Repeat password</label>                                    <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" action="reboot" tabindex="12" autocomplete="false">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">HTTP port</label>                                    <input name="webPort" class="pure-u-1 pure-u-lg-1-4" type="text" action="reboot" tabindex="13">                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        This is the port for the web interface and API requests.                                        If different than 80 (standard HTTP port) you will have to add it explicitly to your requests: http://myip:myport/                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Enable WS Auth</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="wsAuth"></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Enable HTTP API</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="apiEnabled"></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Real time API</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="apiRealTime"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        By default, some magnitudes are being preprocessed and filtered to avoid spurious values.                                        If you want to get real-time values (not preprocessed) in the API turn on this setting.                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">HTTP API Key</label>                                    <input name="apiKey" class="pure-u-3-4 pure-u-lg-1-2" type="text" tabindex="14">                                    <div class=" pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-apikey pure-u-23-24">Auto</button></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        This is the key you will have to pass with every HTTP request to the API, either to get or write values.                                        All API calls must contain the <strong>apikey</strong> parameter with the value above.                                        To know what APIs are enabled do a call to <strong>/apis</strong>.                                    </div>                                </div>
                                <div class="pure-g module module-telnet">                                    <label class="pure-u-1 pure-u-lg-1-4">Enable TELNET</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="telnetSTA"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">Turn ON to be able to telnet to your device while connected to your home router.<br>TELNET is always enabled in AP mode.</div>                                </div>

                                <div class="pure-g module module-nofuss">                                    <label class="pure-u-1 pure-u-lg-1-4">Automatic remote updates (NoFUSS)</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="nofussEnabled"></div>                                </div>
                                <div class="pure-g module module-nofuss">                                    <label class="pure-u-1 pure-u-lg-1-4">NoFUSS server</label>                                    <input name="nofussServer" class="pure-u-1 pure-u-lg-3-4" type="text" tabindex="15">                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">This name address of the NoFUSS server for automatic remote updates (see https://bitbucket.org/xoseperez/nofuss).</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Upgrade</label>                                    <input class="pure-u-1-2 pure-u-lg-1-2" name="filename" type="text" readonly>                                    <div class=" pure-u-1-4 pure-u-lg-1-8"><button class="pure-button button-upgrade-browse pure-u-23-24">Browse</button></div>                                    <div class=" pure-u-1-4 pure-u-lg-1-8"><button class="pure-button button-upgrade pure-u-23-24">Upgrade</button></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">The device has <span name="free_size"></span> bytes available for OTA updates. If your image is larger than this consider doing a <a href="https://github.com/xoseperez/espurna/wiki/TwoStepUpdates" target="_blank"><strong>two-step update</strong></a>.</div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4"><progress id="upgrade-progress"></progress></div>                                    <input name="upgrade" type="file" tabindex="16">                                </div>
                            </fieldset>                        </div>                    </div>
                    <div class="panel" id="panel-wifi">
                        <div class="header">                            <h1>WIFI</h1>                            <h2>You can configure up to 5 different WiFi networks. The device will try to connect in order of signal strength.</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <legend>General</legend>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Scan networks</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="wifiScan" tabindex="1"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of <strong>signal strength</strong>, even if multiple AP share the same SSID.                                        When disabled, ESPurna will try to connect to the networks in the same order they are listed below.                                        Disable this option if you are <strong>connecting to a single access point</strong> (or router) or to a <strong>hidden SSID</strong>.                                                                            </div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <button class="pure-button button-wifi-scan" type="button">Scan now</button>                                    <div class="pure-u-0 pure-u-lg-1-4 scan loading"></div>                                </div>
                                <div class="pure-g">                                    <span class="pure-u-1 terminal" id="scanResult" name="scanResult"></span>                                </div>
                                <legend>Networks</legend>
                                <div id="networks"></div>
                                <button type="button" class="pure-button button-add-network">Add network</button>
                            </fieldset>                        </div>                    </div>
                    <div class="panel" id="panel-schedule">
                        <div class="header">                            <h1>SCHEDULE</h1>                            <h2>Turn switches ON and OFF based on the current time.</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div id="schedules"></div>
                                <button type="button" class="pure-button button-add-switch-schedule module module-relay">Add switch schedule</button>                                <button type="button" class="pure-button button-add-light-schedule module module-color">Add channel schedule</button>
                            </fieldset>
                        </div>
                    </div>
                    <div class="panel" id="panel-mqtt">
                        <div class="header">                            <h1>MQTT</h1>                            <h2>Configure an <strong>MQTT broker</strong> in your network and you will be able to change the switch status via an MQTT message.</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Enable MQTT</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="mqttEnabled" tabindex="30"></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT Broker</label>                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttServer" type="text" tabindex="21" placeholder="IP or address of your broker">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT Port</label>                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttPort" type="text" tabindex="22" value="1883">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT User</label>                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttUser" type="text" tabindex="23" placeholder="Leave blank if no user" autocomplete="false">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT Password</label>                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttPassword" type="password" tabindex="24" placeholder="Leave blank if no pass" autocomplete="false">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT Client ID</label>                                    <input class="pure-u-1 pure-u-lg-1-4" name="mqttClientID" type="text" tabindex="25">                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        If left empty the firmware will generate a client ID based on the serial number of the chip.                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT QoS</label>                                    <select class="pure-u-1 pure-u-lg-1-4" name="mqttQoS" tabindex="26">                                        <option value="0">0: At most once</option>                                        <option value="1">1: At least once</option>                                        <option value="2">2: Exactly once</option>                                    </select>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT Retain</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="mqttRetain" tabindex="27"></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT Keep Alive</label>                                    <input class="pure-u-1 pure-u-lg-1-4" type="number" name="mqttKeep" min="10" max="3600" tabindex="28">                                </div>
                                <div class="pure-g module module-mqttssl">                                    <label class="pure-u-1 pure-u-lg-1-4">Use secure connection (SSL)</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="mqttUseSSL" tabindex="29"></div>                                </div>
                                <div class="pure-g module module-mqttssl">                                    <label class="pure-u-1 pure-u-lg-1-4">SSL Fingerprint</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="mqttFP" type="text" maxlength="59" tabindex="30">                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        This is the fingerprint for the SSL certificate of the server.<br>                                        You can get it using <a href="https://www.grc.com/fingerprints.htm" target="_blank">https://www.grc.com/fingerprints.htm</a><br>                                        or using openssl from a linux box by typing:<br>                                        <pre>$ openssl s_client -connect &lt;host&gt;:&lt;port&gt; &lt; /dev/null 2&gt;/dev/null | openssl x509 -fingerprint -noout -in /dev/stdin</pre>                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">MQTT Root Topic</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="mqttTopic" type="text" tabindex="31">                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        This is the root topic for this device. The {hostname} and {mac} placeholders will be replaced by the device hostname and MAC address.<br>                                        - <strong>&lt;root&gt;/relay/#/set</strong> Send a 0 or a 1 as a payload to this topic to switch it on or off. You can also send a 2 to toggle its current state. Replace # with the switch ID (starting from 0). If the board has only one switch it will be 0.<br>                                        <span class="module module-color">- <strong>&lt;root&gt;/rgb/set</strong> Set the color using this topic, your can either send an "#RRGGBB" value or "RRR,GGG,BBB" (0-255 each).<br></span>                                        <span class="module module-color">- <strong>&lt;root&gt;/hsv/set</strong> Set the color using hue (0-360), saturation (0-100) and value (0-100) values, comma separated.<br></span>                                        <span class="module module-color">- <strong>&lt;root&gt;/brightness/set</strong> Set the brighness (0-255).<br></span>                                        <span class="module module-color">- <strong>&lt;root&gt;/channel/#/set</strong> Set the value for a single color channel (0-255). Replace # with the channel ID (starting from 0 and up to 4 for RGBWC lights).<br></span>                                        <span class="module module-color">- <strong>&lt;root&gt;/mired/set</strong> Set the temperature color in mired.<br></span>                                        - <strong>&lt;root&gt;/status</strong> The device will report a 1 to this topic every few minutes. Upon MQTT disconnecting this will be set to 0.<br>                                        - Other values reported (depending on the build) are: <strong>firmware</strong> and <strong>version</strong>, <strong>hostname</strong>, <strong>IP</strong>, <strong>MAC</strong>, signal strenth (<strong>RSSI</strong>), <strong>uptime</strong> (in seconds), <strong>free heap</strong> and <strong>power supply</strong>.                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Use JSON payload</label>                                    <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="mqttUseJson" tabindex="32"></div>                                    <div class="pure-u-1 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        All messages (except the device status) will be included in a JSON payload along with the timestamp and hostname                                        and sent under the <strong>&lt;root&gt;/data</strong> topic.<br>                                        Messages will be queued and sent after 100ms, so different messages could be merged into a single payload.<br>                                        Subscriptions will still be done to single topics.                                    </div>                                </div>
                            </fieldset>                        </div>
                    </div>
                    <div class="panel" id="panel-ntp">
                        <div class="header">                            <h1>NTP</h1>                            <h2>Configure your NTP (Network Time Protocol) servers and local configuration to keep your device time up to the second for your location.</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Device Current Time</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="now" type="text" readonly>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">NTP Server</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="ntpServer" type="text" tabindex="41">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Time Zone</label>                                    <select class="pure-u-1 pure-u-lg-1-4" name="ntpOffset" tabindex="42"></select>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Enable DST</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="ntpDST"></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">DST Region</label>                                    <select class="pure-u-1 pure-u-lg-1-4" name="ntpRegion">                                        <option value="0">Europe</option>                                        <option value="1">USA</option>                                    </select>                                </div>
                            </fieldset>                        </div>
                    </div>
                    <div class="panel" id="panel-domoticz">
                        <div class="header">                            <h1>DOMOTICZ</h1>                            <h2>                                Configure the connection to your Domoticz server.                            </h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <legend>General</legend>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Enable Domoticz</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="dczEnabled" tabindex="30"></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Domoticz IN Topic</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="dczTopicIn" type="text" tabindex="31">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Domoticz OUT Topic</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="dczTopicOut" type="text" action="reconnect" tabindex="32">                                </div>
                                <legend>Sensors &amp; actuators</legend>
                                <div class="pure-g">                                    <div class="pure-u-1 hint">Set IDX to 0 to disable notifications from that component.</div>                                </div>
                                <div id="dczRelays"></div>
                                
                            </fieldset>                        </div>
                    </div>
                    <div class="panel" id="panel-ha">
                        <div class="header">                            <h1>HOME ASSISTANT</h1>                            <h2>                                Add this device to your Home Assistant.                            </h2>                        </div>
                        <div class="page">                            <fieldset>
                                <legend>Discover</legend>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Discover</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="haEnabled" tabindex="14"></div>                                    <div class="pure-u-0 pure-u-lg-1-2"></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        Home Assistant auto-discovery feature. Enable and save to add the device to your HA console.                                        When using a colour light you might want to disable CSS style so Home Assistant can parse the color.                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Prefix</label>                                    <input class="pure-u-1 pure-u-lg-1-4" name="haPrefix" type="text" tabindex="15">                                </div>
                                <legend>Configuration</legend>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Configuration</label>                                    <div class="pure-u-1-4 pure-u-lg-3-4"><button class="pure-button button-ha-config pure-u-1-3">Show</button></div>                                    <div class="pure-u-0 pure-u-lg-1-4"></div>                                    <div class="pure-u-1 pure-u-lg-3-4 hint">                                        These are the settings you should copy to your Home Assistant "configuration.yaml" file.                                        If any of the sections below (switch, light, sensor) already exists, do not duplicate it,                                        simply copy the contents of the section below the ones already present.                                    </div>                                </div>                                <div class="pure-g">                                    <span class="pure-u-1 terminal" id="haConfig" name="haConfig"></span>                                </div>

                            </fieldset>                        </div>
                    </div>
                    <div class="panel" id="panel-thingspeak">
                        <div class="header">                            <h1>THINGSPEAK</h1>                            <h2>                                Send your sensors data to Thingspeak.                            </h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <legend>General</legend>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Enable Thingspeak</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="tspkEnabled" tabindex="30"></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Thingspeak API Key</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="tspkKey" type="text" tabindex="31">                                </div>
                                <legend>Sensors &amp; actuators</legend>
                                <div class="pure-g">                                    <div class="pure-u-1 hint">Enter the field number to send each data to, 0 disable notifications from that component.</div>                                </div>
                                <div id="tspkRelays"></div>
                                
                            </fieldset>                        </div>
                    </div>
                    <div class="panel" id="panel-idb">
                        <div class="header">                            <h1>INFLUXDB</h1>                            <h2>                                Configure the connection to your InfluxDB server. Leave the host field empty to disable InfluxDB connection.                            </h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Enable InfluxDB</label>                                    <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" name="idbEnabled" tabindex="40"></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Host</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbHost" type="text" tabindex="41">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Port</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbPort" type="text" tabindex="42">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Database</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbDatabase" type="text" tabindex="43">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Username</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbUsername" type="text" tabindex="44" autocomplete="false">                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-lg-1-4">Password</label>                                    <input class="pure-u-1 pure-u-lg-3-4" name="idbPassword" type="password" tabindex="45" autocomplete="false">                                </div>
                            </fieldset>                        </div>
                    </div>
                    <div class="panel" id="panel-dbg">
                        <div class="header">                            <h1>DEBUG LOG</h1>                            <h2>                                Shows debug messages from the device                            </h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g module module-cmd">                                    <div class="pure-u-1 hint">                                        Write a command and click send to execute it on the device. The output will be shown in the debug text area below.                                    </div>                                    <input name="dbgcmd" class="pure-u-3-4" type="text" tabindex="2">                                    <div class=" pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-dbgcmd pure-u-23-24">Send</button></div>                                </div>
                                <div class="pure-g">                                    <textarea class="pure-u-1 terminal" id="weblog" name="weblog" wrap="off" readonly></textarea>                                    <div class=" pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-dbg-clear pure-u-23-24">Clear</button></div>                                </div>
                            </fieldset>
                        </div>
                    </div>
                    
                    <div class="panel" id="panel-rfb">
                        <div class="header">                            <h1>RADIO FREQUENCY</h1>                            <h2>                                Sonoff 433 RF Bridge &amp; RF Link Configuration<br><br>                                This page allows you to configure the RF codes for the Sonoff RFBridge 433 and also for a basic RF receiver.<br><br>                                To learn a new code click <strong>LEARN</strong> (the Sonoff RFBridge will beep) then press a button on the remote, the new code should show up (and the RFBridge will double beep). If the device double beeps but the code does not update it has not been properly learnt. Keep trying.<br><br>                                Modify or create new codes manually and then click <strong>SAVE</strong> to store them in the device memory. If your controlled device uses the same code to switch ON and OFF, learn the code with the ON button and copy paste it to the OFF input box, then click SAVE on the last one to store the value.<br><br>                                Delete any code clicking the <strong>FORGET</strong> button.                                <span class="module module-rfbraw"><br><br>You can also specify 116-chars long RAW codes. Raw codes require a <a target="_blank" href="https://github.com/rhx/RF-Bridge-EFM8BB1">specific firmware for for the EFM8BB1</a>.</span>                            </h2>                        </div>
                        <div class="page">                            <fieldset>                                <div id="rfbNodes"></div>                            </fieldset>                        </div>                    </div>
                </form>
            </div> <!-- content -->
        </div> <!-- layout -->
        <!-- Templates -->
        <div id="rfbNodeTemplate" class="template">
            <legend>Switch #<span></span></legend>
            <div class="pure-g">                <div class="pure-u-1 pure-u-lg-1-4"><label>Switch ON</label></div>                <input class="pure-u-1 pure-u-lg-1-3" type="text" maxlength="18" name="rfbcode" data-id="1" data-status="1">                <div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-learn">LEARN</button></div>                <div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-send">SAVE</button></div>                <div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-forget">FORGET</button></div>            </div>
            <div class="pure-g">                <div class="pure-u-1 pure-u-lg-1-4"><label>Switch OFF</label></div>                <input class="pure-u-1 pure-u-lg-1-3" type="text" maxlength="18" name="rfbcode" data-id="1" data-status="0">                <div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-learn">LEARN</button></div>                <div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-send">SAVE</button></div>                <div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-forget">FORGET</button></div>            </div>
        </div>
        <div id="networkTemplate" class="template">
            <div class="pure-g">
                <label class="pure-u-1 pure-u-lg-1-4">Network SSID</label>                <div class="pure-u-5-6 pure-u-lg-2-3"><input name="ssid" type="text" action="reconnect" class="pure-u-23-24" value="" tabindex="0" placeholder="Network SSID" required autocomplete="false"></div>                <div class="pure-u-1-6 pure-u-lg-1-12"><button type="button" class="pure-button button-more-network pure-u-1">...</button></div>
                <label class="pure-u-1 pure-u-lg-1-4 more">Password</label>                <input class="pure-u-1 pure-u-lg-3-4 more" name="pass" type="password" action="reconnect" value="" tabindex="0" autocomplete="false">
                <label class="pure-u-1 pure-u-lg-1-4 more">Static IP</label>                <input class="pure-u-1 pure-u-lg-3-4 more" name="ip" type="text" action="reconnect" value="" maxlength="15" tabindex="0" autocomplete="false">                <div class="pure-u-0 pure-u-lg-1-4 more"></div>                <div class="pure-u-1 pure-u-lg-3-4 hint more">Leave empty for DNS negotiation</div>
                <label class="pure-u-1 pure-u-lg-1-4 more">Gateway IP</label>                <input class="pure-u-1 pure-u-lg-3-4 more" name="gw" type="text" action="reconnect" value="" maxlength="15" tabindex="0" autocomplete="false">                <div class="pure-u-0 pure-u-lg-1-4 more"></div>                <div class="pure-u-1 pure-u-lg-3-4 hint more">Set when using a static IP</div>
                <label class="pure-u-1 pure-u-lg-1-4 more">Network Mask</label>                <input class="pure-u-1 pure-u-lg-3-4 more" name="mask" type="text" action="reconnect" value="255.255.255.0" maxlength="15" tabindex="0" autocomplete="false">                <div class="pure-u-0 pure-u-lg-1-4 more"></div>                <div class="pure-u-1 pure-u-lg-3-4 hint more">Usually 255.255.255.0 for /24 networks</div>
                <label class="pure-u-1 pure-u-lg-1-4 more">DNS IP</label>                <input class="pure-u-1 pure-u-lg-3-4 more" name="dns" type="text" action="reconnect" value="8.8.8.8" maxlength="15" tabindex="0" autocomplete="false">                <div class="pure-u-0 pure-u-lg-1-4 more"></div>                <div class="pure-u-1 pure-u-lg-3-4 hint more">Set the Domain Name Server IP to use when using a static IP</div>
                <div class="pure-u-0 pure-u-lg-1-4 more"></div>                <button class="pure-button button-del-network more" type="button">Delete network</button>
            </div>
        </div>
        <div id="scheduleTemplate" class="template">
            <div class="pure-g">
                <label class="pure-u-1 pure-u-lg-1-4">When time is</label>                <div class="pure-u-1-4 pure-u-lg-1-5">                    <input class="pure-u-2-3" name="schHour" type="number" min="0" step="1" max="23" value="0">                    <div class="pure-u-1-4 hint center">&nbsp;h</div>                </div>                <div class="pure-u-1-4 pure-u-lg-1-5">                    <input class="pure-u-2-3" name="schMinute" type="number" min="0" step="1" max="59" value="0">                    <div class="pure-u-1-4 hint center">&nbsp;m</div>                </div>                <div class="pure-u-0 pure-u-lg-1-3"></div>
                <label class="pure-u-1 pure-u-lg-1-4">Use UTC time</label>                <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schUTC"></div>
                <label class="pure-u-1 pure-u-lg-1-4">And weekday is one of</label>                <div class="pure-u-2-5 pure-u-lg-1-5">                    <input class="pure-u-23-24 pure-u-lg-23-24" name="schWDs" type="text" maxlength="15" tabindex="0" value="1,2,3,4,5,6,7">                </div>                <div class="pure-u-3-5 pure-u-lg-1-2 hint center">&nbsp;1 for Monday, 2 for Tuesday...</div>
                <div id="schActionDiv" class="pure-u-1">                </div>
                <label class="pure-u-1 pure-u-lg-1-4">Enabled</label>                <div class="pure-u-1 pure-u-lg-3-4"><input type="checkbox" name="schEnabled"></div>
                <div class="pure-u-0 pure-u-lg-1-4"></div>                <button class="pure-button button-del-schedule" type="button">Delete schedule</button>            </div>        </div>
        <div id="switchActionTemplate" class="template">            <label class="pure-u-1 pure-u-lg-1-4">Action</label>            <div class="pure-u-1 pure-u-lg-1-5">                <select class="pure-u-1 pure-u-lg-23-24" name="schAction">                    <option value="0">Turn OFF</option>                    <option value="1">Turn ON</option>                    <option value="2">Toggle</option>                </select>            </div>            <select class="pure-u-1 pure-u-lg-1-5 isrelay" name="schSwitch"></select>            <input type="hidden" name="schType" value="1">        </div>
        <div id="lightActionTemplate" class="template">            <label class="pure-u-1 pure-u-lg-1-4">Brightness</label>            <div class="pure-u-1 pure-u-lg-1-5">                <input class="pure-u-2-3" name="schAction" type="number" min="0" step="1" max="255" value="0">            </div>            <select class="pure-u-1 pure-u-lg-1-5 islight" name="schSwitch"></select>            <input type="hidden" name="schType" value="2">        </div>
        <div id="relayTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Switch #<span class="id"></span></label>                <div class="pure-u-1 pure-u-lg-1-4"><input type="checkbox" class="relayStatus pure-u-1 pure-u-lg-1-4" data="0"></div>            </div>        </div>
        <div id="relayConfigTemplate" class="template">            <legend>Switch #<span class="id"></span> (GPIO<span class="gpio"></span>)</legend>            <div class="pure-g">                <div class="pure-u-1 pure-u-lg-1-4"><label>Boot mode</label></div>                <select class="pure-u-1 pure-u-lg-3-4" name="relayBoot">                    <option value="0">Always OFF</option>                    <option value="1">Always ON</option>                    <option value="2">Same as before</option>                    <option value="3">Toggle before</option>                </select>            </div>            <div class="pure-g">                <div class="pure-u-1 pure-u-lg-1-4"><label>Pulse mode</label></div>                <select class="pure-u-1 pure-u-lg-3-4" name="relayPulse">                    <option value="0">Don't pulse</option>                    <option value="1">Normally OFF</option>                    <option value="2">Normally ON</option>                </select>            </div>            <div class="pure-g">                <div class="pure-u-1 pure-u-lg-1-4"><label>Pulse time (s)</label></div>                <div class="pure-u-1 pure-u-lg-1-4"><input name="relayTime" class="pure-u-1" type="number" min="0" step="0.1" max="3600"></div>            </div>            <div class="pure-g module module-mqtt">                <div class="pure-u-1 pure-u-lg-1-4"><label>MQTT group</label></div>                <div class="pure-u-1 pure-u-lg-3-4"><input name="mqttGroup" class="pure-u-1" tabindex="0" data="0" action="reconnect"></div>            </div>            <div class="pure-g module module-mqtt">                <div class="pure-u-1 pure-u-lg-1-4"><label>MQTT group sync</label></div>                <select class="pure-u-1 pure-u-lg-3-4" name="mqttGroupInv">                    <option value="0">Same</option>                    <option value="1">Inverse</option>                </select>            </div>            <div class="pure-g module module-mqtt">                <div class="pure-u-1 pure-u-lg-1-4"><label>On MQTT disconnect</label></div>                <select class="pure-u-1 pure-u-lg-3-4" name="relayOnDisc">                    <option value="0">Don't change</option>                    <option value="1">Turn the switch OFF</option>                    <option value="2">Turn the switch ON</option>                </select>            </div>        </div>
        <div id="dczRelayTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Switch</label>                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 dczRelayIdx" name="dczRelayIdx" type="number" min="0" tabindex="0" data="0"></div>            </div>        </div>
        <div id="dczMagnitudeTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Magnitude</label>                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 center" name="dczMagnitude" type="number" min="0" tabindex="0" data="0"></div>                <div class="pure-u-1 pure-u-lg-1-2 hint center"></div>            </div>        </div>
        <div id="tspkRelayTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Switch</label>                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24" name="tspkRelay" type="number" min="0" max="8" tabindex="0" data="0"></div>            </div>        </div>
        <div id="tspkMagnitudeTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Magnitude</label>                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 center" name="tspkMagnitude" type="number" min="0" max="8" tabindex="0" data="0"></div>                <div class="pure-u-1 pure-u-lg-1-2 hint center"></div>            </div>        </div>
        <div id="colorRGBTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Color</label>                <input class="pure-u-1 pure-u-lg-1-4" data-wcp-layout="block" name="color" readonly>            </div>
            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Brightness</label>                <input type="range" min="0" max="255" class="slider pure-u-lg-1-4" id="brightness">                <span class="slider brightness pure-u-lg-1-4"></span>            </div>        </div>
        <div id="colorHSVTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Color</label>                <input class="pure-u-1 pure-u-lg-1-4" data-wcp-layout="block" name="color" readonly>            </div>        </div>
        <div id="channelTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Channel #</label>                <input type="range" min="0" max="255" class="slider channels pure-u-lg-1-4" data="99">                <span class="slider pure-u-lg-1-4"></span>            </div>        </div>
        <div id="miredsTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4">Mireds (Cold &harr; Warm)</label>                <input type="range" min="153" max="500" class="slider pure-u-lg-1-4" id="mireds">                <span class="slider mireds pure-u-lg-1-4"></span>            </div>        </div>
        <div id="magnitudeTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-lg-1-4"></label>                <div class="pure-u-1 pure-u-lg-1-4">                    <input class="pure-u-1 pure-u-lg-23-24 center" type="text" name="magnitude" data="256" readonly>                </div>                <div class="pure-u-1 pure-u-lg-1-2 hint center"></div>            </div>        </div>
        <iframe id="downloader"></iframe>        <input id="uploader" type="file">
    </body>
    <!-- build:js script.js -->    <script>/*! jQuery v3.2.1 | (c) JS Foundation and other contributors | jquery.org/license */!function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){"use strict";var c=[],d=a.document,e=Object.getPrototypeOf,f=c.slice,g=c.concat,h=c.push,i=c.indexOf,j={},k=j.toString,l=j.hasOwnProperty,m=l.toString,n=m.call(Object),o={};function p(a,b){b=b||d;var c=b.createElement("script");c.text=a,b.head.appendChild(c).parentNode.removeChild(c)}var q="3.2.1",r=function(a,b){return new r.fn.init(a,b)},s=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,t=/^-ms-/,u=/-([a-z])/g,v=function(a,b){return b.toUpperCase()};r.fn=r.prototype={jquery:q,constructor:r,length:0,toArray:function(){return f.call(this)},get:function(a){return null==a?f.call(this):a<0?this[a+this.length]:this[a]},pushStack:function(a){var b=r.merge(this.constructor(),a);return b.prevObject=this,b},each:function(a){return r.each(this,a)},map:function(a){return this.pushStack(r.map(this,function(b,c){return a.call(b,c,b)}))},slice:function(){return this.pushStack(f.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(a){var b=this.length,c=+a+(a<0?b:0);return this.pushStack(c>=0&&c<b?[this[c]]:[])},end:function(){return this.prevObject||this.constructor()},push:h,sort:c.sort,splice:c.splice},r.extend=r.fn.extend=function(){var a,b,c,d,e,f,g=arguments[0]||{},h=1,i=arguments.length,j=!1;for("boolean"==typeof g&&(j=g,g=arguments[h]||{},h++),"object"==typeof g||r.isFunction(g)||(g={}),h===i&&(g=this,h--);h<i;h++)if(null!=(a=arguments[h]))for(b in a)c=g[b],d=a[b],g!==d&&(j&&d&&(r.isPlainObject(d)||(e=Array.isArray(d)))?(e?(e=!1,f=c&&Array.isArray(c)?c:[]):f=c&&r.isPlainObject(c)?c:{},g[b]=r.extend(j,f,d)):void 0!==d&&(g[b]=d));return g},r.extend({expando:"jQuery"+(q+Math.random()).replace(/\D/g,""),isReady:!0,error:function(a){throw new Error(a)},noop:function(){},isFunction:function(a){return"function"===r.type(a)},isWindow:function(a){return null!=a&&a===a.window},isNumeric:function(a){var b=r.type(a);return("number"===b||"string"===b)&&!isNaN(a-parseFloat(a))},isPlainObject:function(a){var b,c;return!(!a||"[object Object]"!==k.call(a))&&(!(b=e(a))||(c=l.call(b,"constructor")&&b.constructor,"function"==typeof c&&m.call(c)===n))},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},type:function(a){return null==a?a+"":"object"==typeof a||"function"==typeof a?j[k.call(a)]||"object":typeof a},globalEval:function(a){p(a)},camelCase:function(a){return a.replace(t,"ms-").replace(u,v)},each:function(a,b){var c,d=0;if(w(a)){for(c=a.length;d<c;d++)if(b.call(a[d],d,a[d])===!1)break}else for(d in a)if(b.call(a[d],d,a[d])===!1)break;return a},trim:function(a){return null==a?"":(a+"").replace(s,"")},makeArray:function(a,b){var c=b||[];return null!=a&&(w(Object(a))?r.merge(c,"string"==typeof a?[a]:a):h.call(c,a)),c},inArray:function(a,b,c){return null==b?-1:i.call(b,a,c)},merge:function(a,b){for(var c=+b.length,d=0,e=a.length;d<c;d++)a[e++]=b[d];return a.length=e,a},grep:function(a,b,c){for(var d,e=[],f=0,g=a.length,h=!c;f<g;f++)d=!b(a[f],f),d!==h&&e.push(a[f]);return e},map:function(a,b,c){var d,e,f=0,h=[];if(w(a))for(d=a.length;f<d;f++)e=b(a[f],f,c),null!=e&&h.push(e);else for(f in a)e=b(a[f],f,c),null!=e&&h.push(e);return g.apply([],h)},guid:1,proxy:function(a,b){var c,d,e;if("string"==typeof b&&(c=a[b],b=a,a=c),r.isFunction(a))return d=f.call(arguments,2),e=function(){return a.apply(b||this,d.concat(f.call(arguments)))},e.guid=a.guid=a.guid||r.guid++,e},now:Date.now,support:o}),"function"==typeof Symbol&&(r.fn[Symbol.iterator]=c[Symbol.iterator]),r.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(a,b){j["[object "+b+"]"]=b.toLowerCase()});function w(a){var b=!!a&&"length"in a&&a.length,c=r.type(a);return"function"!==c&&!r.isWindow(a)&&("array"===c||0===b||"number"==typeof b&&b>0&&b-1 in a)}var x=function(a){var b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u="sizzle"+1*a.removeEventListener("load",S),r.ready()}"complete"===d.readyState||"loading"!==d.readyState&&!d.documentElement.doScroll?a.setTimeout(r.ready):(d.addEventListener("DOMContentLoaded",S),a.addEventListener("load",S));var T=function(a,b,c,d,e,f,g){var h=0,i=a.length,j=null==c;if("object"===r.type(c)){e=!0;for(h in c)T(a,b,h,c[h],!0,f,g)}else if(void 0!==d&&(e=!0,r.isFunction(d)||(g=!0),j&&(g?(b.call(a,d),b=null):(j=b,b=function(a,b,c){return j.call(r(a),c)})),b))for(;h<i;h++)b(a[h],c,g?d:d.call(a[h],h,b(a[h],c)));return e?a:j?b.call(a):i?b(a[0],c):f},U=function(a){return 1===a.nodeType||9===a.nodeType||!+a.nodeType};function V(){this.expando=r.expando+V.uid++}V.uid=1,V.prototype={cache:function(a){var b=a[this.expando];return b||(b={},U(a)&&(a.nodeType?a[this.expando]=b:Object.defineProperty(a,this.expando,{value:b,configurable:!0}))),b},set:function(a,b,c){var d,e=this.cache(a);if("string"==typeof b)e[r.camelCase(b)]=c;else for(d in b)e[r.camelCase(d)]=b[d];return e},get:function(a,b){return void 0===b?this.cache(a):a[this.expando]&&a[this.expando][r.camelCase(b)]},access:function(a,b,c){return void 0===b||b&&"string"==typeof b&&void 0===c?this.get(a,b):(this.set(a,b,c),void 0!==c?c:b)},remove:function(a,b){var c,d=a[this.expando];if(void 0!==d){if(void 0!==b){Array.isArray(b)?b=b.map(r.camelCase):(b=r.camelCase(b),b=b in d?[b]:b.match(L)||[]),c=b.length;while(c--)delete d[b[c]]}(void 0===b||r.isEmptyObject(d))&&(a.nodeType?a[this.expando]=void 0:delete a[this.expando])}},hasData:function(a){var b=a[this.expando];return void 0!==b&&!r.isEmptyObject(b)}};var W=new V,X=new V,Y=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Z=/[A-Z]/g;function $(a){return"true"===a||"false"!==a&&("null"===a?null:a===+a+""?+a:Y.test(a)?JSON.parse(a):a)}function _(a,b,c){var d;if(void 0===c&&1===a.nodeType)if(d="data-"+b.replace(Z,"-$&").toLowerCase(),c=a.getAttribute(d),"string"==typeof c){try{c=$(c)}catch(e){}X.set(a,b,c)}else c=void 0;return c}r.extend({hasData:function(a){return X.hasData(a)||W.hasData(a)},data:function(a,b,c){return X.access(a,b,c)},removeData:function(a,b){X.remove(a,b)},_data:function(a,b,c){return W.access(a,b,c)},_removeData:function(a,b){W.remove(a,b)}}),r.fn.extend({data:function(a,b){var c,d,e,f=this[0],g=f&&f.attributes;if(void 0===a){if(this.length&&(e=X.get(f),1===f.nodeType&&!W.get(f,"hasDataAttrs"))){c=g.length;while(c--)g[c]&&(d=g[c].name,0===d.indexOf("data-")&&(d=r.camelCase(d.slice(5)),_(f,d,e[d])));W.set(f,"hasDataAttrs",!0)}return e}return"object"==typeof a?this.each(function(){X.set(this,a)}):T(this,function(b){var c;if(f&&void 0===b){if(c=X.get(f,a),void 0!==c)return c;if(c=_(f,a),void 0!==c)return c}else this.each(function(){X.set(this,a,b)})},null,b,arguments.length>1,null,!0)},removeData:function(a){return this.each(function(){X.remove(this,a)})}}),r.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=W.get(a,b),c&&(!d||Array.isArray(c)?d=W.access(a,b,r.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=r.queue(a,b),d=c.length,e=c.shift(),f=r._queueHooks(a,b),g=function(){r.dequeue(a,b)};"inprogress"===e&&(e=c.shift(),d--),e&&("fx"===b&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return W.get(a,c)||W.access(a,c,{empty:r.Callbacks("once memory").add(function(){W.remove(a,[b+"queue",c])})})}}),r.fn.extend({queue:function(a,b){var c=2;return"string"!=typeof a&&(b=a,a="fx",c--),arguments.length<c?r.queue(this[0],a):void 0===b?this:this.each(function(){var c=r.queue(this,a,b);r._queueHooks(this,a),"fx"===a&&"inprogress"!==c[0]&&r.dequeue(this,a)})},dequeue:function(a){return this.each(function(){r.dequeue(this,a)})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,b){var c,d=1,e=r.Deferred(),f=this,g=this.length,h=function(){--d||e.resolveWith(f,[f])};"string"!=typeof a&&(b=a,a=void 0),a=a||"fx";while(g--)c=W.get(f[g],a+"queueHooks"),c&&c.empty&&(d++,c.empty.add(h));return h(),e.promise(b)}});var aa=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,ba=new RegExp("^(?:([+-])=|)("+aa+")null==d?void 0:d))},attrHooks:{type:{set:function(a,b){if(!o.radioValue&&"radio"===b&&B(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}}},removeAttr:function(a,b){var c,d=0,e=b&&b.match(L);if(e&&1===a.nodeType)while(c=e[d++])a.removeAttribute(c)}}),lb={set:function(a,b,c){return b===!1?r.removeAttr(a,c):a.setAttribute(c,c),c}},r.each(r.expr.match.bool.source.match(/\w+/g),function(a,b){var c=mb[b]||r.find.attr;mb[b]=function(a,b,d){var e,f,g=b.toLowerCase();return d||(f=mb[g],mb[g]=e,e=null!=c(a,b,d)?g:null,mb[g]=f),e}});var nb=/^(?:input|select|textarea|button)$/i,ob=/^(?:a|area)$/i;r.fn.extend({prop:function(a,b){return T(this,r.prop,a,b,arguments.length>1)},removeProp:function(a){return this.each(function(){delete this[r.propFix[a]||a]})}}),r.extend({prop:function(a,b,c){var d,e,f=a.nodeType;if(3!==f&&8!==f&&2!==f)return 1===f&&r.isXMLDoc(a)||(b=r.propFix[b]||b,e=r.propHooks[b]),void 0!==c?e&&"set"in e&&void 0!==(d=e.set(a,c,b))?d:a[b]=c:e&&"get"in e&&null!==(d=e.get(a,b))?d:a[b]},propHooks:{tabIndex:{get:function(a){var b=r.find.attr(a,"tabindex");return b?parseInt(b,10):nb.test(a.nodeName)||ob.test(a.nodeName)&&a.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),o.optSelected||(r.propHooks.selected={get:function(a){var b=a.parentNode;return b&&b.parentNode&&b.parentNode.selectedIndex,null},set:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex)}}),r.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){r.propFix[this.toLowerCase()]=this});function pb(a){var b=a.match(L)||[];return b.join(" ")}function qb(a){return a.getAttribute&&a.getAttribute("class")||""}r.fn.extend({addClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).addClass(a.call(this,b,qb(this)))});if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=qb(c),d=1===c.nodeType&&" "+pb(e)+" "){g=0;while(f=b[g++])d.indexOf(" "+f+" ")<0&&(d+=f+" ");h=pb(d),e!==h&&c.setAttribute("class",h)}}return this},removeClass:function(a){var b,c,d,e,f,g,h,i=0;if(r.isFunction(a))return this.each(function(b){r(this).removeClass(a.call(this,b,qb(this)))});if(!arguments.length)return this.attr("class","");if("string"==typeof a&&a){b=a.match(L)||[];while(c=this[i++])if(e=qb(c),d=1===c.nodeType&&" "+pb(e)+" "){g=0;while(f=b[g++])while(d.indexOf(" "+f+" ")>-1)d=d.replace(" "+f+" "," ");h=pb(d),e!==h&&c.setAttribute("class",h)}}return this},toggleClass:function(a,b){var c=typeof a;return"boolean"==typeof b&&"string"===c?b?this.addClass(a):this.removeClass(a):r.isFunction(a)?this.each(function(c){r(this).toggleClass(a.call(this,c,qb(this),b),b)}):this.each(function(){var b,d,e,f;if("string"===c){d=0,e=r(this),f=a.match(L)||[];while(b=f[d++])e.hasClass(b)?e.removeClass(b):e.addClass(b)}else void 0!==a&&"boolean"!==c||(b=qb(this),b&&W.set(this,"__className__",b),this.setAttribute&&this.setAttribute("class",b||a===!1?"":W.get(this,"__className__")||""))})},hasClass:function(a){var b,c,d=0;b=" "+a+" ";while(c=this[d++])if(1===c.nodeType&&(" "+pb(qb(c))+" ").indexOf(b)>-1)return!0;return!1}});var rb=/\r/g;r.fn.extend({val:function(a){var b,c,d,e=this[0];{if(arguments.length)return d=r.isFunction(a),this.each(function(c){var e;1===this.nodeType&&(e=d?a.call(this,c,r(this).val()):a,null==e?e="":"number"==typeof e?e+="":Array.isArray(e)&&(e=r.map(e,function(a){return null==a?"":a+""})),b=r.valHooks[this.type]||r.valHooks[this.nodeName.toLowerCase()],b&&"set"in b&&void 0!==b.set(this,e,"value")||(this.value=e))});if(e)return b=r.valHooks[e.type]||r.valHooks[e.nodeName.toLowerCase()],b&&"get"in b&&void 0!==(c=b.get(e,"value"))?c:(c=e.value,"string"==typeof c?c.replace(rb,""):null==c?"":c)}}}),r.extend({valHooks:{option:{get:function(a){var b=r.find.attr(a,"value");return null!=b?b:pb(r.text(a))}},select:{get:function(a){var b,c,d,e=a.options,f=a.selectedIndex,g="select-one"===a.type,h=g?null:[],i=g?f+1:e.length;for(d=f<0?i:g?f:0;d<i;d++)if(c=e[d],(c.selected||d===f)&&!c.
</script>    <script>// Generated by CoffeeScript 1.6.2/*eslint quotes: ["error", "double"]*//*eslint-env es6*/
(function() {  var iOSCheckbox, matched, userAgent,    __slice = [].slice;
  if ($.browser == null) {    userAgent = navigator.userAgent || "";    jQuery.uaMatch = function(ua) {      var match;
      ua = ua.toLowerCase();      match = /(chrome)[ \/]([\w.]+)/.exec(ua) || /(webkit)[ \/]([\w.]+)/.exec(ua) || /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(ua) || [];      return {        browser: match[1] || "",        version: match[2] || "0"      };    };    matched = jQuery.uaMatch(userAgent);    jQuery.browser = {};    if (matched.browser) {      jQuery.browser[matched.browser] = true;      jQuery.browser.version = matched.version;    }    if (jQuery.browser.webkit) {      jQuery.browser.safari = true;    }  }
  iOSCheckbox = (function() {    function iOSCheckbox(elem, options) {      var key, opts, value;
      this.elem = $(elem);      opts = $.extend({}, iOSCheckbox.defaults, options);      for (key in opts) {        if ({}.hasOwnProperty.call(opts, key)) {          value = opts[key];          this[key] = value;        }      }      this.elem.data(this.dataName, this);      this.wrapCheckboxWithDivs();      this.attachEvents();      this.disableTextSelection();      this.calculateDimensions();    }
    iOSCheckbox.prototype.calculateDimensions = function() {      if (this.resizeHandle) {        this.optionallyResize("handle");      }      if (this.resizeContainer) {        this.optionallyResize("container");      }      return this.initialPosition();    };
    iOSCheckbox.prototype.isDisabled = function() {      return this.elem.is(":disabled");    };
    iOSCheckbox.prototype.wrapCheckboxWithDivs = function() {      this.elem.wrap("<div class='" + this.containerClass + "' />");      this.container = this.elem.parent();      this.offLabel = $("<label class='" + this.labelOffClass + "'>\n  <span>" + this.uncheckedLabel + "</span>\n</label>").appendTo(this.container);      this.offSpan = this.offLabel.children("span");      this.onLabel = $("<label class='" + this.labelOnClass + "'>\n  <span>" + this.checkedLabel + "</span>\n</label>").appendTo(this.container);      this.onBorder = $("<div class='iPhoneCheckBorderOn'</div>").appendTo(this.container);      this.offBorder = $("<div class='iPhoneCheckBorderOff'</div>").appendTo(this.container);      this.onSpan = this.onLabel.children("span");      this.handle = $("<div class='" + this.handleClass + "'></div>").appendTo(this.container);      this.handleCenter = $("<div class='" + this.handleCenterClass + "'></div>").appendTo(this.handle);      this.handleRight = $("<div class='" + this.handleRightClass + "'></div>").appendTo(this.handle);      return true;    };
    iOSCheckbox.prototype.disableTextSelection = function() {      if ($.browser.msie) {        return $([this.handle, this.offLabel, this.onLabel, this.container]).attr("unselectable", "on");      }    };
    iOSCheckbox.prototype._getDimension = function(elem, dimension) {      if ($.fn.actual != null) {        return elem.actual(dimension);      } else {        return elem[dimension]();      }    };
    iOSCheckbox.prototype.optionallyResize = function(mode) {      var newWidth, offLabelWidth, offSpan, onLabelWidth, onSpan;
      onSpan = this.onLabel.find("span");      onLabelWidth = this._getDimension(onSpan, "width");      onLabelWidth += parseInt(onSpan.css("padding-left"), 10);      offSpan = this.offLabel.find("span");      offLabelWidth = this._getDimension(offSpan, "width");      offLabelWidth += parseInt(offSpan.css("padding-right"), 10);      if (mode === "container") {        newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;        newWidth += this._getDimension(this.handle, "width") + this.handleMargin;        return this.container.css({          width: newWidth        });      } else {        newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;        this.handleCenter.css({            width: newWidth + 4        });        return this.handle.css({          width: newWidth + 7        });      }    };
    iOSCheckbox.prototype.onMouseDown = function(event) {      var x;
      event.preventDefault();      if (this.isDisabled()) {        return;      }      x = event.pageX || event.originalEvent.changedTouches[0].pageX;      iOSCheckbox.currentlyClicking = this.handle;      iOSCheckbox.dragStartPosition = x;      return iOSCheckbox.handleLeftOffset = parseInt(this.handle.css("left"), 10) || 0;    };
    iOSCheckbox.prototype.onDragMove = function(event, x) {      var newWidth, p;
      if (iOSCheckbox.currentlyClicking !== this.handle) {        return;      }      p = (x + iOSCheckbox.handleLeftOffset - iOSCheckbox.dragStartPosition) / this.rightSide;      if (p < 0) {        p = 0;      }      if (p > 1) {        p = 1;      }      newWidth = p * this.rightSide;      this.handle.css({        left: newWidth      });      this.onLabel.css({        width: newWidth + this.handleRadius      });      this.offSpan.css({        marginRight: -newWidth      });      return this.onSpan.css({        marginLeft: -(1 - p) * this.rightSide      });    };
    iOSCheckbox.prototype.onDragEnd = function(event, x) {      var p;
      if (iOSCheckbox.currentlyClicking !== this.handle) {        return;      }      if (this.isDisabled()) {        return;      }      if (iOSCheckbox.dragging) {        p = (x - iOSCheckbox.dragStartPosition) / this.rightSide;        this.elem.prop("checked", p >= 0.5).change();      } else {        this.elem.prop("checked", !this.elem.prop("checked")).change();      }      iOSCheckbox.currentlyClicking = null;      iOSCheckbox.dragging = null;      if (typeof this.onChange === "function") {        this.onChange(this.elem, this.elem.prop("checked"));      }      return this.didChange();    };
    iOSCheckbox.prototype.refresh = function() {      return this.didChange();    };
    iOSCheckbox.prototype.didChange = function() {      var newLeft;
      if (this.isDisabled()) {        this.container.addClass(this.disabledClass);        return false;      } else {        this.container.removeClass(this.disabledClass);      }      newLeft = this.elem.prop("checked") ? this.rightSide + 2 : 0;      this.handle.animate({        left: newLeft      }, this.duration);      this.onLabel.animate({        width: newLeft + this.handleRadius      }, this.duration);      this.offSpan.animate({        marginRight: - newLeft      }, this.duration);      return this.onSpan.animate({        marginLeft: newLeft - this.rightSide      }, this.duration);    };
    iOSCheckbox.prototype.attachEvents = function() {      var localMouseMove, localMouseUp, self;
      self = this;      localMouseMove = function(event) {        return self.onGlobalMove.apply(self, arguments);      };      localMouseUp = function(event) {        self.onGlobalUp.apply(self, arguments);        $(document).unbind("mousemove touchmove", localMouseMove);        return $(document).unbind("mouseup touchend", localMouseUp);      };      this.elem.change(function() {        return self.refresh();      });      return this.container.bind("mousedown touchstart", function(event) {        self.onMouseDown.apply(self, arguments);        $(document).bind("mousemove touchmove", localMouseMove);        return $(document).bind("mouseup touchend", localMouseUp);      });    };
    iOSCheckbox.prototype.initialPosition = function() {      var containerWidth, offset;
      containerWidth = this._getDimension(this.container, "width");      this.offLabel.css({        width: containerWidth - this.containerRadius - 4      });      this.offBorder.css({          left: containerWidth - 4      });      offset = this.containerRadius + 1;      if ($.browser.msie && $.browser.version < 7) {        offset -= 3;      }      this.rightSide = containerWidth - this._getDimension(this.handle, "width") - offset;      if (this.elem.is(":checked")) {        this.handle.css({          left: this.rightSide        });        this.onLabel.css({          width: this.rightSide + this.handleRadius        });        this.offSpan.css({          marginRight: -this.rightSide,        });      } else {        this.onLabel.css({          width: 0        });        this.onSpan.css({          marginLeft: -this.rightSide        });      }      if (this.isDisabled()) {        return this.container.addClass(this.disabledClass);      }    };
    iOSCheckbox.prototype.onGlobalMove = function(event) {      var x;
      if (!(!this.isDisabled() && iOSCheckbox.currentlyClicking)) {        return;      }      event.preventDefault();      x = event.pageX || event.originalEvent.changedTouches[0].pageX;      if (!iOSCheckbox.dragging && (Math.abs(iOSCheckbox.dragStartPosition - x) > this.dragThreshold)) {        iOSCheckbox.dragging = true;      }      return this.onDragMove(event, x);    };
    iOSCheckbox.prototype.onGlobalUp = function(event) {      var x;
      if (!iOSCheckbox.currentlyClicking) {        return;      }      event.preventDefault();      x = event.pageX || event.originalEvent.changedTouches[0].pageX;      this.onDragEnd(event, x);      return false;    };
    iOSCheckbox.defaults = {      duration: 200,      checkedLabel: "ON",      uncheckedLabel: "OFF",      resizeHandle: true,      resizeContainer: true,      disabledClass: "iPhoneCheckDisabled",      containerClass: "iPhoneCheckContainer",      labelOnClass: "iPhoneCheckLabelOn",      labelOffClass: "iPhoneCheckLabelOff",      handleClass: "iPhoneCheckHandle",      handleCenterClass: "iPhoneCheckHandleCenter",      handleRightClass: "iPhoneCheckHandleRight",      dragThreshold: 5,      handleMargin: 15,      handleRadius: 4,      containerRadius: 5,      dataName: "iphoneStyle",      onChange: function() {}    };
    return iOSCheckbox;
  })();
  $.iphoneStyle = this.iOSCheckbox = iOSCheckbox;
  $.fn.iphoneStyle = function() {    var args, checkbox, dataName, existingControl, method, params, _i, _len, _ref, _ref1, _ref2, _ref3;
    args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];    dataName = (_ref = (_ref1 = args[0]) != null ? _ref1.dataName : void 0) != null ? _ref : iOSCheckbox.defaults.dataName;    _ref2 = this.filter(":checkbox");    for (_i = 0, _len = _ref2.length; _i < _len; _i++) {      checkbox = _ref2[_i];      existingControl = $(checkbox).data(dataName);      if (existingControl != null) {        method = args[0], params = 2 <= args.length ? __slice.call(args, 1) : [];        if ((_ref3 = existingControl[method]) != null) {          _ref3.apply(existingControl, params);        }      } else {        new iOSCheckbox(checkbox, args[0]);      }    }    return this;  };
  $.fn.iOSCheckbox = function(options) {    var opts;
    if (options == null) {      options = {};    }    opts = $.extend({}, options, {      resizeHandle: false,      disabledClass: "iOSCheckDisabled",      containerClass: "iOSCheckContainer",      labelOnClass: "iOSCheckLabelOn",      labelOffClass: "iOSCheckLabelOff",      handleClass: "iOSCheckHandle",      handleCenterClass: "iOSCheckHandleCenter",      handleRightClass: "iOSCheckHandleRight",      dataName: "iOSCheckbox"    });    return this.iphoneStyle(opts);  };
}).call(this);
</script>    <script>/** * jQuery Wheel Color Picker v3.0.3 *  * http://www.jar2.net/projects/jquery-wheelcolorpicker *  * Author : Fajar Chandra * Date   : 2017.09.03 *  * Copyright © 2011-2017 Fajar Chandra. All rights reserved. * Released under MIT License. * http://www.opensource.org/licenses/mit-license.php */!function(a){a.fn.wheelColorPicker=function(){var c=this;if(arguments.length>0)var d=[].shift,e=d.apply(arguments),f="string"==typeof e?e.charAt(0).toUpperCase()+e.slice(1):e;else var e=void 0,f=void 0;var g=arguments;return this.each(function(){var d=a(this).data("jQWCP.instance");if(void 0==d||null==d){var h={};"object"==typeof e&&(h=e),d=new b.ColorPicker(this,h),a(this).data("jQWCP.instance",d)}if(void 0===e||"object"==typeof e);else if("function"==typeof d[e]){var i=d[e].apply(d,g);if(i!==d)return c=i,!1}else if("function"==typeof d["set"+f]&&g.length>0){var i=d["set"+f].apply(d,g);if(i!==d)return c=i,!1}else if("function"==typeof d["get"+f]){var i=d["get"+f].apply(d,g);if(i!==d)return c=i,!1}else if(void 0!==d.options[e]&&g.length>0)d.options[e]=g[0];else{if(void 0!==d.options[e])return c=d.options[e],!1;a.error("Method/option named "+e+" does not exist on jQuery.wheelColorPicker")}}),c};var b=a.fn.wheelColorPicker;b.defaults={format:"hex",preview:!1,live:!0,userinput:!0,validate:!0,autoResize:!0,autoFormat:!0,preserveWheel:null,cssClass:"",layout:"popup",animDuration:200,quality:1,sliders:null,rounding:2,mobile:!0,mobileWidth:480,hideKeyboard:!1,htmlOptions:!0,snap:!1,snapTolerance:.05},b.BUG_RELATIVE_PAGE_ORIGIN=!1,b.ORIGIN={left:0,top:0},b.colorToStr=function(a,b){var c="";switch(b){case"css":c="#";case"hex":var d=Math.round(255*a.r).toString(16);1==d.length&&(d="0"+d);var e=Math.round(255*a.g).toString(16);1==e.length&&(e="0"+e);var f=Math.round(255*a.b).toString(16);1==f.length&&(f="0"+f),c+=d+e+f;break;case"cssa":c="#";case"hexa":var d=Math.round(255*a.r).toString(16);1==d.length&&(d="0"+d);var e=Math.round(255*a.g).toString(16);1==e.length&&(e="0"+e);var f=Math.round(255*a.b).toString(16);1==f.length&&(f="0"+f);var g=Math.round(255*a.a).toString(16);1==g.length&&(g="0"+g),c+=d+e+f+g;break;case"rgb":c="rgb("+Math.round(255*a.r)+","+Math.round(255*a.g)+","+Math.round(255*a.b)+")";break;case"rgb%":c="rgb("+100*a.r+"%,"+100*a.g+"%,"+100*a.b+"%)";break;case"rgba":c="rgba("+Math.round(255*a.r)+","+Math.round(255*a.g)+","+Math.round(255*a.b)+","+a.a+")";break;case"rgba%":c="rgba("+100*a.r+"%,"+100*a.g+"%,"+100*a.b+"%,"+100*a.a+"%)";break;case"hsv":c="hsv("+360*a.h+","+a.s+","+a.v+")";break;case"hsv%":c="hsv("+100*a.h+"%,"+100*a.s+"%,"+100*a.v+"%)";break;case"hsva":c="hsva("+360*a.h+","+a.s+","+a.v+","+a.a+")";break;case"hsva%":c="hsva("+100*a.h+"%,"+100*a.s+"%,"+100*a.v+"%,"+100*a.a+"%)";break;case"hsb":c="hsb("+a.h+","+a.s+","+a.v+")";break;case"hsb%":c="hsb("+100*a.h+"%,"+100*a.s+"%,"+100*a.v+"%)";break;case"hsba":c="hsba("+a.h+","+a.s+","+a.v+","+a.a+")";break;case"hsba%":c="hsba("+100*a.h+"%,"+100*a.s+"%,"+100*a.v+"%,"+100*a.a+"%)"}return c},b.strToColor=function(a){var c,d,b={a:1};if(null!=a.match(/^#[0-9a-f]{3}$/i)||a.match(/^#[0-9a-f]{4}$/i)){if(isNaN(b.r=17*parseInt(a.substr(1,1),16)/255))return!1;if(isNaN(b.g=17*parseInt(a.substr(2,1),16)/255))return!1;if(isNaN(b.b=17*parseInt(a.substr(3,1),16)/255))return!1;if(5==a.length&&isNaN(b.a=17*parseInt(a.substr(4,1),16)/255))return!1}else if(null!=a.match(/^[0-9a-f]{3}$/i)||null!=a.match(/^[0-9a-f]{4}$/i)){if(isNaN(b.r=17*parseInt(a.substr(0,1),16)/255))return!1;if(isNaN(b.g=17*parseInt(a.substr(1,1),16)/255))return!1;if(isNaN(b.b=17*parseInt(a.substr(2,1),16)/255))return!1;if(4==a.length&&isNaN(b.a=17*parseInt(a.substr(3,1),16)/255))return!1}else if(null!=a.match(/^#[0-9a-f]{6}$/i)||null!=a.match(/^#[0-9a-f]{8}$/i)){if(isNaN(b.r=parseInt(a.substr(1,2),16)/255))return!1;if(isNaN(b.g=parseInt(a.substr(3,2),16)/255))return!1;if(isNaN(b.b=parseInt(a.substr(5,2),16)/255))return!1;if(9==a.length&&isNaN(b.a=parseInt(a.substr(7,2),16)/255))return!1}else if(null!=a.match(/^[0-9a-f]{6}$/i)||null!=a.match(/^[0-9a-f]{8}$/i)){if(isNaN(b.r=parseInt(a.substr(0,2),16)/255))return!1;if(isNaN(b.g=parseInt(a.substr(2,2),16)/255))return!1;if(isNaN(b.b=parseInt(a.substr(4,2),16)/255))return!1;if(8==a.length&&isNaN(b.a=parseInt(a.substr(6,2),16)/255))return!1}else if(null!=a.match(/^rgba\s*\(\s*([0-9\.]+%|[01]?\.?[0-9]*)\s*,\s*([0-9\.]+%|[01]?\.?[0-9]*)\s*,\s*([0-9\.]+%|[01]?\.?[0-9
</script>    <script>var websock;var password = false;var maxNetworks;var maxSchedules;var messages = [];var free_size = 0;
var urls = {};
var numChanged = 0;var numReboot = 0;var numReconnect = 0;var numReload = 0;
var useWhite = false;var useCCT = false;
var now = 0;var ago = 0;
// -----------------------------------------------------------------------------// Messages// -----------------------------------------------------------------------------
function initMessages() {    messages[1]  = "Remote update started";    messages[2]  = "OTA update started";    messages[3]  = "Error parsing data!";    messages[4]  = "The file does not look like a valid configuration backup or is corrupted";    messages[5]  = "Changes saved. You should reboot your board now";    messages[7]  = "Passwords do not match!";    messages[8]  = "Changes saved";    messages[9]  = "No changes detected";    messages[10] = "Session expired, please reload page...";}


// -----------------------------------------------------------------------------// Utils// -----------------------------------------------------------------------------
$.fn.enterKey = function (fnc) {    return this.each(function () {        $(this).keypress(function (ev) {            var keycode = parseInt(ev.keyCode ? ev.keyCode : ev.which, 10);            if (13 === keycode) {                return fnc.call(this, ev);            }        });    });};
function keepTime() {
    $("span[name='ago']").html(ago);    ago++;
    if (0 === now) { return; }    var date = new Date(now * 1000);    var text = date.toISOString().substring(0, 19).replace("T", " ");    $("input[name='now']").val(text);    $("span[name='now']").html(text);    now++;
}
function zeroPad(number, positions) {    var zeros = "";    for (var i = 0; i < positions; i++) {        zeros += "0";    }    return (zeros + number).slice(-positions);}
function loadTimeZones() {
    var time_zones = [        -720, -660, -600, -570, -540,        -480, -420, -360, -300, -240,        -210, -180, -120, -60, 0,        60, 120, 180, 210, 240,        270, 300, 330, 345, 360,        390, 420, 480, 510, 525,        540, 570, 600, 630, 660,        720, 765, 780, 840    ];
    for (var i in time_zones) {        var value = time_zones[i];        var offset = value >= 0 ? value : -value;        var text = "GMT" + (value >= 0 ? "+" : "-") +            zeroPad(parseInt(offset / 60, 10), 2) + ":" +            zeroPad(offset % 60, 2);        $("select[name='ntpOffset']").append(            $("<option></option>").                attr("value",value).                text(text));    }
}
function validateForm(form) {
    // http://www.the-art-of-web.com/javascript/validate-password/    // at least one lowercase and one uppercase letter or number    // at least five characters (letters, numbers or special characters)    var re_password = /^(?=.*[A-Z\d])(?=.*[a-z])[\w~!@#$%^&*\(\)<>,.\?;:{}\[\]\\|]{5,}$/;
    // password    var adminPass1 = $("input[name='adminPass']", form).first().val();    if (adminPass1.length > 0 && !re_password.test(adminPass1)) {        alert("The password you have entered is not valid, it must have at least 5 characters, 1 lowercase and 1 uppercase or number!");        return false;    }
    var adminPass2 = $("input[name='adminPass']", form).last().val();    if (adminPass1 !== adminPass2) {        alert("Passwords are different!");        return false;    }
    // RFCs mandate that a hostname's labels may contain only    // the ASCII letters 'a' through 'z' (case-insensitive),    // the digits '0' through '9', and the hyphen.    // Hostname labels cannot begin or end with a hyphen.    // No other symbols, punctuation characters, or blank spaces are permitted.
    // Negative lookbehind does not work in Javascript    // var re_hostname = new RegExp('^(?!-)[A-Za-z0-9-]{1,32}(?<!-)$');
    var re_hostname = new RegExp('^(?!-)[A-Za-z0-9-]{0,31}[A-Za-z0-9]$');
    var hostname = $("input[name='hostname']", form).val();    if (!re_hostname.test(hostname)) {        alert("Hostname cannot be empty and may only contain the ASCII letters ('A' through 'Z' and 'a' through 'z'), the digits '0' through '9', and the hyphen ('-')! They can neither start or end with an hyphen.");        return false;    }
    return true;
}
function getValue(element) {
    if ($(element).attr("type") === "checkbox") {        return $(element).prop("checked") ? 1 : 0;    } else if ($(element).attr("type") === "radio") {        if (!$(element).prop("checked")) {            return null;        }    }
    return $(element).val();
}
function addValue(data, name, value) {
    // These fields will always be a list of values    var is_group = [        "ssid", "pass", "gw", "mask", "ip", "dns",        "schEnabled", "schSwitch","schAction","schType","schHour","schMinute","schWDs","schUTC",        "relayBoot", "relayPulse", "relayTime",        "mqttGroup", "mqttGroupInv", "relayOnDisc",        "dczRelayIdx", "dczMagnitude",        "tspkRelay", "tspkMagnitude",        "ledMode",        "adminPass"    ];
    if (name in data) {        if (!Array.isArray(data[name])) {            data[name] = [data[name]];        }        data[name].push(value);    } else if (is_group.indexOf(name) >= 0) {        data[name] = [value];    } else {        data[name] = value;    }
}
function getData(form) {
    var data = {};
    // Populate data    $("input,select", form).each(function() {        var name = $(this).attr("name");        var value = getValue(this);        if (null !== value) {            addValue(data, name, value);        }    });
    // Post process    addValue(data, "schSwitch", 0xFF);    delete data["filename"];    delete data["rfbcode"];
    return data;
}
function randomString(length, chars) {    var mask = "";    if (chars.indexOf("a") > -1) { mask += "abcdefghijklmnopqrstuvwxyz"; }    if (chars.indexOf("A") > -1) { mask += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; }    if (chars.indexOf("#") > -1) { mask += "0123456789"; }    if (chars.indexOf("@") > -1) { mask += "ABCDEF"; }    if (chars.indexOf("!") > -1) { mask += "~`!@#$%^&*()_+-={}[]:\";'<>?,./|\\"; }    var result = "";    for (var i = length; i > 0; --i) {        result += mask[Math.round(Math.random() * (mask.length - 1))];    }    return result;}
function generateAPIKey() {    var apikey = randomString(16, "@#");    $("input[name='apiKey']").val(apikey);    return false;}
function getJson(str) {    try {        return JSON.parse(str);    } catch (e) {        return false;    }}
// -----------------------------------------------------------------------------// Actions// -----------------------------------------------------------------------------
function sendAction(action, data) {    websock.send(JSON.stringify({action: action, data: data}));}
function sendConfig(data) {    websock.send(JSON.stringify({config: data}));}
function resetOriginals() {    $("input,select").each(function() {        $(this).attr("original", $(this).val());    });    numReboot = numReconnect = numReload = 0;}
function doReload(milliseconds) {    setTimeout(function() {        window.location.reload();    }, parseInt(milliseconds, 10));}
/** * Check a file object to see if it is a valid firmware image * The file first byte should be 0xE9 * @param  {file}       file        File object * @param  {Function}   callback    Function to call back with the result */function checkFirmware(file, callback) {
    var reader = new FileReader();
    reader.onloadend = function(evt) {        if (FileReader.DONE === evt.target.readyState) {            callback(0xE9 === evt.target.result.charCodeAt(0));        }    };
    var blob = file.slice(0, 1);    reader.readAsBinaryString(blob);
}
function doUpgrade() {
    var file = $("input[name='upgrade']")[0].files[0];
    if (typeof file === "undefined") {        alert("First you have to select a file from your computer.");        return false;    }
    if (file.size > free_size) {        alert("Image it too large to fit in the available space for OTA. Consider doing a two-step update.");        return false;    }
    checkFirmware(file, function(ok) {
        if (!ok) {            alert("The file does not seem to be a valid firmware image.");            return;        }
        var data = new FormData();        data.append("upgrade", file, file.name);
        $.ajax({
            // Your server script to process the upload            url: urls.upgrade.href,            type: "POST",
            // Form data            data: data,
            // Tell jQuery not to process data or worry about content-type            // You *must* include these options!            cache: false,            contentType: false,            processData: false,
            success: function(data, text) {                $("#upgrade-progress").hide();                if ("OK" === data) {                    alert("Firmware image uploaded, board rebooting. This page will be refreshed in 5 seconds.");                    doReload(5000);                } else {                    alert("There was an error trying to upload the new image, please try again (" + data + ").");                }            },
            // Custom XMLHttpRequest            xhr: function() {                $("#upgrade-progress").show();                var myXhr = $.ajaxSettings.xhr();                if (myXhr.upload) {                    // For handling the progress of the upload                    myXhr.upload.addEventListener("progress", function(e) {                        if (e.lengthComputable) {                            $("progress").attr({ value: e.loaded, max: e.total });                        }                    } , false);                }                return myXhr;            }
        });
    });
    return false;
}
function doUpdatePassword() {    var form = $("#formPassword");    if (validateForm(form)) {        sendConfig(getData(form));    }    return false;}
function checkChanges() {
    if (numChanged > 0) {        var response = window.confirm("Some changes have not been saved yet, do you want to save them first?");        if (response) {            doUpdate();        }    }
}
function doAction(question, action) {
    checkChanges();
    if (question) {        var response = window.confirm(question);        if (false === response) {            return false;        }    }
    sendAction(action, {});    doReload(5000);    return false;
}
function doReboot(ask) {
    var question = (typeof ask === "undefined" || false === ask) ?        null :        "Are you sure you want to reboot the device?";    return doAction(question, "reboot");
}
function doReconnect(ask) {
    var question = (typeof ask === "undefined" || false === ask) ?        null :        "Are you sure you want to disconnect from the current WIFI network?";    return doAction(question, "reconnect");
}
function doUpdate() {
    var form = $("#formSave");    if (validateForm(form)) {
        // Get data        sendConfig(getData(form));
        // Empty special fields        $(".pwrExpected").val(0);        $("input[name='pwrResetCalibration']").            prop("checked", false).            iphoneStyle("refresh");        $("input[name='pwrResetE']").            prop("checked", false).            iphoneStyle("refresh");
        // Change handling        numChanged = 0;        setTimeout(function() {
            var response;
            if (numReboot > 0) {                response = window.confirm("You have to reboot the board for the changes to take effect, do you want to do it now?");                if (response) { doReboot(false); }            } else if (numReconnect > 0) {                response = window.confirm("You have to reconnect to the WiFi for the changes to take effect, do you want to do it now?");                if (response) { doReconnect(false); }            } else if (numReload > 0) {                response = window.confirm("You have to reload the page to see the latest changes, do you want to do it now?");                if (response) { doReload(0); }            }
            resetOriginals();
        }, 1000);
    }
    return false;
}
function doBackup() {    document.getElementById("downloader").src = urls.config.href;    return false;}
function onFileUpload(event) {
    var inputFiles = this.files;    if (typeof inputFiles === "undefined" || inputFiles.length === 0) {        return false;    }    var inputFile = inputFiles[0];    this.value = "";
    var response = window.confirm("Previous settings will be overwritten. Are you sure you want to restore this settings?");    if (!response) {        return false;    }
    var reader = new FileReader();    reader.onload = function(e) {        var data = getJson(e.target.result);        if (data) {            sendAction("restore", data);        } else {            window.alert(messages[4]);        }    };    reader.readAsText(inputFile);
    return false;
}
function doRestore() {    if (typeof window.FileReader !== "function") {        alert("The file API isn't supported on this browser yet.");    } else {        $("#uploader").click();    }    return false;}
function doFactoryReset() {    var response = window.confirm("Are you sure you want to restore to factory settings?");    if (response === false) {        return false;    }    websock.send(JSON.stringify({"action": "factory_reset"}));    doReload(5000);    return false;}
function doToggle(element, value) {    var id = parseInt(element.attr("data"), 10);    sendAction("relay", {id: id, status: value ? 1 : 0 });    return false;}
function doScan() {    $("#scanResult").html("");    $("div.scan.loading").show();    sendAction("scan", {});    return false;}
function doHAConfig() {    $("#haConfig").html("");    sendAction("haconfig", {});    return false;}
function doDebugCommand() {    var el = $("input[name='dbgcmd']");    var command = el.val();    el.val("");    sendAction("dbgcmd", {command: command});    return false;}
function doDebugClear() {    $("#weblog").text("");    return false;}
// -----------------------------------------------------------------------------// Visualization// -----------------------------------------------------------------------------
function toggleMenu() {    $("#layout").toggleClass("active");    $("#menu").toggleClass("active");    $("#menuLink").toggleClass("active");}
function showPanel() {    $(".panel").hide();    if ($("#layout").hasClass("active")) { toggleMenu(); }    $("#" + $(this).attr("data")).show().        find("input[type='checkbox']").        iphoneStyle("calculateDimensions").        iphoneStyle("refresh");}
// -----------------------------------------------------------------------------// Relays & magnitudes mapping// -----------------------------------------------------------------------------
function createRelayList(data, container, template_name) {
    var current = $("#" + container + " > div").length;    if (current > 0) { return; }
    var template = $("#" + template_name + " .pure-g")[0];    for (var i in data) {        var line = $(template).clone();        $("label", line).html("Switch #" + i);        $("input", line).attr("tabindex", 40 + i).val(data[i]);        line.appendTo("#" + container);    }
}
function createMagnitudeList(data, container, template_name) {
    var current = $("#" + container + " > div").length;    if (current > 0) { return; }
    var template = $("#" + template_name + " .pure-g")[0];    for (var i in data) {        var magnitude = data[i];        var line = $(template).clone();        $("label", line).html(magnitudeType(magnitude.type) + " #" + parseInt(magnitude.index, 10));        $("div.hint", line).html(magnitude.name);        $("input", line).attr("tabindex", 40 + i).val(magnitude.idx);        line.appendTo("#" + container);    }
}
// -----------------------------------------------------------------------------// Wifi// -----------------------------------------------------------------------------
function delNetwork() {    var parent = $(this).parents(".pure-g");    $(parent).remove();}
function moreNetwork() {    var parent = $(this).parents(".pure-g");    $(".more", parent).toggle();}
function addNetwork() {
    var numNetworks = $("#networks > div").length;    if (numNetworks >= maxNetworks) {        alert("Max number of networks reached");        return null;    }
    var tabindex = 200 + numNetworks * 10;    var template = $("#networkTemplate").children();    var line = $(template).clone();    $(line).find("input").each(function() {        $(this).attr("tabindex", tabindex);        tabindex++;    });    $(line).find(".button-del-network").on("click", delNetwork);    $(line).find(".button-more-network").on("click", moreNetwork);    line.appendTo("#networks");
    return line;
}
// -----------------------------------------------------------------------------// Relays scheduler// -----------------------------------------------------------------------------function delSchedule() {    var parent = $(this).parents(".pure-g");    $(parent).remove();}
function moreSchedule() {    var parent = $(this).parents(".pure-g");    $("div.more", parent).toggle();}
function addSchedule(event) {    var numSchedules = $("#schedules > div").length;    if (numSchedules >= maxSchedules) {        alert("Max number of schedules reached");        return null;    }    var tabindex = 200 + numSchedules * 10;    var template = $("#scheduleTemplate").children();    var line = $(template).clone();
    var type = (1 === event.data.schType) ? "switch" : "light";
    template = $("#" + type + "ActionTemplate").children();    var actionLine = template.clone();    $(line).find("#schActionDiv").append(actionLine);
    $(line).find("input").each(function() {        $(this).attr("tabindex", tabindex);        tabindex++;    });    $(line).find(".button-del-schedule").on("click", delSchedule);    $(line).find(".button-more-schedule").on("click", moreSchedule);    line.appendTo("#schedules");
    $(line).find("input[type='checkbox']").        prop("checked", false).        iphoneStyle("calculateDimensions").        iphoneStyle("refresh");
    return line;}
// -----------------------------------------------------------------------------// Relays// -----------------------------------------------------------------------------
function initRelays(data) {
    var current = $("#relays > div").length;    if (current > 0) { return; }
    var template = $("#relayTemplate .pure-g")[0];    for (var i=0; i<data.length; i++) {
        // Add relay fields        var line = $(template).clone();        $(".id", line).html(i);        $("input", line).attr("data", i);        line.appendTo("#relays");        $("input[type='checkbox']", line).iphoneStyle({            onChange: doToggle,            resizeContainer: true,            resizeHandle: true,            checkedLabel: "ON",            uncheckedLabel: "OFF"        });
        // Populate the relay SELECTs        $("select.isrelay").append(            $("<option></option>").attr("value",i).text("Switch #" + i));
    }

}
function initRelayConfig(data) {
    var current = $("#relayConfig > div").length;    if (current > 0) { return; }
    var template = $("#relayConfigTemplate").children();    for (var i in data) {        var relay = data[i];        var line = $(template).clone();        $("span.gpio", line).html(relay.gpio);        $("span.id", line).html(i);        $("select[name='relayBoot']", line).val(relay.boot);        $("select[name='relayPulse']", line).val(relay.pulse);        $("input[name='relayTime']", line).val(relay.pulse_ms);        $("input[name='mqttGroup']", line).val(relay.group);        $("select[name='mqttGroupInv']", line).val(relay.group_inv);        $("select[name='relayOnDisc']", line).val(relay.on_disc);        line.appendTo("#relayConfig");    }
}
// -----------------------------------------------------------------------------// Sensors & Magnitudes// -----------------------------------------------------------------------------
function initMagnitudes(data) {
    // check if already initialized    var done = $("#magnitudes > div").length;    if (done > 0) { return; }
    // add templates    var template = $("#magnitudeTemplate").children();    for (var i in data) {        var magnitude = data[i];        var line = $(template).clone();        $("label", line).html(magnitudeType(magnitude.type) + " #" + parseInt(magnitude.index, 10));        $("div.hint", line).html(magnitude.description);        $("input", line).attr("data", i);        line.appendTo("#magnitudes");    }
}
// -----------------------------------------------------------------------------// Lights// -----------------------------------------------------------------------------
function initColorRGB() {
    // check if already initialized    var done = $("#colors > div").length;    if (done > 0) { return; }
    // add template    var template = $("#colorRGBTemplate").children();    var line = $(template).clone();    line.appendTo("#colors");
    // init color wheel    $("input[name='color']").wheelColorPicker({        sliders: "wrgbp"    }).on("sliderup", function() {        var value = $(this).wheelColorPicker("getValue", "css");        sendAction("color", {rgb: value});    });
    // init bright slider    $("#brightness").on("change", function() {        var value = $(this).val();        var parent = $(this).parents(".pure-g");        $("span", parent).html(value);        sendAction("color", {brightness: value});    });
}
function initCCT() {
  // check if already initialized  var done = $("#cct > div").length;  if (done > 0) { return; }
  $("#miredsTemplate").children().clone().appendTo("#cct");
  $("#mireds").on("change", function() {    var value = $(this).val();    var parent = $(this).parents(".pure-g");    $("span", parent).html(value);    sendAction("mireds", {mireds: value});  });}
function initColorHSV() {
    // check if already initialized    var done = $("#colors > div").length;    if (done > 0) { return; }
    // add template    var template = $("#colorHSVTemplate").children();    var line = $(template).clone();    line.appendTo("#colors");
    // init color wheel    $("input[name='color']").wheelColorPicker({        sliders: "whsvp"    }).on("sliderup", function() {        var color = $(this).wheelColorPicker("getColor");        var value = parseInt(color.h * 360, 10) + "," + parseInt(color.s * 100, 10) + "," + parseInt(color.v * 100, 10);        sendAction("color", {hsv: value});    });
}
function initChannels(num) {
    // check if already initialized    var done = $("#channels > div").length > 0;    if (done) { return; }
    // does it have color channels?    var colors = $("#colors > div").length > 0;
    // calculate channels to create    var max = num;    if (colors) {        max = num % 3;        if ((max > 0) & useWhite) {            max--;            if (useCCT) {              max--;            }        }    }    var start = num - max;
    var onChannelSliderChange = function() {        var id = $(this).attr("data");        var value = $(this).val();        var parent = $(this).parents(".pure-g");        $("span", parent).html(value);        sendAction("channel", {id: id, value: value});    };
    // add templates    var i = 0;    var template = $("#channelTemplate").children();    for (i=0; i<max; i++) {
        var channel_id = start + i;        var line = $(template).clone();        $("span.slider", line).attr("data", channel_id);        $("input.slider", line).attr("data", channel_id).on("change", onChannelSliderChange);        $("label", line).html("Channel #" + channel_id);
        line.appendTo("#channels");
    }
    for (i=0; i<num; i++) {        $("select.islight").append(            $("<option></option>").attr("value",i).text("Channel #" + i));    }
}
// -----------------------------------------------------------------------------// RFBridge// -----------------------------------------------------------------------------
function rfbLearn() {    var parent = $(this).parents(".pure-g");    var input = $("input", parent);    sendAction("rfblearn", {id: input.attr("data-id"), status: input.attr("data-status")});}
function rfbForget() {    var parent = $(this).parents(".pure-g");    var input = $("input", parent);    sendAction("rfbforget", {id: input.attr("data-id"), status: input.attr("data-status")});}
function rfbSend() {    var parent = $(this).parents(".pure-g");    var input = $("input", parent);    sendAction("rfbsend", {id: input.attr("data-id"), status: input.attr("data-status"), data: input.val()});}
function addRfbNode() {
    var numNodes = $("#rfbNodes > legend").length;
    var template = $("#rfbNodeTemplate").children();    var line = $(template).clone();    var status = true;    $("span", line).html(numNodes);    $(line).find("input").each(function() {        $(this).attr("data-id", numNodes);        $(this).attr("data-status", status ? 1 : 0);        status = !status;    });    $(line).find(".button-rfb-learn").on("click", rfbLearn);    $(line).find(".button-rfb-forget").on("click", rfbForget);    $(line).find(".button-rfb-send").on("click", rfbSend);    line.appendTo("#rfbNodes");
    return line;}
// -----------------------------------------------------------------------------// Processing// -----------------------------------------------------------------------------
function processData(data) {
    // title    if ("app_name" in data) {        var title = data.app_name;		if ("app_version" in data) {			title = title + " " + data.app_version;		}        $("span[name=title]").html(title);        if ("hostname" in data) {            title = data.hostname + " - " + title;        }        document.title = title;    }
    Object.keys(data).forEach(function(key) {
        var i;        var value = data[key];
        // ---------------------------------------------------------------------        // Web mode        // ---------------------------------------------------------------------
        if ("webMode" === key) {            password = (1 === value);            $("#layout").toggle(!password);            $("#password").toggle(password);        }
        // ---------------------------------------------------------------------        // Actions        // ---------------------------------------------------------------------
        if ("action" === key) {            if ("reload" === data.action) { doReload(1000); }            return;        }
        // ---------------------------------------------------------------------        // RFBridge        // ---------------------------------------------------------------------
        if ("rfbCount" === key) {            for (i=0; i<data.rfbCount; i++) { addRfbNode(); }            return;        }
        if ("rfbrawVisible" === key) {            $("input[name='rfbcode']").attr("maxlength", 116);        }
        if ("rfb" === key) {            var nodes = data.rfb;            for (i in nodes) {                var node = nodes[i];                $("input[name='rfbcode'][data-id='" + node.id + "'][data-status='" + node.status + "']").val(node.data);            }            return;        }
        // ---------------------------------------------------------------------        // Lights        // ---------------------------------------------------------------------
        if ("rgb" === key) {            initColorRGB();            $("input[name='color']").wheelColorPicker("setValue", value, true);            return;        }
        if ("hsv" === key) {            initColorHSV();            // wheelColorPicker expects HSV to be between 0 and 1 all of them            var chunks = value.split(",");            var obj = {};            obj.h = chunks[0] / 360;            obj.s = chunks[1] / 100;            obj.v = chunks[2] / 100;            $("input[name='color']").wheelColorPicker("setColor", obj);            return;        }
        if ("brightness" === key) {            $("#brightness").val(value);            $("span.brightness").html(value);            return;        }
        if ("channels" === key) {            var len = value.length;            initChannels(len);            for (i in value) {                var ch = value[i];                $("input.slider[data=" + i + "]").val(ch);                $("span.slider[data=" + i + "]").html(ch);            }            return;        }
        if ("mireds" === key) {            $("#mireds").val(value);            $("span.mireds").html(value);            return;        }
        if ("useWhite" === key) {            useWhite = value;        }
        if ("useCCT" === key) {            initCCT();            useCCT = value;        }
        // ---------------------------------------------------------------------        // Sensors & Magnitudes        // ---------------------------------------------------------------------
        if ("magnitudes" === key) {            initMagnitudes(value);            for (i in value) {                var magnitude = value[i];                var error = magnitude.error || 0;                var text = (0 === error) ?                    magnitude.value + magnitude.units :                    magnitudeError(error);                var element = $("input[name='magnitude'][data='" + i + "']");                element.val(text);                $("div.hint", element.parent().parent()).html(magnitude.description);            }            return;        }
        // ---------------------------------------------------------------------        // WiFi        // ---------------------------------------------------------------------
        if ("maxNetworks" === key) {            maxNetworks = parseInt(value, 10);            return;        }
        if ("wifi" === key) {            for (i in value) {                var wifi = value[i];                var nwk_line = addNetwork();                Object.keys(wifi).forEach(function(key) {                    $("input[name='" + key + "']", nwk_line).val(wifi[key]);                });            }            return;        }
        if ("scanResult" === key) {            $("div.scan.loading").hide();            $("#scanResult").show();        }
        // -----------------------------------------------------------------------------        // Home Assistant        // -----------------------------------------------------------------------------
        if ("haConfig" === key) {            $("#haConfig").show();        }
        // -----------------------------------------------------------------------------        // Relays scheduler        // -----------------------------------------------------------------------------
        if ("maxSchedules" === key) {            maxSchedules = parseInt(value, 10);            return;        }
        if ("schedule" === key) {            for (i in value) {                var schedule = value[i];                var sch_line = addSchedule({ data: {schType: schedule["schType"] }});
                Object.keys(schedule).forEach(function(key) {                    var sch_value = schedule[key];                    $("input[name='" + key + "']", sch_line).val(sch_value);                    $("select[name='" + key + "']", sch_line).prop("value", sch_value);                    $("input[type='checkbox'][name='" + key + "']", sch_line).                        prop("checked", sch_value).                        iphoneStyle("refresh");                });            }            return;        }
        // ---------------------------------------------------------------------        // Relays        // ---------------------------------------------------------------------
        if ("relayStatus" === key) {            initRelays(value);            for (i in value) {
                // Set the status for each relay                $("input.relayStatus[data='" + i + "']").                    prop("checked", value[i]).                    iphoneStyle("refresh");
            }            return;        }
        // Relay configuration        if ("relayConfig" === key) {            initRelayConfig(value);            return;        }
        // ---------------------------------------------------------------------        // Domoticz        // ---------------------------------------------------------------------
        // Domoticz - Relays        if ("dczRelays" === key) {            createRelayList(value, "dczRelays", "dczRelayTemplate");            return;        }
        // Domoticz - Magnitudes        if ("dczMagnitudes" === key) {            createMagnitudeList(value, "dczMagnitudes", "dczMagnitudeTemplate");            return;        }
        // ---------------------------------------------------------------------        // Thingspeak        // ---------------------------------------------------------------------
        // Thingspeak - Relays        if ("tspkRelays" === key) {            createRelayList(value, "tspkRelays", "tspkRelayTemplate");            return;        }
        // Thingspeak - Magnitudes        if ("tspkMagnitudes" === key) {            createMagnitudeList(value, "tspkMagnitudes", "tspkMagnitudeTemplate");            return;        }
        // ---------------------------------------------------------------------        // General        // ---------------------------------------------------------------------
        // Messages        if ("message" === key) {            window.alert(messages[value]);            return;        }
        // Web log        if ("weblog" === key) {            $("#weblog").append(new Text(value));            $("#weblog").scrollTop($("#weblog")[0].scrollHeight - $("#weblog").height());            return;        }
        // Enable options        var position = key.indexOf("Visible");        if (position > 0 && position === key.length - 7) {            var module = key.slice(0,-7);            $(".module-" + module).css("display", "inherit");            return;        }
        if ("deviceip" === key) {            var a_href = $("span[name='" + key + "']").parent();            a_href.attr("href", "http://" + value);            a_href.next().attr("href", "telnet://" + value);        }
        if ("now" === key) {            now = value;            return;        }
        if ("free_size" === key) {            free_size = parseInt(value, 10);        }
        // Pre-process        if ("mqttStatus" === key) {            value = value ? "CONNECTED" : "NOT CONNECTED";        }        if ("ntpStatus" === key) {            value = value ? "SYNC'D" : "NOT SYNC'D";        }        if ("uptime" === key) {            ago = 0;            var uptime  = parseInt(value, 10);            var seconds = uptime % 60; uptime = parseInt(uptime / 60, 10);            var minutes = uptime % 60; uptime = parseInt(uptime / 60, 10);            var hours   = uptime % 24; uptime = parseInt(uptime / 24, 10);            var days    = uptime;            value = days + "d " + zeroPad(hours, 2) + "h " + zeroPad(minutes, 2) + "m " + zeroPad(seconds, 2) + "s";        }
        // ---------------------------------------------------------------------        // Matching        // ---------------------------------------------------------------------
        var pre;        var post;
        // Look for INPUTs        var input = $("input[name='" + key + "']");        if (input.length > 0) {            if (input.attr("type") === "checkbox") {                input.                    prop("checked", value).                    iphoneStyle("refresh");            } else if (input.attr("type") === "radio") {                input.val([value]);            } else {                pre = input.attr("pre") || "";                post = input.attr("post") || "";                input.val(pre + value + post);            }        }
        // Look for SPANs        var span = $("span[name='" + key + "']");        if (span.length > 0) {            pre = span.attr("pre") || "";            post = span.attr("post") || "";            span.html(pre + value + post);        }
        // Look for SELECTs        var select = $("select[name='" + key + "']");        if (select.length > 0) {            select.val(value);        }
    });
    // Auto generate an APIKey if none defined yet    if ($("input[name='apiKey']").val() === "") {        generateAPIKey();    }
    resetOriginals();
}
function hasChanged() {
    var newValue, originalValue;    if ($(this).attr("type") === "checkbox") {        newValue = $(this).prop("checked");        originalValue = ($(this).attr("original") === "true");    } else {        newValue = $(this).val();        originalValue = $(this).attr("original");    }    var hasChanged = $(this).attr("hasChanged") || 0;    var action = $(this).attr("action");
    if (typeof originalValue === "undefined") { return; }    if ("none" === action) { return; }
    if (newValue !== originalValue) {        if (0 === hasChanged) {            ++numChanged;            if ("reconnect" === action) { ++numReconnect; }            if ("reboot" === action) { ++numReboot; }            if ("reload" === action) { ++numReload; }            $(this).attr("hasChanged", 1);        }    } else {        if (1 === hasChanged) {            --numChanged;            if ("reconnect" === action) { --numReconnect; }            if ("reboot" === action) { --numReboot; }            if ("reload" === action) { --numReload; }            $(this).attr("hasChanged", 0);        }    }
}
// -----------------------------------------------------------------------------// Init & connect// -----------------------------------------------------------------------------
function initUrls(root) {
    var paths = ["ws", "upgrade", "config", "auth"];
    urls["root"] = root;    paths.forEach(function(path) {        urls[path] = new URL(path, root);        urls[path].protocol = root.protocol;    });
    if (root.protocol == "https:") {        urls.ws.protocol = "wss:";    } else {        urls.ws.protocol = "ws:";    }
}
function connectToURL(url) {
    initUrls(url);
    $.ajax({        'method': 'GET',        'url': urls.auth.href,        'xhrFields': { 'withCredentials': true }    }).done(function(data) {        if (websock) { websock.close(); }        websock = new WebSocket(urls.ws.href);        websock.onmessage = function(evt) {            var data = getJson(evt.data.replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t"));            if (data) {                processData(data);            }        };    }).fail(function() {        // Nothing to do, reload page and retry    });
}
function connect(host) {    if (!host.startsWith("http:") && !host.startsWith("https:")) {        host = "http://" + host;    }    connectToURL(new URL(host));}
function connectToCurrentURL() {    connectToURL(new URL(window.location));}
$(function() {
    initMessages();    loadTimeZones();    setInterval(function() { keepTime(); }, 1000);
    $("#menuLink").on("click", toggleMenu);    $(".pure-menu-link").on("click", showPanel);    $("progress").attr({ value: 0, max: 100 });
    $(".button-update").on("click", doUpdate);    $(".button-update-password").on("click", doUpdatePassword);    $(".button-reboot").on("click", doReboot);    $(".button-reconnect").on("click", doReconnect);    $(".button-wifi-scan").on("click", doScan);    $(".button-ha-config").on("click", doHAConfig);    $(".button-dbgcmd").on("click", doDebugCommand);    $("input[name='dbgcmd']").enterKey(doDebugCommand);    $(".button-dbg-clear").on("click", doDebugClear);    $(".button-settings-backup").on("click", doBackup);    $(".button-settings-restore").on("click", doRestore);    $(".button-settings-factory").on("click", doFactoryReset);    $("#uploader").on("change", onFileUpload);    $(".button-upgrade").on("click", doUpgrade);
    $(".button-apikey").on("click", generateAPIKey);    $(".button-upgrade-browse").on("click", function() {        $("input[name='upgrade']")[0].click();        return false;    });    $("input[name='upgrade']").change(function (){        var file = this.files[0];        $("input[name='filename']").val(file.name);    });    $(".button-add-network").on("click", function() {        $(".more", addNetwork()).toggle();    });    $(".button-add-switch-schedule").on("click", { schType: 1 }, addSchedule);    $(".button-add-light-schedule").on("click", { schType: 2 }, addSchedule);
    $(document).on("change", "input", hasChanged);    $(document).on("change", "select", hasChanged);
    // don't autoconnect when opening from filesystem    if (window.location.protocol === "file:") { return; }    connectToCurrentURL();
});
</script>    <!-- endbuild -->
</html>