187 lines
5.3 KiB
HTML
187 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
|
|
section {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.switch label input[type=checkbox]:checked+.lever {
|
|
background-color: #fa3 !important;
|
|
}
|
|
|
|
.switch label input[type=checkbox]:checked+.lever:after {
|
|
background-color: #f93 !important;
|
|
}
|
|
</style>
|
|
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="rsrc/materialize.css"/>
|
|
<link rel="shortcut icon" href="rsrc/favicon.ico" type="image/x-icon"/>
|
|
<script src="rsrc/materialize.js"></script>
|
|
<title>ESP8266 DASHBOARD</title>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<div class="nav-wrapper green accent-3">
|
|
<a href="#" class="brand-logo hoverable left" style="padding: 0 10px 0 10px;"> logo</a>
|
|
<ul class="right" style="font-size:1.5em;">
|
|
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
|
12:54:21
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
|
17.25 °C
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
|
90 %
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
|
<img style="width:50px;vertical-align:middle;" id="imgSig1" src="rsrc/sigstr4.png" alt="sigstr4">
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
|
-66 dBm
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
|
112 ms
|
|
</li>
|
|
<li class="hoverable" style="margin:0 10px; 0 10px;">
|
|
<img style="width:50px;vertical-align:middle;" id="imgDisco" src="rsrc/disco.png" alt="disconnected">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<ul id="slide-out" class="sidenav teal darken-3">
|
|
<li><h2 class="white-text center-align">Settings</h2></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
|
|
<div class="fixed-action-btn">
|
|
<a style="font-size:2.5em;" data-target="slide-out" class="btn-floating btn-large red sidenav-trigger">
|
|
⚙
|
|
</a>
|
|
</div>
|
|
|
|
</header>
|
|
<section>
|
|
<div class="row">
|
|
<div class="col m6">
|
|
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
|
<h4 class="center-align">Connectivity</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col m6">
|
|
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
|
|
<h4 class="center-align">System Info</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col m3">
|
|
<div class="card teal darken-1">
|
|
<div class="card-content white-text">
|
|
<span class="card-title center-align" style="font-weight:bold;">Access Point Mode</span>
|
|
</div>
|
|
<div class="card-action center-align">
|
|
<div class="switch">
|
|
<label class="white-text">
|
|
Disabled
|
|
<input type="checkbox">
|
|
<span class="lever"></span>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
<input placeholder="SSID" id="ssid" type="text" class="validate white-text">
|
|
<input placeholder="PWD" id="pwd" type="password" class="validate white-text">
|
|
</div>
|
|
<div class="card-action">
|
|
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
|
Apply ✔
|
|
</button>
|
|
<button class="btn waves-effect waves-light red darken-3" style="float:right;" type="submit" name="cancel">
|
|
Cancel ✘
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col m3">
|
|
<div class="card teal darken-1">
|
|
<div class="card-content white-text">
|
|
<span class="card-title center-align" style="font-weight:bold;">Station Mode</span>
|
|
</div>
|
|
<div class="card-action center-align">
|
|
<div class="switch">
|
|
<label class="white-text">
|
|
Disabled
|
|
<input type="checkbox">
|
|
<span class="lever"></span>
|
|
Enabled
|
|
</label>
|
|
</div>
|
|
<select>
|
|
<option value="" disabled selected>Select a network</option>
|
|
<option value="1">Network 1</option>
|
|
<option value="2">Network 2</option>
|
|
<option value="3">Network 3</option>
|
|
</select>
|
|
<input placeholder="PWD" id="pwd" type="password" class="validate white-text">
|
|
</div>
|
|
<div class="card-action">
|
|
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
|
Apply ✔
|
|
</button>
|
|
<button class="btn waves-effect waves-light red darken-3" style="float:right;" type="submit" name="cancel">
|
|
Cancel ✘
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col m6">
|
|
<div class="card teal darken-1">
|
|
<div class="card-content white-text">
|
|
<span class="card-title center-align" style="font-weight:bold;">System State</span>
|
|
</div>
|
|
<div class="card-action center-align">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<footer class="page-footer blue-grey darken-4">
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function()
|
|
{
|
|
var elems = document.querySelectorAll('.sidenav');
|
|
var instances = M.Sidenav.init(elems);
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function()
|
|
{
|
|
var elems = document.querySelectorAll('.tooltipped');
|
|
var instances = M.Tooltip.init(elems);
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function()
|
|
{
|
|
var elems = document.querySelectorAll('select');
|
|
var instances = M.FormSelect.init(elems);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |