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

Added web app

Browse Source
This commit is contained in:
anschrammh 2019-04-15 08:01:26 +02:00
parent 5d95fd223b
commit 8298e7018f
2 changed files with 104 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
sdCard_content/WWW/index.web → sdCard_content/WWW/index.html
View File

@ -10,21 +10,47 @@
<h1 class ="title">ESP8266 Embedded system Dashboard</h1>
</header>
<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>
<section>
<div class="subSection">
<table>
<tr>
<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 class="subSection">
<h2 class="categorie">SdCard</h2>
<p>SDCard size :</p>
<p>Unmount SDCard : <button>DO IT !</button></p>
<p>Mount SDCard : <button>DO IT !</button></p>
</div>
<div class="subSection">
<h2 class="categorie">Real Time Clock</h2>
<p>Get RTC value : <button>DO IT !</button></p>
<p>RTC value : </p>
<p>
Set RTC value : <br />
<br />

74
sdCard_content/WWW/rsrc/style.css
View File

@ -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;
}