PlantCtrl/rust/src_webpack/src/main.html

<link rel="stylesheet" href="bootstrap-grid.css">
<style>
  .progressPane {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    background-color: lightgrey;
    opacity: 0.8;
  }

  .progressPaneCenter {
    display: inline-block;
    margin-top: 48%;
    position: absolute;
    height: 4%;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
  }

  .progress {
    height: 1.5em;
    width: 100%;
    background-color: #c9c9c9;
    position: relative;
  }

  .progress:after {
    content: attr(data-label);
    font-size: 0.8em;
    position: absolute;
    text-align: center;
    top: 5px;
    left: 0;
    right: 0;
  }

  .progress .value {
    background-color: #7cc4ff;
    display: inline-block;
    height: 100%;
  }

  .progress .valueIndeterminate {
    background-color: #7cc4ff;
    display: inline-block;
    height: 100%;
    animation: indeterminateAnimation 1s infinite linear;
    transform-origin: 0% 50%;
  }


  @keyframes indeterminateAnimation {
    0% {
      transform: translateX(0%) scaleX(0.5);
    }

    50% {
      transform: translateX(50%) scaleX(0.5);
    }

    100% {
      transform: translateX(0%) scaleX(0.5);
    }
  }
</style>




<div class="container-xl">
  <div class="row">
    <div id="firmwareview" class="container col-12 col-lg-4"
      style="border-width: 1px; border-style: solid; padding: 8px;">
    </div>
    <div id="timeview" class="container col-12 col-lg-4" style="border-style: solid; border-width: 1px; padding: 8px;">
    </div>
    <div id="batteryview" class="container col-12 col-lg-4"
      style="border-style: solid; border-width: 1px; padding: 8px;">
    </div>
  </div>

  <div class="row">
    <div id="network_view" class="container col-12 col-sm-6 col-lg-4"
      style="border-style: solid; border-width: 1px; padding: 8px;">
    </div>
    <div id="lightview" class="container col-12 col-sm-6 col-lg-4"
      style="border-style: solid; border-width: 1px; padding: 16px;">
    </div>
    <div id="tankview" class="container col-12 col-lg-4" style="border-style: solid; border-width: 1px; padding: 16px;">
    </div>
  </div>







  <h2>config</h2>
  <h3>Plants:</h3>
  <button id="measure_moisture">Measure Moisture</button>
  <div id="plants" class="row"></div>





  <button id="submit">Submit</button>
  <div id="submit_status"></div>
  <br>
  <textarea id="json" cols=50 rows=10></textarea>
  <script src="bundle.js"></script>

  <button id="exit">Exit</button>
  <button id="reboot">Reboot</button>
</div>

<div id="progressPane" class="progressPane">
  <div class="progressPaneCenter">
    <div id="progressPaneBar" class="progress" data-label="50% Complete">
      <span id="progressPaneSpan" class="value" style="width:100%;"></span>
    </div>
  </div>
</div>