cleanups

Software/MainBoard/rust/src_webpack/src/main.html

@@ -0,0 +1,194 @@
+<style>
+  .progressPane {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    left: 0;
+    background-color: grey;
+    opacity: 0.8;
+  }
+
+  .progress {
+    height: 2.5em;
+    width: 100%;
+    background-color: #555;
+    position: relative;
+  }
+
+  .progressSpacer{
+    flex-grow: 1;
+  }
+
+  .progress:after {
+    content: attr(data-label);
+    font-size: 0.8em;
+    position: absolute;
+    text-align: center;
+    top: 10px;
+    left: 0;
+    right: 0;
+  }
+
+  .progress .value {
+    background-color: darkcyan;
+    display: inline-block;
+    height: 100%;
+  }
+
+  .progress .valueIndeterminate {
+    background-color: darkcyan;
+    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);
+    }
+  }
+
+
+  .flexcontainer {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .flexcontainer-rev{
+    display: flex;
+    flex-wrap: wrap-reverse;
+  }
+  .subcontainer {
+    min-width: 300px;
+    max-width: 900px;
+    flex-grow: 1;
+    border-style: solid;
+    border-width: 1px;
+    padding: 8px;
+  }
+  .subcontainercontainer{
+    flex-grow: 1;
+  }
+
+  .plantcontainer {
+      flex-grow: 1;
+      min-width: 100%;
+      border-style: solid;
+      border-width: 1px;
+      padding: 8px;
+    }
+  @media (min-width: 350px) {
+    .plantcontainer {
+      flex-grow: 1;
+      min-width: 40%;
+      border-style: solid;
+      border-width: 1px;
+      padding: 8px;
+    }
+  }
+  @media (min-width: 1100px) {
+    .plantcontainer {
+      flex-grow: 1;
+      min-width: 20%;
+      border-style: solid;
+      border-width: 1px;
+      padding: 8px;
+    }
+  }
+  @media (min-width: 2150px) {
+    .plantcontainer {
+      flex-grow: 1;
+      min-width: 200px;
+      border-style: solid;
+      border-width: 1px;
+      padding: 8px;
+    }
+  }
+
+
+
+  .plantlist {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .subtitle {
+    flex-grow: 1;
+    text-align: center;
+    font-weight: bold;
+  }
+
+
+
+</style>
+
+
+<div class="container-xl">
+  <div style="display:flex; flex-wrap: wrap;">
+    <div id="hardwareview" class="subcontainer"></div>
+  </div>
+
+  <div style="display:flex; flex-wrap: wrap;">
+    <div id="firmwareview" class="subcontainer">
+    </div>
+    <div id="timeview" class="subcontainer">
+    </div>
+    <div id="batteryview" class="subcontainer">
+    </div>
+    <div id="solarview" class="subcontainer">
+    </div>
+  </div>
+
+  <div class="flexcontainer">
+    <div id="network_view" class="subcontainercontainer"></div>
+    <div id="lightview" class="subcontainer">
+    </div>
+    <div id="tankview" class="subcontainer">
+    </div>
+  </div>
+
+  <h3>Plants:</h3>
+  <button id="measure_moisture">Measure Moisture</button>
+  <button id="detect_sensors" style="display:none">Detect/Test Sensors</button>
+  <div id="plants" class="plantlist"></div>
+
+  <div class="flexcontainer-rev">
+    <div id = "submitview" class="subcontainer">
+    </div>
+    <div id="fileview" class="subcontainer">
+    </div>
+  </div>
+
+
+
+  <button id="exit">Exit</button>
+  <button id="reboot">Reboot</button>
+
+  <div class="flexcontainer">
+    <div id="logview" class="subcontainercontainer"></div>
+  </div>
+
+  <script src="bundle.js"></script>
+</div>
+
+<div id="progressPane" class="progressPane">
+  <div class="progressSpacer"></div>>
+  <div id="progressPaneBar" class="progress" data-label="50% Complete">
+    <span id="progressPaneSpan" class="value" style="width:100%;"></span>
+  </div>
+  <div class="progressSpacer"></div>>
+</div>