Compare commits
No commits in common. "461c887ddf49a2ad88c8d3ae1af85f0c7dcb3e70" and "055a6193df20358a2f339cca681121c67b790967" have entirely different histories.
461c887ddf
...
055a6193df
Binary file not shown.
|
Before Width: | Height: | Size: 531 B |
@ -1,36 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>ESP8266 Treppenlicht</title>
|
<meta charset="utf-8">
|
||||||
<!-- main style sheet -->
|
<title>My test page</title>
|
||||||
<link href="/favicon.png" rel="icon" type="image/png" sizes="16x16">
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
|
||||||
<link href="/style.css" rel="stylesheet" type="text/css">
|
<link href="style.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="topbar">
|
<h1>Mozilla is cool</h1>
|
||||||
ESP8266 Treppenlicht Controller
|
<p>At Mozilla, we’re a global community of</p>
|
||||||
</div>
|
|
||||||
<div class="control">
|
<ul> <!-- changed to list in the tutorial -->
|
||||||
<div class="brightness">
|
<li>technologists</li>
|
||||||
</div>
|
<li>thinkers</li>
|
||||||
<div class="onoff">
|
<li>builders</li>
|
||||||
toggle all
|
</ul>
|
||||||
<label id="l_onoff"></label>
|
|
||||||
<label class="switch">
|
<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>
|
||||||
<input type="checkbox">
|
|
||||||
<span class="slider round"></span>
|
<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>
|
||||||
</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>
|
</body>
|
||||||
|
|
||||||
<script src="/input.js"></script>
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -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;
|
|
||||||
}
|
|
||||||
@ -1,22 +1,14 @@
|
|||||||
html {
|
html {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-family: sans-serif, Arial, Helvetica;
|
font-family: 'Open Sans', sans-serif;
|
||||||
background-color: #b3b3b3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar {
|
|
||||||
padding: 1em;
|
|
||||||
background-color: #1f1f1f;
|
|
||||||
|
|
||||||
color: white;
|
h1 {
|
||||||
font-size: x-large;
|
font-size: 60px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.control {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p, li {
|
p, li {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
@ -24,109 +16,26 @@ p, li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: #00539F;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
width: 600px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border: 1px solid black;
|
background-color: #FF9500;
|
||||||
border-radius: 3;
|
padding: 0 20px 20px 20px;
|
||||||
|
border: 5px solid black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
/* The switch - the box around the slider */
|
padding: 20px 0;
|
||||||
.switch {
|
color: #00539F;
|
||||||
position: relative;
|
text-shadow: 3px 3px 1px black;
|
||||||
display: inline-block;
|
|
||||||
width: 60px;
|
|
||||||
height: 34px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide default HTML checkbox */
|
img {
|
||||||
.switch input {
|
display: block;
|
||||||
opacity: 0;
|
margin: 0 auto;
|
||||||
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 */
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,7 +15,6 @@
|
|||||||
|
|
||||||
#include "index.html.gz.h"
|
#include "index.html.gz.h"
|
||||||
#include "style.css.gz.h"
|
#include "style.css.gz.h"
|
||||||
#include "favicon.png.gz.h"
|
|
||||||
// images are possible
|
// images are possible
|
||||||
// maybe check out FS <- SPIFFS
|
// maybe check out FS <- SPIFFS
|
||||||
|
|
||||||
@ -44,11 +43,6 @@ void handleCssGz() {
|
|||||||
server.sendHeader(F("Content-Encoding"), F("gzip"));
|
server.sendHeader(F("Content-Encoding"), F("gzip"));
|
||||||
server.send(200, dataType, (const char*)style_css_gz, style_css_gz_len);
|
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() {
|
void handleNotFound() {
|
||||||
digitalWrite(led, 1);
|
digitalWrite(led, 1);
|
||||||
@ -89,7 +83,6 @@ void setup_webserver() {
|
|||||||
|
|
||||||
server.on("/", handleRootGz);
|
server.on("/", handleRootGz);
|
||||||
server.on("/style.css", handleCssGz);
|
server.on("/style.css", handleCssGz);
|
||||||
server.on("/favicon.png", handleFaviconGz);
|
|
||||||
server.onNotFound(handleNotFound);
|
server.onNotFound(handleNotFound);
|
||||||
|
|
||||||
server.begin();
|
server.begin();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user