From 7976f5258f3410d0da0fa810a117f8439f20812f Mon Sep 17 00:00:00 2001
From: Pupsmuckel <jacob.reppnack@freenet.de>
Date: Thu, 24 Jun 2021 13:41:20 +0200
Subject: [PATCH] =?UTF-8?q?html=20=C3=84nderung?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/index.html | 57 ++++++++++++++++++++++++++-----------------------
 data/style.css  |  4 +++-
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/data/index.html b/data/index.html
index 1c4b22e..3136746 100644
--- a/data/index.html
+++ b/data/index.html
@@ -15,47 +15,50 @@
 
   <div class="ueberschrift">
     Helligkeit
-      <!--<label id="label_pwm">
+    <!--<label id="label_pwm">
       </label>-->
       <div class="slider">
-        <input type="range" class="regler" value="50" min="1" max="100"
-          oninput="this.nextElementSibling.value = this.value">
-
-        <output>50</output>
+        <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>
   <div class="ueberschrift">
     Helligkeit bei Dunkelheit
-      <!--<label id="label_pwm_dark">
+    <!--<label id="label_pwm_dark">
       </label>-->
       <div class="slider">
-      <input type="range" class="regler" value="50" min="1" max="100"
-        oninput="this.nextElementSibling.value = this.value">
-      <output>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="ueberschrift">
-      Laufgeschwindigkeit
-        <!--<label id="label_geschwindigkeit">
+  <div class="ueberschrift">
+    Laufgeschwindigkeit
+    <!--<label id="label_geschwindigkeit">
       </label>-->
-        <div class="slider">
-          <input type="range" class="regler" value="50" min="1" max="100"
-            oninput="this.nextElementSibling.value = this.value">
-          <output>50</output>
-        </div>
-    </div>
+          <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">
+  <div class="ueberschrift">
+    Licht-An-Zeit
+    <!--  <label id="label_time">
         </label>-->
         <div class="slider">
-          <input type="range" class="regler" value="50" min="1" max="100"
-            oninput="this.nextElementSibling.value = this.value">
-          <output>50</output>
+          <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>
 
 
 </body>
diff --git a/data/style.css b/data/style.css
index 7a1b3f6..7701927 100644
--- a/data/style.css
+++ b/data/style.css
@@ -24,9 +24,11 @@ html {
 }
 
 .regler{
+  position: fixed;
+  left: 0;
   -webkit-appearance: none;
   height: 30px;
-  width: 98%;
+  width: 100%;
   border-radius: 20px;
   outline: black;
   background-color: rgb(176, 188, 228);