Stärkeregler & Pump-Button bisschen verändert

static/index.js

@@ -23,11 +23,21 @@ btn1.addEventListener('click', function handleClick() {
 });
 
 // PopUp-Fenster
-function myFunction() {
+function showPopUp() {
   var popup = document.getElementById("myPopup");
   popup.classList.toggle("show");
 }
 
+// Wert des RangeSliders anzeigen
+var slider = document.getElementById("myRange");
+var output = document.getElementById("slider_value");
+output.innerHTML = slider.value; // Display the default slider value
+
+// Update the current slider value (each time you drag the slider handle)
+slider.oninput = function() {
+  output.innerHTML = this.value;
+}
+
 //Pop-up Zeitschaltung
 /*
 function myFunction2() {
@@ -55,4 +65,6 @@ toggleSwitch.addEventListener('change', function() {
   } else {
     timeSelector.style.display = 'none';
   }
-});
\ No newline at end of file
+});
+
+/*--------------*/

static/style.css

@@ -151,7 +151,8 @@ table {
   width: 100%;
   height: 15px;
   border-radius: 5px;
-  background: #d3d3d3;
+  /*background: #d3d3d3;*/
+  background: white;
   outline: none;
   opacity: 0.7;
   -webkit-transition: .2s;
@@ -165,9 +166,12 @@ table {
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 25px;
+  /*width: 25px;
   height: 25px;
-  border-radius: 50%;
+  border-radius: 50%;*/
+  width: 12px;
+  height: 40px;
+  border-radius: 8px;
   background: #5570a7;
   cursor: pointer;
 }
@@ -283,4 +287,5 @@ table {
 @keyframes fadeIn {
   from {opacity: 0;}
   to {opacity:1 ;}
-}
\ No newline at end of file
+}
+

templates/index.html

@@ -72,7 +72,7 @@
               </font></td>
               <!--Question mark button-->
               <td>
-                   <div><button class="in-circle popup" onclick="myFunction()" style="margin-right: 10px">
+                   <div><button class="in-circle popup" onclick="showPopUp()" style="margin-right: 10px">
                        <b>
                            ?
                            <span class="popuptext" id="myPopup" style="width: 500px; text-align: justify; padding: 25px; margin-left: -250px;">

templates/steuerung.html

@@ -23,19 +23,27 @@
 
     </br></br></br></br></br></br>
 
-    <h1 style="margin-left: 200px"><font size="6">aktuelle Steuerung:</font></h1>
+    <h1 style="margin-left: 200px"><font size="6">
+        <label>Leuchte:</label>
+        <label style="margin-left: 500px">Pumpe:</label>
+    </font></h1>
     <!--Licht-->
-    <div class="left"><button id="btn1" class="button button1 move-right" style="margin-left: 200px;">Licht an</button></div>
+    <div class="left"><button id="btn1" class="button button1 move-right" style="margin-left: 200px">Licht an</button></div>
 
     <!--Wasser-->
-    <div class="left"><button id="btn2" class="button button2 move-right" style="margin-left: 200px;">Pumpe an</button></div>
+    <div class="left"><button id="btn2" class="button button2 move-right" style="margin-left: 475px">Pumpe an</button></div>
 
     </br></br></br></br>
-    <h1 style="margin-left: 200px"><font size="5">Stärke:</font></h1>
 
     <!--Regler für Stärke-->
+    <h1 style="margin-left: 200px">
+        <font size="5">
+            Stärke:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <span id="slider_value"></span>
+        </font>
+    </h1>
     <div style="margin-left: 200px" class="slidecontainer">
-    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
+        <input type="range" min="1" max="100" value="50" class="slider" name="myRange" id="myRange">
     </div>
 
     <!--Zeitschaltung mit Start- und Endzeit-->