From 94fa6eb9bec9b3182ca4e7cea4925455d14255d5 Mon Sep 17 00:00:00 2001
From: thek4n <thek4n@yandex.ru>
Date: Fri, 5 Jun 2026 02:20:20 +0300
Subject: [PATCH] feat(frontend): add frontend

---
 .gitignore        |  1 +
 assets/index.html | 76 +++++++++++++++++++++++++++++++++++++++--------
 justfile          |  3 +-
 main/main.c       |  3 +-
 4 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6b744e2..a930493 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 build/
 sdkconfig
+main/frontend.h
diff --git a/assets/index.html b/assets/index.html
index d93d9e5..63cbbd0 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -5,6 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <title>IoT Pump controller</title>
     <style>
+        :root {
+            /* Min slider colors */
+            --min-slider-start: #e94f32;
+            --min-slider-end: #cb9085;
+
+            /* Max slider colors */
+            --max-slider-start: #fbbf24;
+            --max-slider-end: #c0bbad;
+
+            /* Common slider styles */
+            --slider-height: 6px;
+            --slider-radius: 12px;
+            --thumb-size: 24px;
+            --shadow-inset: inset 0 1px 2px #00000040;
+        }
+
         * {
             box-sizing: border-box;
             user-select: none;
@@ -93,7 +109,7 @@
             display: flex;
             justify-content: space-between;
             font-weight: 600;
-            color: #e2eafc;
+            color: #e0eafc;
             font-size: 1.2rem;
             margin-bottom: 12px;
             letter-spacing: 0.3px;
@@ -110,28 +126,62 @@
             box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.1);
         }
 
-        input[type="range"] {
+        .slider-base {
             width: 100%;
             height: 6px;
             -webkit-appearance: none;
-            background: linear-gradient(90deg, #1e6f9f, #4aa3cf);
+            appearance: none;
             border-radius: 12px;
             cursor: pointer;
             box-shadow: inset 0 1px 2px #00000040;
         }
 
-        input[type="range"]::-webkit-slider-thumb {
+        .min-slider {
+            width: 100%;
+            height: var(--slider-height);
             -webkit-appearance: none;
-            width: 36px;
-            height: 36px;
-            background: radial-gradient(circle, #6db3e0, #2c6c9e);
+            background: linear-gradient(90deg, var(--min-slider-start), var(--min-slider-end));
+            border-radius: var(--slider-radius);
+            cursor: pointer;
+            box-shadow: var(--shadow-inset);
+        }
+
+        .max-slider {
+            width: 100%;
+            height: var(--slider-height);
+            -webkit-appearance: none;
+            background: linear-gradient(90deg, var(--max-slider-start), var(--max-slider-end));
+            border-radius: var(--slider-radius);
+            cursor: pointer;
+            box-shadow: var(--shadow-inset);
+        }
+
+        .min-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: var(--thumb-size);
+            height: var(--thumb-size);
+            background: radial-gradient(circle, var(--min-slider-start), var(--min-slider-end));
             border-radius: 50%;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(210, 230, 250, 0.7);
-            border: 1px solid #b8d0ff;
             cursor: pointer;
             transition: transform 0.08s;
         }
 
+        .max-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: var(--thumb-size);
+            height: var(--thumb-size);
+            background: radial-gradient(circle, var(--max-slider-start), var(--max-slider-end));
+            border-radius: 50%;
+            cursor: pointer;
+            transition: transform 0.08s;
+        }
+
+        /* Optional: Add hover effect for thumbs */
+        .min-slider::-webkit-slider-thumb:hover,
+        .max-slider::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+        }
+
         input[type="range"]::-webkit-slider-thumb:active {
             transform: scale(1.15);
         }
@@ -232,7 +282,7 @@
                 Нижний порог (включение)
                 <span id="minThresholdVal">1.40</span> атм
             </label>
-            <input type="range" id="minSlider" min="0" max="8" step="0.05" value="1.4">
+            <input type="range" class="min-slider" id="minSlider" min="0" max="8" step="0.05" value="1.4">
         </div>
 
         <div class="slider-group">
@@ -240,7 +290,7 @@
                 Верхний порог (выключение)
                 <span id="maxThresholdVal">6.20</span> атм
             </label>
-            <input type="range" id="maxSlider" min="0" max="8" step="0.05" value="6.2">
+            <input type="range" class="max-slider" id="maxSlider" min="0" max="8" step="0.05" value="6.2">
         </div>
 
         <button class="save-btn" id="saveButton">💾 СОХРАНИТЬ УСТАНОВКИ</button>
@@ -612,10 +662,10 @@
                 if (corrected) {
                     // дополнительное уведомление о корректировке через тост, но уже показываем общий
                     toast.innerText = "✓ Корректные пороги сохранены";
-                    setTimeout(() => { toast.innerText = "✓ Пороги успешно сохранены"; }, 1500);
+                    // setTimeout(() => { toast.innerText = "✓ Пороги успешно сохранены"; }, 1500);
                 } else {
                     toast.innerText = "✓ Пороги сохранены";
-                    setTimeout(() => { toast.innerText = "✓ Пороги успешно сохранены"; }, 1400);
+                    // setTimeout(() => { toast.innerText = "✓ Пороги успешно сохранены"; }, 1400);
                 }
             });
         }
diff --git a/justfile b/justfile
index d95d96c..71b8f80 100755
--- a/justfile
+++ b/justfile
@@ -12,7 +12,8 @@ init:
 build:
     #!/bin/sh
     . "{{ESPRESSIF}}/export.sh"
-    idf.py
+    xxd -i assets/index.html > main/frontend.h
+    idf.py build
 
 
 upload:
diff --git a/main/main.c b/main/main.c
index b7a5c5a..ff70f17 100644
--- a/main/main.c
+++ b/main/main.c
@@ -20,6 +20,7 @@
 #include "esp_adc/adc_oneshot.h"
 #include "esp_adc/adc_cali.h"
 #include "esp_adc/adc_cali_scheme.h"
+#include "frontend.h"
 
 // ==================== НАСТРОЙКИ ТОЧКИ ДОСТУПА ====================
 #define AP_SSID             "ESP32_Hotspot"        // Имя Wi-Fi сети
@@ -256,7 +257,7 @@ static esp_err_t root_get_handler(httpd_req_t *req)
         "</html>";
 
     httpd_resp_set_type(req, "text/html; charset=utf-8");
-    httpd_resp_send(req, response, HTTPD_RESP_USE_STRLEN);
+    httpd_resp_send(req, (const char*)assets_index_html, HTTPD_RESP_USE_STRLEN);
     return ESP_OK;
 }