Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #include <pgmspace.h>
- char index_html[] PROGMEM = R"=====(
- <!doctype html>
- <html lang='de' dir='ltr'>
- <head>
- <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
- <meta name='viewport' content='width=device-width, initial-scale=1.0' />
- <title>Zapfen Control</title>
- <script type='text/javascript' src='main.js'></script>
- <style>
- body {
- font-family:Arial,sans-serif;
- margin:10px;
- padding:0;
- background-color:#202020;
- color:#909090;
- text-align:center;
- }
- .flex-row {
- display:flex;
- flex-direction:row;
- }
- .flex-row-wrap {
- display:flex;
- flex-direction:row;
- flex-wrap:wrap;
- }
- .flex-col {
- display:flex;
- flex-direction:column;
- align-items:center;
- }
- input[type='text'] {
- background-color: #d0d0d0;
- color:#404040;
- }
- ul {
- list-style-type: none;
- }
- ul li a {
- display:block;
- margin:3px;
- padding:10px;
- border:2px solid #404040;
- border-radius:5px;
- color:#909090;
- text-decoration:none;
- }
- ul li b {
- display:block;
- margin:3px;
- padding:8px;
- border:3px solid #C00000;
- border-radius:4px;
- color:#606060;
- }
- ul#modes li a {
- min-width:200px;
- }
- ul.control li a {
- min-width:50px;
- min-height:25px;
- }
- ul.control {
- display:flex;
- flex-direction:row;
- justify-content: flex-end;
- align-items: center;
- padding: 0px;
- }
- ul.timer {
- display:flex;
- flex-direction:row;
- border:2px solid #404040;
- border-radius:4px;
- justify-content: flex-end;
- align-items: center;
- padding: 2px;
- }
- ul li a.active {
- border:2px solid #909090;
- }
- .style1{
- font-size: 12pt;
- }
- </style>
- </head>
- <body>
- <h1>Zapfen Control <span class="style1">by Devilscave</span></h1>
- <div class='flex-row'>
- <div class='flex-col'>
- <div>
- <ul class='control'>
- <li><b href='#' onclick="onReset(event, '-')">WIFI-RESET</b></li>
- <li><b href='#' onclick="onReset(event, '+')">Effect-RESET</b></li>
- </ul></div>
- <div><canvas id='color-canvas' width='300' height='300'></canvas><br/></div>
- <div><input type='text' id='color-value' oninput='onColor(event, this.value)'/></div>
- <div>
- <ul class='control'>
- <li>Change Effect:</li>
- <li><a href='#' onclick="onSwitch(event, '-')">last</a></li>
- <li><a href='#' onclick="onSwitch(event, '+')">next</a></li>
- </ul>
- <ul class='control'>
- <li>Brightness:</li>
- <li><a href='#' onclick="onBrightness(event, '-')">☼</a></li>
- <li><a href='#' onclick="onBrightness(event, '+')">☀</a></li>
- </ul>
- <ul class='control'>
- <li>Speed:</li>
- <li><a href='#' onclick="onSpeed(event, '-')">−</a></li>
- <li><a href='#' onclick="onSpeed(event, '+')">+</a></li>
- </ul>
- <ul class='control'>
- <li>Auto cycle:</li>
- <li><a href='#' onclick="onAuto(event, '-')">■</a></li>
- <li><a href='#' onclick="onAuto(event, '+')">►</a></li>
- </ul>
- </ul>
- <ul class='timer'>
- <li><input type="checkbox" name="Timeaktiv" id="time" value="z"/>Zeitschaltuhr aktivieren </li>
- <li>Einschaltzeit: <input type="text" placeholder="16.00" pattern="[0-9]{5}" title="KEIN gültiges Zeitformat (mit "." Trennung)" name="antime" id="AN" /></li>
- <li>Ausschaltzeit: <input type="text" placeholder="23.00" pattern="[0-9]{5}" title="KEIN gültiges Zeitformat (mit "." Trennung)" name="austime" id="AUS" /></li>
- <li><input type="submit" value="Speichern"/></li>
- </ul>
- </div>
- </div>
- <div>
- <ul id='modes' class='flex-row-wrap'>
- </div>
- </div>
- </body>
- </html>
- )=====";
Add Comment
Please, Sign In to add comment