diff --git a/.gitignore b/.gitignore
index 4645960..594805f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ example_ota_ws/managed_components/espressif__esp_encrypted_img/test/test.c
 example_ota_ws/managed_components/espressif__esp_encrypted_img/test/certs/test_rsa_private_key.pem
 example_ota_ws/managed_components/espressif__esp_encrypted_img/tools/esp_enc_img_gen.py
 example_ota_ws/dependencies.lock
+example_ota_ws/.clangd
diff --git a/example_ota_ws/dependencies.lock b/example_ota_ws/dependencies.lock
index 0edada4..c8db201 100644
--- a/example_ota_ws/dependencies.lock
+++ b/example_ota_ws/dependencies.lock
@@ -1,9 +1,10 @@
 dependencies:
   idf:
-    component_hash: null
     source:
       type: idf
-    version: 5.2.0
-manifest_hash: 2ac596d0d5a708817329b21531cbf3574c7c8daaf36dca979b5dd32a78fc2857
-target: esp32c3
-version: 1.0.0
+    version: 5.5.0
+direct_dependencies:
+- idf
+manifest_hash: 34aecadf98bf836e73683541d87743fff6a6d5b284a8f8c275b5535a00208c94
+target: esp32s3
+version: 2.0.0
diff --git a/source/ota_ws_update.html b/source/ota_ws_update.html
index d1ef8ee..960839c 100644
--- a/source/ota_ws_update.html
+++ b/source/ota_ws_update.html
@@ -1,156 +1,534 @@
 <!DOCTYPE html>
-
 <html lang="ru">
-
 <head>
-    <title>ОTA UPDATE</title>
+    <title>OTA UPDATE - Обновление прошивки</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <style>
-        .column {
-            float: left;
+        /* Стили для SVG иконок */
+        .icon {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            vertical-align: middle;
+            margin-right: 8px;
+        }
+        
+        /* Основные стили */
+        :root {
+            --primary: #4361ee;
+            --primary-dark: #3a56d4;
+            --secondary: #6c757d;
+            --success: #28a745;
+            --warning: #ffc107;
+            --danger: #dc3545;
+            --info: #17a2b8;
+            --light: #f8f9fa;
+            --dark: #343a40;
+            --background: #f5f7fa;
+            --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --transition: all 0.3s ease;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background-color: var(--background);
+            color: var(--dark);
+            line-height: 1.6;
+            padding: 0;
+            margin: 0;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .container {
             width: 100%;
-            margin-top: 2px;
-            margin-bottom: 2px;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            padding: 20px;
+            text-align: center;
+            border-radius: 10px;
+            margin-bottom: 25px;
+            box-shadow: var(--card-shadow);
+        }
+
+        .header h1 {
+            font-size: 1.8rem;
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+        }
+
+        .header p {
+            font-size: 1rem;
+            opacity: 0.9;
+        }
+
+        .card {
+            background-color: white;
+            border-radius: 10px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: var(--card-shadow);
+            transition: var(--transition);
+        }
+
+        .card:hover {
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
         }
 
         .btn {
-            float: left;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 14px 20px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
             width: 100%;
-            margin: 2px;
-
+            margin-bottom: 12px;
         }
 
-        .cl1 {
-            float: left;
-            width: 100%;
-            margin: 2px;
-            margin-top: 2px;
-            margin-bottom: 2px;
-        }
-
-        .cl01 {
-            float: left;
-            width: 100%;
-            text-align: center;
-            margin-top: 2px;
-            margin-bottom: 2px;
-        }
-
-        .cl02 {
-            float: left;
-            width: 100%;
-            text-align: center;
-            margin-top: 2px;
-            margin-bottom: 2px;
-        }
-
-        .hdr {
-            float: left;
-            width: 100%;
-            text-align: center;
+        .btn-primary {
+            background-color: var(--primary);
             color: white;
-            background-color: blue;
-            padding: 5px;
-            margin: 5px;
         }
 
-        .logstr {
-            width: 100%;
-            float: left;
+        .btn-primary:hover {
+            background-color: var(--primary-dark);
+            transform: translateY(-2px);
+        }
+
+        .btn-success {
+            background-color: var(--success);
+            color: white;
+        }
+
+        .btn-success:hover {
+            background-color: #218838;
+            transform: translateY(-2px);
+        }
+
+        .btn-warning {
+            background-color: var(--warning);
+            color: var(--dark);
+        }
+
+        .btn-warning:hover {
+            background-color: #e0a800;
+            transform: translateY(-2px);
+        }
+
+        .btn-danger {
+            background-color: var(--danger);
+            color: white;
+        }
+
+        .btn-danger:hover {
+            background-color: #c82333;
+            transform: translateY(-2px);
+        }
+
+        .btn-secondary {
+            background-color: var(--secondary);
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background-color: #5a6268;
+            transform: translateY(-2px);
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none !important;
+        }
+
+        .progress-container {
+            margin: 20px 0;
+        }
+
+        .progress-info {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            font-size: 14px;
+            color: var(--secondary);
+        }
+
+        .progress-bar {
+            height: 20px;
+            background-color: #e9ecef;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .progress {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary), var(--info));
+            border-radius: 10px;
+            transition: width 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 12px;
+            font-weight: bold;
+        }
+
+        .status-card {
+            background-color: #f8f9fa;
+            border-left: 4px solid var(--info);
+            padding: 15px;
+            border-radius: 8px;
+            margin: 15px 0;
+            font-size: 14px;
+        }
+
+        .status-success {
+            border-left-color: var(--success);
+            background-color: rgba(40, 167, 69, 0.1);
+        }
+
+        .status-error {
+            border-left-color: var(--danger);
+            background-color: rgba(220, 53, 69, 0.1);
+        }
+
+        .status-warning {
+            border-left-color: var(--warning);
+            background-color: rgba(255, 193, 7, 0.1);
+        }
+
+        .connection-status {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 10px;
+            border-radius: 6px;
+            margin-bottom: 20px;
+            background-color: #f8f9fa;
+            font-weight: 500;
+        }
+
+        .connected {
+            color: var(--success);
+            background-color: rgba(40, 167, 69, 0.1);
+        }
+
+        .disconnected {
+            color: var(--danger);
+            background-color: rgba(220, 53, 69, 0.1);
+        }
+
+        .status-indicator {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+
+        .connected .status-indicator {
+            background-color: var(--success);
+        }
+
+        .disconnected .status-indicator {
+            background-color: var(--danger);
+        }
+
+        .file-info {
+            background-color: #e9ecef;
+            padding: 12px;
+            border-radius: 8px;
+            margin: 15px 0;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .section-title {
+            font-size: 18px;
+            margin-bottom: 15px;
+            color: var(--dark);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: auto;
+            padding: 20px;
+            color: var(--secondary);
+            font-size: 0.9rem;
+        }
+
+        @media (min-width: 768px) {
+            .btn-container {
+                display: flex;
+                gap: 12px;
+            }
+            
+            .btn-container .btn {
+                width: 50%;
+                margin-bottom: 0;
+            }
+            
+            .header h1 {
+                font-size: 2.2rem;
+            }
         }
     </style>
-
 </head>
 
 <body>
-    <div class="hdr">OTA UPDATE</div>
+    <!-- SVG иконки -->
+    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+        <!-- Иконка синхронизации -->
+        <symbol id="sync-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0020 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 004 12c0 4.42 3.58 8 8 8v3l4-4l-4-4v3z"/>
+        </symbol>
+        
+        <!-- Иконка предупреждения -->
+        <symbol id="warning-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+        </symbol>
+        
+        <!-- Иконка загрузки файла -->
+        <symbol id="upload-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
+        </symbol>
+        
+        <!-- Иконка папки -->
+        <symbol id="folder-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10z"/>
+        </symbol>
+        
+        <!-- Иконка файла кода -->
+        <symbol id="file-code-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm4.5 12.5l-1.77-1.77L10.23 12 8.73 10.5l1.77-1.77L12 10.23l1.5-1.5 1.77 1.77L13.77 12l1.5 1.5-1.77 1.77L12 13.77l-1.5 1.5z"/>
+        </symbol>
+        
+        <!-- Иконка воспроизведения -->
+        <symbol id="play-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M8 5v14l11-7z"/>
+        </symbol>
+        
+        <!-- Иконка отмены -->
+        <symbol id="cancel-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
+        </symbol>
+        
+        <!-- Иконка подтверждения -->
+        <symbol id="check-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+        </symbol>
+        
+        <!-- Иконка отката -->
+        <symbol id="undo-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
+        </symbol>
+        
+        <!-- Иконка питания -->
+        <symbol id="power-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
+        </symbol>
+        
+        <!-- Иконка дома -->
+        <symbol id="home-icon" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+        </symbol>
+    </svg>
 
-    <div class="column">
-        <button class="btn" id="goHome">Home Page</button>
-    </div>
-    <div id="rollback" style="display:none">
-        <div class="column">
-            <button class="btn" id="otaVerifyApp">Click to confirm and commit OTA update</button>
-        </div>
-        <div class="column">
-            <button class="btn" id="otaRollback">Cancel OTA. Click to rollback update and restart</button>
-        </div>
-    </div>
-    <div id="update" style="display:block">
-        <div class="cl1" style="display:none">
-            <label class="cl01" for="otaFile">Select the new OTA firmware file</label>
-            <input class="cl02" type="file" id="otaFile" placeholder="select file" onchange="readOtaFile(this)">
-        </div>
-        <div class="column" style="display:block" id="otaFileSelectVisible">
-            <button class="btn" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">File
-                Select</button>
+    <div class="container">
+        <div class="header">
+            <h1><svg class="icon" style="width: 24px; height: 24px;"><use href="#sync-icon"></use></svg> OTA UPDATE</h1>
+            <p>Обновление прошивки устройства по воздуху</p>
         </div>
 
-        <div class="column" style="display:none" id="otaStartVisible">
-            <button class="btn" id="otaStartCancel">Start OTA update</button>
+        <div class="connection-status disconnected">
+            <span class="status-indicator"></span>
+            <span id="status-text">Не подключено</span>
         </div>
-        <div class="column" style="display:none" id="otaReStartVisible">
-            <button class="btn" id="otaReStart">Reboot with new OTA firmware</button>
+
+        <div id="rollback" class="card hidden">
+            <h2 class="section-title"><svg class="icon"><use href="#warning-icon"></use></svg> Подтверждение обновления</h2>
+            <div class="status-card status-warning">
+                <p>Обновление было загружено, но не подтверждено. Пожалуйста, подтвердите установку новой прошивки или откатитесь к предыдущей версии.</p>
+            </div>
+            
+            <button class="btn btn-success" id="otaVerifyApp">
+                <svg class="icon"><use href="#check-icon"></use></svg> Подтвердить и установить обновление
+            </button>
+            
+            <button class="btn btn-danger" id="otaRollback">
+                <svg class="icon"><use href="#undo-icon"></use></svg> Отменить обновление и откатиться
+            </button>
         </div>
-        <div id="otaProgressVisible" style="display:none">
-            <div class="cl1">
-                <progress class="cl02" id="otaPogress" max=100 value=0>
+
+        <div id="update" class="card">
+            <h2 class="section-title"><svg class="icon"><use href="#upload-icon"></use></svg> Загрузка прошивки</h2>
+            
+            <input type="file" id="otaFile" class="hidden" accept=".bin" onchange="readOtaFile(this)">
+            
+            <button class="btn btn-primary" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">
+                <svg class="icon"><use href="#folder-icon"></use></svg> Выбрать файл прошивки
+            </button>
+            
+            <div id="fileInfo" class="file-info hidden">
+                <svg class="icon"><use href="#file-code-icon"></use></svg>
+                <span id="fileName">Файл не выбран</span>
+            </div>
+
+            <div id="otaProgressVisible" class="hidden">
+                <div class="progress-container">
+                    <div class="progress-info">
+                        <span id="progressStatus">Загрузка...</span>
+                        <span id="progressPercent">0%</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress" id="otaProgress" style="width: 0%">0%</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="btn-container">
+                <button class="btn btn-warning" id="otaStartCancel">
+                    <svg class="icon"><use href="#play-icon"></use></svg> Начать обновление
+                </button>
+                
+                <button class="btn btn-success hidden" id="otaReStart">
+                    <svg class="icon"><use href="#power-icon"></use></svg> Перезагрузить с новой прошивкой
+                </button>
             </div>
         </div>
-    </div>
-    <script>
 
+        <button class="btn btn-secondary" id="goHome">
+            <svg class="icon"><use href="#home-icon"></use></svg> Вернуться на главную
+        </button>
+    </div>
+
+    <div class="footer">
+        <p>NVS Device Management &copy; 2023</p>
+    </div>
+
+    <script>
         let otaData;
         let otaSetChunkSize = 0;
         let otaStartsegment = 0;
         let otaStarted = 0;
 
         function readOtaFile(input) {
+            if (!input.files.length) return;
+            
             let reader = new FileReader();
             let file = input.files[0];
-            document.getElementById('otaFileSelect').innerHTML = "Selected firmware file: " + file.name;
+            
+            // Показываем информацию о файле
+            document.getElementById('fileInfo').classList.remove('hidden');
+            document.getElementById('fileName').textContent = `${file.name} (${formatFileSize(file.size)})`;
+            document.getElementById('otaFileSelect').innerHTML = `<svg class="icon"><use href="#check-icon"></use></svg> Файл выбран: ${file.name}`;
+            
             reader.readAsArrayBuffer(file);
             input.value = null;
 
             reader.onload = function () {
                 otaData = new Uint8Array(reader.result);
-                document.getElementById("otaStartVisible").style.display = "block";
-                document.getElementById("otaProgressVisible").style.display = "none";
-                document.getElementById("otaReStartVisible").style.display = "none";
+                document.getElementById("otaStartCancel").classList.remove('hidden');
+                document.getElementById("otaProgressVisible").classList.add('hidden');
+                document.getElementById("otaReStart").classList.add('hidden');
             };
 
             reader.onerror = function () {
                 console.log(reader.error);
+                showStatus("Ошибка чтения файла", "error");
             };
         }
-    </script>
-    <script>
-        document.getElementById("otaStartCancel").addEventListener("click", function (e) {
-            if (otaData.length > 0 && otaStarted == 0) {
 
+        function formatFileSize(bytes) {
+            if (bytes < 1024) return bytes + " байт";
+            else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + " КБ";
+            else return (bytes / 1048576).toFixed(2) + " МБ";
+        }
+
+        function updateProgress(value, max) {
+            const percent = Math.round((value / max) * 100);
+            const progressBar = document.getElementById("otaProgress");
+            progressBar.style.width = percent + "%";
+            progressBar.textContent = percent + "%";
+            document.getElementById("progressPercent").textContent = percent + "%";
+            document.getElementById("progressStatus").textContent = `Загружено: ${formatFileSize(value)} из ${formatFileSize(max)}`;
+        }
+
+        function showStatus(message, type = "info") {
+            // Здесь можно реализовать отображение статусных сообщений
+            console.log(`${type}: ${message}`);
+        }
+
+        // Обработчики событий
+        document.getElementById("otaStartCancel").addEventListener("click", function (e) {
+            if (otaData && otaData.length > 0 && otaStarted == 0) {
                 socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
                 otaStarted = 1;
-                this.innerHTML = "Click to Cancel";
+                this.innerHTML = "<svg class='icon'><use href='#cancel-icon'></use></svg> Отменить загрузку";
                 document.getElementById("otaFileSelect").disabled = true;
-                document.getElementById("otaProgressVisible").style.display = "block";
-                document.getElementById("otaPogress").max = otaData.length;
-            }
-            else {
+                document.getElementById("otaProgressVisible").classList.remove("hidden");
+                updateProgress(0, otaData.length);
+            } else {
                 otaStarted = 0;
                 socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
+                this.innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
+                document.getElementById("otaFileSelect").disabled = false;
             }
-
         });
+        
         document.getElementById("goHome").addEventListener("click", function (e) {
-            //onclick="window.location.href = '/'"
             socket.close();
             window.location.href = '/';
         });
+        
         document.getElementById("otaReStart").addEventListener("click", function (e) {
             socket.send(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
         });
 
+        // Rollback handlers
+        document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
+            socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
+            document.getElementById("rollback").classList.add("hidden");
+            document.getElementById("update").classList.remove("hidden");
+        });
+
+        document.getElementById("otaRollback").addEventListener("click", function (e) {
+            socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
+            document.getElementById("rollback").classList.add("hidden");
+            document.getElementById("update").classList.remove("hidden");
+        });
+
         function receiveWsData(data) {
             try {
                 let obj = JSON.parse(data);
@@ -160,88 +538,79 @@
                         break;
                     case "otaGetChunk":
                         let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
-                        document.getElementById("otaPogress").value = obj.value;
-                        document.getElementById("otaStartCancel").innerHTML = "Ota download. Size = " + otaData.length + " Segment = " + obj.value + " Click to Cancel";
+                        updateProgress(obj.value, otaData.length);
+                        document.getElementById("otaStartCancel").innerHTML = `<svg class='icon'><use href='#cancel-icon'></use></svg> Загрузка: ${formatFileSize(obj.value)} из ${formatFileSize(otaData.length)}`;
                         socket.send(otaDataSend);
                         break;
                     case "otaEnd":
                         otaStartsegment = 0;
                         otaStarted = 0;
-                        document.getElementById("otaStartVisible").style.display = "none";
-                        document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
-                        document.getElementById("otaPogress").value = otaData.length;
+                        document.getElementById("otaStartCancel").classList.add("hidden");
+                        document.getElementById("otaStartCancel").innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
+                        updateProgress(otaData.length, otaData.length);
                         document.getElementById("otaFileSelect").disabled = false;
-                        document.getElementById("otaReStartVisible").style.display = "block";
-                        document.getElementById("otaReStart").innerHTML = "The firmware is loaded. Click to reboot with new OTA firmware";
+                        document.getElementById("otaReStart").classList.remove("hidden");
+                        document.getElementById("otaReStart").innerHTML = "<svg class='icon'><use href='#power-icon'></use></svg> Прошивка загружена. Перезагрузить устройство";
                         document.getElementById("otaReStart").disabled = false;
+                        showStatus("Прошивка успешно загружена", "success");
                         break;
                     case "otaError":
                     case "otaCancel":
                         otaStartsegment = 0;
                         otaStarted = 0;
-                        document.getElementById("otaStartVisible").style.display = "none";
-                        document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
-                        document.getElementById("otaPogress").value = otaData.length;
+                        document.getElementById("otaStartCancel").classList.remove("hidden");
+                        document.getElementById("otaStartCancel").innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
                         document.getElementById("otaFileSelect").disabled = false;
-                        document.getElementById("otaReStartVisible").style.display = "block";
-                        document.getElementById("otaReStart").innerHTML = "ОТА firmware download canceled " + obj.value;
+                        document.getElementById("otaReStart").classList.remove("hidden");
+                        document.getElementById("otaReStart").innerHTML = "Загрузка отменена: " + obj.value;
                         document.getElementById("otaReStart").disabled = true;
+                        showStatus("Загрузка отменена: " + obj.value, "error");
                         break;
                     case "otaCheckRollback":
-                        document.getElementById("rollback").style.display = "block";
-                        document.getElementById("update").style.display = "none";
+                        document.getElementById("rollback").classList.remove("hidden");
+                        document.getElementById("update").classList.add("hidden");
                         break;
                 }
-            }
-            catch
-            {
+            } catch {
                 console.log(data + "Error msg");
             }
-        };
-    </script>
+        }
 
-    <script>  // rollback
-        document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
-            socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
-            document.getElementById("rollback").style.display = "none";
-            document.getElementById("update").style.display = "block";
-        });
-
-        document.getElementById("otaRollback").addEventListener("click", function (e) {
-            socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
-            document.getElementById("rollback").style.display = "none";
-            document.getElementById("update").style.display = "block";
-        });
-
-    </script>
-
-    <script> // основной старт скрипта, открыть сокет
-        // создать сокет по адресу
-        let protocol = "ws:"
-        if(document.location.protocol == "https:") protocol = "wss:"
+        // WebSocket connection
+        let protocol = "ws:";
+        if (document.location.protocol == "https:") protocol = "wss:";
         let wsHostStr = protocol + "//" + document.location.host + document.location.pathname;
         wsHostStr += (document.location.pathname == '/') ? "ws" : "/ws";
         var socket = new WebSocket(wsHostStr);
         socket.binaryType = "arraybuffer";
-    </script>
 
-    <script> // события WS
+        // WebSocket events
         socket.onopen = function () {
             console.log("connect ws");
+            document.getElementById("status-text").textContent = "Подключено";
+            document.querySelector(".connection-status").classList.remove("disconnected");
+            document.querySelector(".connection-status").classList.add("connected");
         };
+        
         socket.onclose = function (event) {
             console.log("close ws - reload");
+            document.getElementById("status-text").textContent = "Не подключено";
+            document.querySelector(".connection-status").classList.remove("connected");
+            document.querySelector(".connection-status").classList.add("disconnected");
             setTimeout(() => document.location.reload(), 2000);
         };
+        
         socket.onerror = function () {
             console.log("error ws");
+            document.getElementById("status-text").textContent = "Ошибка подключения";
+            document.querySelector(".connection-status").classList.remove("connected");
+            document.querySelector(".connection-status").classList.add("disconnected");
             setTimeout(() => document.location.reload(), 2000);
         };
+        
         socket.onmessage = function (event) {
             receiveWsData(event.data);
         };
     </script>
-
 </body>
-
 </html>
\ No newline at end of file
diff --git a/source/ota_ws_update_.html b/source/ota_ws_update_.html
new file mode 100644
index 0000000..2b31e5f
--- /dev/null
+++ b/source/ota_ws_update_.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+
+<html lang="ru">
+
+<head>
+    <title>OTA UPDATE</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <style>
+        .column {
+            float: left;
+            width: 100%;
+            margin-top: 2px;
+            margin-bottom: 2px;
+        }
+
+        .btn {
+            float: left;
+            width: 100%;
+            margin: 2px;
+
+        }
+
+        .cl1 {
+            float: left;
+            width: 100%;
+            margin: 2px;
+            margin-top: 2px;
+            margin-bottom: 2px;
+        }
+
+        .cl01 {
+            float: left;
+            width: 100%;
+            text-align: center;
+            margin-top: 2px;
+            margin-bottom: 2px;
+        }
+
+        .cl02 {
+            float: left;
+            width: 100%;
+            text-align: center;
+            margin-top: 2px;
+            margin-bottom: 2px;
+        }
+
+        .hdr {
+            float: left;
+            width: 100%;
+            text-align: center;
+            color: white;
+            background-color: blue;
+            padding: 5px;
+            margin: 5px;
+        }
+
+        .logstr {
+            width: 100%;
+            float: left;
+        }
+    </style>
+
+</head>
+
+<body>
+    <div class="hdr">OTA UPDATE</div>
+
+    <div class="column">
+        <button class="btn" id="goHome">Home Page</button>
+    </div>
+    <div id="rollback" style="display:none">
+        <div class="column">
+            <button class="btn" id="otaVerifyApp">Click to confirm and commit OTA update</button>
+        </div>
+        <div class="column">
+            <button class="btn" id="otaRollback">Cancel OTA. Click to rollback update and restart</button>
+        </div>
+    </div>
+    <div id="update" style="display:block">
+        <div class="cl1" style="display:none">
+            <label class="cl01" for="otaFile">Select the new OTA firmware file</label>
+            <input class="cl02" type="file" id="otaFile" placeholder="select file" onchange="readOtaFile(this)">
+        </div>
+        <div class="column" style="display:block" id="otaFileSelectVisible">
+            <button class="btn" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">File
+                Select</button>
+        </div>
+
+        <div class="column" style="display:none" id="otaStartVisible">
+            <button class="btn" id="otaStartCancel">Start OTA update</button>
+        </div>
+        <div class="column" style="display:none" id="otaReStartVisible">
+            <button class="btn" id="otaReStart">Reboot with new OTA firmware</button>
+        </div>
+        <div id="otaProgressVisible" style="display:none">
+            <div class="cl1">
+                <progress class="cl02" id="otaPogress" max=100 value=0>
+            </div>
+        </div>
+    </div>
+    <script>
+
+        let otaData;
+        let otaSetChunkSize = 0;
+        let otaStartsegment = 0;
+        let otaStarted = 0;
+
+        function readOtaFile(input) {
+            let reader = new FileReader();
+            let file = input.files[0];
+            document.getElementById('otaFileSelect').innerHTML = "Selected firmware file: " + file.name;
+            reader.readAsArrayBuffer(file);
+            input.value = null;
+
+            reader.onload = function () {
+                otaData = new Uint8Array(reader.result);
+                document.getElementById("otaStartVisible").style.display = "block";
+                document.getElementById("otaProgressVisible").style.display = "none";
+                document.getElementById("otaReStartVisible").style.display = "none";
+            };
+
+            reader.onerror = function () {
+                console.log(reader.error);
+            };
+        }
+    </script>
+    <script>
+        document.getElementById("otaStartCancel").addEventListener("click", function (e) {
+            if (otaData.length > 0 && otaStarted == 0) {
+
+                socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
+                otaStarted = 1;
+                this.innerHTML = "Click to Cancel";
+                document.getElementById("otaFileSelect").disabled = true;
+                document.getElementById("otaProgressVisible").style.display = "block";
+                document.getElementById("otaPogress").max = otaData.length;
+            }
+            else {
+                otaStarted = 0;
+                socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
+            }
+
+        });
+        document.getElementById("goHome").addEventListener("click", function (e) {
+            //onclick="window.location.href = '/'"
+            socket.close();
+            window.location.href = '/';
+        });
+        document.getElementById("otaReStart").addEventListener("click", function (e) {
+            socket.send(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
+        });
+
+        function receiveWsData(data) {
+            try {
+                let obj = JSON.parse(data);
+                switch (obj.name) {
+                    case "otaSetChunkSize":
+                        otaSetChunkSize = obj.value;
+                        break;
+                    case "otaGetChunk":
+                        let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
+                        document.getElementById("otaPogress").value = obj.value;
+                        document.getElementById("otaStartCancel").innerHTML = "Ota download. Size = " + otaData.length + " Segment = " + obj.value + " Click to Cancel";
+                        socket.send(otaDataSend);
+                        break;
+                    case "otaEnd":
+                        otaStartsegment = 0;
+                        otaStarted = 0;
+                        document.getElementById("otaStartVisible").style.display = "none";
+                        document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
+                        document.getElementById("otaPogress").value = otaData.length;
+                        document.getElementById("otaFileSelect").disabled = false;
+                        document.getElementById("otaReStartVisible").style.display = "block";
+                        document.getElementById("otaReStart").innerHTML = "The firmware is loaded. Click to reboot with new OTA firmware";
+                        document.getElementById("otaReStart").disabled = false;
+                        break;
+                    case "otaError":
+                    case "otaCancel":
+                        otaStartsegment = 0;
+                        otaStarted = 0;
+                        document.getElementById("otaStartVisible").style.display = "none";
+                        document.getElementById("otaStartCancel").innerHTML = "Start OTA update";
+                        document.getElementById("otaPogress").value = otaData.length;
+                        document.getElementById("otaFileSelect").disabled = false;
+                        document.getElementById("otaReStartVisible").style.display = "block";
+                        document.getElementById("otaReStart").innerHTML = "ОТА firmware download canceled " + obj.value;
+                        document.getElementById("otaReStart").disabled = true;
+                        break;
+                    case "otaCheckRollback":
+                        document.getElementById("rollback").style.display = "block";
+                        document.getElementById("update").style.display = "none";
+                        break;
+                }
+            }
+            catch
+            {
+                console.log(data + "Error msg");
+            }
+        };
+    </script>
+
+    <script>  // rollback
+        document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
+            socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
+            document.getElementById("rollback").style.display = "none";
+            document.getElementById("update").style.display = "block";
+        });
+
+        document.getElementById("otaRollback").addEventListener("click", function (e) {
+            socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
+            document.getElementById("rollback").style.display = "none";
+            document.getElementById("update").style.display = "block";
+        });
+
+    </script>
+
+    <script> // основной старт скрипта, открыть сокет
+        // создать сокет по адресу
+        let protocol = "ws:"
+        if(document.location.protocol == "https:") protocol = "wss:"
+        let wsHostStr = protocol + "//" + document.location.host + document.location.pathname;
+        wsHostStr += (document.location.pathname == '/') ? "ws" : "/ws";
+        var socket = new WebSocket(wsHostStr);
+        socket.binaryType = "arraybuffer";
+    </script>
+
+    <script> // события WS
+        socket.onopen = function () {
+            console.log("connect ws");
+        };
+        socket.onclose = function (event) {
+            console.log("close ws - reload");
+            setTimeout(() => document.location.reload(), 2000);
+        };
+        socket.onerror = function () {
+            console.log("error ws");
+            setTimeout(() => document.location.reload(), 2000);
+        };
+        socket.onmessage = function (event) {
+            receiveWsData(event.data);
+        };
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/source/ota_ws_update_http_new.html b/source/ota_ws_update_http_new.html
deleted file mode 100644
index 960839c..0000000
--- a/source/ota_ws_update_http_new.html
+++ /dev/null
@@ -1,616 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <title>OTA UPDATE - Обновление прошивки</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <style>
-        /* Стили для SVG иконок */
-        .icon {
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-            vertical-align: middle;
-            margin-right: 8px;
-        }
-        
-        /* Основные стили */
-        :root {
-            --primary: #4361ee;
-            --primary-dark: #3a56d4;
-            --secondary: #6c757d;
-            --success: #28a745;
-            --warning: #ffc107;
-            --danger: #dc3545;
-            --info: #17a2b8;
-            --light: #f8f9fa;
-            --dark: #343a40;
-            --background: #f5f7fa;
-            --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --transition: all 0.3s ease;
-        }
-
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-
-        body {
-            background-color: var(--background);
-            color: var(--dark);
-            line-height: 1.6;
-            padding: 0;
-            margin: 0;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .container {
-            width: 100%;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-
-        .header {
-            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-            color: white;
-            padding: 20px;
-            text-align: center;
-            border-radius: 10px;
-            margin-bottom: 25px;
-            box-shadow: var(--card-shadow);
-        }
-
-        .header h1 {
-            font-size: 1.8rem;
-            margin-bottom: 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-        }
-
-        .header p {
-            font-size: 1rem;
-            opacity: 0.9;
-        }
-
-        .card {
-            background-color: white;
-            border-radius: 10px;
-            padding: 25px;
-            margin-bottom: 20px;
-            box-shadow: var(--card-shadow);
-            transition: var(--transition);
-        }
-
-        .card:hover {
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            padding: 14px 20px;
-            border: none;
-            border-radius: 8px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: var(--transition);
-            width: 100%;
-            margin-bottom: 12px;
-        }
-
-        .btn-primary {
-            background-color: var(--primary);
-            color: white;
-        }
-
-        .btn-primary:hover {
-            background-color: var(--primary-dark);
-            transform: translateY(-2px);
-        }
-
-        .btn-success {
-            background-color: var(--success);
-            color: white;
-        }
-
-        .btn-success:hover {
-            background-color: #218838;
-            transform: translateY(-2px);
-        }
-
-        .btn-warning {
-            background-color: var(--warning);
-            color: var(--dark);
-        }
-
-        .btn-warning:hover {
-            background-color: #e0a800;
-            transform: translateY(-2px);
-        }
-
-        .btn-danger {
-            background-color: var(--danger);
-            color: white;
-        }
-
-        .btn-danger:hover {
-            background-color: #c82333;
-            transform: translateY(-2px);
-        }
-
-        .btn-secondary {
-            background-color: var(--secondary);
-            color: white;
-        }
-
-        .btn-secondary:hover {
-            background-color: #5a6268;
-            transform: translateY(-2px);
-        }
-
-        .btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none !important;
-        }
-
-        .progress-container {
-            margin: 20px 0;
-        }
-
-        .progress-info {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 8px;
-            font-size: 14px;
-            color: var(--secondary);
-        }
-
-        .progress-bar {
-            height: 20px;
-            background-color: #e9ecef;
-            border-radius: 10px;
-            overflow: hidden;
-        }
-
-        .progress {
-            height: 100%;
-            background: linear-gradient(90deg, var(--primary), var(--info));
-            border-radius: 10px;
-            transition: width 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 12px;
-            font-weight: bold;
-        }
-
-        .status-card {
-            background-color: #f8f9fa;
-            border-left: 4px solid var(--info);
-            padding: 15px;
-            border-radius: 8px;
-            margin: 15px 0;
-            font-size: 14px;
-        }
-
-        .status-success {
-            border-left-color: var(--success);
-            background-color: rgba(40, 167, 69, 0.1);
-        }
-
-        .status-error {
-            border-left-color: var(--danger);
-            background-color: rgba(220, 53, 69, 0.1);
-        }
-
-        .status-warning {
-            border-left-color: var(--warning);
-            background-color: rgba(255, 193, 7, 0.1);
-        }
-
-        .connection-status {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 10px;
-            border-radius: 6px;
-            margin-bottom: 20px;
-            background-color: #f8f9fa;
-            font-weight: 500;
-        }
-
-        .connected {
-            color: var(--success);
-            background-color: rgba(40, 167, 69, 0.1);
-        }
-
-        .disconnected {
-            color: var(--danger);
-            background-color: rgba(220, 53, 69, 0.1);
-        }
-
-        .status-indicator {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            margin-right: 8px;
-        }
-
-        .connected .status-indicator {
-            background-color: var(--success);
-        }
-
-        .disconnected .status-indicator {
-            background-color: var(--danger);
-        }
-
-        .file-info {
-            background-color: #e9ecef;
-            padding: 12px;
-            border-radius: 8px;
-            margin: 15px 0;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .section-title {
-            font-size: 18px;
-            margin-bottom: 15px;
-            color: var(--dark);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .hidden {
-            display: none;
-        }
-
-        .footer {
-            text-align: center;
-            margin-top: auto;
-            padding: 20px;
-            color: var(--secondary);
-            font-size: 0.9rem;
-        }
-
-        @media (min-width: 768px) {
-            .btn-container {
-                display: flex;
-                gap: 12px;
-            }
-            
-            .btn-container .btn {
-                width: 50%;
-                margin-bottom: 0;
-            }
-            
-            .header h1 {
-                font-size: 2.2rem;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <!-- SVG иконки -->
-    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-        <!-- Иконка синхронизации -->
-        <symbol id="sync-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6c0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0020 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6c0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 004 12c0 4.42 3.58 8 8 8v3l4-4l-4-4v3z"/>
-        </symbol>
-        
-        <!-- Иконка предупреждения -->
-        <symbol id="warning-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
-        </symbol>
-        
-        <!-- Иконка загрузки файла -->
-        <symbol id="upload-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
-        </symbol>
-        
-        <!-- Иконка папки -->
-        <symbol id="folder-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10z"/>
-        </symbol>
-        
-        <!-- Иконка файла кода -->
-        <symbol id="file-code-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M13 9h5.5L13 3.5V9M6 2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm4.5 12.5l-1.77-1.77L10.23 12 8.73 10.5l1.77-1.77L12 10.23l1.5-1.5 1.77 1.77L13.77 12l1.5 1.5-1.77 1.77L12 13.77l-1.5 1.5z"/>
-        </symbol>
-        
-        <!-- Иконка воспроизведения -->
-        <symbol id="play-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M8 5v14l11-7z"/>
-        </symbol>
-        
-        <!-- Иконка отмены -->
-        <symbol id="cancel-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
-        </symbol>
-        
-        <!-- Иконка подтверждения -->
-        <symbol id="check-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
-        </symbol>
-        
-        <!-- Иконка отката -->
-        <symbol id="undo-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
-        </symbol>
-        
-        <!-- Иконка питания -->
-        <symbol id="power-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
-        </symbol>
-        
-        <!-- Иконка дома -->
-        <symbol id="home-icon" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
-        </symbol>
-    </svg>
-
-    <div class="container">
-        <div class="header">
-            <h1><svg class="icon" style="width: 24px; height: 24px;"><use href="#sync-icon"></use></svg> OTA UPDATE</h1>
-            <p>Обновление прошивки устройства по воздуху</p>
-        </div>
-
-        <div class="connection-status disconnected">
-            <span class="status-indicator"></span>
-            <span id="status-text">Не подключено</span>
-        </div>
-
-        <div id="rollback" class="card hidden">
-            <h2 class="section-title"><svg class="icon"><use href="#warning-icon"></use></svg> Подтверждение обновления</h2>
-            <div class="status-card status-warning">
-                <p>Обновление было загружено, но не подтверждено. Пожалуйста, подтвердите установку новой прошивки или откатитесь к предыдущей версии.</p>
-            </div>
-            
-            <button class="btn btn-success" id="otaVerifyApp">
-                <svg class="icon"><use href="#check-icon"></use></svg> Подтвердить и установить обновление
-            </button>
-            
-            <button class="btn btn-danger" id="otaRollback">
-                <svg class="icon"><use href="#undo-icon"></use></svg> Отменить обновление и откатиться
-            </button>
-        </div>
-
-        <div id="update" class="card">
-            <h2 class="section-title"><svg class="icon"><use href="#upload-icon"></use></svg> Загрузка прошивки</h2>
-            
-            <input type="file" id="otaFile" class="hidden" accept=".bin" onchange="readOtaFile(this)">
-            
-            <button class="btn btn-primary" id="otaFileSelect" onclick="document.getElementById('otaFile').click()">
-                <svg class="icon"><use href="#folder-icon"></use></svg> Выбрать файл прошивки
-            </button>
-            
-            <div id="fileInfo" class="file-info hidden">
-                <svg class="icon"><use href="#file-code-icon"></use></svg>
-                <span id="fileName">Файл не выбран</span>
-            </div>
-
-            <div id="otaProgressVisible" class="hidden">
-                <div class="progress-container">
-                    <div class="progress-info">
-                        <span id="progressStatus">Загрузка...</span>
-                        <span id="progressPercent">0%</span>
-                    </div>
-                    <div class="progress-bar">
-                        <div class="progress" id="otaProgress" style="width: 0%">0%</div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="btn-container">
-                <button class="btn btn-warning" id="otaStartCancel">
-                    <svg class="icon"><use href="#play-icon"></use></svg> Начать обновление
-                </button>
-                
-                <button class="btn btn-success hidden" id="otaReStart">
-                    <svg class="icon"><use href="#power-icon"></use></svg> Перезагрузить с новой прошивкой
-                </button>
-            </div>
-        </div>
-
-        <button class="btn btn-secondary" id="goHome">
-            <svg class="icon"><use href="#home-icon"></use></svg> Вернуться на главную
-        </button>
-    </div>
-
-    <div class="footer">
-        <p>NVS Device Management &copy; 2023</p>
-    </div>
-
-    <script>
-        let otaData;
-        let otaSetChunkSize = 0;
-        let otaStartsegment = 0;
-        let otaStarted = 0;
-
-        function readOtaFile(input) {
-            if (!input.files.length) return;
-            
-            let reader = new FileReader();
-            let file = input.files[0];
-            
-            // Показываем информацию о файле
-            document.getElementById('fileInfo').classList.remove('hidden');
-            document.getElementById('fileName').textContent = `${file.name} (${formatFileSize(file.size)})`;
-            document.getElementById('otaFileSelect').innerHTML = `<svg class="icon"><use href="#check-icon"></use></svg> Файл выбран: ${file.name}`;
-            
-            reader.readAsArrayBuffer(file);
-            input.value = null;
-
-            reader.onload = function () {
-                otaData = new Uint8Array(reader.result);
-                document.getElementById("otaStartCancel").classList.remove('hidden');
-                document.getElementById("otaProgressVisible").classList.add('hidden');
-                document.getElementById("otaReStart").classList.add('hidden');
-            };
-
-            reader.onerror = function () {
-                console.log(reader.error);
-                showStatus("Ошибка чтения файла", "error");
-            };
-        }
-
-        function formatFileSize(bytes) {
-            if (bytes < 1024) return bytes + " байт";
-            else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + " КБ";
-            else return (bytes / 1048576).toFixed(2) + " МБ";
-        }
-
-        function updateProgress(value, max) {
-            const percent = Math.round((value / max) * 100);
-            const progressBar = document.getElementById("otaProgress");
-            progressBar.style.width = percent + "%";
-            progressBar.textContent = percent + "%";
-            document.getElementById("progressPercent").textContent = percent + "%";
-            document.getElementById("progressStatus").textContent = `Загружено: ${formatFileSize(value)} из ${formatFileSize(max)}`;
-        }
-
-        function showStatus(message, type = "info") {
-            // Здесь можно реализовать отображение статусных сообщений
-            console.log(`${type}: ${message}`);
-        }
-
-        // Обработчики событий
-        document.getElementById("otaStartCancel").addEventListener("click", function (e) {
-            if (otaData && otaData.length > 0 && otaStarted == 0) {
-                socket.send(JSON.stringify({ name: "otaSize", value: otaData.length }));
-                otaStarted = 1;
-                this.innerHTML = "<svg class='icon'><use href='#cancel-icon'></use></svg> Отменить загрузку";
-                document.getElementById("otaFileSelect").disabled = true;
-                document.getElementById("otaProgressVisible").classList.remove("hidden");
-                updateProgress(0, otaData.length);
-            } else {
-                otaStarted = 0;
-                socket.send(JSON.stringify({ name: "otaCancel", value: "Cancel" }));
-                this.innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
-                document.getElementById("otaFileSelect").disabled = false;
-            }
-        });
-        
-        document.getElementById("goHome").addEventListener("click", function (e) {
-            socket.close();
-            window.location.href = '/';
-        });
-        
-        document.getElementById("otaReStart").addEventListener("click", function (e) {
-            socket.send(JSON.stringify({ name: "otaRestartEsp", value: "restart" }));
-        });
-
-        // Rollback handlers
-        document.getElementById("otaVerifyApp").addEventListener("click", function (e) {
-            socket.send(JSON.stringify({ name: "otaProcessRollback", value: "false" }));
-            document.getElementById("rollback").classList.add("hidden");
-            document.getElementById("update").classList.remove("hidden");
-        });
-
-        document.getElementById("otaRollback").addEventListener("click", function (e) {
-            socket.send(JSON.stringify({ name: "otaProcessRollback", value: "true" }));
-            document.getElementById("rollback").classList.add("hidden");
-            document.getElementById("update").classList.remove("hidden");
-        });
-
-        function receiveWsData(data) {
-            try {
-                let obj = JSON.parse(data);
-                switch (obj.name) {
-                    case "otaSetChunkSize":
-                        otaSetChunkSize = obj.value;
-                        break;
-                    case "otaGetChunk":
-                        let otaDataSend = otaData.subarray(obj.value, obj.value + otaSetChunkSize);
-                        updateProgress(obj.value, otaData.length);
-                        document.getElementById("otaStartCancel").innerHTML = `<svg class='icon'><use href='#cancel-icon'></use></svg> Загрузка: ${formatFileSize(obj.value)} из ${formatFileSize(otaData.length)}`;
-                        socket.send(otaDataSend);
-                        break;
-                    case "otaEnd":
-                        otaStartsegment = 0;
-                        otaStarted = 0;
-                        document.getElementById("otaStartCancel").classList.add("hidden");
-                        document.getElementById("otaStartCancel").innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
-                        updateProgress(otaData.length, otaData.length);
-                        document.getElementById("otaFileSelect").disabled = false;
-                        document.getElementById("otaReStart").classList.remove("hidden");
-                        document.getElementById("otaReStart").innerHTML = "<svg class='icon'><use href='#power-icon'></use></svg> Прошивка загружена. Перезагрузить устройство";
-                        document.getElementById("otaReStart").disabled = false;
-                        showStatus("Прошивка успешно загружена", "success");
-                        break;
-                    case "otaError":
-                    case "otaCancel":
-                        otaStartsegment = 0;
-                        otaStarted = 0;
-                        document.getElementById("otaStartCancel").classList.remove("hidden");
-                        document.getElementById("otaStartCancel").innerHTML = "<svg class='icon'><use href='#play-icon'></use></svg> Начать обновление";
-                        document.getElementById("otaFileSelect").disabled = false;
-                        document.getElementById("otaReStart").classList.remove("hidden");
-                        document.getElementById("otaReStart").innerHTML = "Загрузка отменена: " + obj.value;
-                        document.getElementById("otaReStart").disabled = true;
-                        showStatus("Загрузка отменена: " + obj.value, "error");
-                        break;
-                    case "otaCheckRollback":
-                        document.getElementById("rollback").classList.remove("hidden");
-                        document.getElementById("update").classList.add("hidden");
-                        break;
-                }
-            } catch {
-                console.log(data + "Error msg");
-            }
-        }
-
-        // WebSocket connection
-        let protocol = "ws:";
-        if (document.location.protocol == "https:") protocol = "wss:";
-        let wsHostStr = protocol + "//" + document.location.host + document.location.pathname;
-        wsHostStr += (document.location.pathname == '/') ? "ws" : "/ws";
-        var socket = new WebSocket(wsHostStr);
-        socket.binaryType = "arraybuffer";
-
-        // WebSocket events
-        socket.onopen = function () {
-            console.log("connect ws");
-            document.getElementById("status-text").textContent = "Подключено";
-            document.querySelector(".connection-status").classList.remove("disconnected");
-            document.querySelector(".connection-status").classList.add("connected");
-        };
-        
-        socket.onclose = function (event) {
-            console.log("close ws - reload");
-            document.getElementById("status-text").textContent = "Не подключено";
-            document.querySelector(".connection-status").classList.remove("connected");
-            document.querySelector(".connection-status").classList.add("disconnected");
-            setTimeout(() => document.location.reload(), 2000);
-        };
-        
-        socket.onerror = function () {
-            console.log("error ws");
-            document.getElementById("status-text").textContent = "Ошибка подключения";
-            document.querySelector(".connection-status").classList.remove("connected");
-            document.querySelector(".connection-status").classList.add("disconnected");
-            setTimeout(() => document.location.reload(), 2000);
-        };
-        
-        socket.onmessage = function (event) {
-            receiveWsData(event.data);
-        };
-    </script>
-</body>
-</html>
\ No newline at end of file
