178 lines
3.7 KiB
HTML
178 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="/chota.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<nav class="nav" style="margin-bottom: 50px;">
|
|
<div class="nav-left">
|
|
<a class="brand" href="#">Watermeter</a>
|
|
<div class="tabs">
|
|
<a class="active" href="/">Status</a>
|
|
<a href="/settings">Settings</a>
|
|
<a href="/export">Data export</a>
|
|
</div>
|
|
</div>
|
|
<div class="nav-right">
|
|
<a class="button outline">Button</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-3-lg">
|
|
<!--Sensor card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>Sensor information</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Voltage: </td>
|
|
<td>12.12V</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Current: </td>
|
|
<td>10 mA</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--ESP Infor card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>ESP information</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Uptime: </td>
|
|
<td>132d</td>
|
|
</tr>
|
|
<tr>
|
|
<td>FW version: </td>
|
|
<td>0.2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Time/Date: </td>
|
|
<td>1.1.202022</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--WIFI card-->
|
|
<div class="card">
|
|
<header>
|
|
<h4>Connection Info</h4>
|
|
</header>
|
|
<table class="tg">
|
|
<thead></thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Type: </td>
|
|
<td>WiFi</td>
|
|
</tr>
|
|
<tr>
|
|
<td>IP: </td>
|
|
<td>127.0.0.1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>RSSI: </td>
|
|
<td>good</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-7-lg">
|
|
|
|
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
|
|
|
|
</div>
|
|
<div class="col-12 col-2-lg">
|
|
|
|
<div class="outer-wrapper">
|
|
<div class="column-wrapper">
|
|
<div class="column"></div>
|
|
</div>
|
|
<div class="percentage">25%</div>
|
|
<div class="value">2500 / 10000</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
<style>
|
|
.outer-wrapper {
|
|
display: inline-block;
|
|
margin: 5px 15px;
|
|
padding: 25px 15px;
|
|
background: #eee;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.column-wrapper {
|
|
height: 400px;
|
|
width: 20px;
|
|
background: #CFD8DC;
|
|
transform: rotate(180deg);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.column {
|
|
width: 20px;
|
|
height: 25%;
|
|
background: #1900ff;
|
|
}
|
|
|
|
.percentage,
|
|
.value {
|
|
margin-top: 10px;
|
|
padding: 5px 10px;
|
|
color: #FFF;
|
|
background: #263238;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.value {
|
|
background: #7986CB;
|
|
}
|
|
|
|
.card {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var xValues = [1,60,70,80,90,100,110,120,130,140,150];
|
|
var yValues = [7,8,8,9,9,9,10,11,14,14,15];
|
|
|
|
new Chart("myChart", {
|
|
type: "line",
|
|
data: {
|
|
labels: xValues,
|
|
datasets: [{
|
|
backgroundColor: "rgba(0,0,0,1.0)",
|
|
borderColor: "rgba(0,0,0,0.1)",
|
|
data: yValues
|
|
}]
|
|
},
|
|
options:{}
|
|
});
|
|
|
|
|
|
</script> |