schmidtsi76327
/
ESP8266_Treppenlicht
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 12 Wiki Activity
Browse Source

added favicon ...

tags/v0.1.0
Simon Schmidt 2 years ago
parent
d0b824963b
commit
e7cf45c45e
5 changed files with 153 additions and 34 deletions
Split View Show Diff Stats
  1. BIN
      include/http/favicon.png
  2. 28
    15
      include/http/index.html
  3. 8
    0
      include/http/input.js
  4. 110
    19
      include/http/style.css
  5. 7
    0
      src/main.cpp

BIN
include/http/favicon.png View File


+ 28
- 15
include/http/index.html View File

@@ -1,23 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<title>ESP8266 Treppenlicht</title>
<!-- main style sheet -->
<link href="/favicon.png" rel="icon" type="image/png" sizes="16x16">
<link href="/style.css" rel="stylesheet" type="text/css">

</head>
<body>
<h1>Mozilla is cool</h1>
<p>At Mozilla, we’re a global community of</p>

<ul> <!-- changed to list in the tutorial -->
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<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="l_pwm"></label>
<input type="range" min="1" max="100" value="50" class="rangeslider" id="range1">
</div>
</div>
</body>

<p>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.</p>
<script src="/input.js"></script>

<p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p>
</body>
</html>

+ 8
- 0
include/http/input.js View File

@@ -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;
}

+ 110
- 19
include/http/style.css View File

@@ -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 */
}

+ 7
- 0
src/main.cpp View File

@@ -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();

Write Preview
Loading…
Cancel
Save