Improve the Web UI design and UX

[angeloINTJ]

What

Redesign or improve the embedded Web UI — the browser interface served directly from the Pico W.

Why

The current Web UI is functional but utilitarian. A refreshed design makes the device feel more premium, improves mobile usability, and attracts frontend contributors who don't write embedded C++.

⚠️ Resource constraints (READ CAREFULLY)

This is the tightest design constraint in the project:

• Flash at 98.7%. The Web UI lives in WebUI.h as a C++ raw string, gzip-compressed at build time into WebUI_GZ.h. Every byte of HTML/CSS/JS is a byte stolen from firmware features. A 2 KB CSS improvement = OK. A 50 KB framework = impossible.
• No frameworks. No React, Vue, Tailwind, or npm. The Pico W serves static HTML/CSS/JS. No build step beyond gzip.
• Single file. Everything in WebUI.h. No separate .css or .js files.
• RP2040: 264 KB SRAM, dual-core at 133 MHz. The web server runs alongside sensor polling, display rendering, WiFi, and telemetry. Heavy JS or large DOM trees will OOM the device.
• Browser target: Modern Chrome, Firefox, Safari, Edge. No IE. Mobile-first (most users access from a phone).

The Web UI today

• Login screen with password strength meter
• Dashboard (live temperature readings)
• File manager (LittleFS browser)
• Settings panel (network, sensors, users, OTA)
• History graph (multi-sensor time series)

What you can improve — pick ONE

• Login page redesign — modern, clean, branded, under 1 KB CSS
• Dashboard cards — temperature/humidity as cards instead of raw tables
• Mobile-first responsive — touch-friendly controls, no horizontal scroll
• Dark mode — CSS-only toggle, localStorage persistence (partial implementation exists)
• Settings form UX — grouping, validation, save/cancel patterns
• Loading states — CSS-only spinner, skeleton screens
• Accessibility — ARIA labels, keyboard nav, focus management
• Error states — friendly messages, retry buttons, offline indicators

How to work with it

1. Extract HTML/CSS/JS from WebUI.h (between raw string delimiters)
2. Edit with live preview in your browser
3. Test on desktop + mobile (375px min width)
4. Re-compress: python3 tools/build_webui_gz.py
5. Build firmware: pio run -e pico_w_release
6. Verify flash: check the build output for flash usage percentage

References

• WebUI.h — entire web interface (single file)
• tools/build_webui_gz.py — gzip build script
• src/WebManager.cpp — server-side handlers
• Flash budget: 98.7% used — measure before and after

Acceptance

• UI improvement submitted as changes to WebUI.h
• Works on mobile (375px) and desktop
• Builds with pio run -e pico_w_release (zero warnings)
• Gzip size change measured and documented (before/after)
• Flash usage remains under 100%
• Before/after screenshots attached