Added web app
This commit is contained in:
parent
5d95fd223b
commit
8298e7018f
@ -10,21 +10,47 @@
|
|||||||
<h1 class ="title">ESP8266 Embedded system Dashboard</h1>
|
<h1 class ="title">ESP8266 Embedded system Dashboard</h1>
|
||||||
</header>
|
</header>
|
||||||
<nav>
|
<nav>
|
||||||
|
<div class="menuContainer">
|
||||||
|
<div class="item">
|
||||||
|
<p><span id="sigStrength"></span> dB</p>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<p><span id="battLevel"></span> %</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<section>
|
<section>
|
||||||
<div class="subSection">
|
<div class="subSection">
|
||||||
<h2 class="categorie">AP Info</h2>
|
<table>
|
||||||
<p>SSID : </p>
|
<tr>
|
||||||
<p>Password : </p>
|
<td>
|
||||||
|
<h2 class="categorie">AP Info</h2>
|
||||||
|
<p>SSID : </p>
|
||||||
|
<p>Password : </p>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<h2 class="categorie">STA Info</h2>
|
||||||
|
<p>Local IP :</p>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<h2 class="categorie">System Info</h2>
|
||||||
|
<p>Free ram :</p>
|
||||||
|
<p>CPU Frequ :</p>
|
||||||
|
<p>Heap frag :</p>
|
||||||
|
<p>Max block :</p>
|
||||||
|
</td>
|
||||||
|
</TR>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="subSection">
|
<div class="subSection">
|
||||||
<h2 class="categorie">SdCard</h2>
|
<h2 class="categorie">SdCard</h2>
|
||||||
|
<p>SDCard size :</p>
|
||||||
<p>Unmount SDCard : <button>DO IT !</button></p>
|
<p>Unmount SDCard : <button>DO IT !</button></p>
|
||||||
<p>Mount SDCard : <button>DO IT !</button></p>
|
<p>Mount SDCard : <button>DO IT !</button></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="subSection">
|
<div class="subSection">
|
||||||
<h2 class="categorie">Real Time Clock</h2>
|
<h2 class="categorie">Real Time Clock</h2>
|
||||||
<p>Get RTC value : <button>DO IT !</button></p>
|
<p>RTC value : </p>
|
||||||
<p>
|
<p>
|
||||||
Set RTC value : <br />
|
Set RTC value : <br />
|
||||||
<br />
|
<br />
|
@ -0,0 +1,74 @@
|
|||||||
|
html, body, header
|
||||||
|
{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
header
|
||||||
|
{
|
||||||
|
height:20vh;
|
||||||
|
background-color:lightgray;
|
||||||
|
text-align:center;
|
||||||
|
|
||||||
|
}
|
||||||
|
header > h1
|
||||||
|
{
|
||||||
|
font-family: Arial;
|
||||||
|
line-height:20vh;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
p
|
||||||
|
{
|
||||||
|
font-family: Arial;
|
||||||
|
}
|
||||||
|
footer
|
||||||
|
{
|
||||||
|
height:5vh;
|
||||||
|
color:white;
|
||||||
|
text-align:center;
|
||||||
|
background-color:rgb(20,20,20);
|
||||||
|
}
|
||||||
|
section
|
||||||
|
{
|
||||||
|
padding : 10px 5vw 10px 5vw;
|
||||||
|
margin:0;
|
||||||
|
background-color:lavender;
|
||||||
|
min-height:70vh;
|
||||||
|
}
|
||||||
|
section h2
|
||||||
|
{
|
||||||
|
font-family: Arial;
|
||||||
|
}
|
||||||
|
footer > p
|
||||||
|
{
|
||||||
|
line-height:5vh;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
table
|
||||||
|
{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
nav
|
||||||
|
{
|
||||||
|
min-height:5vh;
|
||||||
|
background-color:yellowgreen;
|
||||||
|
}
|
||||||
|
input[type='number']
|
||||||
|
{
|
||||||
|
width:40px;
|
||||||
|
}
|
||||||
|
.menuContainer
|
||||||
|
{
|
||||||
|
display:flex;
|
||||||
|
align-items: stretch;
|
||||||
|
flex-direction: row-reverse
|
||||||
|
|
||||||
|
}
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
border:1px black solid;
|
||||||
|
margin:0 10px 0 0;
|
||||||
|
background-color:white;
|
||||||
|
min-width:60px;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user