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> <head>
<title>ESP8266 Treppenlicht</title> <title>ESP8266 Treppenlicht</title>
<!-- main style sheet --> <!-- 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"> <link href="/style.css" rel="stylesheet" type="text/css">
</head> </head>
neue wichtige Änderung, 2te Änderung
<body> <body>
<div class="topbar"> <div class="kopfzeile"
ESP8266 Treppenlicht Controller style="text-align: center;">
</div> <b>Treppenlicht</b>
<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> </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> </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 { html {
font-size: 10px; font-size: 16px;
font-family: sans-serif, Arial, Helvetica; font-family: sans-serif, Arial, Helvetica;
background-color: #b3b3b3; background-color: #d4d4d4;
} }
.topbar { .topbar {
@ -17,6 +17,45 @@ html {
padding: 1em; 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 { p, li {
font-size: 16px; font-size: 16px;
line-height: 2; line-height: 2;
@ -26,7 +65,7 @@ p, li {
body { body {
margin: 0 auto; margin: 0 auto;
border: 1px solid black; border: none;
border-radius: 3; border-radius: 3;
} }
@ -49,18 +88,10 @@ body {
/* The slider */ /* The slider */
.slider { .slider {
position: absolute; width: 100%;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
} }
.slider:before { /*.slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 26px; height: 26px;
@ -70,7 +101,7 @@ body {
background-color: white; background-color: white;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }*/
input:checked + .slider { input:checked + .slider {
background-color: #04AA6D; background-color: #04AA6D;
@ -94,8 +125,6 @@ input:checked + .slider:before {
} }
/* The slider itself */ /* The slider itself */
.rangeslider { .rangeslider {
-webkit-appearance: none; /* Override default CSS styles */ -webkit-appearance: none; /* Override default CSS styles */