#ifndef HTMLCODE_H
#define HTMLCODE_H

#include <Arduino.h>

String htmlStartString = 
"<!DOCTYPE html>"
"<html>"
"<head>"




"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
"<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"
"<style>"
"body {margin: 0; font-size:large}"
"ul.topnav {	list-style-type: none; margin: 0; padding: 0; overflow: hidden;	background-color: #000000; }"
"ul.topnav li { float: left; }"


"ul.topnav li a { display: block; color: #FFFFFF; text-align: center; padding: 5mm 2mm; text-decoration: none; }"
"ul.topnav li a.active { background-color: #FF0000; }"


"input[type=\"color\"]   { height: 8mm; padding: 10; border: 2mm; border-radius: 5px; bottom: 1px; background-color: #000000; color: #FFFFFF; }           "

"input[type=\"range\"]   { width: 4cm; height: 15mm; padding: 0; border: 0; background-color: #FFFFFF; }"
"input[type=\"time\"]    { width: 2cm; height: 10mm; padding: 0;font-size:large }"
"input[type=\"text\"]    { height: 15mm; padding: 0; font-size:large }"
"input[type=\"password\"]{ height: 15mm; padding: 0; font-size:large }"
"input[type=\"number\"] { width: 2cm; height: 10mm; padding: 0;font-size:large }"
"input[type=\"submit\"]  {position: fixed;margin-left: auto; margin-right: auto; width: 89%; height: 15mm; padding: 0; border: none;border-radius: 20px; bottom: 1px; margin-left: 5%; background-color: #000000; color: #FFFFFF; }						"

"table, td, th { border: none; }"
"table {	border-collapse: collapse; }"
"td { text-align: left; padding: 2mm 5mm; font-size: 20px; width: 70%; }"
"th { text-align: left; padding: 10px; font-size: 20px; }"



"</style>"
"</head>"
"<body>";


String htmlDisplaySettingsString =  	
"<ul class=\"topnav\"><li><a class=\"active\" href=\"displaysettings\">Anzeige</a></li><li><a href=\"wifidata\">WLAN</a></li><li><a href=\"settings\">Einstellungen</a></li><li><a href=\"help\">  ?  </a></li></li></ul>"
"<form action=setDisplaySettings>"


"<script>"
"var connection = new WebSocket('ws://10.11.2.1:81/', ['arduino']);"

"connection.onopen = function () { connection.send('Message from Browser to ESP8266 yay its Working!! ' + new Date());  connection.send('ping'); connection.send('Time: ' + new Date()); };"

"connection.onerror = function (error) { console.log('WebSocket Error ', error); };"

"connection.onmessage = function (e) { console.log('Server: ', e.data); connection.send('Time: ' + new Date()); };"

"function sendRGB() {var r = parseInt(document.getElementById('r').value).toString(16);var g = parseInt(document.getElementById('g').value).toString(16);var b = parseInt(document.getElementById('b').value).toString(16);"
"  if(r.length < 2) { r = '0' + r; }"
"  if(g.length < 2) { g = '0' + g; }"
"  if(b.length < 2) { b = '0' + b; }"
"  var rgb = '#'+r+g+b;"
"  console.log('RGB: ' + rgb);"
"  connection.send(rgb); }"

"</script>"


"<button type=\“color\“ value=\"#ff0000\" <button style='font-size:120%; padding:6px 24px; background-color:#ff0000; color:#ffffff; border-radius:12px; position:absolute; top:200px; left:12px;' name=\"color\">Rot</button></a>"
"<button type=\“color\“ value=\"#0012ff\" <button style='font-size:120%; padding:6px 24px; background-color:#0012ff; color:#ffffff; border-radius:12px; position:absolute; top:200px; left:109px;' name=\"color\">Blau</button></a>"
"<button type=\“color\“ value=\"#f0ff00\" <button style='font-size:120%; padding:6px 24px; background-color:#ffde00; color:#000000; border-radius:12px; position:absolute; top:200px; left:217px;' name=\"color\">Gelb</button></a>"

"<button type=\“color\“ value=\"#00ff2a\" <button style='font-size:120%; padding:6px 24px; background-color:#00ff2a; color:#000000; border-radius:12px; position:absolute; top:250px; left:12px;' name=\"color\">Grün</button></a>"
"<button type=\“color\“ value=\"#ff00c0\" <button style='font-size:120%; padding:6px 24px; background-color:#ff00c0; color:#ffffff; border-radius:12px; position:absolute; top:250px; left:114px;' name=\"color\">Pink</button></a>"
"<button type=\“color\“ value=\"#ffffff\" <button style='font-size:120%; padding:6px 24px; background-color:#ffffff; color:#000000; border-radius:12px; border:2px solid #000000; position:absolute; top:250px; left:212px;' name=\"color\">Weiß</button></a>"


"<button type=\“color\“ value=\"#ff6c00\" <button style='font-size:120%; padding:6px 24px; background-color:#ff6c00; color:#ffffff; border-radius:12px; position:absolute; top:300px; left:12px;' name=\"color\">Orange</button></a>"
"<button type=\“color\“ value=\"#7e00ff\" <button style='font-size:120%; padding:6px 24px; background-color:#7e00ff; color:#ffffff; border-radius:12px; position:absolute; top:350px; left:138px;' name=\"color\">Lila</button></a>"
"<button type=\“color\“ value=\"#14c9e6\" <button style='font-size:120%; padding:6px 24px; background-color:#14c9e6; color:#ffffff; border-radius:12px; position:absolute; top:300px; left:202px;' name=\"color\">Türkis</button></a>"                 



"<table>"

"<tr><th>Helligkeit min</th><td><input type=\"range\" min=\"0\" max=\"100\" value=\"MAGICBRIGHTNESS\" step=\"1\" name=\"brightness\"></td></tr>"

"</table>"


"</form>";



String htmlWifiString =  
"<ul class=\"topnav\"><li><a href=\"displaysettings\">Anzeige</a></li><li><a class=\"active\" href=\"wifidata\">WLAN</a></li><li><a href=\"settings\">Einstellungen</a></li><li><a href=\"help\">  ?  </a></li></li></ul>"
"<form action=setWifiData>"
"<table>"
"<tr><th>SSID</th><td><input type=\"text\" placeholder=\"WLAN SSID\" name=\"ssid\" required></td></tr>"
"<tr><th>Passwort</th><td><input type=\"password\" placeholder=\"WLAN Passwort\" name=\"psw\" required></td></tr>"
"</table>"
"<input type=\"submit\" value=\"Jetzt einstellen\">"
"</form>";

String htmlSettingsString =
"<ul class=\"topnav\"><li><a href=\"displaysettings\">Anzeige</a></li><li><a href=\"wifidata\">WLAN</a></li><li><a class=\"active\" href=\"settings\">Einstellungen</a></li><li><a href=\"help\">  ?  </a></li></li></ul>"
"<form action=setSettings>"
"<table>"
"<tr><th>Ausschalten um</th><td> <input type=\"time\" name=\"nightbegin\" value=\"MAGICNIGHTMODEBEGIN\" required> Uhr</td></tr>"
"<tr><th>Einschalten um</th><td> <input type=\"time\" name=\"nightend\" value=\"MAGICNIGHTMODEEND\" required> Uhr</td></tr>"
"<tr><th>Sommerzeit<br>automatisch</th><td><input type=\"checkbox\" name=\"summerauto\" MAGICSUMMERTIMEAUTO></td></tr>"
"<tr><th>UTC</th><td><input type=\"number\" name=\"timezone\" min=\"-12\" max=\"14\" value=\"MAGICUTC\"></td></tr>"
"<tr><th>Zeitangabe</th><td><input type=\"radio\" name=\"dreiviertelmode\" value=\"Dreiviertel\" MAGICDREIVIERTELMODE_DREIVIERTEL> Dreiviertel<br><input type=\"radio\" name=\"dreiviertelmode\" value=\"Viertelvor\" MAGICDREIVIERTELMODE_VIERTELVOR> Viertel vor</td></tr>"
"<table>"
"<input type=\"submit\" value=\"Jetzt einstellen\">"
"</form>";


String htmlHelpString =
"<ul class=\"topnav\"><li><a href=\"displaysettings\">Anzeige</a></li><li><a href=\"wifidata\">WLAN</a></li><li><a href=\"settings\">Einstellungen</a></li><li><a class=\"active\" href=\"help\">  ?  </a></li></li></ul>"
"<table>"
"<tr><th>Farbe</th><td>Die Farbe, mit der die Uhr die Zeit anzeigt.</td></tr>"
"<tr><th>Helligkeit min</th><td>So hell leuchtet die Uhr, wenn es ganz dunkel ist.</td></tr>"
// "<tr><th>Helligkeit<br>automatisch</th><td>Die Helligkeit passt sich der Umgebung an. Ansonsten ist die \"Helligkeit min\" fest eingestellt.</td></tr>"
"<tr><th>SSID</th><td>Der Name des Netzwerks mit dem Du Dich verbinden m&ouml;chtest. Internet wird ben&ouml;tigt, um die Uhrzeit zu stellen.</td></tr>"
"<tr><th>Passwort</th><td>Das Passwort des Intenet routers.</td></tr>"
"<tr><th>Ausschalten um</th><td>Um diese Uhrzeit geht die Anzeige aus.</td></tr>"
"<tr><th>Einschalten um</th><td>Um diese Uhrzeit geht die Anzeige an.</td></tr>"
"<tr><th>Sommerzeit<br>automatisch</th><td>Stellt automatisch von Normalzeit auf Winterzeit.</td></tr>"
"<tr><th>UTC +-</th><td>Zeitverschiebung zur UTC Zeit. A, CH und D +1</td></tr>"
"<tr><th>Zeitangabe</th><td>Wie soll die Zeit um xx:45 angezeigt werden?</td></tr>"
"</table>";


String htmlRedirect =
"<!DOCTYPE html><html><head><title>Automatische Weiterleitung</title>"
"<meta http-equiv=\"refresh\" content=\"0; URL=http://MAGICIPADDRESS/wifidata\">"
"</head><body>Sollte die Weiterleitung nicht funktionieren, klicken Sie bitte <a href=\"http://MAGICIPADDRESS/wifidata\">hier</a></body></html>";



String htmlEndString =    
"</body>"
"</html>";

#endif
