From a5ac7d358b6ad2f1015ac7f2dc615ef6ff17d375 Mon Sep 17 00:00:00 2001
From: Pupsmuckel <jacob.reppnack@freenet.de>
Date: Wed, 7 Jul 2021 16:58:27 +0200
Subject: [PATCH] puu

---
 data/index.html | 114 ++++++++++++++++++++++++++++--------------------
 data/input.js   |   2 +-
 data/style.css  |  57 ++++++++----------------
 3 files changed, 86 insertions(+), 87 deletions(-)

diff --git a/data/index.html b/data/index.html
index 5268123..eeab828 100644
--- a/data/index.html
+++ b/data/index.html
@@ -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">
-            <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="ueberschrift" >
+        Helligkeit bei Dunkelheit
+          < !--< label id = "label_pwm_dark" >
+      </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>
+          <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>
 
-  <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">
+            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
+                <!--  <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>
\ No newline at end of file
diff --git a/data/input.js b/data/input.js
index 89ff368..0ea34c2 100644
--- a/data/input.js
+++ b/data/input.js
@@ -37,4 +37,4 @@ reloadTerminal();
 
 function clearTerminal() {
   document.getElementById("term").innerHTML = '';
-}
\ No newline at end of file
+}
diff --git a/data/style.css b/data/style.css
index 0420d92..b519172 100644
--- a/data/style.css
+++ b/data/style.css
@@ -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;
-}
\ No newline at end of file
+}
+
+
+
+input[type="number"] {
+  width: 100px;
+}
+
+input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}
+