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

34
data/index.html
View File

@ -12,22 +12,42 @@
<div class="kopfzeile" style="text-align: center;">
<b>Treppenlicht</b>
</div>
<!--
<div class="ueberschrift">
Helligkeit
<!--<label id="label_pwm">
</label>-->
label id="label_pwm">
</label>
<div class="slider">
<input type="range" class="regler" id="helligkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount1.value=helligkeit.value">
<br>
<output name="amount1" id="amount1" for="helligkeit">50</output>
</div>
</div>-->
<form class="ueberschrift">
<div class="BridhgtnessInputGroup">
<label for="brightness"> Helligkeitswert in %:</label>
<input id="brightness" type="number" name="brightness" step="1" min="0" max="100" placeholder="zB. 50" required>
<span class="validity"></span>
<button type="button" onclick="getInputValue()">Speichern</button>
<script>
function getInputValue(){
var helligkeit= document.getElementById("brightness").value;
if (helligkeit > 100 | helligkeit < 0)
alert("Helligkeit darf nicht groesser 100 oder kleiner 0 sein")
else alert(helligkeit);
}
</script>
</div>
</form>
<!--
< div class="ueberschrift" >
Helligkeit bei Dunkelheit
< !--< label id = "label_pwm_dark" >
</label>-->
</label >
<div class="slider">
<input type="range" class="regler" id="helligkeit_dunkel" name="rangeInput" min="0" max="100" value="50"
oninput="amount2.value=helligkeit_dunkel.value">
@ -39,7 +59,7 @@
<div class="ueberschrift">
Laufgeschwindigkeit
<!--<label id="label_geschwindigkeit">
</label>-->
</label>
<div class="slider">
<input type="range" class="regler" id="geschwindigkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount3.value=geschwindigkeit.value">
@ -51,14 +71,14 @@
<div class="ueberschrift">
Licht-An-Zeit
<!-- <label id="label_time">
</label>-->
</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>-->
<div class="terminal">
<input type="button" id="clear_term" value="clear" onclick="clearTerminal();">

55
data/style.css
View File

@ -31,7 +31,6 @@ body {
}
.regler{
-webkit-appearance: none;
height: 30px;
width: 100%;
@ -66,43 +65,6 @@ input[type=range]::-webkit-slider-thumb{
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 {
margin:5%;
padding: 1%;
@ -120,3 +82,20 @@ input:checked + .slider:before {
#clear_term {
margin: 2px;
}
input[type="number"] {
width: 100px;
}
input:invalid+span:after {
content: '✖';
padding-left: 5px;
}
input:valid+span:after {
content: '✓';
padding-left: 5px;
}