Das Webseite zum Esp8266 Sonoff Dual.
index.html
<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aussenbeleuchtung</title>
<style>
body, div {
display: flex;
align-items: center;
}
body {
background-color: #87cefa;
font-size:1.7em;
flex-flow: column;
}
div {
flex-flow: row;
}
button, output {
font-size:0.9em;
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}
button {
background-color: #36ff61;
height:130px;
width:130px;
margin: 0.5em;
border-radius: 20%;
}
output {
background-color: #000;
padding: 0.2em;
margin: 0.3em;
margin-top: 1em;
border:.2em solid #c9c7c7;
color: white;
font-weight:bold
}
.button {
background-color: #FE0320;
}
</style>
<script>
window.addEventListener('load', function () {
elem = document.querySelector('#led1');
elem.addEventListener('click', function () {
sonoff('led1');
});
elem1 = document.querySelector('#led2');
elem1.addEventListener('click', function () {
sonoff('led2');
});
}, sonoff('start'));
function sonoff(arg) {
fetch(arg).then(function (response) {
return response.json();
}).then(function (array) {
document.querySelector('#zeit1').innerHTML = array[0] + ' h';
document.querySelector('#zeit2').innerHTML = array[1] + ' h';
if (array[2] != '1') {
elem.innerHTML = 'LED1<br>An', elem.classList.remove('button');
}
else {
elem.innerHTML = 'LED1<br>Aus', elem.classList.add('button');
}
if (array[3] != '1') {
elem1.innerHTML = 'LED2<br>An', elem1.classList.remove('button');
}
else {
elem1.innerHTML = 'LED2<br>Aus', elem1.classList.add('button');
}
});
}
</script>
</head>
<body>
<h3>Aussenbeleuchtung</h3>
<div>
<button id="led1">LED1</button>
<button id="led2">LED2</button>
</div>
<div>
<output id="zeit1"></output>
<output id="zeit2"></output>
</div>
</body>
</html>