Zuletzt geändert: 2018-10-03

Das Webseite zum Esp8266 Sonoff Dual.

index.html

<!-- For more information visit: https://fipsok.de -->
<!DOCTYPE HTML>
<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>

Zurück