// HTML web page
const char index_html[] = R"rawliteral(
<!DOCTYPE HTML><html>
  <head>
    <title>Greenhousino Irrigation System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body { font-family: Arial; text-align: center; margin:0px auto; padding-top: 30px;}
      .button {
        padding: 10px 20px;
        font-size: 24px;
        text-align: center;
        outline: none;
        color: #fff;
        background-color: #2f4468;
        border: none;
        border-radius: 5px;
        box-shadow: 0 6px #999;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
      }  
      .button:hover {background-color: #1f2e45}
      .button:active {
        background-color: #1f2e45;
        box-shadow: 0 4px #666;
        transform: translateY(2px);
      }
    </style>
  </head>
  <body>
    <h1>Greenhousino Irrigation System</h1>
    Pump state: <span id="state"></span><br/><br/>
    <button class="button" onmousedown="toggleCheckbox('on');" ontouchstart="toggleCheckbox('on');" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">PUMP!</button><br/><br/>
    <button class="button" onmouseup="toggleCheckbox('on');" ontouchend="toggleCheckbox('on');">On!</button><br/><br/>
    <button class="button" onmouseup="toggleCheckbox('off');" ontouchend="toggleCheckbox('off');">Off!</button><br/><br/>
   <script>
   setInterval(getState, 500);
   function toggleCheckbox(x) {
     var xhr = new XMLHttpRequest();
     xhr.open("GET", "/" + x, true);
     xhr.send();
   }

   function getState() {
     var xhr = new XMLHttpRequest();

     xhr.onreadystatechange = function() {
     if (xhr.readyState === 4) {
      displayState(xhr.response);
      }
     }

     xhr.open("GET","/state", true);
     xhr.send();
   }

   function displayState(state) {
    document.getElementById("state").innerHTML = state;
   }

  </script>
  </body>
</html>)rawliteral";