diff --git a/include/http/favicon.png b/include/http/favicon.png new file mode 100644 index 0000000..d768c7b Binary files /dev/null and b/include/http/favicon.png differ diff --git a/include/http/index.html b/include/http/index.html index 39f8553..cd85bc5 100644 --- a/include/http/index.html +++ b/include/http/index.html @@ -1,23 +1,36 @@ - - My test page - - + ESP8266 Treppenlicht + + + + -

Mozilla is cool

-

At Mozilla, we’re a global community of

- - - -

working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.

- -

Read the Mozilla Manifesto to learn even more about the values and principles that guide the pursuit of our mission.

+
+ ESP8266 Treppenlicht Controller +
+
+
+
+
+ toggle all + + +
+
+ + +
+
+ + + + + diff --git a/include/http/input.js b/include/http/input.js new file mode 100644 index 0000000..f1ea08e --- /dev/null +++ b/include/http/input.js @@ -0,0 +1,8 @@ +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 index 10e1cbf..f4edb62 100644 --- a/include/http/style.css +++ b/include/http/style.css @@ -1,14 +1,22 @@ html { font-size: 10px; - font-family: 'Open Sans', sans-serif; + font-family: sans-serif, Arial, Helvetica; + background-color: #b3b3b3; } +.topbar { + padding: 1em; + background-color: #1f1f1f; -h1 { - font-size: 60px; + color: white; + font-size: x-large; text-align: center; } +.control { + padding: 1em; +} + p, li { font-size: 16px; line-height: 2; @@ -16,26 +24,109 @@ p, li { } -html { - background-color: #00539F; -} - body { - width: 600px; margin: 0 auto; - background-color: #FF9500; - padding: 0 20px 20px 20px; - border: 5px solid black; + border: 1px solid black; + border-radius: 3; } -h1 { - margin: 0; - padding: 20px 0; - color: #00539F; - text-shadow: 3px 3px 1px black; + + +/* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; } -img { - display: block; - margin: 0 auto; +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.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 */ } diff --git a/src/main.cpp b/src/main.cpp index 2da2d76..97b729b 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -15,6 +15,7 @@ #include "index.html.gz.h" #include "style.css.gz.h" +#include "favicon.png.gz.h" // images are possible // maybe check out FS <- SPIFFS @@ -43,6 +44,11 @@ void handleCssGz() { server.sendHeader(F("Content-Encoding"), F("gzip")); server.send(200, dataType, (const char*)style_css_gz, style_css_gz_len); } +void handleFaviconGz() { + const char* dataType = "image/png"; + server.sendHeader(F("Content-Encoding"), F("gzip")); + server.send(200, dataType, (const char*)favicon_png_gz, favicon_png_gz_len); +} void handleNotFound() { digitalWrite(led, 1); @@ -83,6 +89,7 @@ void setup_webserver() { server.on("/", handleRootGz); server.on("/style.css", handleCssGz); + server.on("/favicon.png", handleFaviconGz); server.onNotFound(handleNotFound); server.begin();