HTML Code

static const char PROGMEM INDEX_HTML[] = R"rawliteral(
<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content=meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
 <title>DHT Monitor</title>
 <style type="text/css">
  body{
      padding: 35px;
      background-color: #222222;
     }
  h1{
     color: #FFFFFF;
     font-family: sans-serif;
    }
  p{
    color: #FFFFFF;
    font-family: sans-serif;
    font-size: 18px;
    }
span{
    padding-left: 80px;
}
  </style>
 </head>
 <body>
 <h1>Irrigation System Viewer</h1>
 <p id="pumpState"></p>
 <p id="t0"><span id="s0"></span></p>
 <p id="t1"><span id="s0"></span></p>
 <p id="t2"><span id="s2"></span></p>
 <p id="t3"><span id="s3"></span></p>
 <p id="t4"><span id="s4"></span></p>
 <body>
 <script type="text/javascript">
   refresh();
   setInterval(refresh, 1000);
   function refresh(){
     refreshSoilHumidity()
     refreshSolenoid();
     refreshPump();
   }

   function refreshSoilHumidity(){
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){
        const parsedData = JSON.parse(xmlhttp.responseText);
        document.getElementById("t0").innerHTML = "SoilHumidity Sensor 0: " + parsedData.t0 + "%";
        document.getElementById("t1").innerHTML = "SoilHumidity Sensor 1: " + parsedData.t1 + "%";
        document.getElementById("t2").innerHTML = "SoilHumidity Sensor 2: " + parsedData.t2 + "%";
        document.getElementById("t3").innerHTML = "SoilHumidity Sensor 3: " + parsedData.t3 + "%";
        document.getElementById("t4").innerHTML = "SoilHumidity Sensor 4: " + parsedData.t4 + "%";
       }
     };
     xmlhttp.open("GET", "/SoilHumidity", true);
     xmlhttp.send();
   }

   function refreshSolenoid(){
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){
        const parsedData = JSON.parse(xmlhttp.responseText);
        document.getElementById("s0").innerHTML = "Solenoid0 State 0: " + parsedData.s0;
        document.getElementById("s1").innerHTML = "Solenoid1 State 1: " + parsedData.s1;
        document.getElementById("s2").innerHTML = "Solenoid2 State 2: " + parsedData.s2;
        document.getElementById("s3").innerHTML = "Solenoid3 State 3: " + parsedData.s3;
        document.getElementById("s4").innerHTML = "Solenoid4 State 4: " + parsedData.s4;
       }
     };
     xmlhttp.open("GET", "/Solenoid", true);
     xmlhttp.send();
   }

   function refreshPump(){
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == XMLHttpRequest.DONE && xmlhttp.status == 200){
        document.getElementById("pumpState").innerHTML = "Pump State: " + this.responseText;
       }
     };
     xmlhttp.open("GET", "/pump", true);
     xmlhttp.send();
    }
 </script>
</html>
)rawliteral";