add gziped favicon as byte array, playground output dialog stuff

Arduino/CanGrow/include/Webserver/File_favicon_ico.h

@@ -0,0 +1,37 @@
+unsigned char File_favicon_ico_gz[] = {
+  0x1f, 0x8b, 0x08, 0x08, 0x11, 0x71, 0x19, 0x67, 0x00, 0x03, 0x43, 0x61,
+  0x6e, 0x47, 0x72, 0x6f, 0x77, 0x5f, 0x66, 0x61, 0x76, 0x69, 0x63, 0x6f,
+  0x2e, 0x69, 0x63, 0x6f, 0x00, 0xed, 0x94, 0x49, 0x4b, 0xc3, 0x40, 0x18,
+  0x86, 0xdf, 0xd8, 0xc5, 0xaa, 0xe9, 0x12, 0xa7, 0xcd, 0xd2, 0x26, 0x99,
+  0x7c, 0x89, 0x76, 0x45, 0xb4, 0x2a, 0xb6, 0xa2, 0x42, 0xb1, 0x52, 0x73,
+  0x11, 0xd4, 0x83, 0xdb, 0xc1, 0x8b, 0x08, 0x75, 0xf9, 0xff, 0x67, 0xbf,
+  0x49, 0x3c, 0x58, 0xa4, 0x17, 0xc1, 0x5b, 0x9e, 0xe4, 0x1d, 0xe6, 0xf9,
+  0x86, 0x61, 0x32, 0x03, 0x19, 0x40, 0xe3, 0xa7, 0x56, 0x03, 0xb7, 0x25,
+  0xcc, 0x0b, 0x80, 0x09, 0xa0, 0xcb, 0xe1, 0x12, 0x02, 0xa4, 0xf5, 0x65,
+  0x44, 0xed, 0x08, 0x51, 0x27, 0xc2, 0x56, 0x2f, 0xc2, 0x76, 0x9f, 0x33,
+  0x88, 0xd0, 0xde, 0x09, 0xd1, 0xd9, 0x0b, 0xd1, 0x1d, 0x86, 0xe8, 0x1d,
+  0x86, 0xe8, 0x8f, 0x08, 0x83, 0x31, 0x61, 0x77, 0x12, 0x60, 0x38, 0x0d,
+  0xb0, 0x3f, 0x93, 0x38, 0x88, 0x25, 0x8e, 0xae, 0x7c, 0x8c, 0xae, 0x7d,
+  0x8c, 0x6f, 0x3c, 0x8e, 0x8f, 0xe3, 0x5b, 0x0f, 0x27, 0x77, 0x2e, 0x4e,
+  0xef, 0x39, 0x0f, 0x2e, 0xce, 0x1e, 0x39, 0x4f, 0x2d, 0x4c, 0x9e, 0x9b,
+  0x38, 0x7f, 0x71, 0x30, 0xe5, 0x5c, 0xbc, 0xda, 0x98, 0xcd, 0x2d, 0xcc,
+  0xde, 0x2c, 0x5c, 0xbe, 0x5b, 0x88, 0x3f, 0x4c, 0xc4, 0x9f, 0xe6, 0xd2,
+  0xef, 0xcb, 0xc8, 0xc8, 0xf8, 0x7f, 0x7e, 0xfc, 0x81, 0x45, 0x61, 0xe4,
+  0x57, 0xac, 0xbc, 0x21, 0x8a, 0xa9, 0x6b, 0x82, 0xa4, 0x0c, 0x24, 0x09,
+  0x2d, 0x55, 0x43, 0x78, 0xc4, 0x78, 0xc2, 0x50, 0x85, 0x9c, 0x4d, 0x92,
+  0x12, 0x24, 0xd9, 0x1b, 0x7c, 0xe9, 0x08, 0x51, 0x72, 0x13, 0x5f, 0xaf,
+  0x8a, 0x4d, 0x35, 0x61, 0xd5, 0x4b, 0xc7, 0xfd, 0xef, 0x5b, 0xa8, 0x4e,
+  0x14, 0x24, 0xaf, 0x9f, 0xe8, 0x5a, 0x40, 0x75, 0x87, 0xc8, 0xe1, 0xb2,
+  0xae, 0xbc, 0x2c, 0x85, 0xa6, 0x9c, 0x97, 0x2d, 0x2b, 0x6f, 0x15, 0x34,
+  0x28, 0x87, 0x56, 0x6d, 0x2a, 0xcf, 0x71, 0x2a, 0xca, 0xd3, 0x6e, 0x0a,
+  0x51, 0x65, 0x61, 0x3b, 0x44, 0x8b, 0xdb, 0x6b, 0x34, 0x16, 0x5d, 0xd7,
+  0xff, 0x74, 0x4a, 0xbf, 0xf9, 0x02, 0x31, 0x98, 0x4b, 0x6b, 0x7e, 0x05,
+  0x00, 0x00
+};
+unsigned int File_favicon_ico_gz_len = 326;
+
+void WebFile_favicon_ico(AsyncWebServerRequest *request) {
+  AsyncWebServerResponse *response = request->beginResponse_P(200, "image/x-icon", File_favicon_ico_gz, File_favicon_ico_gz_len);
+  response->addHeader("Content-Encoding", "gzip");
+  request->send(response);
+}

playground/html/root/cangrow.css

@@ -0,0 +1,194 @@
+body {
+  color: #cae0d0;
+  background-color: #1d211e;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  text-align: center;
+}
+
+.footer {
+  color: #343B35;
+  /*text-align: center;*/
+}
+
+.center {
+  /*width: 100; */
+  margin: auto;    
+} 
+
+.centered {
+  /*display: block;*/
+  margin-left: auto;
+  margin-right: auto;
+}
+
+td {
+    text-align: left; 
+    vertical-align: middle;
+}
+/*h1, h2, h3, h4, h5 {
+  text-align: center;
+}*/
+
+h1 {
+  margin: 15px;
+}
+
+h2 {
+  margin: 10px;
+}
+
+h3 {
+  margin: 5px;
+}
+
+a:link, a:visited {
+  color: #04AA6D;
+}
+a:hover {
+  color: #64AA6D;
+}
+a:active {
+  color: #04AA6D;
+}
+.infomsg , .warnmsg {
+  color: #fff;
+  border-radius: 3px;
+  padding: 4px;
+  /*width: fit-content; min-width: 200px; max-width: 420px;*/
+  display: inline-block;
+  margin: auto;
+  margin-bottom: 5px;
+  font-weight: bold;
+  /*text-align: center;*/
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+.infomsg {
+  background: #04AA6D;
+}
+.warnmsg {
+  background: #aa4204;
+}
+.inputShort {
+  width: 42px;
+}
+
+.helpbox {
+  font-size: 0.8em;
+}
+.nav {
+  background: #333;
+  /*width: 100; */
+  margin: auto;
+  margin-bottom: 10px;
+  padding: 0;
+  position: relative;
+  border-radius: 3px;
+  display: inline-block;
+  text-align: left;
+}
+
+.subnav {
+  /*text-align: center;*/
+  margin: auto;
+  margin-bottom: 10px;
+  padding: 0;
+  position: relative;
+  border-radius: 3px;
+}
+
+.subnavTitle {
+  font-size: 1em;
+  /*font-weight: bold;*/
+  margin-top: -10px;
+  margin-bottom: 10px;
+  /*text-align: center;*/
+}
+.nav li {
+  display: inline-block;
+  list-style: none;
+  border-radius: 3px;
+}
+
+.subnav li {
+  background: #262B27;
+  list-style: none;
+  border-radius: 3px;
+  margin-bottom: 3px;
+  display: inline-block;
+}
+
+.nav li:first-of-type {
+  background: #026b45;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.nav li a, .nav span, .subnav li a, .subnav span,  .button, .button:link, input[type=button], input[type=submit], input[type=reset] {
+  color: #ddd;
+  display: block;
+  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
+  font-size:0.8em;
+  padding: 10px 20px;
+  text-decoration: none;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+
+.subnav li a, .subnav span {
+  padding: 5px 10px;
+}
+
+.nav li a:hover, .subnav li a:hover, .activeNav, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
+  background: #04AA6D;
+  color: #fff;
+  border-radius: 3px;
+}
+
+.nav li a:active, .subnav li a:active {
+  background: #026b45;
+  color: #cae0d0;
+}
+
+.activeNav {
+  background: #444;
+}
+
+.navTime {
+  background: #292929;
+}
+
+.button, .button:link, .button:visited, input[type=button], input[type=submit], input[type=reset] {
+  background: #026b45;
+  color: #fff;
+  border-radius: 3px;
+  padding: 6px 12px;
+  /*text-align: center;*/
+  text-decoration: none;
+  display: inline-block;
+  border: none;
+}
+
+.button:link:active, .button:visited:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
+  background: #026b45;
+  color: #cae0d0;
+}
+
+input[type=text], input[type=date], input[type=number], input[type=password], select {
+  background: #cae0d0;
+  color: #1d211e;
+  border: 1px solid #026b45;
+  border-radius: 3px;
+}
+
+ @media only screen and (min-width: 1820px) {
+  /*.center, .nav {
+    width: 60; min-width: 420px;
+  }*/
+  .subnav li {
+    display: '';
+    margin-bottom: 3px;
+   }
+}
+
+/*@media only screen and (min-width: 640px) {
+  
+}*/

playground/html/root/gauge.css

@@ -1,147 +0,0 @@
-.gauge {
-  position: relative;
-}
-
-.gaugeWrapper {
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-}
-
-.gauge__container {
-	margin: 0;
-	padding: 0;
-	position: absolute;
-	left: 50%;
-	overflow: hidden;
-	text-align: center;
-	-webkit-transform: translateX(-50%);
-	   -moz-transform: translateX(-50%);
-	    -ms-transform: translateX(-50%);
-	     -o-transform: translateX(-50%);
-	        transform: translateX(-50%);
-}
-
-.gauge__background {
-	z-index: 0;
-	position: absolute;
-	background-color: #cae0d0;
-	top: 0;
-	border-radius: 300px 300px 0 0;
-}
-
-.gauge__data {
-	z-index: 1;
-	position: absolute;
-	background-color: #04AA6D;
-	margin-left: auto;
-	margin-right: auto;
-	border-radius: 300px 300px 0 0;
-    -webkit-transform-origin: center bottom;
-       -moz-transform-origin: center bottom;
-        -ms-transform-origin: center bottom;
-         -o-transform-origin: center bottom;
-            transform-origin: center bottom;
-}
-
-.gauge__center {
-	z-index: 2;
-	position: absolute;
-	background-color: #1d211e;
-	margin-right: auto;
-	border-radius: 300px 300px 0 0;
-}
-
-.gauge__marker {
-    z-index: 3;
-    background-color: #fff;
-    position: absolute;
-    width: 1px;
-}
-
-.gauge__needle {
-    z-index: 4;
-    background-color: #E91E63;
-    height: 3px;
-    position: absolute;
-    -webkit-transform-origin: left center;
-       -moz-transform-origin: left center;
-        -ms-transform-origin: left center;
-         -o-transform-origin: left center;
-            transform-origin: left center;
-}
-
-.gauge__labels {
-    display: table;
-    margin: 0 auto;
-    position: relative;
-    font-weight: bold;
-}
-
-.gauge__label--low {
-    display: table-cell;
-    text-align: center;
-}
-
-.gauge__label--spacer {
-    display: table-cell;
-}
-
-.gauge__label--high {
-    display: table-cell;
-    text-align: center;
-}
-
-
-.gauge { height: calc(60px + 3em); }
-.gauge__container { width: 120px; height: 60px; }
-.gauge__marker { height: 60px; left: 59.5px; }
-.gauge__background { width: 120px; height: 60px; }
-.gauge__center { width: 72px; height: 36px; top: 24px; margin-left: 24px; }
-.gauge__data { width: 120px; height: 60px; }
-.gauge__needle { left: 60px; top: 58px; width: 60px; }
-.gauge__labels { top: 60px; width: 120px; }
-.gauge__label--low { width: 24px; }
-.gauge__label--spacer { width: 72px; text-align: center;}
-.gauge__label--high { width: 24px; }
-
- @media only screen and (min-width: 720px) {
-  .gauge { height: calc(120px + 4.2em); }
-  .gauge__container { width: 240px; height: 120px; }
-  .gauge__marker { height: 120px; left: 119.5px; }
-  .gauge__background { width: 240px; height: 120px; }
-  .gauge__center { width: 144px; height: 72px; top: 48px; margin-left: 48px; }
-  .gauge__data { width: 240px; height: 120px; }
-  .gauge__needle { left: 120px; top: 117px; width: 120px; }
-  .gauge__labels { top: 120px; width: 240px; }
-  .gauge__label--low { width: 48px; }
-  .gauge__label--spacer { width: 144px; text-align: center;}
-  .gauge__label--high { width: 48px; }
-  .gaugeLabel { font-size: 1.3em; }
-  .gauge__labels { font-size: 2em; }
- }
-
-.gauge--liveupdate .gauge__data,
-.gauge--liveupdate .gauge__needle {
-    -webkit-transition: all 1s ease-in-out;
-       -moz-transition: all 1s ease-in-out;
-        -ms-transition: all 1s ease-in-out;
-         -o-transition: all 1s ease-in-out;
-            transition: all 1s ease-in-out;
-}
-
-
-.gauge__data {
-    -webkit-transform: rotate(-.50turn);
-       -moz-transform: rotate(-.50turn);
-        -ms-transform: rotate(-.50turn);
-         -o-transform: rotate(-.50turn);
-            transform: rotate(-.50turn);
-}
-.gauge__needle {
-    -webkit-transform: rotate(-.50turn);
-       -moz-transform: rotate(-.50turn);
-        -ms-transform: rotate(-.50turn);
-         -o-transform: rotate(-.50turn);
-            transform: rotate(-.50turn);
-}

playground/html/root/gauge.js

@@ -1,61 +0,0 @@
-
-
-function Gauge(el) {
-
-var element,      // Containing element for the info component
-    data,         // `.gauge__data` element
-    needle,       // `.gauge__needle` element
-    value = 0.0,  // Current gauge value from 0 to 1
-    prop,         // Style for transform
-    valueLabel;   // `.gauge__label--spacer` element
-
-var setElement = function(el) {
-    // Keep a reference to the various elements and sub-elements
-    element = el;
-    data = element.querySelector('.gauge__data');
-    //needle = element.querySelector('.gauge__needle');
-    valueLabel = element.querySelector('.gauge__label--spacer');
-    
-};
-
-var setValue = function(x, max, unit) {
-    percentage = x * 100 / max;
-    value = percentage / 100; 
-    var turns = -0.5 + (value * 0.5);
-    data.style[prop] = 'rotate(' + turns + 'turn)';
-    //needle.style[prop] = 'rotate(' + turns + 'turn)';
-    valueLabel.textContent = x + unit;
-
-};
-
-function exports() { };
-
-exports.element = function(el) {
-    if (!arguments.length) { return element; }
-    setElement(el);
-    return this;
-};
-
-exports.value = function(x, max=100, unit='%') {
-    if (!arguments.length) { return value; }
-    setValue(x, max, unit);
-    return this;
-};
-
-var body = document.getElementsByTagName('body')[0];
-['webkitTransform', 'mozTransform', 'msTransform', 'oTransform', 'transform'].
-    forEach(function(p) {
-        if (typeof body.style[p] !== 'undefined') { prop = p; }
-    }
-);
-
-if (arguments.length) {
-    setElement(el);
-}
-
-return exports;
-
-};
-
-
-

playground/html/root/index.html

@@ -1,161 +1,72 @@
-
 <!DOCTYPE html>
 <html>
  <head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-<title>CanGrow - Amnesia Haze</title>
-
- <link rel='icon' href='data:;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAABcElEQVQ4y42TzU/bQBDFf7Nx1qGuAYVgQSuo2khBggPhyIH//9AiJAQ9tEeLqCKiUD6sxF52OMSEBCdW57aa9968fTsr3V5XWVLPO6sANNL7ZRAMNeU6Ea4T1UEI6pr55kcAwhpMrYOpk2/r/yEQmKWkIonf+TZVgex4Fw0bIEtIAALF3gbZ8U5VwKa3PJ18JT9IpiLvyflBwuhLG5veVUM0/0aoCONPa2hQjWZ8uEVeupJnXSBwO8YOH8iTeAKc2Q4Xt2C1VZL93F7MjbK/bxDnp5Zn7b+So+9pdQ+K/Q5qJlrRj5Ts6DM+rK7Ih7Mr3HaM7jYQVZqXQ6Tb6yqBYdTfomhHiFfUyMI3f+01/z7RHNzTGDyWGThP63SA2d8EEfIkrgQpzmOvH0AV+3M4zegNpUwagAYG8Yp4BS0nl4Kz5Mpf0JXJMby6w/66Aa+M+9uE53/Iexsggq4ESOYWC0jmsBfX8xdXhcJjL4cLc3kBl8uJGQ/CrpAAAAAASUVORK5CYII='>
- <style>
-body {
-  color: #cae0d0;
-  background-color: #1d211e;
-  font-family: helvetica;
-}
-
-.center {
-  width: 100%; 
-  margin: auto;    
-} 
-
-.centered {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-h1, h2, h3, h4, h5 {
-  text-align: center;
-}
-a:link, a:visited {
-  color: #04AA6D;
-}
-a:hover {
-  color: #64AA6D;
-}
-a:active {
-  color: #04AA6D;
-}
-.infomsg , .warnmsg {
-  color: #fff;
-  border-radius: 3px;
-  padding: 4px;
-  width: fit-content; min-width: 200px; max-width: 420px;
-  margin: auto;
-  margin-bottom: 5px;
-  font-weight: bold;
-  text-align: center;
-  text-decoration: none;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
-}
-.infomsg {
-  background: #04AA6D;
-}
-.warnmsg {
-  background: #aa4204;
-}
-.inputShort {
-  width: 42px;
-}
-
-.nav {
-  background: #333;
-  width: 100%; 
-  margin: auto;
-  margin-bottom: 10px;
-  padding: 0;
-  position: relative;
-  border-radius: 3px;
-}
-
-.nav li {
-  display: inline-block;
-  list-style: none;
-}
-
-.nav li:first-of-type {
-  background: #026b45;
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-.nav li a , .nav span, .button, .button:link, input[type=button], input[type=submit], input[type=reset] {
-  color: #ddd;
-  display: block;
-  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
-  font-size:0.8em;
-  padding: 10px 20px;
-  text-decoration: none;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
-}
-
-.nav li a:hover , .activeMenu, .button:link:hover, .button:visited:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover  {
-  background: #04AA6D;
-  color: #fff;
-  border-radius: 3px;
-}
-
-.nav li a:active {
-  background: #026b45;
-  color: #cae0d0;
-}
-
-.activeMenu {
-  background: #444;
-}
-
-.MenuTime {
-  background: #292929;
-}
-
-.button, .button:link, .button:visited, input[type=button], input[type=submit], input[type=reset] {
-  background: #026b45;
-  color: #fff;
-  border-radius: 3px;
-  padding: 6px 12px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  border: none;
-}
-
-.button:link:active, .button:visited:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
-  background: #026b45;
-  color: #cae0d0;
-}
-
-input[type=text], input[type=date], input[type=number], input[type=password], select {
-  background: #cae0d0;
-  color: #1d211e;
-  border: 1px solid #026b45;
-  border-radius: 3px;
-}
-
- @media only screen and (min-width: 1280px) {
-  .center, .nav {
-    width: 60%; min-width: 420px;    
-  }
-}
- </style>
+ <title>CanGrow - CanGrow v0.2-dev</title>
+ <link rel='stylesheet' href='cangrow.css'>
 </head>
 <body>
- <ul class='nav'><li><a  href='/'>&#x1F331; Amnesia Haze</a></li>
-<li><a href='/growSettings' >&#128262; Grow settings</a></li>
-<li><a href='/systemSettings' >&#9881; System settings</a></li>
-<li><a href='/wifiSettings' >&#128225; WiFi settings</a></li>
-<li><a href='/help' >&#x2753; Help</a></li>
-<li><span class='MenuTime'>09:48:27</span></li>
-<li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.1</a></li>
-</ul><div class='center'><h2>&#x1F504; Firmware update</h2>Version: 0.1<br>Build: 4ad16c9
-<p>You find the latest CanGrow Firmware Version on the projects <a href='https://git.la10cy.net/DeltaLima/CanGrow/releases' target='_blank'>release page</a></p>
-<form method='GET' action='' enctype='multipart/form-data'>
-   Firmware .bin file:<br>
-   <input type='file' accept='.bin,.bin.gz' name='firmware'>
-   
-</form>
-<button onclick="document.getElementById('divUploading').style.display = ''; window.alert('click');">asd</button>
-<div id='divUploading' style='display: none;' class='warnmsg'>Uploading, please wait...<div>
-
- </div>
-</body>
-</html>
+ <ul class='nav'><li><a  href='/'>&#x1F331; CanGrow</a></li>
+  <li><a class='' href='/grow/' >&#128262; Grow settings</a></li>
+  <li><a class='activeNav' href='/system/' >&#9881; System settings</a></li>
+  <li><a class='' href='/wifi/' >&#128225; WiFi settings</a></li>
+  <li><a class='' href='/help' >&#x2753; Help</a></li>
+  <li><span class='navTime'>04:20:23</span></li>
+  <li><a href='https://git.la10cy.net/DeltaLima/CanGrow' target='_blank'>CanGrow v0.2-dev</a></li>
+ </ul>
+ <div class='center'>
+ 
+<ul class='subnav'>
+  <li><a class='activeNav' href='/system/output/'>&#9889; Output configuration</a></li>
+  <li><a class='' href='/system/update'>&#x1F504; Firmware update</a></li>
+  <li><a class='' href='/system/restart' >&#x1F501; CanGrow restart</a></li>
+  <li><a class='' href='/system/wipe' >&#x1F4A3; Factory reset</a></li>
+</ul>
+<a class='button' href='/system/output/add'>&#10133; Add output</a>
+<table class='centered'>
+  <t3>
+    <th>ID</th>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Device</th>
+    <th>Action</th>
+  </t3>
+  <tr>
+    <td>0</td>
+    <td>LED main</td>
+    <td>GPIO</td>
+    <td>Light</td>
+    <td><a href="#">✏️</a> <a href="#">❌</a> </td>
+  </tr>
+  <tr>
+    <td>1</td>
+    <td>LED red</td>
+    <td>GPIO</td>
+    <td>Light</td>
+    <td><a href="#">✏️</a> <a href="#">❌</a> </td>
+  </tr>
+  <tr>
+    <td>2</td>
+    <td>Fan out</td>
+    <td>GPIO</td>
+    <td>Fan</td>
+    <td><a href="#">✏️</a> <a href="#">❌</a> </td>
+  </tr>
+  <tr>
+    <td>3</td>
+    <td>Fan inside</td>
+    <td>GPIO</td>
+    <td>Fan</td>
+    <td><a href="#">✏️</a> <a href="#">❌</a> </td>
+  </tr>
+  <tr>
+    <td>4</td>
+    <td>Tasmota pump</td>
+    <td>URL</td>
+    <td>Pump</td>
+    <td><a href="#">✏️</a> <a href="#">❌</a> </td>
+  </tr>
+</table>
+<div class='footer'><span>Build: d679d89-esp8266-20241024231631</span></div>
+</div></body></html>