schmidtsi76327/ESP8266_Treppenlicht
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of https://git.efi.th-nuernberg.de/gitea/schmidtsi76327/ESP8266_Treppenlicht

Browse Source
This commit is contained in:
Simon Schmidt 2021-06-23 16:20:45 +02:00
commit 2659e366ec
3 changed files with 65 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
include/http/index.html
View File

@ -3,35 +3,33 @@
<head>
<title>ESP8266 Treppenlicht</title>
<!-- main style sheet -->
<link href="/favicon.png" rel="icon" type="image/png" sizes="16x16">
<link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
<link href="/style.css" rel="stylesheet" type="text/css">
</head>
neue wichtige Änderung, 2te Änderung
<body>
<div class="topbar">
ESP8266 Treppenlicht Controller
</div>
<div class="control">
<div class="brightness">
</div>
<div class="onoff">
toggle all
<label id="l_onoff"></label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="pwm">
<label id="label_pwm"></label>
<input type="range" min="1" max="100" value="50" class="rangeslider" id="range1">
</div>
<div class="timer">
<label id="label_timer"></label>
<input type="range" min="1" max="100" value="50" class="rangeslider" id="timer_range">
</div>
<div class="kopfzeile"
style="text-align: center;">
<b>Treppenlicht</b>
</div>
<div class="ueberschrift">
<center>Helligkeit</center>
<div class="slider">
<label id="label_pwm">
</label>
<input type="range" class="testregler" min="0" max="100">
</div>
</div>
<br>
<div class="ueberschrift">
<center>Laufgeschwindigkeit</center>
<div class="slider">
<label id="label_geschwindigkeit">
</label>
<input type="range" class="testregler" min="0" max="100">
</div>
</div>
</body>

BIN
include/http/light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

61
include/http/style.css
View File

@ -1,7 +1,7 @@
html {
font-size: 10px;
font-size: 16px;
font-family: sans-serif, Arial, Helvetica;
background-color: #b3b3b3;
background-color: #d4d4d4;
}
.topbar {
@ -17,6 +17,45 @@ html {
padding: 1em;
}
.ueberschrift{
color: #ffffff;
font-size: 50px;
width: 40%;
background-color: #5f5f5f;
}
.testregler{
-webkit-appearance: none;
height: 20px;
width: 98%;
border-radius: 20px;
outline: black;
background-color: rgb(176, 188, 228);
}
.testregler::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 5%;
height: 20px;
border-radius: 10px;
background-color: rgb(107, 122, 192);
cursor:pointer;
}
.st{
position: relative;
left: 1.5em;
color: #b91111;
font-size: 80px;
width: 100%;
}
.kopfzeile{
color: #1f1f1f;
font-size: 50px;
width: 100%;
background-color: #8d8a8a;
}
p, li {
font-size: 16px;
line-height: 2;
@ -26,7 +65,7 @@ p, li {
body {
margin: 0 auto;
border: 1px solid black;
border: none;
border-radius: 3;
}
@ -49,18 +88,10 @@ body {
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
width: 100%;
}
.slider:before {
/*.slider:before {
position: absolute;
content: "";
height: 26px;
@ -70,7 +101,7 @@ body {
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
}*/
input:checked + .slider {
background-color: #04AA6D;
@ -94,8 +125,6 @@ input:checked + .slider:before {
}
/* The slider itself */
.rangeslider {
-webkit-appearance: none; /* Override default CSS styles */