From 51bdd6210e8f6957ace1859f708152e01ec98dd2 Mon Sep 17 00:00:00 2001
From: Simon Schmidt <schmidtsi76327@th-nuernberg.de>
Date: Wed, 23 Jun 2021 16:30:27 +0200
Subject: [PATCH] changed from include/http to data/ because of littlefs

---
 data/index.html                  |  42 ++++----
 {include/http => data}/light.png | Bin
 data/style.css                   |  64 +++++++++---
 include/http/favicon.png         | Bin 531 -> 0 bytes
 include/http/index.html          |  38 -------
 include/http/input.js            |   8 --
 include/http/style.css           | 164 -------------------------------
 7 files changed, 68 insertions(+), 248 deletions(-)
 rename {include/http => data}/light.png (100%)
 delete mode 100644 include/http/favicon.png
 delete mode 100644 include/http/index.html
 delete mode 100644 include/http/input.js
 delete mode 100644 include/http/style.css
diff --git a/data/index.html b/data/index.html
index 6dbf624..b7b2668 100644
--- a/data/index.html
+++ b/data/index.html
@@ -3,37 +3,35 @@
   <head>
     <title>ESP8266 Treppenlicht</title>
     <!-- main style sheet -->
-    <link href="/favicon.png" rel="icon" type="image/png" sizes="16x16">
+    <link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
     <link href="/style.css" rel="stylesheet" type="text/css">
-
   </head>
+  
   <body>
-    <div class="topbar">
-      ESP8266 Treppenlicht Controller
+    <div class="kopfzeile"
+          style="text-align: center;">
+          <b>Treppenlicht</b>
     </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>
+
+    <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 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>
+<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>
+  </body> 
 
   <script src="/input.js"></script>
 
diff --git a/include/http/light.png b/data/light.png
similarity index 100%
rename from include/http/light.png
rename to data/light.png
diff --git a/data/style.css b/data/style.css
index f4edb62..1396422 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1,7 +1,7 @@
 html {
-  font-size: 10px;
+  font-size: 16px;
   font-family: sans-serif, Arial, Helvetica;
-  background-color: #b3b3b3;
+  background-color: #d4d4d4;
 }
 
 .topbar {
@@ -17,6 +17,48 @@ 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;
+}
+input[type=range]::-webkit-slider-thumb{
+  -webkit-appearance: none;
+  border:none;
+  height: 100px;
+  width: 100px;
+  background:goldenrod;
+  margin-top: -15px;
+  border-radius: o!important;
+
+}
+
+.kopfzeile{
+  color: #1f1f1f;
+  font-size: 50px;
+  width: 100%;
+  background-color: #8d8a8a;
+
+}
 p, li {
   font-size: 16px;
   line-height: 2;
@@ -26,7 +68,7 @@ p, li {
 
 body {
   margin: 0 auto;
-  border: 1px solid black;
+  border: none;
   border-radius: 3;
 }
 
@@ -49,18 +91,10 @@ body {
 
 /* The slider */
 .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
+  width: 100%;
 }
 
-.slider:before {
+/*.slider:before {
   position: absolute;
   content: "";
   height: 26px;
@@ -70,7 +104,7 @@ body {
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
-}
+}*/
 
 input:checked + .slider {
   background-color: #04AA6D;
@@ -94,8 +128,6 @@ input:checked + .slider:before {
 }
 
 
-
-
 /* The slider itself */
 .rangeslider {
   -webkit-appearance: none;  /* Override default CSS styles */
diff --git a/include/http/favicon.png b/include/http/favicon.png
deleted file mode 100644
index d768c7bbed8b06eed40912f5e6aba1e0b1b91572..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 531
zcmV+u0_^>XP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0005nNkl<ZI8TL>
zPiPZC6o<dJ+5E8z)mDlisG+(^1$&7g>OlmL;#DblvtSRR2R&|(q&Ge3LDaJcJ$V(u
zgJ3nqOVp+&Ig}oxAcD1Z+a$X?BfBBhuA6jDGw=O=-^_b6Bg72-b@n8p?*L~21DHqa
z`;srdi^?S$(9O~{lsp2=NKT=+B@_0;f8*N#da+c%kPk8Du1CZNbylomr3cv#Xq2C!
znTjiGE2eoadHYH~Km*M&v<u!ZNbc|I+#g^LgCs#{ie+2zfO@$GOrRBP*1_D{)p@J1
zD+dzvlSRqd$NK@E0MlWz2MOkX&A|yCi)CMr2Q<s$C_V?4P|#TkItQr(J-vhGgyij|
zSU|XOqjVcB_hJE}Z;DlX(DxccK=Vc#HTDe{jhtWw%ReM?*Bb~3A@%ZW;6eb<7_^f|
zaTu8&&0Re$B5EMuqt;2MQh9GCq>xFQcx2dUD}3eG#>a*W*=)8o5b$DQA(i>QKKFZL
zv(WCim}Y`ZI>nx$p<4dn$j*RjwYq!NGruGZ<4CYmtJ9&?YU6A5_R_gi=XWe2Fui;;
zH`QvpvxZ1Ee2AXEwB|T7GnX&EiazuIeq&GYX?b~{>$uZF$I@Q%>Ez_$pHXwL{sY%I
VuMu}alw<$^002ovPDHLkV1j&e^>_dP

diff --git a/include/http/index.html b/include/http/index.html
deleted file mode 100644
index b7b2668..0000000
--- a/include/http/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>ESP8266 Treppenlicht</title>
-    <!-- main style sheet -->
-    <link href="/favicon.png" rel="icon" type="image/png" sizes="10x10">
-    <link href="/style.css" rel="stylesheet" type="text/css">
-  </head>
-  
-  <body>
-    <div class="kopfzeile"
-          style="text-align: center;">
-          <b>Treppenlicht</b>
-    </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> 
-
-  <script src="/input.js"></script>
-
-</html>
diff --git a/include/http/input.js b/include/http/input.js
deleted file mode 100644
index f1ea08e..0000000
--- a/include/http/input.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var slider = document.getElementById("range1");
-var output = document.getElementById("l_pwm");
-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;
-}
\ No newline at end of file
diff --git a/include/http/style.css b/include/http/style.css
deleted file mode 100644
index 1396422..0000000
--- a/include/http/style.css
+++ /dev/null
@@ -1,164 +0,0 @@
-html {
-  font-size: 16px;
-  font-family: sans-serif, Arial, Helvetica;
-  background-color: #d4d4d4;
-}
-
-.topbar {
-  padding: 1em;
-  background-color: #1f1f1f;
-
-  color: white;
-  font-size: x-large;
-  text-align: center;
-}
-
-.control {
-  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;
-}
-input[type=range]::-webkit-slider-thumb{
-  -webkit-appearance: none;
-  border:none;
-  height: 100px;
-  width: 100px;
-  background:goldenrod;
-  margin-top: -15px;
-  border-radius: o!important;
-
-}
-
-.kopfzeile{
-  color: #1f1f1f;
-  font-size: 50px;
-  width: 100%;
-  background-color: #8d8a8a;
-
-}
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
-
-
-body {
-  margin: 0 auto;
-  border: none;
-  border-radius: 3;
-}
-
-
-
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  width: 100%;
-}
-
-/*.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}*/
-
-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);
-}
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-.slider.round:before {
-  border-radius: 50%;
-}
-
-
-/* The slider itself */
-.rangeslider {
-  -webkit-appearance: none;  /* Override default CSS styles */
-  appearance: none;
-  width: 50%; /* Full-width */
-  height: 34px; /* Specified height */
-  border-radius: 34px; /* range round corners */
-  background: #d3d3d3; /* Grey background */
-  outline: none; /* Remove outline */
-  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
-  transition: opacity .2s;
-
-}
-/* Mouse-over effects */
-.rangeslider:hover {
-  opacity: 1; /* Fully shown on mouse-over */
-}
-/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
-.rangeslider::-webkit-slider-thumb {
-  -webkit-appearance: none; /* Override default look */
-  appearance: none;
-  width: 26px; /* Set a specific slider handle width */
-  height: 26px; /* Slider handle height */
-  border-radius: 50%; /* Round Element */
-  background: #04AA6D; /* Green background */
-  cursor: pointer; /* Cursor on hover */
-}
-.rangeslider::-moz-range-thumb {
-  width: 26px; /* Set a specific slider handle width */
-  height: 26px; /* Slider handle height */
-  background: #04AA6D; /* Green background */
-  cursor: pointer; /* Cursor on hover */
-}
