avangorp
/
PowerBox


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!DOCTYPE html>
<html>

<head>
  <title>Powerbox Web Server - Wifi Configuration</title>

  <script src="script.js"></script>

  <link rel="stylesheet" href="style.css">
  <style>
    * {
      box-sizing: border-box;
    }

    input[type=text],
    select,
    textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }

    label {
      padding: 12px 12px 12px 0;
      display: inline-block;
      width: auto
    }

    input[type=submit] {
      background-color: #04AA6D;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: right;
    }

    input[type=submit]:hover {
      background-color: #45a049;
    }

    .container {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 20px;
    }

    .col-10 {
      float: left;
      width: 10%;
      margin-top: 6px;
      text-align: left;
    }

    .col-15 {
      float: left;
      width: 15%;
      margin-top: 6px;
      text-align: left;
    }

    .col-50 {
      float: left;
      width: 50%;
      margin-top: 6px;
    }

    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {

      .col-10,
      .col-50,
      input[type=submit] {
        width: 100%;
        margin-top: 0;
      }
    }
  </style>

</head>

<body onload="initialLoadWifi()">
  <div class="topnav">
    <span>
      <h1>
        Powerbox Web Server<br>
        WiFi Configuration
      </h1>
    </span>
  </div>
  <section class="container" id="content">
    <div class="row"> 
      <div class="col-15"></div>
      <div class="col-10">
        <label for="wifi_ssid">WiFi SSID</label>
      </div>
      <div class="col-50">
        <input type="text" id="wifi_ssid" name="wifiSSID">
      </div>
    </div>
    <div class="row">
      <div class="col-15"></div>
      <div class="col-10">
        <label for="wifi_password">WiFi password</label>
      </div>
      <div class="col-50">
        <input type="text" id="wifi_password" name="wifiPassword">
      </div>
    </div>
    <br>
    <br>
    <div class="row">
      <div class="col-15"></div>
      <div class="col-10">
        <label for="ap_ssid">AP SSID</label>
      </div>
      <div class="col-50">
        <input type="text" id="ap_ssid" name="apSSID">
      </div>
    </div>
    <div class="row">
      <div class="col-15"></div>
      <div class="col-10">
        <label for="ap_password">AP Password</label>
      </div>
      <div class="col-50">
        <input type="text" id="ap_password" name="apPassword"></textarea>
      </div>
    </div>
    <br>
    <div class="row">
      <div class="col-15"></div>
      <div class="col-10">
        <label for="ap_ipaddress">AP IP address</label>
      </div>
      <div class="col-50">
        <input type="text" id="ap_ipaddress" name="apIPAddress"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-15"></div>
      <div class="col-10">
        <label for="ap_gateway">AP Gateway</label>
      </div>
      <div class="col-50">
        <input type="text" id="ap_gateway" name="apGateway"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-15"></div>
      <div class="col-10">
        <label for="ap_subnet">AP Subnet mask</label>
      </div>
      <div class="col-50">
        <input type="text" id="ap_subnet" name="apSubnet"></textarea>
      </div>
    </div>
    <br>
    <br>
    <div class="row">
      <button class="toggle_button" onclick="saveWifiConfig()">
        Save WiFi
      </button>
    </div>
    </div>
  </section>

</body>

</html>