From a1b8fb754f69d8aeb131d77f2a5f63e82cb81616 Mon Sep 17 00:00:00 2001
From: Dmitry Borisenko <49808844+DmitryBorisenko33@users.noreply.github.com>
Date: Thu, 16 Sep 2021 02:00:52 +0800
Subject: [PATCH] reload

---
 .gitattributes             |    2 +
 .gitignore                 |    4 +
 LICENSE                    |   21 +
 README.md                  |    1 +
 examples/Dashboard.svelte  | 1676 +++++++++++++++++++++++++++++++++++
 examples/Setup.svelte      | 1696 ++++++++++++++++++++++++++++++++++++
 examples/parts.js          |    1 +
 package-lock.json          | 1590 +++++++++++++++++++++++++++++++++
 package.json               |   32 +
 postcss.config.js          |    6 +
 public/favicon.png         |  Bin 0 -> 3127 bytes
 public/index.html          |   17 +
 rollup.config.js           |   81 ++
 scripts/setupTypeScript.js |  121 +++
 src/.prettierrc            |    9 +
 src/App.svelte             |  372 ++++++++
 src/Card.svelte            |   12 +
 src/Input.svelte           |   20 +
 src/Myinput.svelte         |   54 ++
 src/main.js                |   10 +
 tailwind.config.js         |   24 +
 21 files changed, 5749 insertions(+)
 create mode 100644 .gitattributes
 create mode 100644 .gitignore
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 examples/Dashboard.svelte
 create mode 100644 examples/Setup.svelte
 create mode 100644 examples/parts.js
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 postcss.config.js
 create mode 100644 public/favicon.png
 create mode 100644 public/index.html
 create mode 100644 rollup.config.js
 create mode 100644 scripts/setupTypeScript.js
 create mode 100644 src/.prettierrc
 create mode 100644 src/App.svelte
 create mode 100644 src/Card.svelte
 create mode 100644 src/Input.svelte
 create mode 100644 src/Myinput.svelte
 create mode 100644 src/main.js
 create mode 100644 tailwind.config.js

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..da93220
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..f8f7d0e
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Dmitry Borisenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a5ffdaf
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+Web Interface for IoT Manager powered by Svelte JS
diff --git a/examples/Dashboard.svelte b/examples/Dashboard.svelte
new file mode 100644
index 0000000..e0dfa64
--- /dev/null
+++ b/examples/Dashboard.svelte
@@ -0,0 +1,1676 @@
+<script>
+  import { onMount } from "svelte";
+  import Cookies, { get } from "js-cookie";
+  //import { Tabs, Tab, TabList, TabPanel } from "svelte-tabs";
+  import Toggle from "svelte-toggle";
+  import Chart from "svelte-frappe-charts";
+  import Logo from "./Logo.svelte";
+  import mqtt from "mqtt/dist/mqtt.min";
+  // -------------------Swipe-------------------------------------
+
+  import { Swipe, SwipeItem } from "svelte-swipe";
+  let swipe_holder_height = 0;
+  let active_item;
+  let SwipeComp;
+  function heightChanged({ detail }) {
+    if (detail.height < 700) {
+      swipe_holder_height = 700;
+    } else {
+      swipe_holder_height = detail.height;
+    }
+  }
+  let newPage;
+  function changeSlide(i) {
+    newPage = 0;
+    newPage = 1;
+    SwipeComp.goTo(i);
+  }
+  const swipeConfig = {
+    autoplay: false,
+    delay: 2000,
+    showIndicators: false,
+    transitionDuration: 1000,
+    defaultIndex: 0,
+  };
+
+  let items = [];
+  let MQTTconnections = [];
+  // темная тема
+  onMount(async () => {
+    if (Cookies.get("darktheme") == "true") {
+      window.document.body.classList.value = "dark-mode";
+      //window.document.body.classList.toggle("dark-mode");
+    }
+  });
+
+  function toggleTheme() {
+    //  window.document.body.classList.toggle("dark-mode");
+    if (window.document.body.classList.value == "dark-mode") {
+      window.document.body.classList.value = "light-mode";
+      Cookies.set("darktheme", "False", { expires: 365 });
+    } else {
+      window.document.body.classList.toggle("dark-mode");
+      Cookies.set("darktheme", "true", { expires: 365 });
+    }
+  }
+  //секция переменных============================================
+  let myip = document.location.hostname;
+  let configSetupJson = "{}";
+  let espName = "IotManager";
+  let chipID = "";
+  let colors;
+  let lineOptions;
+  let axisOptions;
+  let graf_1 = [];
+  let graf_2 = [];
+  let NewWiget = "";
+  let NewPage = "";
+  let NewPrefics = "";
+  let date = "";
+  let hours = "";
+  let minutes = "";
+  let temp;
+  let selectedprefics;
+  // декларируем массив для  списка всех ESP в сети
+  let devices = [];
+  // декларируем массив для списка всех websocket
+  let socket = [];
+  // декларируем массив для списка всех виджетов
+  let wigets = [];
+  // декларируем массив для списка всех страниц
+  let pages = [];
+  // декларируем массив для списка всех префиксов
+  let prefics = [{ prefics: "" }];
+  // выбраный префикс
+  let selected;
+  // массивы для построения графиков
+  let graf_time = [];
+  let graf_val = [];
+  let dataLine = [];
+
+  // ==на время разработки==
+  //myip = "192.168.36.127";
+
+  let connectionType = "MQTT";
+  let client;
+  let topic;
+  let connected = false;
+
+  let clientId = "IotManager_";
+
+  // MQTT====================================================================
+  function MQTTChange() {
+    // console.log("The selected option is " + JSON.stringify(selected));
+    Cookies.set("selectedMQTT", selected, { expires: 365 });
+
+    wigets = [];
+    prefics = [];
+    pages = [];
+    newPage = 0;
+    clientId += "_" + Math.floor(Math.random() * 10000);
+    connected = false;
+    const mqtt_options = {
+      clientId: clientId,
+      servers: [
+        {
+          host: selected.mqtt_host,
+          port: Number(selected.mqtt_port),
+          protocol: selected.connection_protocol,
+        },
+      ],
+      path: "" + selected.mqtt_path,
+      protocolId: "MQTT",
+      protocolVersion: 4,
+      keepalive: 30,
+      clean: true,
+      reconnectPeriod: 100000,
+      connectTimeout: 30 * 1000,
+      rejectUnauthorized: false,
+    };
+    mqtt_options.username = selected.mqtt_username;
+    mqtt_options.password = selected.mqtt_password;
+    topic = selected.mqtt_prefix;
+    const url = `${mqtt_options.servers[0].protocol}://${mqtt_options.servers[0].host}:${mqtt_options.servers[0].port}${mqtt_options.path}`;
+
+    const onConnect = () => {
+      console.log(`MQTT connected ${url}`);
+      connected = client.connected;
+      const topic = selected.mqtt_prefix;
+      client.subscribe(topic + "/#", function (err) {
+        if (err) {
+          console.error(err);
+        } else {
+          console.log(`MQTT subscribed on topic '${topic}'`);
+          client.publish(topic, "HELLO");
+        }
+      });
+    };
+
+    const onMessage = (topic, message) => {
+      const msg = message.toString();
+      const time = new Date().getTime();
+      addMessage(msg, topic);
+    };
+
+    //try{
+    client = mqtt.connect(mqtt_options);
+    client.on("connect", onConnect);
+    client.on("message", onMessage);
+    client.on("error", (err) => {
+      console.log("MQTT", err);
+      client.end();
+      connected = client.connected;
+    });
+    client.on("close", () => {
+      console.log("MQTT " + clientId + " disconnected");
+      connected = client.connected;
+    });
+  }
+  if (connectionType == "MQTT") {
+    // ==на время разработки==
+    // MQTTconnections = JSON.parse(MQTTconnections);
+
+    MQTTconnections = [
+      {
+        user_id: "1",
+        connection_name: "demo",
+        connection_protocol: "wss",
+        mqtt_host: "meef.ru",
+        mqtt_port: "18883",
+        mqtt_prefix: "/demo",
+        mqtt_username: "IotManager:guest",
+        mqtt_password: "guest",
+        mqtt_path: "/ws",
+        mqtt_id: "mqtt_id",
+      },
+      {
+        user_id: "1",
+        connection_name: "IotManager",
+        connection_protocol: "wss",
+        mqtt_host: "meef.ru",
+        mqtt_port: "18883",
+        mqtt_prefix: "/IotManager",
+        mqtt_username: "IotManager:guest",
+        mqtt_password: "guest",
+        mqtt_path: "/ws",
+        mqtt_id: "mqtt_id",
+      },
+    ];
+
+    if (Cookies.get("selectedMQTT")) {
+      selected = Cookies.get("selectedMQTT");
+    } else {
+      selected = MQTTconnections[0];
+    }
+    if (selected) {
+      selected = JSON.parse(selected);
+    }
+    MQTTChange();
+
+    if (Cookies.get("darktheme") == "") {
+      window.document.body.classList.value = "dark-mode";
+    }
+    if (!Cookies.get("darktheme")) {
+      window.document.body.classList.value = "dark-mode";
+      Cookies.set("darktheme", "true", { expires: 365 });
+    }
+  }
+
+  // MQTT =============================================================================================
+
+  // подключаемся к локальной машине, получаем карту сети
+  function getNetworkMap() {
+    devices = JSON.parse(
+      '[{"deviceID":"","deviceIP":"' + myip + '","deviceName":""}]'
+    );
+    devices[0].id = 0;
+    devices[0].status = false;
+    console.log("Подключаемся к WS на localhost ", devices);
+    if (connectionType != "MQTT") {
+      socket[0] = new WebSocket("ws://" + myip + "/ws");
+      socket[0].addEventListener("open", function (event) {
+        devices[0].id = 0;
+        devices[0].status = true;
+        connected = true;
+        devices = devices;
+        console.log("WS CONNECTED! " + myip);
+        // получаем "карту сети" по websocket
+        socket[0].send("getNetworkMap");
+        // получаем конфигурацию ESP по websocket
+        socket[0].send("HELLO");
+      });
+      socket[0].addEventListener("message", function (event) {
+        if (Cookies.get("consolelog") == "true") {
+          console.log("NEW data packet " + myip, event.data);
+        }
+        // запускаем обработку пришедшего сообщения
+
+        addMessage(event.data, 0);
+      });
+      // Обработка ошибок websocket
+      socket[0].addEventListener("close", (event) => {
+        if (item) {
+          console.log("ws close " + item.deviceIP);
+        } else {
+          console.log("ws close " + myip);
+        }
+        devices[0].status = false;
+        connected = false;
+        devices = devices;
+      });
+      socket[0].addEventListener("error", function (event) {
+        if (item) {
+          console.log(item.deviceIP + " WebSocket error: ", event);
+        } else {
+          console.log(myip + " WebSocket error: ", event);
+        }
+        devices[0].status = false;
+        connected = false;
+        devices = devices;
+      });
+    }
+  }
+  if (connectionType != "MQTT") {
+    getNetworkMap();
+  }
+
+  function addConnection(devices) {
+    if (devices) {
+      devices.forEach(function (item, i, arr) {
+        console.log("trying connect", item);
+
+        // Create WebSocket connection.
+        socket[i] = new WebSocket("ws://" + item.deviceIP + "/ws");
+        // Connection opened
+        socket[i].addEventListener("open", function (event) {
+          devices[i].id = i;
+          devices[i].status = true;
+          connected = true;
+          devices = devices;
+          console.log("WS CONNECTED! " + item.deviceIP);
+          socket[i].send("HELLO");
+        });
+        // Listen for messages
+        socket[i].addEventListener("message", function (event) {
+          // вывод отладочных сообщений в консоль
+
+          if (Cookies.get("consolelog") == "true") {
+            console.log("NEW data packet " + item.deviceIP, event.data);
+          }
+
+          // запускаем обработку пришедшего сообщения
+          let time = new Date().getTime();
+          addMessage(event.data, i);
+        });
+        // Обработка ошибок websocket
+        socket[i].addEventListener("close", (event) => {
+          console.log("ws close " + item.deviceIP);
+          devices[i].status = false;
+          connected = false;
+          devices = devices;
+          Shuttervisibil();
+        });
+        socket[i].addEventListener("error", function (event) {
+          console.log(item.deviceIP + " WebSocket error: ", event);
+          devices[i].status = false;
+          connected = false;
+          devices = devices;
+          Shuttervisibil();
+        });
+      });
+    }
+  }
+  //console.log(devices);
+
+  //обрабатываем пришедшее сообщение =====================================================================
+
+  function addMessage(data, socket) {
+    if (connectionType == "MQTT") {
+      // console.log("NEW data packet " + socket, data);
+      topic = socket;
+    }
+
+    let json;
+    let tmp;
+
+    try {
+      let net = JSON.parse(data);
+
+      // Если пришла карта сети
+      if (net[0].deviceID) {
+        console.log("пришла карта сети :", net);
+        devices = net;
+        //Conf=[];
+
+        addConnection(devices);
+        NetworkMap = data;
+      }
+    } catch (e) {
+      //	console.log('ERROR parse JSON', tmp);
+    }
+
+    tmp = "[" + data + "]";
+
+    //tmp = [data];
+    try {
+      tmp = JSON.parse(tmp);
+      tmp.forEach(function (json, i, array) {
+        // собираем виджеты
+        // если пришедшее сообщение виджет
+        if (json.widget) {
+          // ищем его в массиве виджетов
+          NewWiget = "";
+          wigets.forEach(function (item, i, array) {
+            if (json.topic == item.topic) {
+              NewWiget = json.topic;
+              //	console.log("Нашли совпадение виджета");
+            }
+          });
+
+          // ищем новые страницы
+          NewPage = "";
+          pages.forEach(function (item, i, array) {
+            if (json.page == item.page) {
+              NewPage = json.page;
+              //	console.log("Нашли совпадение страницы");
+            }
+          });
+
+          // ищем новые префиксы
+          NewPrefics = "";
+          prefics.forEach(function (item, i, array) {
+            let topic = getprefics(json.topic);
+            if (topic == item.prefics) {
+              NewPrefics = item.prefics;
+              //	console.log("Нашли совпадение префикса");
+            }
+          });
+
+          // Новый виджет дописываем в массив виджетов
+          if (!NewWiget) {
+            // дописываем виджету из какого сокета он получен
+            json.socket = socket;
+            // дописываем виджету префикс
+            json.prefics = getprefics(json.topic);
+            json.closed = true;
+
+            wigets = [...wigets, json];
+
+            // сортируем
+            wigets.sort((a, b) => a.order - b.order);
+          }
+
+          // Дописываем новую страницу в массив страниц
+          if (!NewPage) {
+            pages = [
+              ...pages,
+              JSON.parse(
+                JSON.stringify({ page: json.page, topic: json.topic })
+              ),
+            ];
+
+            pages.sort(function (a, b) {
+              if (a.page < b.page) {
+                return -1;
+              }
+              if (a.page > b.page) {
+                return 1;
+              }
+              return 0;
+            });
+          }
+
+          // Дописываем новый префикс в массив префиксов
+          if (!NewPrefics) {
+            prefics = [
+              ...prefics,
+              JSON.parse(JSON.stringify({ prefics: getprefics(json.topic) })),
+            ];
+          }
+        }
+        // закончили сбор виджетов
+
+        // если новое сообщение статус
+        if (json.status) {
+          // ищем виджет к которому относится этот статус
+          wigets.forEach(function (element) {
+            //отличие MQTT и WS========================================================!!!!!!!!!!!!!!
+            let messegetopic;
+            if (connectionType === "MQTT") {
+              messegetopic = topic.replace("/status", "");
+            } else {
+              messegetopic = json.topic.replace("/status", "");
+            }
+            // ========================================================================
+
+            if (element.topic == messegetopic) {
+              // если получен статус график
+
+              if (element.widget == "chart") {
+                graf_time = [];
+                graf_val = [];
+                try {
+                  temp = json.status;
+                  temp.forEach(function (item, i, arr) {
+                    // получаем время
+                    date = new Date(item.x * 1000);
+                    hours = date.getHours();
+                    //	minutes =date.getMinutes();
+                    minutes = checkTime(date.getMinutes());
+                    function checkTime(i) {
+                      return i < 10 ? "0" + i : i;
+                    }
+                    let days = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
+                    let dayW = days[date.getDay()];
+                    //let dw = days[dayW];
+                    let day = date.getDate();
+                    let month = checkTime(date.getMonth());
+
+                    //graf_time = [... graf_time,  hours+':'+minutes+' '+day+'.'+month, ];
+                    if ((element.dateFormat = "HH:mm")) {
+                      graf_time = [
+                        ...graf_time,
+                        hours + ":" + minutes + " " + dayW,
+                      ];
+                    } else if ((element.dateFormat = "DD.MM.YYYY")) {
+                      graf_time = [
+                        ...graf_time,
+                        day + "." + month + " " + dayW,
+                      ];
+                    } else {
+                      graf_time = [...graf_time, hours + ":" + minutes];
+                    }
+
+                    graf_val = [...graf_val, item.y1];
+                  });
+
+                  axisOptions = { xAxisMode: "tick", xIsSeries: true };
+                  if (element.pointRadius == "0") {
+                    lineOptions = { hideDots: 1, regionFill: 1, spline: 1 };
+                  } else {
+                    lineOptions = { regionFill: 1, dotSize: 3, spline: 1 };
+                  }
+
+                  dataLine = {
+                    labels: graf_time,
+                    datasets: [
+                      {
+                        name: element.descr,
+                        values: graf_val,
+                      },
+                    ],
+                  };
+
+                  if (!element.status) {
+                    // архив графика отсутсутствует, то создаем статус и заполняем
+                    element.status = dataLine;
+                  } else {
+                    //console.log(" дописываем новые значения к имеющимся");
+                    element.status.labels = [
+                      ...element.status.labels,
+                      dataLine.labels[0],
+                    ];
+                    element.status.datasets[0].values = [
+                      ...element.status.datasets[0].values,
+                      dataLine.datasets[0].values[0],
+                    ];
+                  }
+                } catch (e) {
+                  console.log(
+                    "полученные данные для графика содержат ошибки",
+                    element.status
+                  );
+                }
+
+                //два графика в одном / пока работает криво только для WS	, надо делать
+                if (connectionType === "MQTT") {
+                  if (topic.includes("_1/status")) {
+                    graf_1 = element.status.datasets[0];
+                  }
+                  if (topic.includes("_2/status")) {
+                    graf_2 = element.status.datasets[0];
+                    element.status.datasets[1] = graf_1;
+                  }
+                } else {
+                }
+              }
+              // данные для прочих витжетов	(заменяем статус на новый)
+              else {
+                element.status = json.status;
+                element.send = false;
+              }
+            }
+            wigets = wigets;
+            devices = devices;
+            pages = pages;
+          });
+        }
+        //  для mysens
+        if (json.info) {
+          // ищем виджет к которому относится INFO
+          wigets.forEach(function (element) {
+            //отличие MQTT и WS========================================================!!!!!!!!!!!!!!
+            let messegetopic;
+            if (connectionType === "MQTT") {
+              messegetopic = topic.replace("/status", "");
+            } else {
+              messegetopic = json.topic.replace("/status", "");
+            }
+            // ========================================================================
+
+            if (element.topic == messegetopic) {
+              element.nodeInfo = json.info;
+            }
+          });
+        }
+        if (json.color) {
+          // ищем виджет к которому относится цвет INFO
+          wigets.forEach(function (element) {
+            //отличие MQTT и WS========================================================!!!!!!!!!!!!!!
+            let messegetopic;
+            if (connectionType === "MQTT") {
+              messegetopic = topic.replace("/status", "");
+            } else {
+              messegetopic = json.topic.replace("/status", "");
+            }
+            // ========================================================================
+
+            if (element.topic == messegetopic) {
+              element.nodeInfoColor = json.color;
+            }
+          });
+        }
+      });
+    } catch (e) {
+      console.log("ERROR parse JSON", tmp);
+    }
+
+    tmp = null;
+    temp = null;
+    json = null;
+    data = null;
+    NewWiget = null;
+    NewPage = null;
+    NewPrefics = null;
+    date = null;
+    hours = null;
+    minutes = null;
+  }
+
+  // функция получаем префикс
+
+  function getprefics(topic) {
+    if (topic[0] == "/") {
+      topic = topic.slice(0, topic.indexOf("/", 2));
+      return topic;
+    } else {
+      topic = topic.slice(0, topic.indexOf("/", 0));
+      return topic;
+    }
+  }
+  // функция если произошла смена префикса в интерфейсе
+  function handleSubmit() {
+    console.log("The selected option is " + JSON.stringify(selected.prefics));
+    selectedprefics = selected.prefics;
+  }
+
+  // шлем данные в websocket
+  function WSpush(ws, uri, val) {
+    //    console.log(ws, uri, val);
+    if (connectionType == "MQTT") {
+      client.publish(uri + "/control", val.toString());
+    } else {
+      socket[ws].send(
+        '{"path":"' + uri + '/control", "status":"' + val.toString() + '"}'
+      );
+
+      if (socket[ws].readyState != 1) {
+        addConnection(devices);
+
+        // добавить GET запрос
+      }
+    }
+  }
+
+  if (connectionType != "MQTT") {
+    //	addConnection(devices);
+  }
+
+  // обратный отсчет для 		Shutter
+  let frame;
+  let elapsed = 0;
+  let duration = 5000;
+  let last_time = window.performance.now();
+  (function update() {
+    frame = requestAnimationFrame(update);
+    const time = window.performance.now();
+    elapsed += Math.min(time - last_time, duration - elapsed);
+    last_time = time;
+    if (elapsed == duration) {
+      Shutterhiddn();
+    }
+  })();
+
+  let Shuttervisibl = "visibility: hidden;";
+
+  function Shuttervisibil() {
+    Shuttervisibl = "visibility: visible;";
+    //	duration = sec;
+    elapsed = 0;
+    if (elapsed === duration) {
+      Shuttervisibl = "visibility: hidden;";
+    }
+  }
+  function Shutterhiddn() {
+    Shuttervisibl = "visibility: hidden;";
+  }
+  Shuttervisibil();
+</script>
+
+<!---->
+
+{#if connectionType == "MQTT"}
+  {#if MQTTconnections[1]}
+    <form on:submit|preventDefault={MQTTChange}>
+      <select bind:value={selected} on:change={MQTTChange}>
+        {#each MQTTconnections as MQTTconnection}
+          {#if MQTTconnection.connection_name == selected.connection_name}
+            <option selected value={MQTTconnection}>
+              {MQTTconnection.connection_name}
+            </option>
+          {:else}
+            <option value={MQTTconnection}>
+              {MQTTconnection.connection_name}
+            </option>
+          {/if}
+        {/each}
+      </select>
+    </form>
+  {/if}
+{:else}
+  <div
+    class="Shutter"
+    style="{Shuttervisibl} position: absolute; z-index: 1; right: 1%; top: 0px"
+    id="layer1"
+  >
+    <span>
+      <progress value={elapsed / duration} />
+      <br /><br />
+      <!--Перечисляем девайсы в сети-->
+      {#each devices as NetworkDevice, i}
+        {#if !NetworkDevice.status && NetworkDevice.status != false}
+          <p align="left" style=" margin-top: -5px; margin-bottom: -5px">
+            {NetworkDevice.deviceIP}
+            {NetworkDevice.deviceName} waiting
+          </p>
+        {/if}
+        {#if NetworkDevice.status == true}
+          <p
+            align="left"
+            style="color: green; margin-top: -5px; margin-bottom: -5px"
+          >
+            {NetworkDevice.deviceIP}
+            {NetworkDevice.deviceName} connected
+          </p>
+        {/if}
+        {#if NetworkDevice.status == false}
+          <p
+            align="left"
+            style="color: red; margin-top: -5px; margin-bottom: -5px"
+            on:click={addConnection(devices)}
+          >
+            {NetworkDevice.deviceIP}
+            {NetworkDevice.deviceName} disconnected
+          </p>
+        {/if}
+      {/each}
+    </span>
+  </div>
+{/if}
+
+<div
+  style=" position: absolute;  z-index: 2; right: 7%; top: 0%; color:red"
+  on:click={toggleTheme}
+  id="toggleTheme"
+>
+  🔆
+</div>
+
+{#if connectionType == "MQTT"}
+  {#if connected == false}
+    <div
+      style=" position: absolute;  z-index: 2; right: 2%; top: 0%; color:red"
+      on:click={toggleTheme}
+      id="layerMQTT"
+    >
+      MQTT
+    </div>
+    {#if MQTTconnections[0].mqtt_port == ""}
+      <div align="center">
+        Для подключения MQTT обязателььно должен быть указан порт "MQTT wss port
+        (TLS)"
+      </div>
+    {/if}
+  {/if}
+  {#if connected == true}
+    <div
+      style=" position: absolute;  z-index: 2; right: 2%; top: 0%; color:green"
+      on:click={toggleTheme}
+      id="layerMQTT"
+    >
+      MQTT
+    </div>
+  {/if}
+{:else if connected == true}
+  <div
+    on:mouseenter={Shuttervisibil}
+    on:click={Shutterhiddn}
+    style="color:green; position: absolute;  z-index: 2; right: 1.5%; top: 0px"
+    id="layerWS;  "
+  >
+    localNET
+  </div>
+{:else}
+  <div
+    on:mouseenter={Shuttervisibil}
+    on:click={Shutterhiddn}
+    style="color:red;  position: absolute;  z-index: 2; right: 1.5%; top: 0px"
+    id="layerWS; "
+  >
+    localNET
+  </div>
+{/if}
+<!-- селектор префиксов  -->
+{#if prefics[2]}
+  <form on:submit|preventDefault={handleSubmit}>
+    <select style="float: left" bind:value={selected} on:change={handleSubmit}>
+      {#each prefics as curentprefics}
+        <option value={curentprefics}>
+          {curentprefics.prefics}
+        </option>
+      {/each}
+    </select>
+  </form>
+{/if}
+
+<!--закончили селектор префиксов -->
+
+{#if !pages[0]}
+  <p align="center"><Logo /></p>
+{/if}
+
+<!-------------------------------------------------------->
+<p align="center">
+  {#each pages as page, i}
+    <button type="button" on:click={() => changeSlide(i)}>{page.page}</button>
+  {/each}
+</p>
+{#if newPage == 1}
+  <div class="swipe-holder" style="height:{swipe_holder_height}px">
+    <Swipe bind:active_item bind:this={SwipeComp}>
+      {#each pages as pagesName, i}
+        <SwipeItem
+          active={active_item == i}
+          allow_dynamic_height={true}
+          on:swipe_item_height_change={heightChanged}
+        >
+          <table border="0" style="margin-left: 0%" width="99%">
+            {#each wigets as widget, i}
+              <!--Отображаем виджеты только для выбранного префикса-->
+
+              {#if !selectedprefics || selectedprefics === widget.prefics}
+                {#if widget.page === pagesName.page}
+                  <tr>
+                    <!-- Toggle -->
+                    {#if widget.widget === "toggle"}
+                      <td style="width: 100%;">
+                        <span style="float: left"> {widget.descr}</span>
+                      </td>
+
+                      <td />
+
+                      <td>
+                        {#if widget.status == "1"}
+                          <span style="float: right">
+                            <Toggle
+                              style="float: right"
+                              on:toggle={WSpush(widget.socket, widget.topic, 0)}
+                              label=""
+                              toggledColor="#6495ED"
+                              untoggledColor="#FF6347"
+                              switchColor="#eee"
+                            />
+                          </span>
+                        {:else}
+                          <span style="float: right">
+                            <Toggle
+                              on:toggle={WSpush(widget.socket, widget.topic, 1)}
+                              label=""
+                              toggledColor="#FF6347"
+                              untoggledColor="gray"
+                              switchColor="#eee"
+                              toggled=""
+                            />
+                          </span>
+                        {/if}
+                      </td>{/if}
+                    <!-- anydata -->
+                    {#if widget.widget === "anydata"}
+                      <td>
+                        {#if widget.descrColor}
+                          <span style="float: left">
+                            <lable
+                              align="left"
+                              style="color: {widget.descrColor}; font-family: '{widget.descrfont}'"
+                              >{widget.descr}</lable
+                            >
+                          </span>
+                        {:else}
+                          <span
+                            style="float: left; font-family: '{widget.descrfont}'"
+                          >
+                            {widget.descr}
+                            <!--Инфо от ноды mysens отображается под названием виджета -->
+                            <div
+                              class="letter"
+                              align="left"
+                              style="color: {!widget.nodeInfoColor
+                                ? 'gray'
+                                : widget.nodeInfoColor}"
+                            >
+                              {!widget.nodeInfo ? "" : widget.nodeInfo}
+                            </div>
+                          </span>
+                        {/if}
+                      </td>
+                      <td>
+                        <!--Инфо от ноды mysens отображается по середине
+  <lable align='left' style='color: {!widget.nodeInfoColor ? 'gray' : widget.nodeInfoColor}'>
+  
+  </lable>-->
+                      </td>
+                      <td align="right" style="white-space: nowrap;">
+                        <!--Делаем anidata разноцветными если есть кастомизация цвета-->
+                        {#if Array.isArray(widget.color) && widget.status}
+                          {#each widget.color as anydataColor, i}
+                            <!--// убираем знаки после запятой 	-->
+                            {#if anydataColor.level && widget.status < anydataColor.level && widget.status > widget.color[i - 1].level && i > 0}
+                              <lable
+                                align="left"
+                                style="color: {anydataColor.value}; font-family: '{widget.font}' "
+                                >{Math.round(widget.status * 10) / 10
+                                  ? Math.round(widget.status * 10) / 10
+                                  : widget.status}{!widget.after
+                                  ? ""
+                                  : widget.after}</lable
+                              >
+                            {/if}
+                          {/each}
+                          <!--если цвет задан значением а не массивом-->
+                        {:else if widget.color && widget.status}
+                          <lable
+                            align="left"
+                            style="color: {widget.color}; font-family: '{widget.font}'"
+                            >{Math.round(widget.status * 10) / 10
+                              ? Math.round(widget.status * 10) / 10
+                              : widget.status}{widget.after}</lable
+                          >
+                          <!--если цвет не задан и статус пустой-->
+                        {:else if !widget.status}
+                          <lable align="left">...</lable>
+                          <!--если цвет не задан-->
+                        {:else if widget.status}
+                          <lable
+                            align="left"
+                            style="font-family: '{widget.font}'"
+                            >{Math.round(widget.status * 10) / 10
+                              ? Math.round(widget.status * 10) / 10
+                              : widget.status}{!widget.after
+                              ? ""
+                              : widget.after}</lable
+                          >
+                        {:else}
+                          <lable
+                            align="left"
+                            style="font-family: '{widget.font}'"
+                          >
+                            {!widget.status ? "" : widget.status}{!widget.after
+                              ? ""
+                              : widget.after}
+                          </lable>
+                        {/if}
+                      </td>
+                    {/if}
+                    <!-- input -->
+                    {#if widget.widget === "input"}
+                      <td><span style="float: left"> {widget.descr}</span></td>
+                      <td />
+                      {#if widget.type === "number"}
+                        <td align="right">
+                          <div
+                            style="float: right; display:inline;  width: 120px  "
+                          >
+                            <input
+                              type="button"
+                              value="-  "
+                              style=" border: 1px solid lightblue; width: 25px"
+                              on:click={WSpush(
+                                widget.socket,
+                                widget.topic,
+                                widget.status - 1
+                              )}
+                            />
+                            <input
+                              class:red={widget["send"] == true}
+                              style="width: 45px "
+                              type="tel"
+                              neme={widget.topic}
+                              bind:value={widget.status}
+                              size="20"
+                              on:change={((widget["send"] = true),
+                              WSpush(
+                                widget.socket,
+                                widget.topic,
+                                widget.status
+                              ))}
+                              min="-1000"
+                              max="1000000"
+                            />
+                            <input
+                              type="button"
+                              value="+  "
+                              style="border: 1px solid lightblue; width: 25px"
+                              on:click={WSpush(
+                                widget.socket,
+                                widget.topic,
+                                widget.status - 1 + 2
+                              )}
+                            />
+                          </div>
+                        </td>
+                      {:else if widget.type === "time"}
+                        <td align="right">
+                          <div style="float: right; display:inline-block">
+                            <input
+                              class:red={widget["send"] == true}
+                              type="time"
+                              bind:value={widget.status}
+                              size="20"
+                              on:change={((widget["send"] = true),
+                              WSpush(
+                                widget.socket,
+                                widget.topic,
+                                widget.status
+                              ))}
+                              min="00:00"
+                              max="23:59"
+                              required
+                            />
+                          </div>
+                        </td>
+                      {:else}
+                        <td align="right"
+                          ><div style="display:inline-block">
+                            <input
+                              class:red={widget["send"] == true}
+                              bind:value={widget.status}
+                              size="20"
+                              on:change={((widget["send"] = true),
+                              WSpush(
+                                widget.socket,
+                                widget.topic,
+                                widget.status
+                              ))}
+                            />
+                          </div></td
+                        >
+                      {/if}
+                    {/if}
+                    <!-- btn -->
+                    {#if widget.widget == "btn"}
+                      <td><span style="float: left">{widget.descr}</span></td>
+                      <td />
+                      <td align="right">
+                        {#if widget.status != 0 && widget.status != 1}
+                          <button
+                            class="btn"
+                            on:click={((widget["send"] = true),
+                            WSpush(widget.socket, widget.topic, 1))}
+                            ><span
+                              >&nbsp;&nbsp;{!widget.status
+                                ? ""
+                                : widget.status}&nbsp;&nbsp;</span
+                            ></button
+                          ><br />
+                        {:else}
+                          <button
+                            class="btn"
+                            on:click={((widget["send"] = true),
+                            WSpush(widget.socket, widget.topic, 1))}
+                            ><span
+                              >&nbsp;&nbsp; {!widget.text
+                                ? ""
+                                : widget.text}&nbsp;&nbsp;</span
+                            ></button
+                          ><br />
+                        {/if}
+                      </td>
+                    {/if}
+                    <!-- select -->
+                    {#if widget.widget === "select"}
+                      <td><span style="float: left">{widget.descr}</span></td>
+                      <td />
+                      <td align="right">
+                        {#if widget.status == 0}
+                          <button
+                            class="btnoff"
+                            on:click={((widget["send"] = true),
+                            (this.style.border = "1px solid red"),
+                            WSpush(widget.socket, widget.topic, 1))}
+                            ><span
+                              >{!widget.options[0]
+                                ? "OFF"
+                                : widget.options[0]}</span
+                            ></button
+                          ><br />
+                        {:else}
+                          <button
+                            class="btn"
+                            on:click={((widget["send"] = true),
+                            (this.style.border = "1px solid red"),
+                            WSpush(widget.socket, widget.topic, 0))}
+                            ><span
+                              >{!widget.options[1]
+                                ? "ON"
+                                : widget.options[1]}</span
+                            ></button
+                          ><br />
+                        {/if}
+                      </td>
+                    {/if}
+                    <!-- chart -->
+                    {#if widget.widget === "chart"}
+                      <td colspan="3">
+                        {#if widget.status}
+                          {#if widget.topic.includes("_2")}
+                            <Chart
+                              data={widget.status}
+                              {lineOptions}
+                              {axisOptions}
+                              colors={[!widget.color ? "red" : widget.color]}
+                              type={!widget.type ? "line" : widget.type}
+                              height="300"
+                            />
+                          {:else if !widget.topic.includes("_1")}
+                            {widget.descr}
+                            <Chart
+                              data={widget.status}
+                              {lineOptions}
+                              {axisOptions}
+                              colors={[
+                                !widget.color ? "light-blue" : widget.color,
+                              ]}
+                              type={!widget.type ? "line" : widget.type}
+                              height="300"
+                            />
+                          {/if}
+                        {/if}
+                      </td>
+                    {/if}
+                    <!-- range -->
+                    {#if widget.widget === "range"}
+                      <td colspan="3">
+                        <div>
+                          {widget.descr}
+                          {widget.status / 10}
+                          {widget.after}
+                        </div>
+
+                        <label>
+                          <input
+                            type="range"
+                            bind:value={widget.status}
+                            min={widget.min}
+                            max={widget.max * 10}
+                            on:change={WSpush(
+                              widget.socket,
+                              widget.topic,
+                              widget.status
+                            )}
+                          />
+                        </label>
+                      </td>
+                    {/if}
+                  </tr>
+                {/if}
+              {/if}
+            {/each}
+          </table>
+        </SwipeItem>
+      {/each}
+    </Swipe>
+  </div>
+{/if}
+<!------------------------------------------------------->
+<!--
+<Tabs>
+  <table border="0" style="margin-left: 0%" width="99%">
+    <tr
+      ><td>
+        <TabList>
+          {#each pages as pagesName, i}
+            <Tab>{pagesName.page}</Tab>
+          {/each}
+        </TabList>
+      </td></tr
+    >
+  </table>
+
+  {#each pages as pagesName, i}
+    <TabPanel>
+      <table border="0" style="margin-left: 0%" width="99%">
+        {#each wigets as widget, i}
+         !--Отображаем виджеты только для выбранного префикса--
+
+          {#if !selectedprefics || selectedprefics === widget.prefics}
+            {#if widget.page === pagesName.page}
+              <tr>
+                -- Toggle --
+                {#if widget.widget === "toggle"}
+                  <td style="width: 100%;">
+                    <span style="float: left"> {widget.descr}</span>
+                  </td>
+
+                  <td />
+
+                  <td>
+                    {#if widget.status == "1"}
+                      <span style="float: right">
+                        <Toggle
+                          style="float: right"
+                          on:toggle={WSpush(widget.socket, widget.topic, 0)}
+                          label=""
+                          toggledColor="#6495ED"
+                          untoggledColor="#FF6347"
+                          switchColor="#eee"
+                        />
+                      </span>
+                    {:else}
+                      <span style="float: right">
+                        <Toggle
+                          on:toggle={WSpush(widget.socket, widget.topic, 1)}
+                          label=""
+                          toggledColor="#FF6347"
+                          untoggledColor="gray"
+                          switchColor="#eee"
+                          toggled=""
+                        />
+                      </span>
+                    {/if}
+                  </td>{/if}
+                -- anydata --
+                {#if widget.widget === "anydata"}
+                  <td>
+                    {#if widget.descrColor}
+                      <span style="float: left">
+                        <lable
+                          align="left"
+                          style="color: {widget.descrColor}; font-family: '{widget.descrfont}'"
+                          >{widget.descr}</lable
+                        >
+                      </span>
+                    {:else}
+                      <span
+                        style="float: left; font-family: '{widget.descrfont}'"
+                      >
+                        {widget.descr}
+                        --Инфо от ноды mysens отображается под названием виджета --
+                        <div
+                          class="letter"
+                          align="left"
+                          style="color: {!widget.nodeInfoColor
+                            ? 'gray'
+                            : widget.nodeInfoColor}"
+                        >
+                          {!widget.nodeInfo ? "" : widget.nodeInfo}
+                        </div>
+                      </span>
+                    {/if}
+                  </td>
+                  <td>
+                    --Инфо от ноды mysens отображается по середине 
+                      <lable align='left' style='color: {!widget.nodeInfoColor ? 'gray' : widget.nodeInfoColor}'></lable>
+                    --
+                  </td>
+                  <td align="right" style="white-space: nowrap;">
+                    --Делаем anidata разноцветными если есть кастомизация цвета--
+                    {#if Array.isArray(widget.color) && widget.status}
+                      {#each widget.color as anydataColor, i}
+                        --// убираем знаки после запятой 	--
+                        {#if anydataColor.level && widget.status < anydataColor.level && widget.status > widget.color[i - 1].level && i > 0}
+                          <lable
+                            align="left"
+                            style="color: {anydataColor.value}; font-family: '{widget.font}' "
+                            >{Math.round(widget.status * 10) / 10
+                              ? Math.round(widget.status * 10) / 10
+                              : widget.status}{!widget.after
+                              ? ""
+                              : widget.after}</lable
+                          >
+                        {/if}
+                      {/each}
+                      --если цвет задан значением а не массивом--
+                    {:else if widget.color && widget.status}
+                      <lable
+                        align="left"
+                        style="color: {widget.color}; font-family: '{widget.font}'"
+                        >{Math.round(widget.status * 10) / 10
+                          ? Math.round(widget.status * 10) / 10
+                          : widget.status}{widget.after}</lable
+                      >
+                     --если цвет не задан и статус пустой--
+                    {:else if !widget.status}
+                      <lable align="left">...</lable>
+                      --если цвет не задан--
+                    {:else if widget.status}
+                      <lable align="left" style="font-family: '{widget.font}'"
+                        >{Math.round(widget.status * 10) / 10
+                          ? Math.round(widget.status * 10) / 10
+                          : widget.status}{!widget.after
+                          ? ""
+                          : widget.after}</lable
+                      >
+                    {:else}
+                      <lable align="left" style="font-family: '{widget.font}'">
+                        {!widget.status ? "" : widget.status}{!widget.after
+                          ? ""
+                          : widget.after}
+                      </lable>
+                    {/if}
+                  </td>
+                {/if}
+               -- input --
+                {#if widget.widget === "input"}
+                  <td><span style="float: left"> {widget.descr}</span></td>
+                  <td />
+                  {#if widget.type === "number"}
+                    <td align="right">
+                      <div
+                        style="float: right; display:inline;  width: 120px  "
+                      >
+                        <input
+                          type="button"
+                          value="-  "
+                          style=" border: 1px solid lightblue; width: 25px"
+                          on:click={WSpush(
+                            widget.socket,
+                            widget.topic,
+                            widget.status - 1
+                          )}
+                        />
+                        <input
+                          class:red={widget["send"] == true}
+                          style="width: 45px "
+                          type="tel"
+                          neme={widget.topic}
+                          bind:value={widget.status}
+                          size="20"
+                          on:change={((widget["send"] = true),
+                          WSpush(widget.socket, widget.topic, widget.status))}
+                          min="-1000"
+                          max="1000000"
+                        />
+                        <input
+                          type="button"
+                          value="+  "
+                          style="border: 1px solid lightblue; width: 25px"
+                          on:click={WSpush(
+                            widget.socket,
+                            widget.topic,
+                            widget.status - 1 + 2
+                          )}
+                        />
+                      </div>
+                    </td>
+                  {:else if widget.type === "time"}
+                    <td align="right">
+                      <div style="float: right; display:inline-block">
+                        <input
+                          class:red={widget["send"] == true}
+                          type="time"
+                          bind:value={widget.status}
+                          size="20"
+                          on:change={((widget["send"] = true),
+                          WSpush(widget.socket, widget.topic, widget.status))}
+                          min="00:00"
+                          max="23:59"
+                          required
+                        />
+                      </div>
+                    </td>
+                  {:else}
+                    <td align="right"
+                      ><div style="display:inline-block">
+                        <input
+                          class:red={widget["send"] == true}
+                          bind:value={widget.status}
+                          size="20"
+                          on:change={((widget["send"] = true),
+                          WSpush(widget.socket, widget.topic, widget.status))}
+                        />
+                      </div></td
+                    >
+                  {/if}
+                {/if}
+               -- btn --
+                {#if widget.widget == "btn"}
+                  <td><span style="float: left">{widget.descr}</span></td>
+                  <td />
+                  <td align="right">
+                    {#if widget.status != 0 && widget.status != 1}
+                      <button
+                        class="btn"
+                        on:click={((widget["send"] = true),
+                        WSpush(widget.socket, widget.topic, 1))}
+                        ><span
+                          >&nbsp;&nbsp;{!widget.status
+                            ? ""
+                            : widget.status}&nbsp;&nbsp;</span
+                        ></button
+                      ><br />
+                    {:else}
+                      <button
+                        class="btn"
+                        on:click={((widget["send"] = true),
+                        WSpush(widget.socket, widget.topic, 1))}
+                        ><span
+                          >&nbsp;&nbsp; {!widget.text
+                            ? ""
+                            : widget.text}&nbsp;&nbsp;</span
+                        ></button
+                      ><br />
+                    {/if}
+                  </td>
+                {/if}
+               -- select --
+                {#if widget.widget === "select"}
+                  <td><span style="float: left">{widget.descr}</span></td>
+                  <td />
+                  <td align="right">
+                    {#if widget.status == 0}
+                      <button
+                        class="btnoff"
+                        on:click={((widget["send"] = true),
+                        (this.style.border = "1px solid red"),
+                        WSpush(widget.socket, widget.topic, 1))}
+                        ><span
+                          >{!widget.options[0]
+                            ? "OFF"
+                            : widget.options[0]}</span
+                        ></button
+                      ><br />
+                    {:else}
+                      <button
+                        class="btn"
+                        on:click={((widget["send"] = true),
+                        (this.style.border = "1px solid red"),
+                        WSpush(widget.socket, widget.topic, 0))}
+                        ><span
+                          >{!widget.options[1] ? "ON" : widget.options[1]}</span
+                        ></button
+                      ><br />
+                    {/if}
+                  </td>
+                {/if}
+                -- chart --
+                {#if widget.widget === "chart"}
+                  <td colspan="3">
+                    {#if widget.status}
+                      {#if widget.topic.includes("_2")}
+                        <Chart
+                          data={widget.status}
+                          {lineOptions}
+                          {axisOptions}
+                          colors={[!widget.color ? "red" : widget.color]}
+                          type={!widget.type ? "line" : widget.type}
+                          height="300"
+                        />
+                      {:else if !widget.topic.includes("_1")}
+                        {widget.descr}
+                        <Chart
+                          data={widget.status}
+                          {lineOptions}
+                          {axisOptions}
+                          colors={[!widget.color ? "light-blue" : widget.color]}
+                          type={!widget.type ? "line" : widget.type}
+                          height="300"
+                        />
+                      {/if}
+                    {/if}
+                  </td>
+                {/if}
+                -- range --
+                {#if widget.widget === "range"}
+                  <td colspan="3">
+                    <div>
+                      {widget.descr}
+                      {widget.status / 10}
+                      {widget.after}
+                    </div>
+
+                    <label>
+                      <input
+                        type="range"
+                        bind:value={widget.status}
+                        min={widget.min}
+                        max={widget.max * 10}
+                        on:change={WSpush(
+                          widget.socket,
+                          widget.topic,
+                          widget.status
+                        )}
+                      />
+                    </label>
+                  </td>
+                {/if}
+              </tr>
+            {/if}
+          {/if}
+        {/each}
+      </table>
+    </TabPanel>
+  {/each}
+</Tabs>
+-->
+<br /><br />
+<div class="letter" align="center">developed by: avaks@meef.ru</div>
+
+<style>
+  :global(.svelte-tabs__tab-list) {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
+  :global(.svelte-tabs li.svelte-tabs__tab) {
+    color: gray;
+  }
+  :global(.svelte-tabs li.svelte-tabs__selected) {
+    color: green;
+  }
+  .red {
+    color: crimson;
+  }
+  .green {
+    color: rgb(20, 220, 37);
+  }
+
+  .letter {
+    color: grey;
+    font-size: 60%;
+    padding-left: 15px;
+    opacity: 0.8;
+  }
+  progress {
+    height: 4px;
+  }
+
+  input {
+    text-align: right;
+    border: 1px solid #6699ff;
+    width: 100%;
+  }
+
+  label {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
+  :global(body.light-mode) {
+    background-color: white;
+  }
+
+  :global(body.dark-mode) {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+
+  :global(body.dark-mode) span {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+
+  :global(body.dark-mode) div {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+
+  :global(body.dark-mode) input {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+
+  :global(body.dark-mode) select {
+    background-color: #1d3040;
+    color: #bfc2c7;
+    padding: 10px;
+    border-radius: 10px;
+    padding-left: 20px;
+  }
+  :global(body.dark-mode) lable {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  select {
+    padding: 10px;
+    border-radius: 10px;
+    padding-left: 20px;
+  }
+  .Shutter {
+    background-color: hsl(200, 16%, 96%);
+    color: blak;
+    padding: 10px;
+    border-radius: 5px;
+  }
+  :global(body.dark-mode) .Shutter {
+    background-color: #1d3040;
+    color: #bfc2c7;
+    padding: 10px;
+    border-radius: 5px;
+  }
+
+  .btn {
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 1px;
+    margin: 0 0px 5px 0;
+    outline: none;
+    border: 1px solid #63b8ff;
+    border-radius: 10px;
+    height: 36px;
+    line-height: 0;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    color: #fff;
+    background-color: #fff;
+    position: relative;
+    overflow: hidden;
+    vertical-align: top;
+    cursor: pointer;
+    user-select: none;
+    appearance: none;
+    touch-action: manipulation;
+  }
+  .btn span {
+    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
+    display: block;
+    box-sizing: border-box;
+    padding: 0 8px;
+    height: 32px;
+    line-height: 33px;
+    border: 1px solid #63b8ff;
+    border-radius: 8px;
+    font-size: 14px;
+    color: black;
+    text-align: center;
+    font-weight: 600;
+  }
+  .btnoff {
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 1px;
+    margin: 0 0px 5px 0;
+    outline: none;
+    border: 1px solid rgb(85, 84, 84);
+    border-radius: 10px;
+    height: 36px;
+    line-height: 0;
+    font-size: 14px;
+    font-weight: 500;
+    text-decoration: none;
+    color: #fff;
+    background-color: #fff;
+    position: relative;
+    overflow: hidden;
+    vertical-align: top;
+    cursor: pointer;
+    user-select: none;
+    appearance: none;
+    touch-action: manipulation;
+  }
+  .btnoff span {
+    box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.5);
+    display: block;
+    box-sizing: border-box;
+    padding: 0 8px;
+    height: 32px;
+    line-height: 33px;
+    border: 1px solid rgb(85, 84, 84);
+    border-radius: 8px;
+    font-size: 14px;
+    color: black;
+    text-align: center;
+    font-weight: 600;
+  }
+  .swipe-holder {
+    height: 30vh;
+    width: 100%;
+  }
+  button {
+    color: gray;
+    background-color: #fff;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-top-width: 0px;
+    border-left-width: 0px;
+    border-right-width: 0px;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+  :global(body.dark-mode) button {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+</style>
diff --git a/examples/Setup.svelte b/examples/Setup.svelte
new file mode 100644
index 0000000..fbe7291
--- /dev/null
+++ b/examples/Setup.svelte
@@ -0,0 +1,1696 @@
+<script>
+  import Cookies, { get } from "js-cookie";
+  import Tooltip from "./Tooltip.svelte";
+  import Box from "./Box.svelte";
+  //import Toggle from "svelte-toggle";
+  import Logo from "./Logo.svelte";
+
+  let devices = [];
+  let socket = [];
+  let connectionType = "WS";
+  let myip = document.location.hostname;
+  let NetworkMap = [];
+  let Conf = [];
+  let name;
+  let urlMQTT = "";
+  let editJSON;
+
+  // ==на время разработки==
+  myip = "192.168.36.139";
+  /*	if (Conf==""){
+		Conf = [{
+ "ip": myip,		
+  "name": "IoT",
+  "chipID": "",
+  "apssid": "IoT",
+  "appass": "",
+  "routerssid": "EURECA",
+  "routerpass": "4455667788",
+  "timezone": 3,
+  "ntp": "pool.ntp.org",
+  "mqttServer": "",
+  "mqttPort": 0,
+  "mqttPortwss":"",
+  "mqttPath":"",
+  "mqttPrefix": "",
+  "mqttUser": "",
+  "mqttPass": "",
+  "mqttServer2": "",
+  "mqttPort2": 0,
+  "mqttPrefix2": "",
+  "mqttUser2": "",
+  "mqttPass2": "",
+  "scen": "1",
+  "telegramApi": "",
+  "telegonof": "0",
+  "teleginput": "0",
+  "autos": "1",
+  "weblogin": "admin",
+  "webpass": "admin",
+  "MqttIn": "0",
+  "MqttOut": "0",
+  "blink": "0",
+  "oneWirePin": "2",
+  "serverip": "http://meef.ru",
+  "uart": "0",
+  "uartS": "9600",
+  "uartTX": "12",
+  "uartRX": "13",
+  "grafmax": "0",
+  "socket": "0"
+}]; 
+}*/
+
+  // темная тема
+  let darkMode = false;
+  //	data.darktheme=(Cookies.get('darktheme') == "true") ? true : false;
+  if (Cookies.get("darktheme") == "true") {
+    window.document.body.classList.value = "dark-mode";
+  }
+  function toggleTheme() {
+    window.document.body.classList.toggle("dark-mode");
+  }
+
+  // подключаемся к локальной машине, получаем карту сети
+  function getNetworkMap() {
+    devices = JSON.parse(
+      '[{"deviceID":"","deviceIP":"' + myip + '","deviceName":""}]'
+    );
+    devices[0].id = 0;
+    devices[0].status = false;
+    console.log("Подключаемся к WS на localhost ", devices);
+    if (connectionType != "MQTT") {
+      socket[0] = new WebSocket("ws://" + myip + "/ws");
+      socket[0].addEventListener("open", function (event) {
+        devices[0].id = 0;
+        devices[0].status = true;
+        devices = devices;
+        console.log("WS CONNECTED! " + myip);
+
+        // получаем "карту сети" по websocket
+        socket[0].send("getNetworkMap");
+        // получаем конфигурацию ESP по websocket
+        socket[0].send("getconfigsetupjson");
+      });
+      socket[0].addEventListener("message", function (event) {
+        if (Cookies.get("consolelog") == "true") {
+          console.log("NEW data packet " + myip, event.data);
+        }
+        // запускаем обработку пришедшего сообщения
+        //console.log(event.data);
+        addMessage(event.data, 0);
+      });
+      // Обработка ошибок websocket
+      socket[0].addEventListener("close", (event) => {
+        if (item) {
+          console.log("ws close " + item.deviceIP);
+        } else {
+          console.log("ws close " + myip);
+        }
+        devices[0].status = false;
+        devices = devices;
+      });
+      socket[0].addEventListener("error", function (event) {
+        if (item) {
+          console.log(item.deviceIP + " WebSocket error: ", event);
+        } else {
+          console.log(myip + " WebSocket error: ", event);
+        }
+
+        devices[0].status = false;
+        devices = devices;
+      });
+    }
+  }
+  getNetworkMap();
+
+  // добавляем новые подключения из карты сети
+
+  function addConnection(devices) {
+    if (devices) {
+      devices.forEach(function (item, i, arr) {
+        if (item.deviceIP != myip) {
+          console.log("trying connect", item, i);
+          socket[i] = new WebSocket("ws://" + item.deviceIP + "/ws");
+          socket[i].addEventListener("open", function (event) {
+            devices[i].id = i;
+            devices[i].status = true;
+            devices = devices;
+            console.log("WS CONNECTED! " + item.deviceIP, i);
+
+            // получаем конфигурацию ESP по websocket
+
+            socket[i].send("getconfigsetupjson");
+          });
+          socket[i].addEventListener("message", function (event) {
+            // запускаем обработку пришедшего сообщения
+            // вывод отладочных сообщений в консоль
+
+            if (Cookies.get("consolelog") == "true") {
+              console.log("NEW data packet " + item.deviceIP, event.data);
+            }
+
+            addMessage(event.data, i);
+          });
+          // Обработка ошибок websocket
+          socket[i].addEventListener("close", (event) => {
+            console.log("ws close " + item.deviceIP);
+            devices[i].status = false;
+            devices = devices;
+            NetworkMap = NetworkMap;
+            console.log(devices);
+          });
+          socket[i].addEventListener("error", function (event) {
+            console.log(item.deviceIP + " WebSocket error: ", event);
+            devices[i].status = false;
+            devices = devices;
+            NetworkMap = NetworkMap;
+            console.log(devices);
+          });
+        }
+      });
+      devices[0].id = 0;
+      devices[0].status = true;
+    }
+  }
+
+  // addConnection(devices);
+
+  function addMessage(data, socket) {
+    NetworkMap = NetworkMap;
+    devices = devices;
+
+    try {
+      data = JSON.parse(data);
+
+      // editor
+      if (data.widget) {
+        editJSON = data;
+        editJSON = JSON.stringify(editJSON);
+      }
+      // Если пришла карта сети
+      if (data.deviceID) {
+        editJSON = data;
+        editJSON = JSON.stringify(editJSON);
+      }
+
+      data.socket = socket;
+      // Если пришел Config
+      if (data.apssid) {
+        //	console.log(data);
+        data.webMQTT = false;
+        data.consolelog = false;
+        data.darktheme = false;
+        data.webMQTT = Cookies.get("webMQTT") == "true" ? true : false;
+        data.consolelog = Cookies.get("consolelog") == "true" ? true : false;
+        data.darktheme = Cookies.get("darktheme") == "true" ? true : false;
+
+        Conf = [...Conf, data];
+        // Запоминаем настройки MQTT дря быстрой смены в выпадающем списке
+        if (Conf != "") {
+          MQTTsample[0].mqttServer = Conf[0].mqttServer;
+          MQTTsample[0].mqttPort = Conf[0].mqttPort;
+          MQTTsample[0].mqttPortwss = Conf[0].mqttPortwss;
+          MQTTsample[0].mqttPrefix = Conf[0].mqttPrefix;
+          MQTTsample[0].mqttUser = Conf[0].mqttUser;
+          MQTTsample[0].mqttPass = Conf[0].mqttPass;
+          MQTTsample[0].mqttPath = Conf[0].mqttPath;
+        }
+      }
+
+      // Если пришла карта сети
+      if (data[0].deviceID) {
+        console.log("пришла карта сети :", data);
+        devices = data;
+        editJSON = data;
+        editJSON = JSON.stringify(editJSON);
+        //Conf=[];
+
+        addConnection(devices);
+        NetworkMap = data;
+      }
+    } catch (e) {
+      if (Cookies.get("consolelog") == "true") {
+        console.log("ERROR parse JSON", data);
+      }
+    }
+  }
+
+  let inputIP = "";
+  let inputName = "";
+
+  let edit = true;
+  function handleClick() {
+    edit = true;
+  }
+  function handleClick1() {
+    edit = false;
+  }
+
+  function addTodo(inputIP, inputName) {
+    NetworkMap = [
+      ...NetworkMap,
+      {
+        deviceID: "0000000-0000000",
+        deviceIP: inputIP,
+        deviceName: inputName,
+      },
+    ];
+    NetworkMap = NetworkMap;
+    inputIP = "";
+    inputName = "";
+    // сохраняем NetworkMap.json   // Надо добавить перебор сокетов
+    //	socket.forEach(function(asd, i, arr) {
+    socket[0].send("{NetworkMap:" + JSON.stringify(NetworkMap) + "}");
+    //});
+  }
+
+  function removeTodo(id) {
+    NetworkMap.splice(id, 1);
+    NetworkMap = NetworkMap;
+    // сохраняем NetworkMap.json // Надо добавить перебор сокетов
+    //socket.forEach(function(asd, i, arr) {
+    socket[0].send("{NetworkMap:" + JSON.stringify(NetworkMap) + "}");
+    //});
+  }
+
+  let MQTTsample = [
+    {
+      mqttServer: "",
+      mqttPort: "",
+      mqttPortwss: "",
+      mqttPrefix: "",
+      mqttUser: "",
+      mqttPass: "",
+      mqttPath: "",
+      placeholder: "",
+    },
+    {
+      mqttServer: "meef.ru",
+      mqttPort: 1883,
+      mqttPortwss: 18883,
+      mqttPrefix: "/IotManager",
+      mqttUser: "IotManager:guest",
+      mqttPass: "guest",
+      mqttPath: "/ws",
+      placeholder: "",
+    },
+    {
+      mqttServer: "test.mosquitto.org",
+      mqttPort: 1883,
+      mqttPortwss: 8081,
+      mqttPrefix: "/IotManager",
+      mqttUser: "",
+      mqttPass: "",
+      mqttPath: "/ws",
+      placeholder: "",
+    },
+    {
+      mqttServer: "broker.hivemq.com",
+      mqttPort: 1883,
+      mqttPortwss: 8000,
+      mqttPrefix: "/IotManager",
+      mqttUser: "",
+      mqttPass: "",
+      mqttPath: "/mqtt",
+      placeholder: "",
+    },
+    {
+      mqttServer: "broker.mqttdashboard.com",
+      mqttPort: 1883,
+      mqttPortwss: 8000,
+      mqttPrefix: "/IotManager",
+      mqttUser: "",
+      mqttPass: "",
+      mqttPath: "/mqtt",
+      placeholder: "",
+    },
+    {
+      mqttServer: "broker.emqx.io",
+      mqttPort: 1883,
+      mqttPortwss: 8083,
+      mqttPrefix: "/IotManager",
+      mqttUser: "",
+      mqttPass: "",
+      mqttPath: "/mqtt",
+      placeholder: "",
+    },
+    {
+      mqttServer: "m3.wqtt.ru",
+      mqttPort: "",
+      mqttPortwss: "",
+      mqttPrefix: "/IotManager",
+      mqttUser: "",
+      mqttPass: "",
+      mqttPath: "",
+      placeholder: "Параметры указаны в личном кабинете насайте wqtt.ru",
+    },
+    {
+      mqttServer: "91.204.228.124",
+      mqttPort: 1883,
+      mqttPortwss: "",
+      mqttPrefix: "/IotManager",
+      mqttUser: "rise",
+      mqttPass: "23ri22se32",
+      mqttPath: "",
+      placeholder: "",
+    },
+  ];
+
+  let selected;
+  let i = 0;
+  let id = 0;
+  let wiget = [];
+
+  function chengConf(id) {
+    i = id;
+  }
+  function chengMQTT(selected) {
+    Conf[i]["mqttServer"] = selected.mqttServer;
+    Conf[i]["mqttPort"] = selected.mqttPort;
+    Conf[i]["mqttPortwss"] = selected.mqttPortwss;
+    Conf[i]["mqttPrefix"] =
+      selected.mqttPrefix + Math.floor(Math.random() * 10000);
+    Conf[i]["mqttUser"] = selected.mqttUser;
+    Conf[i]["mqttPass"] = selected.mqttPass;
+    Conf[i]["mqttPath"] = selected.mqttPath;
+    Conf[i]["placeholder"] = selected.placeholder;
+
+    changeConf(selected.mqttServer, "mqttServer", i);
+    changeConf(selected.mqttPort, "mqttPort", i);
+    changeConf(selected.mqttPortwss, "mqttPortwss", i);
+    changeConf(selected.mqttPrefix, "mqttPrefix", i);
+    changeConf(selected.mqttUser, "mqttUser", i);
+    changeConf(selected.mqttPass, "mqttPass", i);
+    changeConf(selected.mqttPath, "mqttPath", i);
+  }
+  let m;
+
+  function changeConf(val, name, socet) {
+    console.log(val, name, socet);
+    socket[socet].send(
+      '{"setconfigsetupjson":"1", "name":"' + name + '", "val":"' + val + '"}'
+    );
+    Cookies.set(name, val, { expires: 365 });
+  }
+
+  function GetMQTThttp(val, name, socet) {
+    console.log(val, name, socet);
+    socket[socet].send(
+      '{"setconfigsetupjson":"1", "name":"' + name + '", "val":"' + val + '"}'
+    );
+    Cookies.set(name, val, { expires: 365 });
+
+    if (val == true) {
+      urlMQTT =
+        "https://meef.ru/dashboard/?id=" +
+        Math.floor(Math.random() * 100000000);
+      //urlMQTT = "https://192.168.0.10/?id=" + Math.floor(Math.random() * 100000000);
+      Cookies.set("urlMQTT", urlMQTT, { expires: 365 });
+    } else {
+      urlMQTT = "";
+      Cookies.set("urlMQTT", urlMQTT, { expires: 365 });
+    }
+  }
+
+  function reboot(selected) {
+    socket[selected].send('{"command":"reboot"}');
+  }
+  function Pastesettings(i) {
+    Conf[i]["mqttServer"] = Conf[0]["mqttServer"];
+    Conf[i]["mqttPort"] = Conf[0]["mqttPort"];
+    Conf[i]["mqttPortwss"] = Conf[0]["mqttPortwss"];
+    Conf[i]["mqttPrefix"] = Conf[0]["mqttPrefix"];
+    Conf[i]["mqttUser"] = Conf[0]["mqttUser"];
+    Conf[i]["mqttPass"] = Conf[0]["mqttPass"];
+    Conf[i]["mqttPath"] = Conf[0]["mqttPath"];
+
+    Conf[i]["mqttServer2"] = Conf[0]["mqttServer2"];
+    Conf[i]["mqttPort2"] = Conf[0]["mqttPort2"];
+    Conf[i]["mqttPortwss2"] = Conf[0]["mqttPortwss2"];
+    Conf[i]["mqttPrefix2"] = Conf[0]["mqttPrefix2"];
+    Conf[i]["mqttUser2"] = Conf[0]["mqttUser2"];
+    Conf[i]["mqttPass2"] = Conf[0]["mqttPass2"];
+    Conf[i]["mqttPath2"] = Conf[0]["mqttPath2"];
+
+    Conf[i]["telegramApi"] = Conf[0]["telegramApi"];
+    Conf[i]["telegonof"] = Conf[0]["telegonof"];
+    Conf[i]["teleginput"] = Conf[0]["teleginput"];
+    Conf[i]["autos"] = Conf[0]["autos"];
+    Conf[i]["chatId"] = Conf[0]["chatId"];
+
+    changeConf(Conf[i]["mqttServer"], "mqttServer", i);
+    changeConf(Conf[i]["mqttPort"], "mqttPort", i);
+    changeConf(Conf[i]["mqttPortwss"], "mqttPortwss", i);
+    changeConf(Conf[i]["mqttPrefix"], "mqttPrefix", i);
+    changeConf(Conf[i]["mqttUser"], "mqttUser", i);
+    changeConf(Conf[i]["mqttPass"], "mqttPass", i);
+    changeConf(Conf[i]["mqttPath"], "mqttPath", i);
+
+    changeConf(Conf[i]["mqttServer2"], "mqttServer2", i);
+    changeConf(Conf[i]["mqttPort2"], "mqttPort2", i);
+    changeConf(Conf[i]["mqttPortwss2"], "mqttPortwss2", i);
+    changeConf(Conf[i]["mqttPrefix2"], "mqttPrefix2", i);
+    changeConf(Conf[i]["mqttUser2"], "mqttUser2", i);
+    changeConf(Conf[i]["mqttPass2"], "mqttPass2", i);
+    changeConf(Conf[i]["mqttPath2"], "mqttPath2", i);
+
+    changeConf(Conf[i]["telegramApi"], "telegramApi", i);
+    changeConf(Conf[i]["telegonof"], "telegonof", i);
+    changeConf(Conf[i]["teleginput"], "teleginput", i);
+    changeConf(Conf[i]["autos"], "autos", i);
+    changeConf(Conf[i]["chatId"], "chatId", i);
+  }
+
+  // обратный отсчет для 		Shutter
+  let frame;
+  let elapsed = 0;
+  let duration = 5000;
+  let last_time = window.performance.now();
+  (function update() {
+    frame = requestAnimationFrame(update);
+    const time = window.performance.now();
+    elapsed += Math.min(time - last_time, duration - elapsed);
+    last_time = time;
+    if (elapsed == duration) {
+      Shutterhiddn();
+    }
+  })();
+
+  let Shuttervisibl = "visibility: hidden;";
+
+  function Shuttervisibil() {
+    Shuttervisibl = "visibility: visible;";
+    //	duration = sec;
+    elapsed = 0;
+    if (elapsed === duration) {
+      Shuttervisibl = "visibility: hidden;";
+    }
+  }
+  function Shutterhiddn() {
+    Shuttervisibl = "visibility: hidden;";
+  }
+  Shuttervisibil();
+
+  // Селектор wiget.json для editor
+  let fileSelected;
+
+  let widgetfiles = [
+    { id: 0, name: `` },
+    { id: 1, name: `anydataTemp.json` },
+    { id: 2, name: `anydataHum.json` },
+    { id: 3, name: `anydataPress.json` },
+    { id: 4, name: `alarm.json` },
+    { id: 5, name: `anydataAlarm.json` },
+    { id: 6, name: `anydataAmp.json` },
+    { id: 7, name: `anydataHtz.json` },
+    { id: 8, name: `anydataPpb.json` },
+    { id: 9, name: `anydataPpm.json` },
+    { id: 10, name: `anydataTime.json` },
+    { id: 11, name: `anydataVlt.json` },
+    { id: 12, name: `anydataWhr.json` },
+    { id: 13, name: `anydataWtt.json` },
+    { id: 14, name: `btn.json` },
+    { id: 15, name: `select.json` },
+    { id: 16, name: `chart.json` },
+    { id: 17, name: `chart3.json` },
+    { id: 18, name: `NetworkMap.json` },
+  ];
+
+  const syntaxHighlight = (json) => {
+    try {
+      json = JSON.stringify(JSON.parse(json), null, 4);
+    } catch (e) {
+      return json;
+    }
+    json = json
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;");
+    json = json.replace(
+      /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+      function (match) {
+        return match;
+      }
+    );
+    return json;
+  };
+  //	editJSON=JSON.stringify(editJSON);
+
+  // получаем файл с esp
+  function widgetFileChenged(fileSelected, i) {
+    console.log(fileSelected.name);
+    if (
+      fileSelected.name == "NetworkMap.json" ||
+      fileSelected.name == "config.json"
+    ) {
+      socket[i].send('{"getFileName" : "' + fileSelected.name + '"}');
+    } else {
+      socket[i].send('{"getFileName" : "widgets/' + fileSelected.name + '"}');
+    }
+  }
+  // отправляем файл на ESP
+  function handleSubmit(val1, wigetJSON, i) {
+    let newWigetJSON = document.getElementById("S1").value;
+    if (newWigetJSON) {
+      newWigetJSON = JSON.parse(newWigetJSON);
+      if (fileSelected.name == "NetworkMap.json") {
+        newWigetJSON.setFileName = fileSelected.name;
+      } else {
+        newWigetJSON.setFileName = "widgets/" + fileSelected.name;
+      }
+      console.log("newWigetJSON: ", newWigetJSON);
+      newWigetJSON = JSON.stringify(newWigetJSON);
+
+      socket[i].send(newWigetJSON);
+    }
+  }
+</script>
+
+<body>
+  {#if connectionType == "MQTT"}{:else}
+    <div
+      class="Shutter"
+      style="{Shuttervisibl} position: absolute; z-index: 1; right: 1%; top: -45px"
+      id="layer1"
+    >
+      <span>
+        <progress value={elapsed / duration} />
+        <br /><br />
+        <!--Перечисляем девайсы в сети-->
+        {#each devices as NetworkDevice, i}
+          {#if !NetworkDevice.status && NetworkDevice.status != false}
+            <p align="left" style=" margin-top: -5px; margin-bottom: -5px">
+              {NetworkDevice.deviceIP}
+              {NetworkDevice.deviceName} waiting
+            </p>
+          {/if}
+          {#if NetworkDevice.status == true}
+            <p
+              align="left"
+              style="color: green; margin-top: -5px; margin-bottom: -5px"
+            >
+              {NetworkDevice.deviceIP}
+              {NetworkDevice.deviceName} connected
+            </p>
+          {/if}
+          {#if NetworkDevice.status == false}
+            <p
+              align="left"
+              style="color: red; margin-top: -5px; margin-bottom: -5px"
+              on:click={addConnection(devices)}
+            >
+              {NetworkDevice.deviceIP}
+              {NetworkDevice.deviceName} disconnected
+            </p>
+          {/if}
+        {/each}
+      </span>
+    </div>
+  {/if}
+  {#if connectionType == "MQTT"}
+    <div
+      style=" position: absolute;  z-index: 2; right: 2%; top: 1%"
+      id="layerMQTT"
+    >
+      MQTT
+    </div>
+  {:else}
+    <div
+      on:mouseenter={Shuttervisibil}
+      on:click={Shutterhiddn}
+      style=" position: absolute;  z-index: 2; right: 1.5%; top: -45px"
+      id="layerWS"
+    >
+      localNET
+    </div>
+  {/if}
+
+  <div
+    style=" position: absolute;  z-index: 2; right: 90px; top: -45px; color:red"
+    on:click={toggleTheme}
+    id="toggleTheme"
+  >
+    🔆
+  </div>
+
+  {#if Conf != ""}
+    <Box>
+      <b on:click={handleClick}>Network Map</b>
+      <span on:click={handleClick1} class="letter1" />
+      {#if NetworkMap == ""}
+        <b>Файл с картой сети еще не создан</b>
+      {/if}
+      <div>Навсех добавляемых ESP должнабыть такая же прошивка !!!</div>
+
+      <table border="0" width="100%">
+        {#if NetworkMap != ""}
+          {#each NetworkMap as espconf, m}
+            <tr>
+              <td width="1%" class="letter2">IP</td><td
+                ><input
+                  class:red={espconf["status"] == false}
+                  type="text"
+                  disabled
+                  required
+                  bind:value={NetworkMap[m]["deviceIP"]}
+                />
+              </td>
+              <td width="1%">Name</td><td width="30%"
+                ><input
+                  type="text"
+                  required
+                  bind:value={NetworkMap[m]["deviceName"]}
+                /></td
+              >
+              <td><button on:click={() => removeTodo(m)}>-</button></td>
+            </tr>
+          {/each}
+
+          <tr>
+            <td width="1%" class="letter2">IP</td><td
+              ><input type="text" bind:value={inputIP} /></td
+            >
+            <td width="1%">Name</td><td width="30%"
+              ><input type="text" bind:value={inputName} /></td
+            >
+            <td
+              ><button on:click={() => addTodo(inputIP, inputName)}>+</button
+              ></td
+            >
+          </tr>
+        {:else}
+          <tr>
+            <td width="1%" class="letter2">IP</td><td
+              ><input
+                disabled
+                type="text"
+                required
+                bind:value={Conf[i].ip}
+              /></td
+            >
+            <td width="1%">Name</td><td width="30%"
+              ><input type="text" required bind:value={Conf[i].name} /></td
+            >
+            <td
+              ><button on:click={() => addTodo(Conf[i].ip, Conf[i].name)}
+                >+</button
+              ></td
+            ></tr
+          >
+        {/if}
+      </table>
+      <br />
+      <div>После добавления ESP нажмите "F5" что обновить страницу</div>
+    </Box>
+
+    <b>Select ESP</b>
+    <span
+      ><select bind:value={selected} on:change={chengConf(selected)}>
+        {#each Conf as espconf, n}
+          <option value={n}>
+            <b>{Conf[n]["name"]}</b> ({Conf[n]["ip"]})
+          </option>
+        {/each}
+      </select></span
+    >
+
+    <!--WIFI-->
+    <button on:click={Pastesettings(i)}
+      ><Tooltip
+        title="Вставить настройки MQTT и Telegram из верхней в списке ESP "
+        >Paste settings</Tooltip
+      ></button
+    >
+    <button on:click={reboot(Conf[i].socket)}>Reboot</button>
+    <Box>
+      <b on:click={handleClick}>WIFI</b><span
+        on:click={handleClick1}
+        class="letter1"
+      />
+      {#if edit == true}
+        <table border="0" width="100%">
+          <tr>
+            <td width="40%">ESP name</td>
+
+            <td>
+              <input
+                type="text"
+                placeholder="IotManager"
+                required
+                bind:value={Conf[i].name}
+                on:change={changeConf(Conf[i].name, "name", Conf[i].socket)}
+              />
+            </td>
+
+            <Tooltip
+              title="Имя устройства должно состоять из английских букв и иметь длинну от 6 до 12 символов"
+            >
+              <td>?</td>
+            </Tooltip>
+          </tr>
+          <hr />
+          <tr>
+            <td>WIFI name</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i].routerssid}
+                on:change={changeConf(
+                  Conf[i].routerssid,
+                  "routerssid",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip
+              title="После того как вы введете логин пароль от вашего wifi роутера необходимо нажать кнопку сохранить, а затем обязательно нажать кнопку перезагрузить устройство внизу этой страницы"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>WIFI password</td>
+            <td
+              ><input
+                type="password"
+                bind:value={Conf[i]["routerpass"]}
+                on:change={changeConf(
+                  Conf[i].routerpass,
+                  "routerpass",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip
+              title="После того как вы введете логин пароль от вашего wifi роутера необходимо нажать кнопку сохранить, а затем обязательно нажать кнопку перезагрузить устройство внизу этой страницы"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <hr />
+          <tr>
+            <td>AP name</td>
+            <td
+              ><input
+                type="text"
+                required
+                bind:value={Conf[i]["apssid"]}
+                on:change={changeConf(Conf[i].apssid, "apssid", Conf[i].socket)}
+              /></td
+            >
+            <Tooltip
+              title="Устройство постоянно сканирует сеть на наличие wifi. Если роутер отключен, то устройство автоматически перейдет в режим точки доступа. Когда wifi появится устройство автоматически подключится к роутеру снова, и выключит точку доступа"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+        </table>
+      {/if}
+    </Box>
+
+    <!-- Users-->
+    <Box>
+      <b on:click={handleClick}>Users</b><span
+        on:click={handleClick1}
+        class="letter1"
+      />
+      {#if edit == true}
+        <table border="0" width="100%">
+          <tr>
+            <td width="40%">WEB admin login</td>
+            <td
+              ><input
+                type="text"
+                required
+                bind:value={Conf[i]["weblogin"]}
+                on:change={changeConf(
+                  Conf[i].weblogin,
+                  "weblogin",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>WEB admin password</td>
+            <td
+              ><input
+                type="password"
+                required
+                bind:value={Conf[i]["webpass"]}
+                on:change={changeConf(
+                  Conf[i].webpass,
+                  "webpass",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+        </table>
+      {/if}
+    </Box>
+
+    <!--Time-->
+    <Box>
+      <b on:click={handleClick}>Time </b><span
+        on:click={handleClick1}
+        class="letter1"
+      />
+      {#if edit == true}
+        <table border="0" width="100%">
+          <tr>
+            <td width="40%">Time Zone</td>
+            <td
+              ><input
+                type="text"
+                required
+                bind:value={Conf[i]["timezone"]}
+                on:change={changeConf(
+                  Conf[i].timezone,
+                  "timezone",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>NTP server</td>
+            <td
+              ><input
+                type="text"
+                required
+                bind:value={Conf[i]["ntp"]}
+                on:change={changeConf(Conf[i].ntp, "ntp", Conf[i].socket)}
+              /></td
+            >
+            <Tooltip
+              title="После изменения поля NTP сервер необходимо перезагрузить устройство"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+        </table>
+      {/if}
+    </Box>
+
+    <!--MQTT-->
+    <Box>
+      <b on:click={handleClick}>MQTT</b>
+      <select bind:value={selected} on:change={chengMQTT(selected)}>
+        {#each MQTTsample as mqtt, n}
+          <option value={mqtt}>
+            <b>{mqtt.mqttServer}</b>
+          </option>
+        {/each}
+      </select> <span>Готовые шаблоны</span>
+
+      <span on:click={handleClick1} class="letter1">
+        <!--	{@html Conf[i]["warning4"]}-->
+      </span>
+      {#if edit == true}
+        <table border="0" width="100%">
+          <tr>
+            <td width="40%">MQTT server</td>
+            <td
+              ><input
+                type="text"
+                placeholder={Conf[i]["placeholder"]}
+                required
+                bind:value={Conf[i]["mqttServer"]}
+                on:change={changeConf(
+                  Conf[i].mqttServer,
+                  "mqttServer",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip
+              title="После изменеения параметров MQTT требуетсяперезагрузка"
+            >
+              <td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>MQTT port (TCP)</td>
+            <td
+              ><input
+                type="text"
+                required
+                placeholder={Conf[i]["placeholder"]}
+                bind:value={Conf[i]["mqttPort"]}
+                on:change={changeConf(
+                  Conf[i].mqttPort,
+                  "mqttPort",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip
+              title="После изменеения параметров MQTT требуетсяперезагрузка"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>MQTT wss port (TLS)</td>
+            <td
+              ><input
+                type="text"
+                placeholder={Conf[i]["placeholder"]}
+                bind:value={Conf[i]["mqttPortwss"]}
+                on:change={changeConf(
+                  Conf[i].mqttPortwss,
+                  "mqttPortwss",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip
+              title="Должен быть указан для подключения IOS устройств и подключения к 'Панели управлени' по MQTT через Internet "
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>mqttPrefix</td>
+            <td
+              ><input
+                type="text"
+                required
+                bind:value={Conf[i]["mqttPrefix"]}
+                on:change={changeConf(
+                  Conf[i].mqttPrefix,
+                  "mqttPrefix",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip
+              title="Обратите внимание что поле префикс может состоять только из одного слова и одного разделителя: /prefix, вариант вида: /prefix1/prefix2 работать не будет. После изменения поля prefix необходимо перезагрузить устройство"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>mqttUser</td>
+            <td
+              ><input
+                type="text"
+                placeholder={Conf[i]["placeholder"]}
+                bind:value={Conf[i]["mqttUser"]}
+                on:change={changeConf(
+                  Conf[i].mqttUser,
+                  "mqttUser",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip
+              title="После изменеения параметров MQTT требуетсяперезагрузка"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>mqttPass</td>
+            <td
+              ><input
+                type="text"
+                placeholder={Conf[i]["placeholder"]}
+                bind:value={Conf[i]["mqttPass"]}
+                on:change={changeConf(
+                  Conf[i].mqttPass,
+                  "mqttPass",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>mqttPath</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["mqttPath"]}
+                on:change={changeConf(
+                  Conf[i].mqttPath,
+                  "mqttPath",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <br />
+          <tr>
+            <td width="40%">Web dashbord over MQTT</td>
+            <td>
+              <form
+                id="mqttform"
+                method="post"
+                action={urlMQTT}
+                onsubmit="fmSubmit()"
+              >
+                <input
+                  type="checkbox"
+                  bind:checked={Conf[i].webMQTT}
+                  on:change={GetMQTThttp(
+                    Conf[i].webMQTT,
+                    "webMQTT",
+                    Conf[i].socket
+                  )}
+                />
+                <input
+                  hidden
+                  type="text"
+                  id="id_user"
+                  name="id_user"
+                  value={urlMQTT}
+                />
+                <input
+                  hidden
+                  type="text"
+                  id="mqttServer"
+                  name="mqttServer"
+                  value={Conf[i]["mqttServer"]}
+                />
+                <input
+                  hidden
+                  type="text"
+                  id="mqttPort"
+                  name="mqttPort"
+                  value={Conf[i]["mqttPort"]}
+                />
+                <input
+                  hidden
+                  type="text"
+                  id="mqttPortwss"
+                  name="mqttPortwss"
+                  value={Conf[i]["mqttPortwss"]}
+                />
+                <input
+                  hidden
+                  type="text"
+                  id="mqttPrefix"
+                  name="mqttPrefix"
+                  value={Conf[i]["mqttPrefix"]}
+                />
+                <input
+                  hidden
+                  type="text"
+                  id="mqttUser"
+                  name="mqttUser"
+                  value={Conf[i]["mqttUser"]}
+                />
+                <input
+                  hidden
+                  type="text"
+                  id="mqttPass"
+                  name="mqttPass"
+                  value={Conf[i]["mqttPass"]}
+                />
+                <input
+                  hidden
+                  type="text"
+                  id="mqttPath"
+                  name="mqttPath"
+                  value={Conf[i]["mqttPath"]}
+                />
+
+                {#if Conf[i].webMQTT == true}
+                  <input type="submit" value="перейти на MQTT" />
+                  <!--<a href="{Cookies.get('urlMQTT')}" onclick="document.getElementById('mqttform').submit(); ">перейти на MQTT</a>-->
+                  {(urlMQTT = Cookies.get("urlMQTT"))}
+                {/if}
+              </form>
+            </td>
+            <Tooltip
+              title="Позволяет поучить доступ к 'Панели управления' через Internet по протоколу MQTT. Должен быть указан MQTT wss port (TLS) "
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+
+          <br /><br /><br /><br /><br />
+
+          <!--MQTT2-->
+          <b>Rreserve MQTT</b>
+          <hr />
+          <br />
+          <tr>
+            <td>MQTT server </td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["mqttServer2"]}
+                on:change={changeConf(
+                  Conf[i].mqttServer2,
+                  "mqttServer2",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr>
+            <td>MQTT port</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["mqttPort2"]}
+                on:change={changeConf(
+                  Conf[i].mqttPort2,
+                  "mqttPort2",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr>
+            <td>MQTT wss port</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["mqttPortwss2"]}
+                on:change={changeConf(
+                  Conf[i].mqttPortwss2,
+                  "mqttPortwss2",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr>
+            <td>mqttPrefix</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["mqttPrefix2"]}
+                on:change={changeConf(
+                  Conf[i].mqttPrefix2,
+                  "mqttPrefix2",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip
+              title="Поле префикс может состоять только из одного слова и одного разделителя: /prefix, вариант вида: /prefix1/prefix2 работать не будет. После изменения поля prefix необходимо перезагрузить устройство"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>mqttUser</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["mqttUser2"]}
+                on:change={changeConf(
+                  Conf[i].mqttUser2,
+                  "mqttUser2",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr>
+            <td>mqttPass</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["mqttPass2"]}
+                on:change={changeConf(
+                  Conf[i].mqttPass2,
+                  "mqttPass2",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>mqttPath</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["mqttPath2"]}
+                on:change={changeConf(
+                  Conf[i].mqttPath2,
+                  "mqttPath2",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr><br />
+        </table>
+      {/if}
+    </Box>
+
+    <!--Telegram-->
+    <Box>
+      <b on:click={handleClick}>Telegram </b><span
+        on:click={handleClick1}
+        class="letter1"
+      />
+      {#if edit == true}
+        <table border="0" width="100%">
+          <br />
+          <tr>
+            <td width="40%">Enable Telegram</td>
+
+            <td>
+              <input
+                type="checkbox"
+                bind:checked={Conf[i]["telegonof"]}
+                on:change={changeConf(
+                  Conf[i]["telegonof"] == true ? 1 : 0,
+                  "telegonof",
+                  Conf[i].socket
+                )}
+              />
+
+              {#if Conf[i]["telegonof"] == 0}
+                {(Conf[i]["telegonof"] = false)}
+              {:else}
+                {(Conf[i]["telegonof"] = true)}
+              {/if}
+            </td>
+
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr /><tr>
+            <td>Enable incoming messages</td>
+
+            <td>
+              <input
+                type="checkbox"
+                bind:checked={Conf[i]["teleginput"]}
+                on:change={changeConf(
+                  Conf[i]["teleginput"] == true ? 1 : 0,
+                  "teleginput",
+                  Conf[i].socket
+                )}
+              />
+
+              {#if Conf[i]["teleginput"] == 0}
+                {(Conf[i]["teleginput"] = false)}
+              {:else}
+                {(Conf[i]["teleginput"] = true)}
+              {/if}
+            </td>
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr /><tr>
+            <td>Auto get chat ID </td>
+
+            <td>
+              <input
+                type="checkbox"
+                bind:checked={Conf[i]["autos"]}
+                on:change={changeConf(
+                  Conf[i]["autos"] == true ? 1 : 0,
+                  "autos",
+                  Conf[i].socket
+                )}
+              />
+              {#if Conf[i]["autos"] == 0}
+                {(Conf[i]["autos"] = false)}
+              {:else}
+                {(Conf[i]["autos"] = true)}
+              {/if}
+            </td>
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr><br />
+          <tr>
+            <td>Telegram API token</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["telegramApi"]}
+                on:change={changeConf(
+                  Conf[i].telegramApi,
+                  "telegramApi",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr>
+            <td>Telegram chat ID</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["chatId"]}
+                on:change={changeConf(Conf[i].chatId, "chatId", Conf[i].socket)}
+              /></td
+            >
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+        </table>
+      {/if}
+    </Box>
+
+    <!--UART-->
+    <Box>
+      <b on:click={handleClick}>UART </b><span
+        on:click={handleClick1}
+        class="letter1"
+      />
+      {#if edit == true}
+        <table border="0" width="100%">
+          <tr>
+            <td width="40%">Enable UART</td>
+            <td>
+              <input disabled type="checkbox" bind:checked={Conf[i]["???"]} />
+            </td>
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr /><tr>
+            <td>Send all messages to UART</td>
+            <td
+              ><input
+                disabled
+                type="checkbox"
+                bind:checked={Conf[i]["???"]}
+              /></td
+            >
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr><br />
+          <tr>
+            <td>UART speed</td>
+            <td><input disabled type="text" bind:value={Conf[i]["???"]} /></td>
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr>
+            <td>PIN TX</td>
+            <td><input disabled type="text" bind:value={Conf[i]["???"]} /></td>
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr>
+            <td>PIN RX</td>
+            <td><input disabled type="text" bind:value={Conf[i]["???"]} /></td>
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+        </table>
+      {/if}
+    </Box>
+
+    <!-- Developer settings-->
+    <Box>
+      <b on:click={handleClick}>Developer settings</b><span
+        on:click={handleClick1}
+        class="letter1"
+      />
+      {#if edit == true}
+        <table border="0" width="100%">
+          <tr>
+            <td width="40%">Update server</td>
+            <td
+              ><input
+                type="text"
+                placeholder="http://206.189.49.244"
+                bind:value={Conf[i]["serverip"]}
+                on:change={changeConf(
+                  Conf[i].serverip,
+                  "serverip",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td>Split point graphs</td>
+            <td
+              ><input
+                type="text"
+                bind:value={Conf[i]["grafmax"]}
+                on:change={changeConf(
+                  Conf[i].grafmax,
+                  "grafmax",
+                  Conf[i].socket
+                )}
+              /></td
+            >
+            <Tooltip title="Бла-бла-бла про то как это использовать"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+          <tr>
+            <td width="40%">Use a dark theme</td>
+            <td>
+              {#if Conf[i]["darktheme"] == "false"}
+                <td
+                  ><input
+                    type="checkbox"
+                    on:change={(changeConf("true", "darktheme", Conf[i].socket),
+                    toggleTheme())}
+                  /></td
+                >
+              {:else}
+                <td
+                  ><input
+                    type="checkbox"
+                    bind:checked={Conf[i]["darktheme"]}
+                    on:change={(changeConf(
+                      Conf[i].darktheme,
+                      "darktheme",
+                      Conf[i].socket
+                    ),
+                    toggleTheme())}
+                  /></td
+                >
+              {/if}
+            </td>
+            <Tooltip title=""><td>?</td></Tooltip>
+          </tr>
+          <tr>
+            <td width="40%">Console LOG</td>
+            <td>
+              {#if Conf[i]["consolelog"] == "false"}
+                <td
+                  ><input
+                    type="checkbox"
+                    on:change={changeConf("true", "consolelog", Conf[i].socket)}
+                  /></td
+                >
+              {:else}
+                <td
+                  ><input
+                    type="checkbox"
+                    bind:checked={Conf[i]["consolelog"]}
+                    on:change={changeConf(
+                      Conf[i].consolelog,
+                      "consolelog",
+                      Conf[i].socket
+                    )}
+                  /></td
+                >
+              {/if}
+            </td>
+            <Tooltip
+              title="Включает вывод в консоль браузера всех полученных пакетов"
+              ><td>?</td>
+            </Tooltip>
+          </tr>
+        </table>
+      {/if}
+    </Box>
+    <!-- editor-->
+    <Box>
+      <b on:click={handleClick}>Editor</b><span
+        on:click={handleClick1}
+        class="letter1"
+      />
+      {#if edit == true}
+        <form>
+          <select
+            bind:value={fileSelected}
+            on:change={widgetFileChenged(fileSelected, i)}
+          >
+            {#each widgetfiles as file}
+              <option value={file}>
+                {file.name}
+              </option>
+            {/each}
+          </select>
+
+          <button
+            on:click={handleSubmit(fileSelected, editJSON, Conf[i].socket)}
+            >Save</button
+          >
+
+          <p>
+            <textarea rows="15" id="S1">{syntaxHighlight(editJSON)}</textarea>
+          </p>
+        </form>
+      {/if}
+    </Box>
+  {:else}
+    <p align="center"><Logo /></p>
+  {/if}
+  <br /><br />
+  <div class="letter" align="center">developed by avaks@meef.ru</div>
+</body>
+
+<style>
+  .letter {
+    color: grey;
+    font-size: 60%;
+    padding-left: 0px;
+    opacity: 0.5;
+  }
+  table {
+    margin: 0px;
+    background-color: #fafafa;
+    line-height: 1;
+  }
+  td {
+    text-align: left;
+    padding-left: 1px;
+  }
+  input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    border: 1;
+    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.06);
+    border-radius: 1px;
+  }
+
+  .letter1 {
+    color: grey;
+    font-size: 80%;
+    padding-left: 20px;
+  }
+  .letter2 {
+    text-align: left;
+    padding-left: 0px;
+  }
+  select {
+    padding: 10px;
+    border-radius: 10px;
+    padding-left: 20px;
+    height: 40px;
+    font-size: 13px;
+  }
+  input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border: 1;
+    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.06);
+    border-radius: 1px;
+  }
+
+  input:required:invalid:not(:placeholder-shown) {
+    border-color: crimson;
+  }
+
+  .red {
+    border-color: crimson;
+  }
+  .green {
+    border-color: greenyellow;
+  }
+
+  .tooltip {
+    border: 1px solid #ddd;
+    box-shadow: 1px 1px 1px #ddd;
+    background: white;
+    border-radius: 4px;
+    padding: 4px;
+    position: absolute;
+  }
+  progress {
+    height: 4px;
+  }
+  textarea {
+    width: 100%;
+  }
+
+  button {
+    height: 30px;
+    border-radius: 4px;
+    line-height: 0;
+  }
+
+  :global(body.dark-mode) {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) textarea {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) input {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) select {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) button {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+
+  :global(body.dark-mode) div {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) span {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) lable {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  .Shutter {
+    background-color: hsl(200, 16%, 96%);
+    color: blak;
+    padding: 10px;
+    border-radius: 5px;
+  }
+  :global(body.dark-mode) .Shutter {
+    background-color: #1d3040;
+    color: #bfc2c7;
+    padding: 10px;
+    border-radius: 5px;
+  }
+
+  :global(body.dark-mode) table {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) .letter1 {
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) .letter2 {
+    color: #bfc2c7;
+  }
+  :global(body.dark-mode) b {
+    color: #bfc2c7;
+  }
+
+  :global(body.dark-mode) button {
+    background-color: #1d3040;
+    color: #bfc2c7;
+  }
+</style>
diff --git a/examples/parts.js b/examples/parts.js
new file mode 100644
index 0000000..43ee04e
--- /dev/null
+++ b/examples/parts.js
@@ -0,0 +1 @@
+{syntaxHighlight(JSON.stringify(wigets))}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..ec6d9c8
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1590 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.14.5"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.14.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
+      "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
+      "dev": true
+    },
+    "@babel/highlight": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true
+    },
+    "@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      }
+    },
+    "@polka/url": {
+      "version": "1.0.0-next.15",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
+      "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
+    },
+    "@rollup/plugin-commonjs": {
+      "version": "17.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-17.1.0.tgz",
+      "integrity": "sha512-PoMdXCw0ZyvjpCMT5aV4nkL0QywxP29sODQsSGeDpr/oI49Qq9tRtAsb/LbYbDzFlOydVEqHmmZWFtXJEAX9ew==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "commondir": "^1.0.1",
+        "estree-walker": "^2.0.1",
+        "glob": "^7.1.6",
+        "is-reference": "^1.2.1",
+        "magic-string": "^0.25.7",
+        "resolve": "^1.17.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "11.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
+      "integrity": "sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.19.0"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+          "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+          "dev": true
+        }
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "16.4.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.13.tgz",
+      "integrity": "sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg==",
+      "dev": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
+    "@types/pug": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.5.tgz",
+      "integrity": "sha512-LOnASQoeNZMkzexRuyqcBBDZ6rS+rQxUMkmj5A0PkhhiSZivLIuz6Hxyr1mkGoEZEkk66faROmpMi4fFkrKsBA==",
+      "dev": true
+    },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/sass": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.16.1.tgz",
+      "integrity": "sha512-iZUcRrGuz/Tbg3loODpW7vrQJkUtpY2fFSf4ELqqkApcS2TkZ1msk7ie8iZPB86lDOP8QOTTmuvWjc5S0R9OjQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "dev": true
+    },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
+    "acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "arg": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.0.tgz",
+      "integrity": "sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ==",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.1.tgz",
+      "integrity": "sha512-L8AmtKzdiRyYg7BUXJTzigmhbQRCXFKz6SA1Lqo0+AR2FBbQ4aTAPFSDlOutnFkjhiz8my4agGXog1xlMjPJ6A==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.6",
+        "caniuse-lite": "^1.0.30001243",
+        "colorette": "^1.2.2",
+        "fraction.js": "^4.1.1",
+        "normalize-range": "^0.1.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "browserslist": {
+      "version": "4.16.7",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.7.tgz",
+      "integrity": "sha512-7I4qVwqZltJ7j37wObBe3SoTz+nS8APaNcrBOlgoirb6/HbEU2XxW/LpUDTCngM6iauwFqmRTuOMfyKnFGY5JA==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "^1.0.30001248",
+        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.3.793",
+        "escalade": "^3.1.1",
+        "node-releases": "^1.1.73"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
+    "builtin-modules": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
+      "integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
+      "dev": true
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "dev": true
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
+    },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001249",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001249.tgz",
+      "integrity": "sha512-vcX4U8lwVXPdqzPWi6cAJ3FnQaqXbBqy/GZseKNQzRj37J7qZdGcBtxq/QLFNLLlfsoXLUdHw8Iwenri86Tagw==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "color-string": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
+      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+      "dev": true
+    },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "console-clear": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+      "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ=="
+    },
+    "cosmiconfig": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
+      "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+      "dev": true,
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "daisyui": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-1.11.0.tgz",
+      "integrity": "sha512-0A8QEOd8fn597InQ633hFGKnHFUx7jpFB0plR7HnjIXDgeFSuMnjkoqTJtSngxtMlnVnRGInKPzupCKXDDrL6A=="
+    },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
+    "detect-indent": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
+      "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
+      "dev": true
+    },
+    "detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      }
+    },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
+    "electron-to-chromium": {
+      "version": "1.3.799",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.799.tgz",
+      "integrity": "sha512-V2rbYWdGvSqrg+95KjkVuSi41bGfrhrOzjl1tSi2VLnm0mRe3FsSvhiqidSiSll9WiMhrQAhpDcW/wcqK3c+Yw==",
+      "dev": true
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+          "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+          "dev": true
+        }
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
+    "fast-glob": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
+      "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      }
+    },
+    "fastq": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.1.tgz",
+      "integrity": "sha512-HOnr8Mc60eNYl1gzwp6r5RoUyAn5/glBolUzP/Ez6IFVPMPirxn/9phgL6zhOtaTy7ISwPvQ+wT+hfcRZh/bzw==",
+      "dev": true,
+      "requires": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fraction.js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
+      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
+      "dev": true
+    },
+    "fs-extra": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
+      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
+    },
+    "glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
+      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
+      "dev": true
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "html-tags": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
+      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
+      "dev": true
+    },
+    "import-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
+      "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
+      "dev": true,
+      "requires": {
+        "import-from": "^3.0.0"
+      }
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      }
+    },
+    "import-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
+      "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
+      "dev": true,
+      "requires": {
+        "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+          "dev": true
+        }
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-core-module": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.5.0.tgz",
+      "integrity": "sha512-TXCMSDsEHMEEZ6eCA8rwRDbLu55MRGmrctljsBX/2v1d9/GzqHOxW5c5oPSgrUt2vBFXebu9rGqckXGPWOlYpg==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
+    "jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6",
+        "universalify": "^2.0.0"
+      }
+    },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
+    },
+    "lilconfig": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
+      "integrity": "sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==",
+      "dev": true
+    },
+    "lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
+      "dev": true
+    },
+    "livereload": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.3.tgz",
+      "integrity": "sha512-q7Z71n3i4X0R9xthAryBdNGVGAO2R5X+/xXpmKeuPMrteg+W2U8VusTKV3YiJbXZwKsOlFlHe+go6uSNjfxrZw==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.5.0",
+        "livereload-js": "^3.3.1",
+        "opts": ">= 1.2.0",
+        "ws": "^7.4.3"
+      }
+    },
+    "livereload-js": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.2.tgz",
+      "integrity": "sha512-w677WnINxFkuixAoUEXOStewzLYGI76XVag+0JWMMEyjJQKs0ibWZMxkTlB96Lm3EjZ7IeOxVziBEbtxVQqQZA==",
+      "dev": true
+    },
+    "local-access": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
+      "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw=="
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
+    "lodash.topath": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
+      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
+      "dev": true
+    },
+    "magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "micromatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
+      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "dev": true,
+      "requires": {
+        "braces": "^3.0.1",
+        "picomatch": "^2.2.3"
+      }
+    },
+    "mime": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz",
+      "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg=="
+    },
+    "min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "dev": true
+    },
+    "modern-normalize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
+      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
+      "dev": true
+    },
+    "mri": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
+      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ=="
+    },
+    "nanoid": {
+      "version": "3.1.23",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
+      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
+      "dev": true
+    },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
+    "node-releases": {
+      "version": "1.1.73",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
+      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "opts": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz",
+      "integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
+      "dev": true
+    },
+    "parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+      "dev": true
+    },
+    "postcss": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.6.tgz",
+      "integrity": "sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==",
+      "dev": true,
+      "requires": {
+        "colorette": "^1.2.2",
+        "nanoid": "^3.1.23",
+        "source-map-js": "^0.6.2"
+      }
+    },
+    "postcss-js": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
+      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^8.1.6"
+      }
+    },
+    "postcss-load-config": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
+      "integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
+      "dev": true,
+      "requires": {
+        "import-cwd": "^3.0.0",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      }
+    },
+    "postcss-nested": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
+      "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
+      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "dev": true
+    },
+    "prettier": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz",
+      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
+      "dev": true
+    },
+    "prettier-plugin-svelte": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.3.1.tgz",
+      "integrity": "sha512-F1/r6OYoBq8Zgurhs1MN25tdrhPw0JW5JjioPRqpxbYdmrZ3gY/DzHGs0B6zwd4DLyRsfGB2gqhxUCbHt/D1fw==",
+      "dev": true
+    },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
+    "purgecss": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
+      "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
+      "dev": true,
+      "requires": {
+        "commander": "^6.0.0",
+        "glob": "^7.0.0",
+        "postcss": "^8.2.1",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "dev": true
+        }
+      }
+    },
+    "queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true
+    },
+    "quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "dev": true
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
+    "require-relative": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
+      "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      }
+    },
+    "resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
+    },
+    "reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "rollup": {
+      "version": "2.56.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.0.tgz",
+      "integrity": "sha512-weEafgbjbHCnrtJPNyCrhYnjP62AkF04P0BcV/1mofy1+gytWln4VVB1OK462cq2EAyWzRDpTMheSP/o+quoiA==",
+      "dev": true,
+      "requires": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "rollup-plugin-css-only": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-css-only/-/rollup-plugin-css-only-3.1.0.tgz",
+      "integrity": "sha512-TYMOE5uoD76vpj+RTkQLzC9cQtbnJNktHPB507FzRWBVaofg7KhIqq1kGbcVOadARSozWF883Ho9KpSPKH8gqA==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "4"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.1.tgz",
+          "integrity": "sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==",
+          "dev": true,
+          "requires": {
+            "estree-walker": "^2.0.1",
+            "picomatch": "^2.2.2"
+          }
+        }
+      }
+    },
+    "rollup-plugin-livereload": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz",
+      "integrity": "sha512-vqQZ/UQowTW7VoiKEM5ouNW90wE5/GZLfdWuR0ELxyKOJUIaj+uismPZZaICU4DnWPVjnpCDDxEqwU7pcKY/PA==",
+      "dev": true,
+      "requires": {
+        "livereload": "^0.9.1"
+      }
+    },
+    "rollup-plugin-svelte": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz",
+      "integrity": "sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==",
+      "dev": true,
+      "requires": {
+        "require-relative": "^0.8.7",
+        "rollup-pluginutils": "^2.8.2"
+      }
+    },
+    "rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^0.6.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        }
+      }
+    },
+    "run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "requires": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "sade": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz",
+      "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==",
+      "requires": {
+        "mri": "^1.1.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
+    },
+    "semiver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
+      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg=="
+    },
+    "serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "sirv": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.12.tgz",
+      "integrity": "sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==",
+      "requires": {
+        "@polka/url": "^1.0.0-next.15",
+        "mime": "^2.3.1",
+        "totalist": "^1.0.0"
+      }
+    },
+    "sirv-cli": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.12.tgz",
+      "integrity": "sha512-Rs5PvF3a48zuLmrl8vcqVv9xF/WWPES19QawVkpdzqx7vD5SMZS07+ece1gK4umbslXN43YeIksYtQM5csgIzQ==",
+      "requires": {
+        "console-clear": "^1.1.0",
+        "get-port": "^3.2.0",
+        "kleur": "^3.0.0",
+        "local-access": "^1.0.1",
+        "sade": "^1.6.0",
+        "semiver": "^1.0.0",
+        "sirv": "^1.0.12",
+        "tinydate": "^1.0.0"
+      }
+    },
+    "source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true
+    },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true
+    },
+    "source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
+    "strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "requires": {
+        "min-indent": "^1.0.0"
+      }
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "svelte": {
+      "version": "3.42.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.42.1.tgz",
+      "integrity": "sha512-XtExLd2JAU3T7M2g/DkO3UNj/3n1WdTXrfL63OZ5nZq7nAqd9wQw+lR4Pv/wkVbrWbAIPfLDX47UjFdmnY+YtQ==",
+      "dev": true
+    },
+    "svelte-preprocess": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.7.4.tgz",
+      "integrity": "sha512-mDAmaltQl6e5zU2VEtoWEf7eLTfuOTGr9zt+BpA3AGHo8MIhKiNSPE9OLTCTOMgj0vj/uL9QBbaNmpG4G1CgIA==",
+      "dev": true,
+      "requires": {
+        "@types/pug": "^2.0.4",
+        "@types/sass": "^1.16.0",
+        "detect-indent": "^6.0.0",
+        "strip-indent": "^3.0.0"
+      }
+    },
+    "tailwindcss": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.7.tgz",
+      "integrity": "sha512-jv35rugP5j8PpzbXnsria7ZAry7Evh0KtQ4MZqNd+PhF+oIKPwJTVwe/rmfRx9cZw3W7iPZyzBmeoAoNwfJ1yg==",
+      "dev": true,
+      "requires": {
+        "arg": "^5.0.0",
+        "bytes": "^3.0.0",
+        "chalk": "^4.1.1",
+        "chokidar": "^3.5.2",
+        "color": "^3.2.0",
+        "cosmiconfig": "^7.0.0",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.7",
+        "fs-extra": "^10.0.0",
+        "glob-parent": "^6.0.0",
+        "html-tags": "^3.1.0",
+        "is-glob": "^4.0.1",
+        "lodash": "^4.17.21",
+        "lodash.topath": "^4.5.2",
+        "modern-normalize": "^1.1.0",
+        "node-emoji": "^1.8.1",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^2.2.0",
+        "postcss-js": "^3.0.3",
+        "postcss-load-config": "^3.1.0",
+        "postcss-nested": "5.0.5",
+        "postcss-selector-parser": "^6.0.6",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "purgecss": "^4.0.3",
+        "quick-lru": "^5.1.1",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.20.0",
+        "tmp": "^0.2.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "glob-parent": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.1.tgz",
+          "integrity": "sha512-kEVjS71mQazDBHKcsq4E9u/vUzaLcw1A8EtUeydawvIWQCJM0qQ08G1H7/XTjFUulla6XQiDOG6MXSaG0HDKog==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "terser": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.1.tgz",
+      "integrity": "sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.7.2",
+        "source-map-support": "~0.5.19"
+      }
+    },
+    "tinro": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/tinro/-/tinro-0.5.15.tgz",
+      "integrity": "sha512-m1262wrO+7+Jsm7rDLCS9VnCd9CxlR7OXpfM5MsacjazSukYy2ymRx6yY+enm6QIIpC/jcmtKkplAkOZIkivXw==",
+      "dev": true
+    },
+    "tinydate": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
+      "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w=="
+    },
+    "tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dev": true,
+      "requires": {
+        "rimraf": "^3.0.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
+    },
+    "universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "dev": true
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "ws": {
+      "version": "7.5.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.3.tgz",
+      "integrity": "sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==",
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..accaa3d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "autoprefixer": "^10.3.1",
+    "postcss": "^8.3.6",
+    "postcss-load-config": "^3.1.0",
+    "prettier": "^2.3.2",
+    "prettier-plugin-svelte": "^2.3.1",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0",
+    "svelte-preprocess": "^4.7.4",
+    "tailwindcss": "^2.2.7",
+    "tinro": "^0.5.12"
+  },
+  "dependencies": {
+    "daisyui": "^1.11.0",
+    "sirv-cli": "^1.0.0"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e6f5eb5a2f1f1c882d265cf479de25caa925645
GIT binary patch
literal 3127
zcmV-749N3|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il00009a7bBm000XT
z000XT0n*)m`~Uz8=}AOERCt{2T?vj8M-;8Vz_1U9O&~-jbpa+P$m9gf4VauD<OB>i
z7)}s4L53SJCkR}iVi00SFk;`MXX*#X*kkwKs@nFGS}c;=?XFjU|G$3t^5sjIVS2G+
zw)WGF83CpoGXhLGW(1gW%uV|X7>1P6VhCX=Ux)Lb!*DZ%@I3!{Gsf7d?gtIQ%nQiK
z3%(LUSkBji;C5Rfgd6$VsF@H`Pk@xtY6t<>FNR-pD}=C~$?)9pdm3XZ36N5PNWYjb
z$xd$yNQR9N!dfj-Vd@BwQo^FIIWPPmT&sZyQ$v81(sCBV=PGy{0wltEjB%~h157*t
zvbe_!{=I_783x!0t1-r#-d{Y?ae$Q4N_Nd^Ui^@y(%)G<xnd$EK;HFNLkQ<9c$}ty
zZE(@cTbMWkRAl5y0F|)pL4t`PKn~<wHTLH{;X;CmumMs^*zx~N(Bg+|7u?9|%nYrT
z0F}CS+Ax&_txN`ayLLNv><IJo^I>jou6y<3^XJdu{rmUf-Me?)zZ>9OR&6U5H*cK;
z$gUlB{g0O4gN0sLSO|Of?hU(l?;h(jA3uH!Z{EBKuV23ouU@^<ex%D50i)Isz{|D6
zf*(0@B<$I<M|2;MVQXtEym;|KQ!@M-W4xhtv(Od-c(``h@h4845HEZ`K!j({o^^?!
zfZM1`(6k4tCV-b~2T_k*4_$ACw{PEu2M-=-NP{aeMzx4xwFJnn-6hNKfNsaGA6Lgq
zfyKXf?_Sqv6hciER7U_0*A6?KcD*;0NU#}WT-JE>Y6#%v+QG;>e*E}%?wlu-NT4DG
zs)z)7WbLr)vGAu(ohrKc^em@OpO&f~6_>E61n_e0_V3@{U3^O;j{`^mNCJUj_>;7v
zsMs6Hu3g7+@v+lSo;=yTYFqq}jZmQ-BK8K{C4kqi_i*jBaQE(Au0607V-zKeT;EPg
zX(`vrn=L+e74+-Tqeok@_`tDa$G9I|$nTU5H*2V8@y()n*zqM?J1G!-1aX;CfDC9B
zTnJ#j_%*n8Qb1)re*Bno7g0RG{Eb;IK14irJYJp$5Z6ac9~b_P?+5t~95~SRG$g?1
znFJ7p$xV&GZ18m~79TGRdfsc-BcX$9yXTR*n)mPD@1~O(_?cT$ZvFPucRmGlq&se0
zKrcUf^k}4hM*biEJOWKzz!qQ<V3BJFm=Pc+b5!H`o~|7h6FVL`{c(ZCgL*i4@F43u
z1(Cs}+;i9%CIrZOUoDeom8%~Hq;9e6q34?dgy9lk=gytxzpWou65y)VjXYgD?E0rq
zpNfh%BncjYJ;M$LsS_ag+lxiNcdi~f99FndVdq#75P%&FvXB7cEEPm33_TA(%wyLZ
z6mhl!sszZpUsSCN*UrnYhrWiPr@iYtole(F*|%?BBX32aQm8SsC4eY9<rUPyu7|j1
zx?CdxLQ%j7VjU6<ziX8DA|N8WFhq?2+45)We!L_PV{cSIM;lZXjEjEbFkS!Q!w0wL
zB4|p0RrW*7&2>e;CB_ZtSOO9Owg#lZAc=s65^rb{fZe(TYu_rk!wKkEf}RIt=#Om(
zR8m<Lki|dC_(L+qD!?NN=vV{KgmN&7ZsOkp8-QIFrX>N`DM<^xj~59euMMspBolVN
zAPTr8sSDI104orIAdmL$uOXn*6hga1G+0WD0E?UtabxC#VC~vf3|10|phW;yQ3CY8
z2CM=)ErF;xq-YJ5G|um}>*1#E+O_Mu|Nr#qQ&G1P-NMq@f?@*XUcSbV?tX=)ilM-Q
zBZP|!Bpv0V;#ojKcpc7$=eqO;#Uy~#?^kNI{vSZfLx&DEt~LTmaKWXcx<RNV2bCmF
zyB8yXMEp}xrslJtHebUdf%Kr921sB?gliguB3fBTt*Ljd3QnkE8J>=joubklI<*Aw
z>LtMaQ7DR<1I2LkWvwyu#Rwn~;ezT}_g(@5l3h?W%-a86Y-t#O1PubP+z<%?V5D(U
zy57A6{h+{?kOZp7&WKZR+=sznMJ}+Dnpo=C_0%R_x_t~J5T?E_<l$K=(8|HyYWe|K
z#u6z2{XLE+0a1VU>{+))l5v1%5<ZXGz(_3uunZE3WlUpMhUsz`c{R6*3){$6w1!A)
z$wOApKPq4(2_d{dEHI2ZMBsWGHoeNpxu6!ehYufe?y!&xaKwQit*yaINYJ85ftN}3
zc900QFFpZkKoAmF86K@dfSizEIk~lzYL$W@2z6dV4QMJyR$f{=tlKsqrXlc5#KR(s
z6M*{hY6q2fqlX_Ce0ik-&=QY8G#@Bv4~R%9b-2Z$@X>2>)d-`iiZyx|5!%M2Fb2dU
zW3~MwwpEH9Rhue+k$UIOoo($Ds!NbOyMR36fRHu;*15(YcA7<wp93r=+%sI`JP%bN
zOThF7#HXgH5+H|#*+q($RX*bayB*@VX=M+BS|w%!NW;Ra1jr9_L2?fbk;?sEEIbTS
zE&(OwU;<B|9s+1h2BF13jh!{f$P<ifZ8bEzgO@drcA=U2mV=?RTgTcmnzk33xlxld
z@ag2OVI8#`SWN|~(TyDi&E`<EgPnSPalB+sydU?#f*YOb*L@~QtwAXlSW5!9oO|Cp
zd80S$hig!CB?c})uT$N=6{ylk0s#R;wSig$FgezAJJ60U*#WFsU&yVHk`{+*bOx=o
z{H%T!H0ui?p_s0xIF+g)0aT7JYYQx96$_F|qQ1Z|BS14)xugO$Rs{iAlfjVvBX_KJ
zSk5XI)<cNT4HOYTa$XIIP+0P%r*~}!>siIZk#%JWz>P!qX1?IUojG&nKR>^gArBt2
zit(ETyZ=@V&7mv_Fi4bABc<X|>nwP+jzQuHcfU&BrAV91u-rFvEi7y-KnWsvHH=d2
zgAk(GKm_S8RcTJ>2N3~&Hbwp{Z3NF_Xeh}g4E<iOr8}5C9&Q}aG4C{a1MZTx*Fe2`
zUdPZVoEjc#>ke)V&dY{W(3&b1j9t4yK<Zhk<ZV;q*m#1J03FLLU_Z1xgxU|E8UfX`
zy9NOo1G|B<^Q60V0*;}%rn&n=8%M;zP-_}GC0oMt@F{~?#ak9>_aYJisZZ{1rcU5-
z;eD>K;ndPq&B-8yA_S0F!4ThA&{1{x)H<#?k9a#6Pc6L?V^s0``ynL&D;p(!Nmx`Y
zFkHex{<NoS7wnIrfzNMNaV72z<n{w1{;y$-K^>4p!Ggm^@DlehW}iHHVi}~u=$&N?
z(NEBLQ#UxxAkdW>X9LnqUr#t4Lu0=9L8&o>JsqTt<K40A(L^!{iyxF!0P+DW1?YJ$
zuoRBR(7@McpTO1>T5|%gb3QA~hr0pED71+iFFr)dZ=Q=E6ng{NE{Z~0)C?deO#?Aj
zSDQ$z#TeC2T^|=}6GBo-&$;E{HL3!q3Z-szuf)O=G#zDjin4SSP%o%6+2IT#sLjQa
ziyxFFz~LMjWY<!`E%b`q^#hAdVO(R}&S72Eqz)Hq5+ECcqCy4D$y-f8uARf;U&*?@
zip38GQ^F4C@UUohjh9V8BkCMTcPsCDaU+K|R0$Bi^$Pway^nPk&*_BG?%@tGMw8hI
z8c-)d_)3Be&hY3#(5~KrxQD2BIAL@%?|PNuO)FRtKt&bw0>+_a5H!U6%a<=b7QVP^
z*90a62;bVq{?@)P6^DWd^Yilq4|YTV2Nw!Yu;a1lPI-sxR)rf@Fe5<tN&<v6|1A9@
z9Z;2P*94{&6Il%YVfh^upgPyC2}~sbA*FOxIzX~QRO{L`feQh`R}#P#y5#a@wy55<
zYXUa{gvqc8TH)F?fhz&Rw~3+~EgLM=D%Y+F+zAlA#R)b%+sXuJoom+wMF>DhDP7FH
zZZ%4S*1C30P;|O+jB!1;m|rXT90Sm5*RBbQN`PKu+hDD*S^yE(CdtSfg=z>u$cIj>
z<?*v#s$uFDo=_bD2-#3v$(KrIu@4C3tZN^~-ZoTAfPUmUgQYx~bcrDyHgksZ=Cm(*
zFIq!@eq;$jGl~`m%q%1Wt}~6IeO$Db05j;IeTUr4po$p*rW`W@Ofy0V{{nCNxUS6+
RDuVz3002ovPDHLkV1lTymTLe2

literal 0
HcmV?d00001

diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..a9c8fd6
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..1b03a2e
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,81 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import css from 'rollup-plugin-css-only';
+import sveltePreprocess from "svelte-preprocess";
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+	let server;
+
+	function toExit() {
+		if (server) server.kill(0);
+	}
+
+	return {
+		writeBundle() {
+			if (server) return;
+			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+				stdio: ['ignore', 'inherit', 'inherit'],
+				shell: true
+			});
+
+			process.on('SIGTERM', toExit);
+			process.on('exit', toExit);
+		}
+	};
+}
+
+export default {
+	input: 'src/main.js',
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		file: 'public/build/bundle.js'
+	},
+	plugins: [
+		svelte({
+			compilerOptions: {
+				// enable run-time checks when not in production
+				dev: !production
+			},
+			preprocess: sveltePreprocess({
+				sourceMap: !production,
+				postcss: true,
+			}),
+		}),
+		// we'll extract any component CSS out into
+		// a separate file - better for performance
+		css({ output: 'bundle.css' }),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte']
+		}),
+		commonjs(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		!production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload('public'),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+};
diff --git a/scripts/setupTypeScript.js b/scripts/setupTypeScript.js
new file mode 100644
index 0000000..133658a
--- /dev/null
+++ b/scripts/setupTypeScript.js
@@ -0,0 +1,121 @@
+// @ts-check
+
+/** This script modifies the project to support TS code in .svelte files like:
+
+  <script lang="ts">
+  	export let name: string;
+  </script>
+ 
+  As well as validating the code for CI.
+  */
+
+/**  To work on this script:
+  rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
+*/
+
+const fs = require("fs")
+const path = require("path")
+const { argv } = require("process")
+
+const projectRoot = argv[2] || path.join(__dirname, "..")
+
+// Add deps to pkg.json
+const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
+packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+  "svelte-check": "^2.0.0",
+  "svelte-preprocess": "^4.0.0",
+  "@rollup/plugin-typescript": "^8.0.0",
+  "typescript": "^4.0.0",
+  "tslib": "^2.0.0",
+  "@tsconfig/svelte": "^2.0.0"
+})
+
+// Add script for checking
+packageJSON.scripts = Object.assign(packageJSON.scripts, {
+  "check": "svelte-check --tsconfig ./tsconfig.json"
+})
+
+// Write the package JSON
+fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))
+
+// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
+const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
+const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
+fs.renameSync(beforeMainJSPath, afterMainTSPath)
+
+// Switch the app.svelte file to use TS
+const appSveltePath = path.join(projectRoot, "src", "App.svelte")
+let appFile = fs.readFileSync(appSveltePath, "utf8")
+appFile = appFile.replace("<script>", '<script lang="ts">')
+appFile = appFile.replace("export let name;", 'export let name: string;')
+fs.writeFileSync(appSveltePath, appFile)
+
+// Edit rollup config
+const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
+let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
+
+// Edit imports
+rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';`)
+
+// Replace name of entry point
+rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
+
+// Add preprocessor
+rollupConfig = rollupConfig.replace(
+  'compilerOptions:',
+  'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
+);
+
+// Add TypeScript
+rollupConfig = rollupConfig.replace(
+  'commonjs(),',
+  'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
+);
+fs.writeFileSync(rollupConfigPath, rollupConfig)
+
+// Add TSConfig
+const tsconfig = `{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}`
+const tsconfigPath =  path.join(projectRoot, "tsconfig.json")
+fs.writeFileSync(tsconfigPath, tsconfig)
+
+// Add global.d.ts
+const dtsPath =  path.join(projectRoot, "src", "global.d.ts")
+fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
+
+// Delete this script, but not during testing
+if (!argv[2]) {
+  // Remove the script
+  fs.unlinkSync(path.join(__filename))
+
+  // Check for Mac's DS_store file, and if it's the only one left remove it
+  const remainingFiles = fs.readdirSync(path.join(__dirname))
+  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
+    fs.unlinkSync(path.join(__dirname, '.DS_store'))
+  }
+
+  // Check if the scripts folder is empty
+  if (fs.readdirSync(path.join(__dirname)).length === 0) {
+    // Remove the scripts folder
+    fs.rmdirSync(path.join(__dirname))
+  }
+}
+
+// Adds the extension recommendation
+fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
+fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
+  "recommendations": ["svelte.svelte-vscode"]
+}
+`)
+
+console.log("Converted to TypeScript.")
+
+if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
+  console.log("\nYou will need to re-run your dependency manager to get started.")
+}
diff --git a/src/.prettierrc b/src/.prettierrc
new file mode 100644
index 0000000..3dda789
--- /dev/null
+++ b/src/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "svelteSortOrder": "options-scripts-markup-styles",
+  "svelteStrictMode": false,
+  "svelteBracketNewLine": false,
+  "svelteAllowShorthand": false,
+  "svelteIndentScriptAndStyle": true,
+  "printWidth": 600,
+  "sxBracketSameLine": true
+}
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..213f170
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,372 @@
+<script context="module">
+  export function WSpush(ws, topic, value) {
+    console.log(ws, topic, value);
+  }
+</script>
+
+<script>
+  import { onMount } from "svelte";
+  //роутер ==========================================
+  import { Route, router, active } from "tinro";
+  router.mode.hash(); // enables hash navigation method
+  //router.mode.memory(); // enables in-memory navigation method
+  import Card from "./Card.svelte";
+  import Input from "./Input.svelte";
+  import Myinput from "./Myinput.svelte";
+
+  onMount(async () => {
+    console.log("mounted");
+  });
+
+  const syntaxHighlight = (json) => {
+    try {
+      json = JSON.stringify(JSON.parse(json), null, 4);
+    } catch (e) {
+      return json;
+    }
+    json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+      return match;
+    });
+    return json;
+  };
+
+  function SuperDuperFunction() {
+    wigets = JSON.parse(document.getElementById("text1").value);
+  }
+
+  let wigets = [];
+
+  wigets = [
+    {
+      widget: "input",
+      type: "time",
+      status: "12:00",
+      page: "",
+      order: "3",
+      descr: "Switch on boiler time",
+      topic: "/prefix/00000-00003/temp3",
+    },
+    {
+      widget: "input",
+      type: "number",
+      status: "30.5",
+<<<<<<< HEAD
+      after: "°С",
+=======
+>>>>>>> parent of 37f43f0 (changes2)
+      page: "",
+      order: "1",
+      descr: "Boiler temperature",
+      topic: "/prefix/00000-00001/temp1",
+    },
+    {
+      widget: "input",
+      type: "text",
+      status: "Hello",
+      page: "",
+      order: "3",
+      descr: "Massage to be send",
+      topic: "/prefix/00000-00003/temp3",
+    },
+    {
+      widget: "input",
+      type: "date",
+      status: "2021.09.15",
+      page: "",
+      order: "2",
+      descr: "Switch on boiler date",
+      topic: "/prefix/00000-00002/temp2",
+    },
+  ];
+</script>
+
+<main>
+  <div class="fixed m-0 h-10 w-full bg-gray-100 shadow-md">
+    <b class="text-center" />
+  </div>
+
+  <ul class="menu__ham">
+    <input id="menu__toggle" type="checkbox" />
+    <label class="menu__btn" for="menu__toggle">
+      <span />
+    </label>
+
+    <ul class="menu__box">
+      <li>
+        <a class="menu__item" href="/">{"Управление"}</a>
+      </li>
+      <li>
+        <a class="menu__item" href="/config">{"Конфигуратор"}</a>
+      </li>
+      <li>
+        <a class="menu__item" href="/connection">{"Подключение"}</a>
+      </li>
+      <li>
+        <a class="menu__item" href="/utilities">{"Утилиты"}</a>
+      </li>
+      <li>
+        <a class="menu__item" href="/log">{"Лог"}</a>
+      </li>
+      <li>
+        <a class="menu__item" href="/about">{"О проекте"}</a>
+      </li>
+      <li>
+        <a class="menu__item" href="/test">{"Test"}</a>
+      </li>
+    </ul>
+  </ul>
+
+  <ul class="menu__main">
+    <div class="bg-cover bg-gray-50 pt-16">
+      <Route path="/">
+        <Card title="Inputs">
+          {#each wigets as widget, i}
+            {#if widget.widget === "input"}
+              <Myinput type={widget.type} ws={1} topic={widget.topic} title={widget.descr} bind:value={widget.status} />
+            {/if}
+          {/each}
+        </Card>
+        <Card title="Редактор JSON">
+          <textarea on:input={SuperDuperFunction} rows="10" class="widget-input-indigo" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
+        </Card>
+      </Route>
+
+      <Route path="/config">
+        <Card title="Здесь будет конфигуратор" />
+      </Route>
+
+      <Route path="/connection">
+        <Card title="Подключение к WiFi роутеру">
+          <Input title={"Сеть"} value={"your SSID"} />
+          <Input title={"Пароль"} value={"your PASS"} />
+
+          <div class="card-items">
+            <label class="md:w-2/3 block text-gray-500 font-bold">
+              <input class="mr-2 leading-tight" type="checkbox" />
+              <span class="text-sm"> Включить светодиод статуса подключения </span>
+            </label>
+          </div>
+          <div class="md:flex md:items-center">
+            <div class="md:w-2/3">
+              <button class="btn-indigo" type="button"> Сохранить </button>
+            </div>
+          </div>
+        </Card>
+
+        <Card title="Подключение к MQTT серверу">
+          <div class="card-items">
+            <div class="md:w-1/3">
+              <label class="descr-gray" for="inline-full-name"> Сервер </label>
+            </div>
+            <div class="md:w-2/3">
+              <input class="widget-input-indigo" type="text" value="your SSID" />
+            </div>
+          </div>
+
+          <div class="card-items">
+            <div class="md:w-1/3">
+              <label class="descr-gray" for="inline-full-name"> Порт </label>
+            </div>
+            <div class="md:w-2/3">
+              <input class="widget-input-indigo" type="text" value="your SSID" />
+            </div>
+          </div>
+
+          <div class="card-items">
+            <div class="md:w-1/3">
+              <label class="descr-gray" for="inline-full-name"> Префикс </label>
+            </div>
+            <div class="md:w-2/3">
+              <input class="widget-input-indigo" type="text" value="your SSID" />
+            </div>
+          </div>
+
+          <div class="card-items">
+            <div class="md:w-1/3">
+              <label class="descr-gray" for="inline-full-name"> Пользователь </label>
+            </div>
+            <div class="md:w-2/3">
+              <input class="widget-input-indigo" type="text" value="your SSID" />
+            </div>
+          </div>
+
+          <div class="card-items">
+            <div class="md:w-1/3">
+              <label class="descr-gray" for="inline-password"> Пароль </label>
+            </div>
+            <div class="md:w-2/3">
+              <input class="widget-input-indigo" type="password" placeholder="******************" />
+            </div>
+          </div>
+
+          <div class="md:flex md:items-center">
+            <div class="md:w-1/3" />
+            <div class="md:w-2/3">
+              <button class="btn-indigo" type="button"> Сохранить </button>
+            </div>
+          </div>
+        </Card>
+      </Route>
+
+      <Route path="/test" />
+    </div>
+  </ul>
+</main>
+
+<style lang="postcss" global>
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer components {
+    .btn-indigo {
+      @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
+    }
+<<<<<<< HEAD
+
+    .block-psn-center {
+      @apply grid place-items-center mx-2 sm:my-auto;
+    }
+    .card {
+      @apply w-11/12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 p-2 sm:px-8 sm:py-4 my-2 bg-white rounded-lg shadow-md lg:shadow-lg;
+    }
+    .card-items {
+      @apply md:items-center md:flex mb-6;
+=======
+    .input-indigo {
+      @apply py-2 px-4 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500;
+    }
+    .descr-gray {
+      @apply block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4;
+    }
+    .descr-gray-left {
+      @apply block text-gray-500 font-bold md:text-left mb-1 md:mb-0 pr-4;
+>>>>>>> parent of 37f43f0 (changes2)
+    }
+    .card-title-gray {
+      @apply text-center text-lg text-gray-500 font-bold pb-6;
+    }
+    .widget-descr-gray-left {
+      @apply pr-4 block text-gray-500 font-bold md:text-left;
+    }
+<<<<<<< HEAD
+    .widget-input-indigo {
+      @apply pr-4 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500;
+    }
+    .widget-after {
+      @apply pr-4 block text-gray-500 font-bold md:text-right;
+=======
+    .block-psn-center-when-md {
+      @apply md:flex md:items-center mb-6;
+    }
+    .card-normal-size {
+      @apply w-11/12 p-12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 px-2 py-2 my-2 sm:px-10 sm:py-6 bg-white rounded-lg shadow-md lg:shadow-lg;
+>>>>>>> parent of 37f43f0 (changes2)
+    }
+  }
+
+  #menu__toggle {
+    opacity: 0;
+  }
+  #menu__toggle:checked ~ .menu__btn > span {
+    transform: rotate(45deg);
+  }
+  #menu__toggle:checked ~ .menu__btn > span::before {
+    top: 0;
+    transform: rotate(0);
+  }
+  #menu__toggle:checked ~ .menu__btn > span::after {
+    top: 0;
+    transform: rotate(90deg);
+  }
+  #menu__toggle:checked ~ .menu__box {
+    visibility: visible;
+    left: 0;
+  }
+
+  /*
+  #menu__toggle:checked ~ .menu__main {
+    margin-left: 150px; 
+    transition-duration: 0.25s;
+  }
+  */
+
+  .menu__btn {
+    display: flex;
+    align-items: center;
+    position: fixed;
+    z-index: 1;
+    top: 10px;
+    left: 20px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+  }
+
+  .menu__btn > span,
+  .menu__btn > span::before,
+  .menu__btn > span::after {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background-color: #616161;
+    transition-duration: 0.25s;
+  }
+  .menu__btn > span::before {
+    content: "";
+    top: -8px;
+  }
+  .menu__btn > span::after {
+    content: "";
+    top: 8px;
+  }
+
+  .menu__box {
+    display: block;
+    position: fixed;
+    visibility: hidden;
+    top: 0;
+    left: -100%;
+    width: 150px; /* размер выхода бокового меню */
+    height: 100%;
+    margin: 0;
+    padding: 80px 0;
+    list-style: none;
+    background-color: #eceff1;
+    box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
+    transition-duration: 0.25s;
+  }
+
+  .menu__ham {
+    position: fixed;
+  }
+
+  .menu__item {
+    display: block;
+    padding: 12px 24px;
+    color: rgba(51, 51, 51, 0.788);
+    font-family: "Roboto", sans-serif;
+    font-size: 15px; /* размер шрифта бокового меню */
+    font-weight: 600;
+    text-decoration: none;
+    transition-duration: 0.25s;
+  }
+  .menu__item:hover {
+    background-color: #cfd8dc;
+  }
+
+  .upper__bar {
+    background-color: rgba(51, 51, 51, 0.144);
+    height: 70px;
+    position: fixed;
+    z-index: -1;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.2);
+  }
+</style>
diff --git a/src/Card.svelte b/src/Card.svelte
new file mode 100644
index 0000000..62b41ce
--- /dev/null
+++ b/src/Card.svelte
@@ -0,0 +1,12 @@
+<script>
+  export let title;
+</script>
+
+<div class="container">
+  <div class="block-psn-center">
+    <div class="card">
+      <h1 class="card-title-gray">{title}</h1>
+      <slot />
+    </div>
+  </div>
+</div>
diff --git a/src/Input.svelte b/src/Input.svelte
new file mode 100644
index 0000000..07404be
--- /dev/null
+++ b/src/Input.svelte
@@ -0,0 +1,20 @@
+<script context="module">
+  import { WSpush } from "./App.svelte";
+</script>
+
+<script>
+  export let title;
+  export let value;
+</script>
+
+<div class="container">
+  <div class="card-items">
+    <div class="md:w-1/3">
+      <!-- svelte-ignore a11y-label-has-associated-control -->
+      <label class="descr-gray">{title}</label>
+    </div>
+    <div class="md:w-2/3">
+      <input bind:value on:change={WSpush(value)} class="widget-input-indigo" type="text" />
+    </div>
+  </div>
+</div>
diff --git a/src/Myinput.svelte b/src/Myinput.svelte
new file mode 100644
index 0000000..77ff48a
--- /dev/null
+++ b/src/Myinput.svelte
@@ -0,0 +1,54 @@
+<script context="module">
+  import { WSpush } from "./App.svelte";
+</script>
+
+<script>
+  export let title;
+  export let value;
+  export let topic;
+  export let ws;
+  export let type;
+</script>
+
+<div class="container">
+<<<<<<< HEAD
+  <div class="card-items">
+    <div class="md:w-6/12">
+      <!-- svelte-ignore a11y-label-has-associated-control -->
+      <label class="widget-descr-gray-left">{!descr ? "" : descr}</label>
+=======
+  <div class="block-psn-center-when-md">
+    <div class="md:w-1/2">
+      <!-- svelte-ignore a11y-label-has-associated-control -->
+      <label class="descr-gray-left">{title}</label>
+>>>>>>> parent of 37f43f0 (changes2)
+    </div>
+    <div class="md:w-1/2">
+      <!-- on:change={WSpush(ws, topic, value)} -->
+      {#if type == "number"}
+        <input class="widget-input-indigo" on:change={WSpush(ws, topic, value)} bind:value type="number" />
+      {/if}
+      {#if type == "text"}
+        <input class="widget-input-indigo" on:change={WSpush(ws, topic, value)} bind:value type="text" />
+      {/if}
+      {#if type == "date"}
+        <input class="widget-input-indigo" on:change={WSpush(ws, topic, value)} bind:value type="date" />
+      {/if}
+      {#if type == "time"}
+        <input class="widget-input-indigo" on:change={WSpush(ws, topic, value)} bind:value type="time" />
+      {/if}
+    </div>
+<<<<<<< HEAD
+    {#if after}
+      <div class="md:1/12">
+        <!-- svelte-ignore a11y-label-has-associated-control -->
+        <label class="widget-after">{!after ? "" : after}</label>
+      </div>
+    {/if}
+=======
+    <!-- <div class="md:w-3/3"> -->
+    <!--  <button on:click={WSpush(ws, topic, value)} class="btn-indigo" type="button">Set</button> -->
+    <!-- </div> -->
+>>>>>>> parent of 37f43f0 (changes2)
+  </div>
+</div>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..d6cacbb
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..87df10b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,24 @@
+// tailwind.config.js
+module.exports = {
+  purge: {
+    enabled: !process.env.ROLLUP_WATCH,
+    //mode: 'all',
+    //preserveHtmlElements: false,
+    content: ['./public/index.html', './src/**/*.svelte'],
+    options: {
+      defaultExtractor: content => [
+        ...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
+        ...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
+      ],
+      //keyframes: true,
+    },
+  },
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}