diff --git a/html/favicon.ico b/html/favicon.ico
new file mode 100644
index 0000000..17b8ff3
Binary files /dev/null and b/html/favicon.ico differ
diff --git a/html/index/index.html b/html/index/index.html
new file mode 100755
index 0000000..02eb5f2
--- /dev/null
+++ b/html/index/index.html
@@ -0,0 +1,93 @@
+﻿<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>be1.ru</title>
+    <link rel="stylesheet" href="index_style.css">
+    <link rel="icon" href="favicon.ico" />
+    <script src="index_script.js"></script>
+</head>
+
+<body>
+    <input type="checkbox" id="nav-toggle" hidden>
+    <nav class="nav">
+        <label for="nav-toggle" class="nav-toggle" onclick></label>
+        <!-- <h2 class="logo"> -->
+        <p style="text-align:center"> ATE0004
+            <!-- </h2> -->
+        <ul>
+            <li><a href="#1">About</a>
+            <li><a href="#2">Statistics</a>
+            <li><a href="#3">Update</a>
+            <li><a href="#3">Manual</a>
+                <!-- <li><a href="#4">Четыре</a>
+            <li><a href="#5">Пять</a>
+            <li><a href="#6">Шесть</a>
+            <li><a href="#7">Семь</a> -->
+        </ul>
+    </nav>
+
+    <!-- Маска (затемнение) основного контента при включенной панели
+    по-умолчанию данная фишка не используется, если оно вам надо,
+		просто расккоментируйте div-контейнер ниже -->
+
+    <div class="mask-content"></div>
+
+    <p class="aligncenter"><img alt="logo" src="logo.png" style="height:120px; width:300px" /></p>
+    <p style="text-align:center"><span style="font-size:24px">ATE0004</span></p>
+    <p style="text-align:center">Honeywell Retractable Landing Light CMM 33-42-07 P/N 45-0351-X Motor Test Box by
+        @rick_professor</p>
+
+    </div>
+    <div class="content">
+        <div class="card">
+            <h2>ONBOARD LED GPIO2</h2>
+            <p style="text-align:center" class="no-select"> <button id="button" class="button">Toggle LED</button></p>
+            <p class="state">State: <span id="state">%s</span></p>
+        </div>
+    </div>
+    </div>
+    <main role="main">
+        <div class="content">
+            <div class="card">
+                <!-- <h2>ONBOARD LED GPIO2</h2> -->
+                <p style="text-align:center" class="no-select"> <button id="button" class="button">Thermostat</button>
+                <p style="text-align:center" class="no-select"> <button id="button" class="button">Retract</button>
+                <p style="text-align:center" class="no-select"> <button id="button" class="button">Extend</button>
+                    <!-- </p> -->
+                    <!-- <p class="state">State: <span id="state">%s</span></p> -->
+            </div>
+        </div>
+        <!-- <article>
+            <header>
+                <h1 class="header__title">Просто Демо:</h1>
+                <h2>Выдвигающееся боковое меню на чистом CSS</h2>
+            </header>
+            <section>
+                <p style="text-align: center;">
+                    <a href="index.html" class="btn btn-primary">Меню Слева</a>
+                    <a href="right-slide-panel.html" class="btn btn-secondary">Меню Справа</a>
+                <p>Нажмите на "гамбургер-иконку" в левом или правом верхнем углу, в зависимости от выбранного вами
+                    варианта, и вы увидите выдвигающуюся боковую панель в действии. Чаще всего в таких панельках
+                    размещают меню навигации по сайту, что собственно мы и сделали. Вы же можете использовать боковую
+                    панель, для любого другого элемента, который по вашему разумению, должен быть изначально скрыт,
+                    например, форму подписки, блок кнопок социальных сетей, и т.д. и т.п...
+                <p>Работа данного меню построена на чистом CSS, без подключения javascript. Переключение осуществляется
+                    с помощью скрытого флажка (checkbox) с использованием псевдокласса :checked из обоймы CSS3</p>
+                <p>С переклюателем панели особо не стал заморачиваться и использовал символ Unicode 'TRIGRAM FOR HEAVEN'
+                    (U+2630), с простейшей заменой символа на 'Знак Умножения' (U+2715), когда панель раскрыта. Вам
+                    ничего не мешает испльзовать любой другой значок, иконку или просто текст.
+            </section>
+            <hr>
+            <footer>
+                <p><a href="http://dbmast.ru/vydvigayushheesya-bokovoe-menyu-na-chistom-css">← Изучить Детали</a>
+                <p>сделано с любовью - <a href="https://twitter.com/dobrovoi">@dobrovoi</a>
+            </footer>
+        </article> -->
+    </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/html/index/index_script.js b/html/index/index_script.js
new file mode 100644
index 0000000..f3b85ce
--- /dev/null
+++ b/html/index/index_script.js
@@ -0,0 +1,40 @@
+var gateway = `ws://${window.location.hostname}/ws`;
+var websocket;
+window.addEventListener('load', onLoad);
+function initWebSocket() {
+    console.log('Trying to open a WebSocket connection...');
+    websocket = new WebSocket(gateway);
+    websocket.onopen = onOpen;
+    websocket.onclose = onClose;
+    websocket.onmessage = onMessage; // <-- add this line
+}
+function onOpen(event) {
+    console.log('Connection opened');
+}
+function onClose(event) {
+    console.log('Connection closed');
+    setTimeout(initWebSocket, 2000);
+}
+function onMessage(event) {
+    var state;
+    console.log(event.data);
+    if (event.data == "1") {
+        state = "ON";
+    }
+    else {
+        state = "OFF";
+    }
+    document.getElementById('state').innerHTML = state;
+}
+function onLoad(event) {
+    initWebSocket();
+    initButton();
+}
+
+function initButton() {
+    document.getElementById('button').addEventListener('click', toggle);
+}
+function toggle() {
+        console.log('Click');
+    websocket.send('toggle');
+}
\ No newline at end of file
diff --git a/html/index/index_style.css b/html/index/index_style.css
new file mode 100644
index 0000000..ec62bf2
--- /dev/null
+++ b/html/index/index_style.css
@@ -0,0 +1,456 @@
+ .aligncenter {
+     text-align: center;
+ }
+
+ * {
+     box-sizing: border-box;
+ }
+
+ body {
+     /* max-width: 320px; */
+     /* background: #bcc5c3; */
+     background: #16a085;
+     /* Максимальная ширина страницы в пикселах */
+ }
+
+ .no-select {
+     -webkit-touch-callout: none;
+     -moz-user-select: none;
+     -o-user-select: none;
+     -khtml-user-select: none;
+     -webkit-user-select: none;
+     -ms-user-select: none;
+     user-select: none;
+ }
+
+ .button {
+     width: 250px;
+     height: 70px;
+     padding: 15px 50px;
+     font-size: 24px;
+     text-align: center;
+     outline: 1px solid #666;
+     color: #fff;
+     background-color: #0ffa6d;
+     border: #0ffa6d;
+     border-radius: 5px;
+     -webkit-touch-callout: none;
+     -webkit-user-select: none;
+     -khtml-user-select: none;
+     -moz-user-select: none;
+     -ms-user-select: none;
+     user-select: none;
+     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ }
+
+ .button:active {
+     background-color: #fa0f0f;
+     transform: translateY(2px);
+ }
+
+ .nav {
+     /*  ширна произвольная, не стесняйтесь экспериментировать */
+     width: 320px;
+     min-width: 320px;
+     /* фиксируем и выставляем высоту панели на максимум */
+     height: 100%;
+     position: fixed;
+     top: 0;
+     bottom: 0;
+     margin: 0;
+     /* сдвигаем (прячем) панель относительно левого края страницы */
+     left: -320px;
+     /* внутренние отступы */
+     padding: 15px 20px;
+     /* плавный переход смещения панели */
+     -webkit-transition: left 0.3s;
+     -moz-transition: left 0.3s;
+     transition: left 0.3s;
+     /* определяем цвет фона панели */
+     background: #16a085;
+     /* background: #bcc5c3; */
+     /* поверх других элементов */
+     z-index: 2000;
+ }
+
+
+ /**
+ * Кнопка переключения панели
+ * тег <label>
+ */
+
+ .nav-toggle {
+     /* абсолютно позиционируем */
+     position: absolute;
+     /* относительно левого края панели */
+     left: 320px;
+     /* отступ от верхнего края панели */
+     top: 1em;
+     /* внутренние отступы */
+     padding: 0.5em;
+     /* определяем цвет фона переключателя
+     * чаще вчего в соответствии с цветом фона панели
+    */
+     background: inherit;
+     /* цвет текста */
+     color: #dadada;
+     /* вид курсора */
+     cursor: pointer;
+     /* размер шрифта */
+     font-size: 1.2em;
+     line-height: 1;
+     /* всегда поверх других элементов страницы */
+     z-index: 2001;
+     /* анимируем цвет текста при наведении */
+     -webkit-transition: color .25s ease-in-out;
+     -moz-transition: color .25s ease-in-out;
+     transition: color .25s ease-in-out;
+ }
+
+
+ /* определяем текст кнопки 
+ * символ Unicode (TRIGRAM FOR HEAVEN)
+*/
+
+ .nav-toggle:after {
+     content: '\2630';
+     text-decoration: none;
+ }
+
+
+ /* цвет текста при наведении */
+
+ .nav-toggle:hover {
+     color: #f4f4f4;
+ }
+
+
+ /**
+ * Скрытый чекбокс (флажок)
+ * невидим и недоступен :)
+ * имя селектора атрибут флажка
+ */
+
+ [id='nav-toggle'] {
+     position: absolute;
+     display: none;
+ }
+
+
+ /**
+ * изменение положения переключателя 
+ * при просмотре на мобильных устройствах
+ * когда навигация раскрыта, распологаем внутри панели
+*/
+
+ [id='nav-toggle']:checked~.nav>.nav-toggle {
+     left: auto;
+     right: 2px;
+     top: 1em;
+ }
+
+
+ /**
+ * Когда флажок установлен, открывается панель
+ * используем псевдокласс:checked
+ */
+
+ [id='nav-toggle']:checked~.nav {
+     left: 0;
+     box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
+     -moz-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
+     -webkit-box-shadow: 4px 0px 20px 0px rgba(0, 0, 0, 0.5);
+     overflow-y: auto;
+ }
+
+
+ /* 
+ * смещение контента страницы
+ * на размер ширины панели,
+ * фишка необязательная, на любителя
+*/
+
+ [id='nav-toggle']:checked~main>article {
+     -webkit-transform: translateX(320px);
+     -moz-transform: translateX(320px);
+     transform: translateX(320px);
+ }
+
+
+ /*
+ * изменение символа переключателя,
+ * привычный крестик (MULTIPLICATION X), 
+ * вы можете испльзовать любой другой значок
+*/
+
+ [id='nav-toggle']:checked~.nav>.nav-toggle:after {
+     content: '\2715';
+ }
+
+
+ /**
+ * профиксим баг в Android <= 4.1.2
+ * см: http://timpietrusky.com/advanced-checkbox-hack
+ */
+
+ /* body {
+            -webkit-animation: bugfix infinite 1s;
+        }
+
+        @-webkit-keyframes bugfix {
+            to {
+                padding: 0;
+            }
+        } */
+
+
+ /**
+ * позаботьтимся о средних и маленьких экранах
+ * мобильных устройств
+ */
+
+ @media screen and (min-width: 320px) {
+
+     html,
+     body {
+         margin: 0;
+         overflow-x: hidden;
+     }
+ }
+
+ @media screen and (max-width: 320px) {
+
+     html,
+     body {
+         margin: 0;
+         overflow-x: hidden;
+     }
+
+     .nav {
+         width: 100%;
+         box-shadow: none
+     }
+ }
+
+
+ /**
+ * Формируем стиль заголовка (логотип) панели 
+*/
+
+ .nav h2 {
+     width: 90%;
+     padding: 0;
+     margin: 10px 0;
+     text-align: center;
+     text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
+     font-size: 1.3em;
+     line-height: 1.3em;
+     opacity: 0;
+     transform: scale(0.1, 0.1);
+     -ms-transform: scale(0.1, 0.1);
+     -moz-transform: scale(0.1, 0.1);
+     -webkit-transform: scale(0.1, 0.1);
+     transform-origin: 0% 0%;
+     -ms-transform-origin: 0% 0%;
+     -moz-transform-origin: 0% 0%;
+     -webkit-transform-origin: 0% 0%;
+     transition: opacity 0.8s, transform 0.8s;
+     -ms-transition: opacity 0.8s, -ms-transform 0.8s;
+     -moz-transition: opacity 0.8s, -moz-transform 0.8s;
+     -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
+ }
+
+ .nav h2 a {
+     color: #dadada;
+     text-decoration: none;
+     text-transform: uppercase;
+ }
+
+
+ /*плавное появление заголовка (логотипа) при раскрытии панели */
+
+ [id='nav-toggle']:checked~.nav h2 {
+     opacity: 1;
+     transform: scale(1, 1);
+     -ms-transform: scale(1, 1);
+     -moz-transform: scale(1, 1);
+     -webkit-transform: scale(1, 1);
+ }
+
+
+ /**
+ * формируем непосредственно само меню
+ * используем неупорядоченный список для пунктов меню
+ * прикрутим трансфомации и плавные переходы
+ */
+
+ .nav>ul {
+     display: block;
+     margin: 0;
+     padding: 0;
+     list-style: none;
+ }
+
+ .nav>ul>li {
+     line-height: 2.5;
+     opacity: 0;
+     -webkit-transform: translateX(-50%);
+     -moz-transform: translateX(-50%);
+     -ms-transform: translateX(-50%);
+     transform: translateX(-50%);
+     -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
+     -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
+     -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
+     transition: opacity .5s .1s, transform .5s .1s;
+ }
+
+ [id='nav-toggle']:checked~.nav>ul>li {
+     opacity: 1;
+     -webkit-transform: translateX(0);
+     -moz-transform: translateX(0);
+     -ms-transform: translateX(0);
+     transform: translateX(0);
+ }
+
+
+ /* определяем интервалы появления пунктов меню */
+
+ .nav>ul>li:nth-child(2) {
+     -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
+     transition: opacity .5s .2s, transform .5s .2s;
+ }
+
+ .nav>ul>li:nth-child(3) {
+     -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
+     transition: opacity .5s .3s, transform .5s .3s;
+ }
+
+ .nav>ul>li:nth-child(4) {
+     -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
+     transition: opacity .5s .4s, transform .5s .4s;
+ }
+
+ .nav>ul>li:nth-child(5) {
+     -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
+     transition: opacity .5s .5s, transform .5s .5s;
+ }
+
+ .nav>ul>li:nth-child(6) {
+     -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
+     transition: opacity .5s .6s, transform .5s .6s;
+ }
+
+ .nav>ul>li:nth-child(7) {
+     -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
+     transition: opacity .5s .7s, transform .5s .7s;
+ }
+
+
+ /**
+ * оформление ссылок пунктов меню
+ */
+
+ .nav>ul>li>a {
+     display: inline-block;
+     position: relative;
+     padding: 0;
+     font-family: 'Open Sans', sans-serif;
+     font-weight: 300;
+     font-size: 1.2em;
+     color: #dadada;
+     width: 100%;
+     text-decoration: none;
+     /* плавный переход */
+     -webkit-transition: color .5s ease, padding .5s ease;
+     -moz-transition: color .5s ease, padding .5s ease;
+     transition: color .5s ease, padding .5s ease;
+ }
+
+
+ /**
+ * состояние ссылок меню при наведении
+ */
+
+ .nav>ul>li>a:hover,
+ .nav>ul>li>a:focus {
+     color: white;
+     padding-left: 15px;
+ }
+
+
+ /**
+ * линия подчеркивания ссылок меню
+ */
+
+ .nav>ul>li>a:before {
+     content: '';
+     display: block;
+     position: absolute;
+     right: 0;
+     bottom: 0;
+     height: 1px;
+     width: 100%;
+     -webkit-transition: width 0s ease;
+     transition: width 0s ease;
+ }
+
+ .nav>ul>li>a:after {
+     content: '';
+     display: block;
+     position: absolute;
+     left: 0;
+     bottom: 0;
+     height: 1px;
+     width: 100%;
+     background: #3bc1a0;
+     -webkit-transition: width .5s ease;
+     transition: width .5s ease;
+ }
+
+
+ /**
+ * анимируем линию подчеркивания 
+ * ссылок при наведении
+ */
+
+ .nav>ul>li>a:hover:before {
+     width: 0%;
+     /* background: #3bc1a0; */
+     -webkit-transition: width .5s ease;
+     transition: width .5s ease;
+ }
+
+ .nav>ul>li>a:hover:after {
+     width: 0%;
+     background: transparent;
+     -webkit-transition: width 0s ease;
+     transition: width 0s ease;
+ }
+
+
+ /* фон затемнения на основной контент 
+ * при этом элементы блокируютя
+ * спорная такая фича, если оно вам надо
+ * просто раскомментируйте
+*/
+
+
+ .mask-content {
+     display: block;
+     position: fixed;
+     top: 0;
+     left: 0;
+     z-index: 1000;
+     width: 100%;
+     height: 100%;
+     background-color: rgba(0, 0, 0, 0.4);
+     visibility: hidden;
+     opacity: 0;
+ }
+
+ [id='nav-toggle']:checked~.mask-content {
+     visibility: visible;
+     opacity: 1;
+     -webkit-transition: opacity .5s, visibility .5s;
+     transition: opacity .5s, visibility .5s;
+ }
\ No newline at end of file
diff --git a/html/logo.png b/html/logo.png
new file mode 100755
index 0000000..a57ff5d
Binary files /dev/null and b/html/logo.png differ
diff --git a/main/CMakeLists.txt b/main/CMakeLists.txt
index 01dfbcf..d62b68e 100644
--- a/main/CMakeLists.txt
+++ b/main/CMakeLists.txt
@@ -1 +1,5 @@
-idf_component_register(SRCS "ate0004.c" INCLUDE_DIRS "" REQUIRES zh_pcf8574 esp_wifi nvs_flash zh_ota_server)
\ No newline at end of file
+idf_component_register(SRCS "web_server.c" "ate0004.c" INCLUDE_DIRS "" REQUIRES zh_pcf8574 esp_wifi nvs_flash zh_ota_server EMBED_FILES "../html/index/index.html" 
+            "../html/index/index_style.css"
+            "../html/index/index_script.js"
+            "../html/favicon.ico"
+            "../html/logo.png")
\ No newline at end of file
diff --git a/main/ate0004.c b/main/ate0004.c
index 9cf3236..c37afe0 100644
--- a/main/ate0004.c
+++ b/main/ate0004.c
@@ -1,7 +1,7 @@
 #include "ate0004.h"
 
 static i2c_master_bus_handle_t _i2c_bus_handle = NULL;
-static httpd_handle_t _webserver_handle = NULL;
+// static httpd_handle_t _webserver_handle = NULL;
 
 static zh_pcf8574_handle_t _button_handle = {0};
 static zh_pcf8574_handle_t _led_handle = {0};
@@ -12,11 +12,12 @@ static bool _is_ret_enabled = false;
 static bool _is_ext_enabled = false;
 
 static void _zh_wifi_softap_init(void);
-static void _zh_webserver_init(void);
 static void _zh_gpio_init(void);
 static void _zh_pcf8574_init(void);
 static void _zh_pcf8574_event_handler(void *arg, esp_event_base_t event_base, int32_t event_id, void *event_data);
 
+extern void _zh_webserver_init(void);
+
 void app_main(void)
 {
     nvs_flash_init();
@@ -50,12 +51,12 @@ static void _zh_wifi_softap_init(void)
     esp_wifi_start();
 }
 
-static void _zh_webserver_init(void)
-{
-    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
-    httpd_start(&_webserver_handle, &config);
-    zh_ota_server_init(_webserver_handle);
-}
+// static void _zh_webserver_init(void)
+// {
+//     httpd_config_t config = HTTPD_DEFAULT_CONFIG();
+//     httpd_start(&_webserver_handle, &config);
+//     zh_ota_server_init(_webserver_handle);
+// }
 
 static void _zh_gpio_init(void)
 {
diff --git a/main/web_server.c b/main/web_server.c
new file mode 100644
index 0000000..b7f943a
--- /dev/null
+++ b/main/web_server.c
@@ -0,0 +1,202 @@
+#include "esp_wifi.h"
+#include "esp_http_server.h"
+
+static httpd_handle_t _webserver_handle = NULL;
+
+static void _ws_async_send(void *arg);
+
+static esp_err_t _fav_handler(httpd_req_t *req);
+static esp_err_t _logo_handler(httpd_req_t *req);
+
+static esp_err_t _index_page_handler(httpd_req_t *req);
+static esp_err_t _index_page_css_handler(httpd_req_t *req);
+static esp_err_t _index_page_js_handler(httpd_req_t *req);
+static esp_err_t _index_page_ws_handler(httpd_req_t *req);
+
+// static esp_err_t _ws_send(httpd_handle_t *handle, char *payload);
+
+static const httpd_uri_t _fav = {
+    .uri = "/favicon.ico",
+    .method = HTTP_GET,
+    .handler = _fav_handler,
+    .user_ctx = NULL};
+
+static const httpd_uri_t _logo = {
+    .uri = "/logo.png",
+    .method = HTTP_GET,
+    .handler = _logo_handler,
+    .user_ctx = NULL};
+
+static const httpd_uri_t _index_page = {
+    .uri = "/",
+    .method = HTTP_GET,
+    .handler = _index_page_handler,
+    .user_ctx = NULL};
+
+static const httpd_uri_t _index_page_css = {
+    .uri = "/index_style.css",
+    .method = HTTP_GET,
+    .handler = _index_page_css_handler,
+    .user_ctx = NULL};
+
+static const httpd_uri_t _index_page_js = {
+    .uri = "/index_script.js",
+    .method = HTTP_GET,
+    .handler = _index_page_js_handler,
+    .user_ctx = NULL};
+
+static const httpd_uri_t _index_page_ws = {
+    .uri = "/ws",
+    .method = HTTP_GET,
+    .handler = _index_page_ws_handler,
+    .user_ctx = NULL,
+    .is_websocket = true};
+
+void _zh_webserver_init(void)
+{
+    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
+    httpd_start(&_webserver_handle, &config);
+    httpd_register_uri_handler(_webserver_handle, &_fav);
+    httpd_register_uri_handler(_webserver_handle, &_logo);
+    httpd_register_uri_handler(_webserver_handle, &_index_page);
+    httpd_register_uri_handler(_webserver_handle, &_index_page_css);
+    httpd_register_uri_handler(_webserver_handle, &_index_page_js);
+    httpd_register_uri_handler(_webserver_handle, &_index_page_ws);
+    // httpd_config_t config = HTTPD_DEFAULT_CONFIG();
+    // httpd_start(&_webserver_handle, &config);
+    // zh_ota_server_init(_webserver_handle);
+}
+
+void _zh_webserver_send(char *payload)
+{
+    httpd_queue_work(_webserver_handle, _ws_async_send, payload);
+}
+
+static void _ws_async_send(void *arg)
+{
+    httpd_ws_frame_t ws_package = {0};
+    // struct async_resp_arg *resp_arg = arg;
+    // httpd_handle_t hd = resp_arg->hd;
+    // int fd = resp_arg->fd;
+
+    // led_state = !led_state;
+    // // gpio_set_level(LED_PIN, led_state);
+
+    // char buff[4];
+    // memset(buff, 0, sizeof(buff));
+    // sprintf(buff, "%d", led_state);
+
+    // memset(&ws_package, 0, sizeof(httpd_ws_frame_t));
+    ws_package.payload = (uint8_t *)arg;
+    ws_package.len = strlen(arg);
+    ws_package.type = HTTPD_WS_TYPE_TEXT;
+
+    static size_t max_clients = CONFIG_LWIP_MAX_LISTENING_TCP;
+    size_t fds = max_clients;
+    int client_fds[max_clients];
+
+    esp_err_t ret = httpd_get_client_list(_webserver_handle, &fds, client_fds);
+
+    // if (ret != ESP_OK)
+    // {
+    //     return ESP_OK;
+    // }
+
+    for (uint8_t i = 0; i <= fds; ++i)
+    {
+        int client_info = httpd_ws_get_fd_info(_webserver_handle, client_fds[i]);
+        if (client_info == HTTPD_WS_CLIENT_WEBSOCKET)
+        {
+            httpd_ws_send_frame_async(_webserver_handle, client_fds[i], &ws_package);
+        }
+    }
+    // free(resp_arg);
+}
+
+static esp_err_t _fav_handler(httpd_req_t *req)
+{
+    extern const unsigned char favicon_ico_start[] asm("_binary_favicon_ico_start");
+    extern const unsigned char favicon_ico_end[] asm("_binary_favicon_ico_end");
+    const size_t favicon_ico_size = (favicon_ico_end - favicon_ico_start);
+    httpd_resp_set_type(req, "image/x-icon");
+    httpd_resp_send_chunk(req, (const char *)favicon_ico_start, favicon_ico_size);
+    httpd_resp_sendstr_chunk(req, NULL);
+    return ESP_OK;
+}
+
+static esp_err_t _logo_handler(httpd_req_t *req)
+{
+    extern const unsigned char logo_png_start[] asm("_binary_logo_png_start");
+    extern const unsigned char logo_png_end[] asm("_binary_logo_png_end");
+    const size_t logo_png_size = (logo_png_end - logo_png_start);
+    httpd_resp_set_type(req, "image/png");
+    httpd_resp_send_chunk(req, (const char *)logo_png_start, logo_png_size);
+    httpd_resp_sendstr_chunk(req, NULL);
+    return ESP_OK;
+}
+
+static esp_err_t _index_page_handler(httpd_req_t *req)
+{
+    extern const unsigned char index_html_start[] asm("_binary_index_html_start");
+    extern const unsigned char index_html_end[] asm("_binary_index_html_end");
+    const size_t index_html_size = (index_html_end - index_html_start);
+    httpd_resp_set_type(req, "text/html");
+    httpd_resp_send_chunk(req, (const char *)index_html_start, index_html_size);
+    httpd_resp_sendstr_chunk(req, NULL);
+    return ESP_OK;
+}
+
+static esp_err_t _index_page_css_handler(httpd_req_t *req)
+{
+    extern const unsigned char index_style_css_start[] asm("_binary_index_style_css_start");
+    extern const unsigned char index_style_css_end[] asm("_binary_index_style_css_end");
+    const size_t index_style_css_size = (index_style_css_end - index_style_css_start);
+    httpd_resp_set_type(req, "text/css");
+    httpd_resp_send_chunk(req, (const char *)index_style_css_start, index_style_css_size);
+    httpd_resp_sendstr_chunk(req, NULL);
+    return ESP_OK;
+}
+
+static esp_err_t _index_page_js_handler(httpd_req_t *req)
+{
+    extern const unsigned char index_script_js_start[] asm("_binary_index_script_js_start");
+    extern const unsigned char index_script_js_end[] asm("_binary_index_script_js_end");
+    const size_t index_script_js_size = (index_script_js_end - index_script_js_start);
+    httpd_resp_set_type(req, "text/javascript");
+    httpd_resp_send_chunk(req, (const char *)index_script_js_start, index_script_js_size);
+    httpd_resp_sendstr_chunk(req, NULL);
+    return ESP_OK;
+}
+
+static esp_err_t _index_page_ws_handler(httpd_req_t *req)
+{
+    if (req->method == HTTP_GET)
+    {
+        // ESP_LOGI(TAG, "Handshake done, the new connection was opened");
+        // httpd_queue_work(_webserver_handle, ws_async_snd, NULL);
+        return ESP_OK;
+    }
+
+    httpd_ws_frame_t ws_package = {0};
+    uint8_t *buf = NULL;
+    ws_package.type = HTTPD_WS_TYPE_TEXT;
+    httpd_ws_recv_frame(req, &ws_package, 0);
+    // ZH_ERROR_CHECK(err == ESP_OK, err, NULL, "Main page ws handler error.");
+    if (ws_package.len > 0)
+    {
+        buf = heap_caps_calloc(1, ws_package.len + 1, MALLOC_CAP_8BIT);
+        // ZH_ERROR_CHECK(buf != NULL, ESP_ERR_NO_MEM, NULL, "Main page ws handler error.");
+        ws_package.payload = buf;
+        httpd_ws_recv_frame(req, &ws_package, ws_package.len);
+        // ZH_ERROR_CHECK(buf != NULL, err, heap_caps_free(buf), "Main page ws handler error.");
+    }
+    if (ws_package.type == HTTPD_WS_TYPE_TEXT)
+    {
+        if (strcmp((char *)ws_package.payload, "toggle") == 0)
+        {
+            heap_caps_free(buf);
+            // return trigger_async_send(req->handle, req);
+        }
+    }
+    return ESP_OK;
+}
\ No newline at end of file
