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

puu

Browse Source
This commit is contained in:
Pupsmuckel 2021-07-07 16:58:27 +02:00
parent 37380cbebc
commit a5ac7d358b
3 changed files with 86 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
data/index.html
View File

@ -12,63 +12,83 @@
<div class="kopfzeile" style="text-align: center;"> <div class="kopfzeile" style="text-align: center;">
<b>Treppenlicht</b> <b>Treppenlicht</b>
</div> </div>
<!--
<div class="ueberschrift"> <div class="ueberschrift">
Helligkeit Helligkeit
<!--<label id="label_pwm"> label id="label_pwm">
</label>--> </label>
<div class="slider"> <div class="slider">
<input type="range" class="regler" id="helligkeit" name="rangeInput" min="0" max="100" value="50" <input type="range" class="regler" id="helligkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount1.value=helligkeit.value"> oninput="amount1.value=helligkeit.value">
<br> <br>
<output name="amount1" id="amount1" for="helligkeit">50</output> <output name="amount1" id="amount1" for="helligkeit">50</output>
</div> </div>
</div> </div>-->
<div class="ueberschrift"> <form class="ueberschrift">
Helligkeit bei Dunkelheit <div class="BridhgtnessInputGroup">
<!--<label id="label_pwm_dark"> <label for="brightness"> Helligkeitswert in %:</label>
</label>--> <input id="brightness" type="number" name="brightness" step="1" min="0" max="100" placeholder="zB. 50" required>
<div class="slider"> <span class="validity"></span>
<input type="range" class="regler" id="helligkeit_dunkel" name="rangeInput" min="0" max="100" value="50" <button type="button" onclick="getInputValue()">Speichern</button>
oninput="amount2.value=helligkeit_dunkel.value">
<br> <script>
<output name="amount2" id="amount2" for="helligkeit_dunkel">50</output> function getInputValue(){
</div> var helligkeit= document.getElementById("brightness").value;
</div> if (helligkeit > 100 | helligkeit < 0)
alert("Helligkeit darf nicht groesser 100 oder kleiner 0 sein")
else alert(helligkeit);
}
</script>
</div>
</form>
<div class="ueberschrift">
Laufgeschwindigkeit
<!--<label id="label_geschwindigkeit">
</label>-->
<div class="slider">
<input type="range" class="regler" id="geschwindigkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount3.value=geschwindigkeit.value">
<br>
<output name="amount3" id="amount3" for="geschwindigkeit">50</output>
</div>
</div>
<div class="ueberschrift"> <!--
Licht-An-Zeit < div class="ueberschrift" >
<!-- <label id="label_time"> Helligkeit bei Dunkelheit
</label>--> < !--< label id = "label_pwm_dark" >
</label >
<div class="slider"> <div class="slider">
<input type="range" class="regler" id="time" name="rangeInput" min="0" max="100" value="50" <input type="range" class="regler" id="helligkeit_dunkel" name="rangeInput" min="0" max="100" value="50"
oninput="amount4.value=time.value"> oninput="amount2.value=helligkeit_dunkel.value">
<br> <br>
<output name="amount4" id="amount4" for="time">50</output> <output name="amount2" id="amount2" for="helligkeit_dunkel">50</output>
</div> </div>
</div> </div>
<div class="terminal"> <div class="ueberschrift">
<input type="button" id="clear_term" value="clear" onclick="clearTerminal();"> Laufgeschwindigkeit
<input type="checkbox" id="scroll" name="scroll" value="scroll" checked> <!--<label id="label_geschwindigkeit">
<label for="scroll"> autoscroll </label> </label>
<textarea id="term">waiting for log messages ...&#10;</textarea> <div class="slider">
<input type="range" class="regler" id="geschwindigkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount3.value=geschwindigkeit.value">
<br>
<output name="amount3" id="amount3" for="geschwindigkeit">50</output>
</div>
</div>
<div class="ueberschrift">
Licht-An-Zeit
<!-- <label id="label_time">
</label>
<div class="slider">
<input type="range" class="regler" id="time" name="rangeInput" min="0" max="100" value="50"
oninput="amount4.value=time.value">
<br>
<output name="amount4" id="amount4" for="time">50</output>
</div>
</div>-->
<div class="terminal">
<input type="button" id="clear_term" value="clear" onclick="clearTerminal();">
<input type="checkbox" id="scroll" name="scroll" value="scroll" checked>
<label for="scroll"> autoscroll </label>
<textarea id="term">waiting for log messages ...&#10;</textarea>
</div> </div>
</body> </body>
<script src="/input.js"></script> <script src="/input.js"></script>
</html> </html>

2
data/input.js
View File

@ -37,4 +37,4 @@ reloadTerminal();
function clearTerminal() { function clearTerminal() {
document.getElementById("term").innerHTML = ''; document.getElementById("term").innerHTML = '';
} }

57
data/style.css
View File

@ -31,7 +31,6 @@ body {
} }
.regler{ .regler{
-webkit-appearance: none; -webkit-appearance: none;
height: 30px; height: 30px;
width: 100%; width: 100%;
@ -66,43 +65,6 @@ input[type=range]::-webkit-slider-thumb{
background-color: #8d8a8a; background-color: #8d8a8a;
} }
/*-------------------------------------------------------*/
/*Switch:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
Hide default HTML checkbox
.switch input {
opacity: 0;
width: 0;
height: 0;
}
*/
/* The slider */
/*input:checked + .slider {
background-color: #04AA6D;
}
input:focus + .slider {
box-shadow: 0 0 1px #04AA6D;
}*/
/*
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
*/
.terminal { .terminal {
margin:5%; margin:5%;
padding: 1%; padding: 1%;
@ -119,4 +81,21 @@ input:checked + .slider:before {
#clear_term { #clear_term {
margin: 2px; margin: 2px;
} }
input[type="number"] {
width: 100px;
}
input:invalid+span:after {
content: '✖';
padding-left: 5px;
}
input:valid+span:after {
content: '✓';
padding-left: 5px;
}