diff --git a/CSS.h b/CSS.h
new file mode 100644
index 0000000..caa43e3
--- /dev/null
+++ b/CSS.h
@@ -0,0 +1,84 @@
+void append_page_header() {
+ webpage = F("<!DOCTYPE html><html>");
+ webpage += F("<head>");
+ webpage += F("<title>File MK-BlindControl</title>"); // NOTE: 1em = 16px
+
+ webpage += F("<meta name='viewport' content='user-scalable=yes,initial-scale=1.0,width=device-width'>");
+ webpage += F("<style>");
+ //webpage += F("body{max-width:65%;margin:0 auto;font-family:arial;font-size:105%;text-align:center;color:blue;background-color:#FFFFFF;}");
+ webpage += F("body{max-width:65%;margin:0 auto;font-family:arial;font-size:105%;text-align:center;color:blue;background-color:#F7F2Fd;}");
+
+ webpage += F("ul{list-style-type:none;margin:0.1em;padding:0;border-radius:0.375em;overflow:hidden;background-color:#dcade6;font-size:1em;}");
+ webpage += F("li{float:left;border-radius:0.375em;border-right:0.06em solid #bbb;}last-child {border-right:none;font-size:85%}");
+ webpage += F("li a{display: block;border-radius:0.375em;padding:0.44em 0.44em;text-decoration:none;font-size:85%}");
+ webpage += F("li a:hover{background-color:#EAE3EA;border-radius:0.375em;font-size:85%}");
+ webpage += F("section {font-size:0.88em;}");
+ webpage += F("h1{color:white;border-radius:0.5em;font-size:1em;padding:0.2em 0.2em;background:#558ED5;}");
+ webpage += F("h2{color:orange;font-size:1.0em;}");
+ webpage += F("h3{font-size:0.8em;}");
+ webpage += F("table{font-family:arial,sans-serif;font-size:0.9em;border-collapse:collapse;width:85%;}");
+ webpage += F("th,td {border:0.06em solid #dddddd;text-align:left;padding:0.3em;border-bottom:0.06em solid #dddddd;}");
+ webpage += F("tr:nth-child(odd) {background-color:#eeeeee;}");
+ webpage += F(".rcorners_n {border-radius:0.5em;background:#558ED5;padding:0.3em 0.3em;width:20%;color:white;font-size:75%;}");
+ webpage += F(".rcorners_m {border-radius:0.5em;background:#558ED5;padding:0.3em 0.3em;width:50%;color:white;font-size:75%;}");
+ webpage += F(".rcorners_w {border-radius:0.5em;background:#558ED5;padding:0.3em 0.3em;width:70%;color:white;font-size:75%;}");
+ webpage += F(".column{float:left;width:50%;height:45%;}");
+ webpage += F(".row:after{content:'';display:table;clear:both;}");
+ //webpage += F("*{box-sizing:border-box;}");
+ /////eedfff
+ webpage += F("footer{background-color:#eedfff; text-align:center;padding:0.3em 0.3em;border-radius:0.375em;font-size:60%;}");
+ webpage += F("button{border-radius:0.5em;background:#558ED5;padding:0.3em 0.3em;width:20%;color:white;font-size:130%;}");
+ webpage += F(".buttons {border-radius:0.5em;background:#558ED5;padding:0.3em 0.3em;width:15%;color:white;font-size:80%;}");
+ webpage += F(".buttonsm{border-radius:0.5em;background:#558ED5;padding:0.3em 0.3em;width:9%; color:white;font-size:70%;}");
+ webpage += F(".buttonm {border-radius:0.5em;background:#558ED5;padding:0.3em 0.3em;width:15%;color:white;font-size:70%;}");
+ webpage += F(".buttonw {border-radius:0.5em;background:#558ED5;padding:0.3em 0.3em;width:40%;color:white;font-size:70%;}");
+ //////
+ webpage += F("a{font-size:75%;}");
+ webpage += F("p{font-size:75%;}");
+ ///+String(file.name())+
+
+
+
+ webpage += F("</style></head><body><h1>MK-BlindControl "); webpage += String(ServerVersion) + "</h1>";
+}
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+void append_page_footer(){ // Saves repeating many lines of code for HTML page footers
+ ////for coding footer see web sites
+ //////https://bit-calculator.com/bit-shift-calculator
+ //////https://lwp.interglacial.com/appf_01.htm
+ webpage += F("<ul>");
+ webpage += F("<li><a href='/'>Home</a></li>"); // Lower Menu bar command entries
+
+ webpage += F("<li><a href='/firmwareupdate'>Firmware</a></li>");
+ webpage += F("<li><a href='/reboot'>Reboot</a></li>");
+ webpage += F("<li><a href='/reset'>Reset</a></li>");
+ webpage += F("<li><a href='/set-servo'>Align</a></li>");
+ webpage += F("<li><a href='/set-limits'>Limit Set</a></li>");
+ webpage += F("<li><a href='/setup'>Setup</a></li>");
+ webpage += F("<li><a href='/saveconfig'>Save</a></li>");
+ webpage += F("<li><a href='/filemanager'>File Manager</a></li>");
+ //webpage += F("<li><a href='/help'>About</a></li>");
+ webpage += F("<li><a href='https://mountaineagle-technologies.com.au/tasmota/mkblindcontrol.html'>About</a></li>");
+ webpage += F("</ul>");
+ ///2020
+
+ ////// trade mark space
+ //webpage += "<footer>™"+String(char(byte(0x40>>1)))+String(char(byte(0x9a>>1)))+String(char(byte(0x8a>>1)))+String(char(byte(0x5a>>1)))+String(char(byte(0xa6>>1)));
+ //webpage += String(char((0xda>>1)))+String(char(byte(0xc2>>1)))+String(char(0xe4>>1))+String(char(0xe8>>1))+String(char(byte(0xd0>>1)));
+ //webpage += String(char(byte(0xde>>1)))+String(char(byte(0xea>>1)))+String(char(byte(0xe6>>1)))+String(char(0xca>>1));
+///////// TM space M o u n
+webpage += "<footer>™"+String(char(byte(0x40>>1)))+String(char(byte(0x9a>>1)))+String(char(byte(0xde>>1)))+String(char(byte(0xea>>1)))+String(char(byte(0xdc>>1)));
+////// t a i n e
+webpage += String(char((0xe8>>1)))+String(char(byte(0xc2>>1)))+String(char(0xd2>>1))+String(char(0xdc>>1))+String(char(byte(0x8a>>1)));
+/////// a g l e -
+webpage += String(char((0xc2>>1)))+String(char(byte(0xce>>1)))+String(char(0xd8>>1))+String(char(0xca>>1))+String(char(byte(0x5a>>1)));
+///////// T e c h n
+webpage += String(char((0xa8>>1)))+String(char(byte(0xca>>1)))+String(char(0xc6>>1))+String(char(0xd0>>1))+String(char(byte(0xdc>>1)));
+////////// o l o g i
+webpage += String(char((0xde>>1)))+String(char(byte(0xd8>>1)))+String(char(0xde>>1))+String(char(0xce>>1))+String(char(byte(0xd2>>1)));
+////////// e s
+webpage += String(char((0xca>>1)))+String(char(byte(0xe6>>1)));
+//// //// space 2 0 2 2
+ webpage += String(char(byte(0x40>>1)))+String(char(byte(0x64>>1)))+String(char(byte(0x60>>1)))+String(char(byte(0x64>>1)))+String(char(0x64>>1))+"</footer>";
+ webpage += F("</body></html>");
+}
diff --git a/HAMqttDevice.h b/HAMqttDevice.h
new file mode 100644
index 0000000..370494a
--- /dev/null
+++ b/HAMqttDevice.h
@@ -0,0 +1,77 @@
+#ifndef HA_MQTT_DEVICE_H
+#define HA_MQTT_DEVICE_H
+
+#include "Arduino.h"
+
+class HAMqttDevice
+{
+public:
+ enum DeviceType
+ {
+ ALARM_CONTROL_PANEL,
+ BINARY_SENSOR,
+ CAMERA,
+ COVER,
+ FAN,
+ LIGHT,
+ LOCK,
+ SENSOR,
+ SWITCH,
+ CLIMATE,
+ VACUUM
+ };
+
+private:
+ // Device proprieties
+ const String _name;
+ const DeviceType _type;
+
+ String _identifier;
+ String _topic;
+
+ // Config variables handling
+ struct ConfigVar
+ {
+ String key;
+ String value;
+ };
+ std::vector<ConfigVar> _configVars;
+
+ // Device attributes handling
+ struct Attribute
+ {
+ String key;
+ String value;
+ };
+ std::vector<Attribute> _attributes;
+
+public:
+ HAMqttDevice(
+ const String &name,
+ const DeviceType type,
+ const String &haMQTTPrefix = "homeassistant");
+
+ ~HAMqttDevice();
+
+ HAMqttDevice &enableCommandTopic();
+ HAMqttDevice &enableStateTopic();
+ HAMqttDevice &enableAttributesTopic();
+
+ HAMqttDevice &addConfigVar(const String &key, const String &value);
+ HAMqttDevice &addAttribute(const String &key, const String &value);
+ HAMqttDevice &clearAttributes();
+
+ const String getConfigPayload() const;
+ const String getAttributesPayload() const;
+
+ inline const String getTopic() const { return _topic; }
+ inline const String getStateTopic() const { return _topic + "/state"; }
+ inline const String getConfigTopic() const { return _topic + "/config"; }
+ inline const String getAttributesTopic() const { return _topic + "/attr"; }
+ inline const String getCommandTopic() const { return _topic + "/cmd"; }
+
+private:
+ static String deviceTypeToStr(DeviceType type);
+};
+
+#endif
\ No newline at end of file
diff --git a/PageIndex.h b/PageIndex.h
new file mode 100644
index 0000000..554a848
--- /dev/null
+++ b/PageIndex.h
@@ -0,0 +1,164 @@
+const char MAIN_page[] PROGMEM = R"=====(
+
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <style>
+
+ html {
+
+ font-family: Arial;
+
+ display: inline-block;
+
+ margin: 0px auto;
+
+ text-align: center;
+
+ }
+
+
+
+ .slidecontainer {
+
+ width: 100%;
+
+ }
+
+ .slider {
+
+ -webkit-appearance: none;
+
+ width: 50%;
+
+ height: 15px;
+
+ border-radius: 5px;
+
+ background: orange;
+
+ outline: none;
+
+ opacity: 0.5;
+
+ -webkit-transition: .2s;
+
+ transition: opacity .2s;
+
+ }
+
+ .slider:hover {
+
+ opacity: 2;
+
+ }
+
+ .slider::-webkit-slider-thumb {
+
+ -webkit-appearance: none;
+
+ appearance: none;
+
+ width: 25px;
+
+ height: 25px;
+
+ border-radius: 50%;
+
+ background: brown;
+
+ cursor: pointer;
+
+ }
+
+ .slider::-moz-range-thumb {
+
+ width: 25px;
+
+ height: 25px;
+
+ border-radius: 50%;
+
+ background: #4CAF50;
+
+ cursor: pointer;
+
+ }
+
+ </style>
+
+ </head>
+
+ <body>
+
+ <h1> Use Mouse or Left/Right Arrow Keys to Position Blind</h1>
+ <h1> For fine tunning use Left/Right Arrow Keys
+ <h1> Take note of default values above as these are system generated and can change
+ <h1> Click Required Set Position OPEN or CLOSED</h1>
+ <h1> Click Save when done</h1>
+ <h1> Click HOME to de-energise servo's when done</h1>
+
+
+
+
+
+ <br><br>
+
+ <div class="slidecontainer">
+
+
+ <input type="range" min="0" value="90" max="180" class="slider" id="myRange">
+
+ <p>Servo position: <span id="demo"></span></p>
+
+ </div>
+
+ <script>
+
+ function sendData(pos) {
+
+ var xhttp = new XMLHttpRequest();
+
+ xhttp.onreadystatechange = function() {
+
+ if (this.readyState == 4 && this.status == 200) {
+
+ console.log(this.responseText);
+
+ }
+
+ };
+
+ xhttp.open("GET", "setPOS?servoPOS="+pos, true);
+
+ xhttp.send();
+
+ }
+
+ var slider = document.getElementById("myRange");
+
+ var output = document.getElementById("demo");
+
+ output.innerHTML = slider.value;
+
+ slider.oninput = function() {
+
+ output.innerHTML = this.value;
+
+ sendData(output.innerHTML);
+
+ }
+
+ </script>
+
+ </body>
+
+</html>
+
+)=====";
+