186 lines
3.4 KiB
HTML
186 lines
3.4 KiB
HTML
<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: 1.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: 5px;
|
|
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="firmwareview" class="subcontainer">
|
|
</div>
|
|
<div id="timeview" class="subcontainer">
|
|
</div>
|
|
<div id="batteryview" 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>
|
|
<div id="plants" class="plantlist"></div>
|
|
|
|
<div class="flexcontainer-rev">
|
|
<div>
|
|
<textarea id="json" cols=50 rows=10></textarea>
|
|
<button id="submit">Submit</button>
|
|
<div id="submit_status"></div>
|
|
</div>
|
|
<div id="fileview" class="subcontainer">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<button id="exit">Exit</button>
|
|
<button id="reboot">Reboot</button>
|
|
|
|
<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> |