diff --git a/data/logo.png b/data/logo.png new file mode 100644 index 0000000..5d18f7d Binary files /dev/null and b/data/logo.png differ diff --git a/platformio.ini b/platformio.ini index 5516710..e8f3ba1 100644 --- a/platformio.ini +++ b/platformio.ini @@ -13,6 +13,7 @@ board = esp32dev framework = arduino platform = espressif32 monitor_speed = 115200 +board_build.filesystem = littlefs lib_deps = tzapu/WiFiManager@^2.0.17 bblanchon/ArduinoJson@^7.4.3 diff --git a/src/main.cpp b/src/main.cpp index bd9ec28..7ad2f38 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -326,6 +326,13 @@ static bool requireAuth() { // Web handlers // --------------------------------------------------------------------------- +static void handleLogo() { + File f = LittleFS.open("/logo.png", "r"); + if (!f) { server.send(404, "text/plain", "Not found"); return; } + server.streamFile(f, "image/png"); + f.close(); +} + static void handleRoot() { if (!requireAuth()) { Serial.println("[HTTP] GET / -> 401"); return; } Serial.println("[HTTP] GET /"); @@ -376,7 +383,8 @@ static void handleRoot() { html += "*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}"; html += "body{font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen,Ubuntu,sans-serif;background:#f2f4f8;color:#1a1a2e;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:24px 16px}"; html += ".card{background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.08);padding:32px;width:100%;max-width:560px}"; - html += "h1{font-size:24px;margin-bottom:4px}.sub{color:#666;font-size:14px;margin-bottom:24px}"; + html += ".hdr{display:flex;align-items:center;gap:16px;margin-bottom:24px}.hdr img{width:72px;height:72px;flex-shrink:0}"; + html += "h1{font-size:24px;margin-bottom:4px}.sub{color:#666;font-size:14px}"; html += ".info{background:#f8f9fc;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:14px}"; html += ".info div{display:flex;justify-content:space-between;padding:4px 0}.info div span:first-child{color:#666}"; html += "label{display:block;font-size:14px;font-weight:600;margin-bottom:4px}"; @@ -388,30 +396,44 @@ static void handleRoot() { html += "fieldset .row label{width:70px;margin-bottom:0;flex-shrink:0}"; html += "fieldset .row input{margin-bottom:0}"; html += ".btn{width:100%;margin-top:8px;padding:12px;background:#4361ee;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s}"; - html += ".btn:hover{background:#3651d4}.mac{font-size:12px;color:#999;text-align:center;margin-top:20px}"; + html += ".btn:hover{background:#3651d4}.btn-danger{background:#dc2626}.btn-danger:hover{background:#b91c1c}"; + html += ".mac{font-size:12px;color:#999;text-align:center;margin-top:20px}"; html += ".tgl-lbl{margin-bottom:0!important;line-height:18px}.switch{position:relative;display:inline-block;width:32px;height:18px;margin-left:auto;flex-shrink:0}fieldset .row label.switch{width:32px}"; html += ".switch input{opacity:0;width:0;height:0;margin-bottom:0}.slid{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;border-radius:18px;transition:.3s}"; html += ".slid::before{content:\"\";position:absolute;height:14px;width:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2)}"; html += ".switch input:checked+.slid{background:#4361ee}.switch input:checked+.slid::before{transform:translateX(14px)}"; html += "
