schmidtsi76327
/
ESP8266_Treppenlicht
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 12 Wiki Activity
Browse Source

puu

tags/v1.0.0
Pupsmuckel 2 years ago
parent
37380cbebc
commit
a5ac7d358b
3 changed files with 85 additions and 86 deletions
Split View Show Diff Stats
  1. 66
    46
      data/index.html
  2. 1
    1
      data/input.js
  3. 18
    39
      data/style.css

+ 66
- 46
data/index.html View File

@@ -12,63 +12,83 @@
<div class="kopfzeile" style="text-align: center;">
<b>Treppenlicht</b>
</div>
<!--
<div class="ueberschrift">
Helligkeit
<!--<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>
<div class="ueberschrift">
Helligkeit bei Dunkelheit
<!--<label id="label_pwm_dark">
</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">
<br>
<output name="amount2" id="amount2" for="helligkeit_dunkel">50</output>
</div>
</div>
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">
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">

<!--
< div class="ueberschrift" >
Helligkeit bei Dunkelheit
< !--< label id = "label_pwm_dark" >
</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">
<br>
<output name="amount3" id="amount3" for="geschwindigkeit">50</output>
</div>
<output name="amount2" id="amount2" for="helligkeit_dunkel">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 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="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 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>

</body>

<script src="/input.js"></script>
<script src="/input.js"></script>

</html>

+ 1
- 1
data/input.js View File

@@ -37,4 +37,4 @@ reloadTerminal();

function clearTerminal() {
document.getElementById("term").innerHTML = '';
}
}

+ 18
- 39
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%;
@@ -119,4 +81,21 @@ 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;
}


Write Preview
Loading…
Cancel
Save