Skin test #13

ldijkman · 2022-02-13T09:47:40Z

ldijkman
Feb 13, 2022
Maintainer

will plce your skin in the skin folderr if you made a nice one or color for Electra

just test
maybe copy paste html / css code
use code tag button

nah i do not know yet the tilde ~ key ( left off 1 key )has a ``

`` thickmark => use a load of them on start and end

<!DOCTYPE html>
<html>

  <head>
    <title>%MDNSNAME%.local Hey Electra, ESP WEB SERVER </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="icon" sizes="192x192" href="Electra_192x192.png">
    <script src="index.js"></script>
    <!-- Copyright 2021...2022 Dirk Luberth Dijkman -->
<style>
@charset "UTF-8";

/**
 * ----------------------------------------------------------------------------
 * ESP32 Remote Control with WebSocket
 * ----------------------------------------------------------------------------
 * © 2020 Stéphane Calderoni
 * ----------------------------------------------------------------------------
 */

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: Roboto, sans-serif;
  font-size: 12pt;
  overflow: hidden;
  background-color: black;
  -webkit-text-fill-color: darkgray;
}

#element {
    caret-color: rgba(0,0,0,0); // turn blinking cursor off on imagebutton
}

body {
  display: grid;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
}

.panel {
  display: grid;
  grid-gap: 3em;
  justify-items: center;
}

h1 {
  font-size: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#led {
  position: relative;
  width: 5em;
  height: 5em;
  border: 2px solid #000;
  border-radius: 2.5em;
  background-image: radial-gradient(farthest-corner at 50% 20%, #b30000 0%, #330000 100%);
  box-shadow: 0 0.5em 1em rgba(102, 0, 0, 0.3);
}
#led.on {
  background-image: radial-gradient(farthest-corner at 50% 75%, red 0%, #990000 100%);
  box-shadow: 0 1em 1.5em rgba(255, 0, 0, 0.5);
}
#led:after {
  content: '';
  position: absolute;
  top: .3em;
  left: 1em;
  width: 60%;
  height: 40%;
  border-radius: 60%;
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}

button {
  padding: .5em .75em;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 -1px 1px #000;
  border: 1px solid #000;
  border-radius: .5em;
  background-image: linear-gradient(#2e3538, #73848c);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 0.2em 0.4em rgba(0, 0, 0, 0.4);
  outline: none;
}
button:active {
  transform: translateY(2px);
}


</style>
   
  </head>

  <body bgcolor="black">
    <div class="topnav">
      <h1>http://%MDNSNAME%.local</h1>
    </div>
    <div class="content">
      <div class="card-grid">
        <div class="card">
          <p class="card-title">
             <h2>%MDNSNAME%</h2>
          NTP Time<div id="NTPTime"></div>
          Browser <div id="date_time"></div>
          OFF Delay<div id="OFFDelay">%OFFDELAY%</div>  
          </p>
<script>
<!-- maybe only get time from ESP8266 https://jsfiddle.net/yeyene/snqpkuhr/ -->

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var ap = 'AM';
    var dd = today.getDate();
    var ddd = today.getDay();
    var day = new Array("Sun","Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
    var mm = today.getMonth();
    var mth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var yy = today.getFullYear();
    if (h >= 12) {
        //h = h - 12;
        //ap = 'PM';
    }
    m = checkTime(m);
    s = checkTime(s);
    
    document.getElementById("date_time").innerHTML=(h + ":" + m + ":" + s + " - "+day[ddd]+" "+dd+" "+mth[mm]+" "+yy+" ");
    
    var t = setTimeout(function () {
        startTime()
    }, 500);
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i
    }; // add zero in front of numbers < 10
    return i;
}


 startTime();


<!-- https://jsfiddle.net/yeyene/snqpkuhr/ -->
</script>
<br>
<p>
<button id="toggle"><img src="%STATE%.gif" id="image" width="65" height="98"></button>
</p>
<div id="ledstate">%STATE%</div>
<br><br>
      <p>LAN mDNS Scan</p>
      <div id="mdnsscan"> %MDNSSCAN%<br></div>
<br><br>
        </div>
      </div>
<br><br>
      <br> <input type="checkbox" id="managecheck" onclick='document.getElementById("manage").disabled=!document.getElementById("managecheck").checked;' onUnSelect='document.getElementById("resettoap").disabled=!document.getElementById("check").checked;'>Enable
      <input type="button" id="manage" onclick="window.location.href='wifimanager.html';" value="WiFiManager" width="200px" disabled><br>
      <br>
      <input type="button" onclick="window.location.href='schedule.html';" value="Schedule Electra, Electra Schedule timed switching" width="200px"><br>
      <br>
      wanted settable countdown off timer is this called inching<br>
      <form action="/timer" method="POST">
        <label for="timer">OFF Delay %OFFDELAY% Seconds</label>
        <input type="number" id="offtimer" name="off" value="%OFFDELAY%" min="10" size="6">
        <input type="submit" value="Set">
      </form>
      POST is /timer?off=%OFFDELAY%
      <br>
      <br>
      <br>

    </div>

    Edit the Files this ESP8266<br>
    <a href="edit">EDIT Electra's Skin</a><br>
   
    <br>
    <br>
    <a href="https://play.google.com/store/apps/details?id=de.wellenvogel.bonjourbrowser&hl=en&gl=US" target="bonjour">
      Android Phone?<br>Use Bonjour Browser App <br>to see list/browse all mDNS URL's / Devices in your local network<br>https://play.google.com/store/apps/details?id=de.wellenvogel.bonjourbrowser</a><br>
    <br>
    <a href="/status">/status gives text 0 or 1 status for external programs</a><br>
    <a href="/on">/on for external programs</a><br>
    <a href="/off">/off for external programs</a><br>
    <a href="/timer=3600">/timer=3600 turn off after 3600 seconds </a><br>
    <br>
    <br>
    <input type="button" onclick="window.location.href='/list';" value="List Files" width="200px">
    <br>
    <br>
    <input type="button" onclick="window.location.href='/reboot';" value="Reboot Restart Electra" width="200px">
    <br>
    <br>
    Delete ssid.txt and pass.txt <br>
    Restart to AP AccessPoint to reconfigure WiFi<br>
    <input type="checkbox" id="check" onclick='document.getElementById("resettoap").disabled=!document.getElementById("check").checked;' onUnSelect='document.getElementById("resettoap").disabled=!document.getElementById("check").checked;'>Enable <input type="button" id="resettoap" onclick="window.location.href='/resetwifitoap';" value="/resetwifitoap" width="200px" disabled=true>
    <br><br>
    <hr>

    <h3>
      future optional: i2c BME280 sensor<br>
      Each Device / Room<br>
      <hr>
      Temperature 20C<br>
      Humidity 60<br>
      Pressure 1080 Milibar<br>
      <hr>
    </h3>
    <h3>
      future optional: i2c oled screen<br>
      print mdns url to screen<br>
      print IP to screen<br>
      print time / date to screen<br>
      <hr>
    </h3>
    <button onclick="window.location.href='/update';">OTA<br>Over The Air Update</button><br>

    <br>
    DO NOT like the OTA FILE upload <br>
    its a complete spiffs erase replace, must use a .spiffs.bin file<br>
    i would like to select a file or multiple files to add/overwrite to spiffs<br>
    Maybe a filemanager, c99shell r57shell alike ;-)<br>
    <br>
    would it be possible to add FSBrowser<br>
    for uploading files to ESP32 and edit HTML files inbrowser online in/on ESP32<br>
    <a href="https://github.com/ldijkman/randomnerd_esp32_wifi_manager/blob/main/README.md#electras-sneak-sleek-peek-preview-future-updownload-edit-delete" target="filemanager">Electras-sneak-sleek-peek-preview-future-updownload-edit-delete</< /a><br>
      <br><br>
      <a href="https://github.com/ldijkman/randomnerd_esp32_wifi_manager">https://github.com/ldijkman/randomnerd_esp32_wifi_manager</a><br>
      <br>
      <br>
      <br>
      %NETWORKINFO%<br>
      <br>
      <a href="Http://paypal.me/LDijkman">A penny for sharing my thoughts</a><br><br>
      Electra, A &copy;&Ograve;&Oacute;&THORN;&egrave;&reg; Test.<br>
      <input type="button" id="CopyRight_2021_2022_Luberth_Dijkman" onclick='window.open("https://m.facebook.com/luberth.dijkman");';><br><br>
      Soon Electra will Power a Gazillion Devices<br>
      <br>
      Hey Google, Who is the Smartest of them All?!<br>


      <script>
        const d = new Date();
        let year = d.getFullYear();
        document.getElementById("CopyRight_2021_2022_Luberth_Dijkman").value = "Copyright 2021..." + year + " Dirk Luberth Dijkman";

      </script>
      <!-- Copyright 2021...2022 Dirk Luberth Dijkman -->

<!-- ;-) Do people actually shit their pants when they are scared?  ;-) -->
<iframe src="https://www.trekcore.com/audio/computer/voice/pleasespecifyhowyouwouldliketoproceed_ep.mp3" allow="autoplay" id="audio" style="display: none"></iframe>
<audio id="player" autoplay>
    <source src="pleasespecifyhowyouwouldliketoproceed_ep.mp3
" type="audio/mp3">
</audio>
<!-- ;-) Do people actually shit their pants when they are scared?  ;-) -->
      
      
  </body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Skin test #13

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Skin test #13

ldijkman Feb 13, 2022 Maintainer

Replies: 0 comments

ldijkman
Feb 13, 2022
Maintainer