Pupsmuckel
3 years ago
3 changed files with 64 additions and 38 deletions
+ 19
- 22
include/http/index.html
View File
| @@ -3,37 +3,34 @@ | |||
| <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> | |||
| <body> | |||
| <div class="topbar"> | |||
| ESP8266 Treppenlicht Controller | |||
| <div class="kopfzeile" | |||
| style="text-align: center;"> | |||
| <b>Treppenlicht</b> | |||
| </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> | |||
| <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 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> | |||
| <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> | |||
| <script src="/input.js"></script> | |||
BIN
include/http/light.png
View File
+ 45
- 16
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 */ | |||
Loading…