Pupsmuckel
3 years ago
3 changed files with 64 additions and 38 deletions
+ 19
- 22
include/http/index.html
View File
| <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> | ||||
| <body> | <body> | ||||
| <div class="topbar"> | |||||
| ESP8266 Treppenlicht Controller | |||||
| <div class="kopfzeile" | |||||
| style="text-align: center;"> | |||||
| <b>Treppenlicht</b> | |||||
| </div> | </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> | </label> | ||||
| <input type="range" class="testregler" min="0" max="100"> | |||||
| </div> | </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> | ||||
| </div> | </div> | ||||
| </body> | |||||
| </body> | |||||
| <script src="/input.js"></script> | <script src="/input.js"></script> | ||||
BIN
include/http/light.png
View File
+ 45
- 16
include/http/style.css
View File
| 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 { | ||||
| 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; | ||||
| body { | body { | ||||
| margin: 0 auto; | margin: 0 auto; | ||||
| border: 1px solid black; | |||||
| border: none; | |||||
| border-radius: 3; | border-radius: 3; | ||||
| } | } | ||||
| /* The slider */ | /* The slider */ | ||||
| .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; | position: absolute; | ||||
| content: ""; | content: ""; | ||||
| height: 26px; | height: 26px; | ||||
| 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; | ||||
| } | } | ||||
| /* The slider itself */ | /* The slider itself */ | ||||
| .rangeslider { | .rangeslider { | ||||
| -webkit-appearance: none; /* Override default CSS styles */ | -webkit-appearance: none; /* Override default CSS styles */ |
Loading…