WiFiThermostat/src/WiFiThermostat/html_main.ino

static const char html_main_script[] PROGMEM = R"=====(
<script>
  function g(i) { return document.getElementById(i) };
  var xhttp, updateTime, reqTime, reqFin;
  function sendBtn(btn, conf) {
  var frmn='BtnFrm'+btn;
  var form = g(frmn);
  if(conf !== undefined) {
  if(confirm(conf)) return transmit(form);
    else return false;
    }
    else return transmit(form);
  }
  function transmit(f) {
    if (!xhttp) { 
      reqTime = 0;
      reqFin = false;
      xhttp = new XMLHttpRequest();
      xhttp.timeout = 1000;
      xhttp.overrideMimeType("application/json");
      xhttp.open('POST', 'api');
      xhttp.send(f ? (new FormData(f)) : '');
      xhttp.onreadystatechange = function () {
        if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
          var data = JSON.parse(xhttp.responseText);
          if(data.setTemp !== undefined) g('setTemp').innerHTML = data.setTemp.toFixed(1) + '&deg;';
          if(data.currSetTemp !== undefined) g('currSetTemp').innerHTML = data.currSetTemp.toFixed(1) + '&deg;';
          if(data.psetName !== undefined) g('pset').innerHTML = data.psetName.toUpperCase();
          if(data.psetName0 !== undefined) g('btnPs0').innerHTML = data.psetName0;
          if(data.psetName1 !== undefined) g('btnPs1').innerHTML = data.psetName1;
          if(data.psetName2 !== undefined) g('btnPs2').innerHTML = data.psetName2;
          
      //if(data.temp !== undefined) g('temp').innerHTML = data.temp.toFixed(1);
          //if(data.hum !== undefined) g('hum').innerHTML = data.hum;
      
      if(data.temp !== undefined && data.hum !== undefined) g('currTempHum').innerHTML = data.temp.toFixed(1) + '&deg;&nbsp;&nbsp;&nbsp;' + data.hum.toFixed(0) + '%';
      else if(data.temp !== undefined) g('currTempHum').innerHTML = data.temp.toFixed(1) + '&deg;';
      
          if(data.modeName !== undefined) g('mode').innerHTML = data.modeName.toUpperCase();
          if(data.mode == '1') { g('btnModeOn').setAttribute('class', ''); g('btnModeOff').setAttribute('class', 'bgrey');}
          else { g('btnModeOn').setAttribute('class', 'bgrey'); g('btnModeOff').setAttribute('class', '');}
          if(data.pset == '0') { g('btnPs0').setAttribute('class', ''); g('btnPs1').setAttribute('class', 'bgrey'); g('btnPs2').setAttribute('class', 'bgrey');}
          else if(data.pset == '1') {g('btnPs0').setAttribute('class', 'bgrey'); g('btnPs1').setAttribute('class', ''); g('btnPs2').setAttribute('class', 'bgrey');}
          else if(data.pset == '2') {g('btnPs0').setAttribute('class', 'bgrey'); g('btnPs1').setAttribute('class', 'bgrey'); g('btnPs2').setAttribute('class', ''); }
          
          if(data.heating == '1' && data.mode == '1') { g('heating').innerHTML = 'HEATING'; g('heating').style = 'color:red;'; }
          else if(data.heating == '0' && data.mode == '1') { g('heating').innerHTML = 'IDLE'; g('heating').style = 'color:#1fa3ec;'; }
          else if(data.mode == '0') { g('heating').innerHTML = 'OFF'; g('heating').style = 'color:black;'; }
          
          if(data.ssid !== undefined) g('ssid').innerHTML = data.ssid;
          if(data.mqttstate !== undefined) { 
            if(data.mqttstate == "CONNECTED") { g('mqttstate').innerHTML = data.mqttstate + ' to <i>' + data.mqtthost + '</i>'; }
            else g('mqttstate').innerHTML = data.mqttstate;
          }
          if(data.uptime !== undefined) g('uptime').innerHTML = data.uptime;
          if(data.mqttreconn !== undefined) g('mqttreconn').innerHTML = data.mqttreconn;
          xhttp = null;
          updateTime = 0;
          reqFin = true;
          }
        else {
          if(!reqFin && reqTime > 10) {
            xhttp = null;
            reqFin = true;
          }
        }
      }
    }
    return false;
  }
  function init() {
    transmit();
  }
  setInterval(transmit, 2500);
</script>
)====="; // html_main_script

static const char html_main_body[] PROGMEM = R"=====(
<p><b>Temperature</b></p>
<div id='setTemp' style='text-align:center;font-weight:bold;font-size:40px'></div>
<div></div>
<table style='width:100%'><tr>
<td style='width:50%'><form id='BtnFrmMinus'><input type='hidden' name='BtnMinus' value='1'><button onclick='return sendBtn("Minus")'>-</button></form></td>
<td style='width:50%'><form id='BtnFrmPlus'><input type='hidden' name='BtnPlus' value='1'><button onclick='return sendBtn("Plus")'>+</button></form></td>
</tr></table>
<table style='width:100%'><tr>
<td style='width:50%'>Current Temp/Hum </td><td><b><span id='currTempHum'></span></td>
</tr></tr>
<td>Actual set Temp </td><td><b><span id='currSetTemp'></span></b></td>
</tr></tr>
<td>Heating State </td><td><b><span id='heating'></span></b></td>
</tr></table>
<div></div>
<div></div>
<p><b>Preset</b></p>
<div id='pset' style='text-align:center;font-weight:bold;font-size:20px'></div>
<div></div>
<form id='BtnFrmPset0'><input type='hidden' name='BtnPset0' value='1'><button id='btnPs0' onclick='return sendBtn("Pset0")'>NORMAL</button></form>
<form id='BtnFrmPset1'><input type='hidden' name='BtnPset1' value='1'><button id='btnPs1' onclick='return sendBtn("Pset1")'>REDUCTION 1</button></form>
<form id='BtnFrmPset2'><input type='hidden' name='BtnPset2' value='1'><button id='btnPs2' onclick='return sendBtn("Pset2")'>REDUCTION 2</button></form>
<div></div>
<div></div>
<div></div>
<form action='redTemps' method='GET'><button>Set Reduction Temps</button></form>
<div></div>
<p><b>Mode</b></p>
<div id='mode' style='text-align:center;font-weight:bold;font-size:20px'></div>
<div></div>
<table style='width:100%'><tr>
<td style='width:50%'><form id='BtnFrmOn'><input type='hidden' name='BtnOn' value='1'><button id='btnModeOn' onclick='return sendBtn("On")'>HEAT</button></form></td>
<td style='width:50%'><form id='BtnFrmOff'><input type='hidden' name='BtnOff' value='1'><button id='btnModeOff' onclick='return sendBtn("Off")'>OFF</button></form></td>
</tr></table>
<hr>
<div></div>
<p><b>System</b></p>
<p>WiFi connected to <i><span id='ssid'></span></i></p>
<p>MQTT <span id='mqttstate'></span></p>
<p>MQTT reconnects: <span id='mqttreconn'></span></p>
<p>Uptime: <span id='uptime'></span></p>
<table style='width:100%'><tr>
<td style='width:50%'>)====="; // html_main_body2

static const char html_main_body_adminonly[] PROGMEM = R"=====(
<form action='conf' method='get'><button class='bgrey'>Config</button></form>
)====="; // html_main_body_adminonly

static const char html_main_body2[] PROGMEM = R"=====(</td>
<td style='width:50%'><form action='/' method='get' onsubmit='return confirm("Confirm Restart");'><button name='restart' class='bred'>Restart</button></form></td>
</tr></table>
)====="; // html_main_body2