3 changed files with 38 additions and 64 deletions
--- a/include/http/index.html
+++ b/include/http/index.html
@ -3,32 +3,35 @@
  <head>
    <title>ESP8266 Treppenlicht</title>
    <!-- main style sheet -->
-    <link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
+    <link href="/favicon.png" rel="icon" type="image/png" sizes="16x16">
    <link href="/style.css" rel="stylesheet" type="text/css">
+
  </head>
  <body>
-    <div class="kopfzeile"
-          style="text-align: center;">
-          <b>Treppenlicht</b>
+    <div class="topbar">
+      ESP8266 Treppenlicht Controller
+    </div>
+    <div class="control">
+      <div class="brightness">
+      </div>
+      <div class="onoff">
+        toggle all
+        <label id="l_onoff"></label>
+        <label class="switch">
+          <input type="checkbox">
+          <span class="slider round"></span>
+        </label>
+      </div>
+      <div class="pwm">
+        <label id="label_pwm"></label>
+        <input type="range" min="1" max="100" value="50" class="rangeslider" id="range1">
+      </div>
+      <div class="timer">
+        <label id="label_timer"></label>
+        <input type="range" min="1" max="100" value="50" class="rangeslider" id="timer_range">
+      </div>
    </div>
    
-    <div class="ueberschrift">
-    <center>Helligkeit</center>
-      <div class="slider">
-        <label id="label_pwm">
-        </label>
-        <input type="range" class="testregler" min="0" max="100">
-      </div>
-    </div>
-<br>
-    <div class="ueberschrift">
-    <center>Laufgeschwindigkeit</center>
-      <div class="slider">
-        <label id="label_geschwindigkeit">
-        </label>
-        <input type="range" class="testregler" min="0" max="100">
-      </div>
-    </div>
   
  </body>

--- a/include/http/light.png
+++ b/include/http/light.png
--- a/include/http/style.css
+++ b/include/http/style.css
@ -1,7 +1,7 @@
 html {
-  font-size: 16px;
+  font-size: 10px;
  font-family: sans-serif, Arial, Helvetica;
-  background-color: #d4d4d4;
+  background-color: #b3b3b3;
 }

 .topbar {
@ -17,45 +17,6 @@ html {
  padding: 1em;
 }

-.ueberschrift{
-  color: #ffffff;
-  font-size: 50px;
-  width: 40%;
-  background-color: #5f5f5f;
-}
-
-.testregler{
-  -webkit-appearance: none;
-  height: 20px;
-  width: 98%;
-  border-radius: 20px;
-  outline: black;
-  background-color: rgb(176, 188, 228);
-}
-.testregler::-webkit-slider-thumb{
-  -webkit-appearance: none;
-  appearance: none;
-  width: 5%;
-  height: 20px;
-  border-radius: 10px;
-  background-color: rgb(107, 122, 192);
-  cursor:pointer;
-}
-.st{ 
-  position: relative;
-  left: 1.5em;
-  color: #b91111;
-  font-size: 80px;
-  width: 100%;
-}
-
-.kopfzeile{
-  color: #1f1f1f;
-  font-size: 50px;
-  width: 100%;
-  background-color: #8d8a8a;
-
-}
 p, li {
  font-size: 16px;
  line-height: 2;
@ -65,7 +26,7 @@ p, li {

 body {
  margin: 0 auto;
-  border: none;
+  border: 1px solid black;
  border-radius: 3;
 }

@ -88,10 +49,18 @@ body {

 /* The slider */
 .slider {
-  width: 100%;
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
 }

-/*.slider:before {
+.slider:before {
  position: absolute;
  content: "";
  height: 26px;
@ -101,7 +70,7 @@ body {
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
-}*/
+}

 input:checked + .slider {
  background-color: #04AA6D;
@ -125,6 +94,8 @@ input:checked + .slider:before {
 }


+
+
 /* The slider itself */
 .rangeslider {
  -webkit-appearance: none;  /* Override default CSS styles */