303 lines
7.3 KiB
HTML
303 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>System Summary</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link href="/css/nav.css" rel="stylesheet">
|
|
<style>
|
|
h1{
|
|
text-align: center;
|
|
margin: 0;
|
|
margin-bottom: 0;
|
|
font-size: larger;
|
|
}
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #f0f0f0;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
min-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
.outer-container {
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4 20px 4 20px
|
|
}
|
|
.container {
|
|
border: 1px solid #ccc;
|
|
padding: 5px 20px 10px 20px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
|
width:90%;
|
|
margin-bottom: 20px;
|
|
}
|
|
.center-text {
|
|
text-align: center;
|
|
font-size: medium;
|
|
font-weight: bold;
|
|
margin-bottom: 10;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: flex-end;
|
|
}
|
|
.row > * {
|
|
flex: 1;
|
|
width: 0 1 calc(52% - 20px);
|
|
margin-bottom: 8px;
|
|
}
|
|
.row > *:last-child {
|
|
flex: 0 1 calc(48% - 10px); /* 40% width with 10px gap */
|
|
}
|
|
input[type="number"], select {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
width: 50%;
|
|
}
|
|
button {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
margin-top: auto;
|
|
}
|
|
.lbldata{
|
|
font-style:italic;
|
|
font-weight: bold;
|
|
color: purple;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="navbar"></div>
|
|
<h1 name="h1element">System Summary</h1>
|
|
<div class="outer-container">
|
|
|
|
<div class="container">
|
|
<legend class="center-text">Booth Overview</legend>
|
|
<div class="row">
|
|
<div>
|
|
<label>App:</label>
|
|
<label class="lbldata">{{APP_NAME}}</label>
|
|
</div>
|
|
<div>
|
|
<label>OLED:</label>
|
|
<label class="lbldata">{{OLED}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>RGB Ch1:</label>
|
|
<label class="lbldata">{{STRIP1}}</label>
|
|
</div>
|
|
<div>
|
|
<label>RGB Ch2:</label>
|
|
<label class="lbldata">{{STRIP2}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Front Light:</label>
|
|
<label class="lbldata">{{FRONT_LIGHT}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Rear Light:</label>
|
|
<label class="lbldata">{{REAR_LIGHT}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<legend class="center-text">System Information</legend>
|
|
<div class="row">
|
|
<div>
|
|
<label>Firmware Ver:</label>
|
|
<label class="lbldata">{{FIRMWARE}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Booth T°:</label>
|
|
<label class="lbldata">{{BOOTH_T}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Setpoint:</label>
|
|
<label class="lbldata">{{SETPOINT}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Flash Size:</label>
|
|
<label class="lbldata">{{FLASH_SIZE}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Flash Free:</label>
|
|
<label class="lbldata">{{FLASH_FREE}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Heap Size:</label>
|
|
<label class="lbldata">{{HEAP_SIZE}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Heap Free:</label>
|
|
<label class="lbldata">{{HEAP_FREE}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
|
|
</div>
|
|
<div>
|
|
<label>CPU Freq:</label>
|
|
<label class="lbldata">{{CPU_FREQ}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
<legend class="center-text">Network / WiFi</legend>
|
|
<div class="row">
|
|
<div>
|
|
<label>IP:</label>
|
|
<label class="lbldata">{{IP}}</label>
|
|
</div>
|
|
<div>
|
|
<label>MAC:</label>
|
|
<label class="lbldata">{{MAC}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>SSID:</label>
|
|
<label class="lbldata">{{SSID}}</label>
|
|
</div>
|
|
<div>
|
|
<label>RSSi:</label>
|
|
<label class="lbldata">{{RSSI}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Ch:</label>
|
|
<label class="lbldata">{{WIFI_CH}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Encryp:</label>
|
|
<label class="lbldata">{{ENCRYP}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>AP SSID:</label>
|
|
<label class="lbldata">{{AP_SSID}}</label>
|
|
</div>
|
|
<div>
|
|
<label>AP Clients:</label>
|
|
<label class="lbldata">{{AP_CLIENTS}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>AP MAC:</label>
|
|
<label class="lbldata">{{AP_MAC}}</label>
|
|
</div>
|
|
<div>
|
|
<label>---</label>
|
|
<label class="lbldata"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<legend class="center-text">Bluetoth LE</legend>
|
|
<div class="row">
|
|
<div>
|
|
<label>Active:</label>
|
|
<label class="lbldata">{{BLE}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>SSID:</label>
|
|
<label class="lbldata">{{BLE_SSID}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Clients:</label>
|
|
<label class="lbldata">{{BLE_CLIENTS}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<legend class="center-text">Luma Stiks</legend>
|
|
<div class="row">
|
|
<div>
|
|
<label>Stik1:</label>
|
|
<label class="lbldata">{{STIK1}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Stik2:</label>
|
|
<label class="lbldata">{{STIK2}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Stik3:</label>
|
|
<label class="lbldata">{{STIK3}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Stik4:</label>
|
|
<label class="lbldata">{{STIK4}}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div>
|
|
<label>Stik5:</label>
|
|
<label class="lbldata">{{STIK5}}</label>
|
|
</div>
|
|
<div>
|
|
<label>Stik6:</label>
|
|
<label class="lbldata">{{STIK6}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
fetch('/www/navbar.html')
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
document.getElementById('navbar').innerHTML = data;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |