Untitled

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  body {font-family: Arial, Helvetica, sans-serif;}
  form {border: 3px solid #f1f1f1;}

  input[type=number],input[type=password] {
  width: 20%;
  font-size: 11px;
  padding: 12px 12px;
  margin: 4px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

input[type=text]:focus {
  background-color: lightgreen;
}

input[type=number]:focus {
  background-color: lightgreen;
}


input[type=text]{
  width: 100%;
  font-size: 11px;
  padding: 12px 12px;
  margin: 4px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.container {
  padding: 16px;
}
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

textarea {
  width: 100%;
  height: 150px;
  font-size: 11px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}
  </style>
</head>
<body>
  <h2> SETTING PARAMETER</h2>
  <h3> ADAPTER PM05</h3>

  <form action="/setting_post">
  <div class = "container">
  <h3> CONFIG AKSES DATA DAN METODE PUSH</h3>
  <p> pilih jenis akses internet dan metode push data nya</p>
   <label for="uname"><b>Akses Data?</b></label>
    <select name = "type_inet">
      <option> Ethernet </option>
      <option> WiFi     </option>
    </select>
    </div>

    <div class = "container">
    <label for="uname"><b>Metode Push?</b></label>
    <select name = "type_push">
      <option> HTTP Post JSON </option>
      <option disabled> MQTT JSON     </option>
    </select>
    </div>
    <div class = "container">
    <button type="submit">SAVE</button>
    </div>
    </form>

    <form action="/setting_server">
    <div class = "container">
    <h3> CONFIG PUSH HTTP JSON </h3>
    <p> Isi Jika menggunakan metode HTTP Post JSON</p>
    <label for="uname"><b>AUTH</b></label>
     <input type="text" name="token" maxlength="32" required>

    <label for="uname"><b>SERVER</b></label>
    <input type="text" name="server" maxlength="80"required>
     <label for="uname"><b>UPDATE TIME/MENIT</b></label></br>

    <input type="number" name="update_time" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" min="1" max = "60" required/>
     <button type="submit">SAVE</button>
    </div>
    </form>

  <form action="/setting_kwh">
    <div class = "container">
    <h3>SETTING KWH PARAMETER</h3>
    <p> Pilih Jumlah KWH dan type KWH yang ingin di monitoring</p>
    <p style="color:red;"><b>PASTIKAN setiap Slave berbeda ID nya</b> </p>
    <label for="uname"><b>Total Kwh?</b></label>
    <select name = "total_kwh">
      <option> 1</option>
      <option> 2</option>
      <option> 3</option>
      <option> 4</option>
      <option> 5</option>
    </select>
    </div>

    <div class = "container">
    <label for="uname"><b>Slave1</b></label>
    <input type="number" placeholder="id" name="slave1" required>
    <select name = "kwh1">
      <option> Thera 025</option>
      <option> Thera 055</option>
      <option> Thera 075</option>
      <option> PM2100 </option>
      <option> PM800 </option>
      <option disabled> PM51XX_PM53XX </option>
      <option> Amptron-Ai205 </option>
      <option> Elite 300 </option>
      <option disabled> SDM630 </option>
    </select>
    </div>

    <div class = "container">
    <label for="uname"><b>Slave2</b></label>
    <input type="number" placeholder="id" name="slave2">
    <select name = "kwh2">
      <option> Thera 025</option>
      <option> Thera 055</option>
      <option> Thera 075</option>
      <option> PM2100 </option>
      <option> PM800 </option>
      <option disabled> PM51XX_PM53XX </option>
      <option> Amptron-Ai205 </option>
      <option> Elite 300 </option>
      <option disabled> SDM630 </option>
    </select>
    </div>

    <div class = "container">
    <label for="uname"><b>Slave3</b></label>
    <input type="number" placeholder="id" name="slave3">
    <select name = "kwh3">
      <option> Thera 025</option>
      <option> Thera 055</option>
      <option> Thera 075</option>
      <option> PM2100 </option>
      <option> PM800 </option>
      <option disabled> PM51XX_PM53XX </option>
      <option> Amptron-Ai205 </option>
      <option> Elite 300 </option>
      <option disabled> SDM630 </option>
    </select>
    </div>

    <div class = "container">
    <label for="uname"><b>Slave4</b></label>
    <input type="number" placeholder="id" name="slave4">
    <select name = "kwh4">
      <option> Thera 025</option>
      <option> Thera 055</option>
      <option> Thera 075</option>
      <option> PM2100 </option>
      <option> PM800 </option>
      <option disabled> PM51XX_PM53XX </option>
      <option> Amptron-Ai205 </option>
      <option> Elite 300 </option>
      <option disabled> SDM630 </option>
    </select>
    </div>

    <div class = "container">
    <label for="uname"><b>Slave5</b></label>
    <input type="number" placeholder="id" name="slave5">
    <select name = "kwh5">
      <option> Thera 025</option>
      <option> Thera 055</option>
      <option> Thera 075</option>
      <option> PM2100 </option>
      <option> PM800 </option>
      <option disabled> PM51XX_PM53XX </option>
      <option> Amptron-Ai205 </option>
      <option> Elite 300 </option>
      <option disabled> SDM630 </option>
    </select>
    </div>
    <div class = "container">
    <button type="submit">SAVE</button>
    </div>
    </form>

    <form action="/setting_wifi">
    <div class = "container">
      <h3>WIFI CONFIG</h3>
      <p>Pilih jika menggunakan akses internet dengan Wifi  </p>
      <label for="uname"><b>SSID</b></label>
      <input type="text" name="ssid_wifi" maxlength="30" required>
      <label for="uname"><b>PASSWORD</b></label>
      <input type="text" name="pass_wifi" maxlength="30" required>
    <button type="submit">SAVE</button>
    </div>
    </form>

    <form action="/setting_eth">
    <div class = "container">
    <h3>ETHERNET CONFIG</h3>
    <p>Pilih jika menggunakan akses internet dengan Ethernet  </p>
    </div>

    <div class = "container">
    <label for="uname"><b>MAC</b></label>
    </div>
    <div class = "container">
    <input type="number" name="mac1" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" min="16" max = "255"/>
    <input type="number" name="mac2" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" min="16" max = "255"/>
    <input type="number" name="mac3" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" min="16" max = "255"/>
    <input type="number" name="mac4" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" min="16" max = "255"/>
    <input type="number" name="mac5" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" min="16" max = "255"/>
    <input type="number" name="mac6" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" min="16" max = "255"/>
    </div>

    <div class = "container">
    <label for="uname"><b>IP</b></label>
    </div>
    <div class = "container">
    <input type="number" name="ip1" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" />
    <input type="number" name="ip2" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" />
    <input type="number" name="ip3" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" />
    <input type="number" name="ip4" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" />
    </div>

    <div class = "container">
    <label for="uname"><b>DNS</b></label>
    </div>
    <div class = "container">
    <input type="number" name="dns1" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" />
    <input type="number" name="dns2" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" />
    <input type="number" name="dns3" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" />
    <input type="number" name="dns4" required pattern="/^-?\d+\.?\d*$/"
    onKeyPress="if(this.value.length==3) return false;" />
    </div>

     <div class = "container">
    <button type="submit">SAVE</button>
    </div>
  </form>

  <p> &copy; 2021 mikroavr.com All Rights Reserved</p>

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