ESPMegaPRO-v3-SDK/ESPMegaPRO-firmware/lib/ESPMegaPRO/html/config.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="config_form" onsubmit="send_config(event)">
  <h1>ESPMega PRO</h1>
  <h3>Device Configurations</h3>
  <p class="config_title">IP Address</p>
  <input type="text" id="ip_address" name="ip_address" class="conf_txt" value="$(ip_address)$"><br>
  <p class="config_title">Network Mask</p>
  <input type="text" id="netmask" name="netmask" class="conf_txt" value="$(netmask)$"><br>
  <p class="config_title">Gateway</p>
  <input type="text" id="gateway" name="gateway" class="conf_txt" value="$(gateway)$"><br>
  <p class="config_title">DNS Server</p>
  <input type="text" id="dns" name="dns" class="conf_txt" value="$(dns)$"><br>
  <p class="config_title">Hostname</p>
  <input type="text" id="hostname" name="hostname" class="conf_txt" value="$(hostname)$"><br>
  <p class="config_title">BMS Server - IP Address</p>
  <input type="text" id="bms_ip" name="bms_ip" class="conf_txt" value="$(bms_ip)$"><br>
  <p class="config_title">BMS Server - Port</p>
  <input type="text" id="bms_port" name="bms_port" class="conf_txt" value="$(bms_port)$"><br>
  <label class="container">Authentication
    <input type="checkbox" name="bms_useauth"  id="bms_useauth" $(bms_use_auth)$ value="yes">
    <span class="checkmark"></span>
  </label>
  <p class="config_title">BMS Server - Username</p>
  <input type="text" id="bms_username" name="bms_username" class="conf_txt" value="$(bms_username)$"><br>
  <p class="config_title">BMS Server - Password</p>
  <input type="password" id="bms_password" name="bms_password" class="conf_txt" value="$(bms_password)$"><br>
  <p class="config_title">BMS Server - Endpoint</p>
  <input type="text" id="bms_endpoint" name="bms_endpoint" class="conf_txt" value="$(bms_endpoint)$"><br>
  <p class="config_title">Web Interface - Username</p>
  <input type="text" id="web_username" name="web_username" class="conf_txt" value="$(web_username)$"><br>
  <p class="config_title">Web Interface - Password</p>
  <input type="password" id="web_password" name="web_password" class="conf_txt" value="$(web_password)$"><br>
  <input type="submit" class="btn" value="Save">
  <button type="button" class="conf" onclick="window.location.href='/'">Back</button><br /><br />
  <b>SIWAT SYSTEM 2023</b>
</form>
<script>
  function send_config() {
    event.preventDefault();
    // Get the form data
    var formData = {
      ip_address: document.getElementById("ip_address").value,
      netmask: document.getElementById("netmask").value,
      gateway: document.getElementById("gateway").value,
      dns: document.getElementById("dns").value,
      hostname: document.getElementById("hostname").value,
      bms_ip: document.getElementById("bms_ip").value,
      bms_port: document.getElementById("bms_port").value,
      bms_useauth: document.getElementById("bms_useauth").checked,
      bms_username: document.getElementById("bms_username").value,
      bms_password: document.getElementById("bms_password").value,
      bms_endpoint: document.getElementById("bms_endpoint").value,
      web_username: document.getElementById("web_username").value,
      web_password: document.getElementById("web_password").value
    };

    // Send the POST request
    fetch("/save_config", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(formData)
    })
      .then(response => response.json())
      .then(data => {
        // Handle the response data
        console.log(data);
      })
      .catch(error => {
        // Handle any errors
        console.error(error);
      });
  }
</script>
<style>
 
  p.config_title {
    font-size: 12;
    font-weight: bold;
    text-align: left;
    align-self: left;
    margin-bottom: 0;
    margin-top: 0;
  }
  
  hr {
    display: block;
    color: #aaaaaa;
    background-color: #aaaaaa;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 0px;
    height: 3px;
  }

  #file-input,
  input {
    width: 100%;
    height: 44px;
    border-radius: 4px;
    margin: 10px auto;
    font-size: 15px;
  }

  input {
    background: #f1f1f1;
    border: 0;
    padding: 0 15px;
  }

  body {
    background-image: url("https://fs.siwatsystem.com/arona_bg.png");
    background-size: cover;
    font-family: sans-serif;
    font-size: 14px;
    color: #777;
  }

  #file-input {
    background-color: #CCCCCC;
    color: #5E5E5E;
    padding: 0;
    border: 1px solid #ddd;
    line-height: 44px;
    text-align: center;
    display: block;
    cursor: pointer;
  }

  #bar,
  #prgbar {
    background-color: #D9D9D9;
    border-radius: 10px;
  }

  #bar {
    background-color: #29CD1F;
    width: 0%;
    height: 10px;
  }

  form {
    background: rgba(255, 255, 255, 0.95);
    max-width: 258px;
    margin: 75px auto;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
  }

  .btn {
    background: #CA3D3D;
    color: #fff;
    cursor: pointer;
  }

  .conf {
    background: #417df3;
    color: #fff;
    cursor: pointer;
    width: 100%;
    height: 44px;
    border-radius: 4px;
    margin: 10px auto;
    font-size: 15px;
    border: 0;
  }
  .conf_txt {
    background-color: #e2e2e2;
  }

  .checkbox {
    size: 4;
    display: inline-block;
  }
  .container {
  display: block;
  position: relative;
  padding-left: 0px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
}

.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>