From e7cf45c45e6acb7a0707e2c9414046d334942e25 Mon Sep 17 00:00:00 2001 From: Simon Schmidt Date: Mon, 21 Jun 2021 10:54:28 +0200 Subject: [PATCH] added favicon ... --- include/http/favicon.png | Bin 0 -> 531 bytes include/http/index.html | 45 +++++++++----- include/http/input.js | 8 +++ include/http/style.css | 129 +++++++++++++++++++++++++++++++++------ src/main.cpp | 7 +++ 5 files changed, 154 insertions(+), 35 deletions(-) create mode 100644 include/http/favicon.png create mode 100644 include/http/input.js diff --git a/include/http/favicon.png b/include/http/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..d768c7bbed8b06eed40912f5e6aba1e0b1b91572 GIT binary patch literal 531 zcmV+u0_^>XP) zPiPZC6oOlmL;#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&vxFQcx2dUD}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 literal 0 HcmV?d00001 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

- -
    -
  • technologists
    • -
  • thinkers
    • -
  • builders
    • -
- -

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 032fe38..7404f72 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();