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

changed from include/http to data/ because of littlefs

tags/v0.3.0
Simon Schmidt 2 years ago
parent
d51bb4c95c
commit
51bdd6210e
7 changed files with 68 additions and 248 deletions
Split View Show Diff Stats
  1. 20
    22
      data/index.html
  2. 0
    0
      data/light.png
  3. 48
    16
      data/style.css
  4. BIN
      include/http/favicon.png
  5. 0
    38
      include/http/index.html
  6. 0
    8
      include/http/input.js
  7. 0
    164
      include/http/style.css

+ 20
- 22
data/index.html View File

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


include/http/light.png → data/light.png View File


+ 48
- 16
data/style.css View File

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

BIN
include/http/favicon.png View File


+ 0
- 38
include/http/index.html View File

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

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

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

+ 0
- 164
include/http/style.css View File

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

Write Preview
Loading…
Cancel
Save