Th3maz1ng/ESP8266_swiss_army_board
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added the new web interface, no done yet

Browse Source
This commit is contained in:
anschrammh 2020-01-20 08:39:06 +01:00
parent 80ed2f2080
commit 14d141b9d3
3 changed files with 206 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
sdCard_content/WWW/indexV2.htm Normal file
View File

@ -0,0 +1,187 @@
<!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">
&#9881
</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 &#10004;
</button>
<button class="btn waves-effect waves-light red darken-3" style="float:right;" type="submit" name="cancel">
Cancel &#10008;
</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 &#10004;
</button>
<button class="btn waves-effect waves-light red darken-3" style="float:right;" type="submit" name="cancel">
Cancel &#10008;
</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>

13
sdCard_content/WWW/rsrc/materialize.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
sdCard_content/WWW/rsrc/materialize.js vendored Normal file
View File

File diff suppressed because one or more lines are too long