alexei.dolgolyov
2240471b67
Demo mode provides a complete sandbox environment with: - Virtual capture engine (radial rainbow test pattern on 3 displays) - Virtual audio engine (synthetic music-like audio on 2 devices) - Virtual LED device provider (strip/60, matrix/256, ring/24 LEDs) - Isolated data directory (data/demo/) with auto-seeded sample entities - Dedicated config (config/demo_config.yaml) with pre-configured API key - Frontend indicator (DEMO badge + dismissible banner) - Engine filtering (only demo engines visible in demo mode) - Separate entry point: python -m wled_controller.demo (port 8081) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2.5 KiB
2.5 KiB
Phase 5: Frontend Demo Indicator & Sandbox UX
Status: ⬜ Not Started Parent plan: PLAN.md Domain: fullstack
Objective
Add visual indicators in the frontend that clearly communicate demo mode status to the user, including a badge, dismissible banner, and engine labeling.
Tasks
- Task 1: Add
demo_modefield to system info API response schema (if not already done in Phase 1) - Task 2: In frontend initialization (
app.tsorstate.ts), fetch system info and storedemoModein app state - Task 3: Add
<span class="demo-badge" id="demo-badge" style="display:none">DEMO</span>next to app title inindex.htmlheader - Task 4: CSS for
.demo-badge: amber/yellow pill shape, subtle pulse animation, clearly visible but not distracting - Task 5: On app load, if
demoModeis true: show badge, setdocument.body.dataset.demo = 'true' - Task 6: Add a dismissible demo banner at the top of the page: "You're in demo mode — all devices and data are virtual. No real hardware is used." with a dismiss (×) button. Store dismissal in localStorage.
- Task 7: Add i18n keys for demo badge and banner text in
en.json,ru.json,zh.json - Task 8: In engine/display dropdowns, demo engines should display with "Demo: " prefix for clarity
Files to Modify/Create
server/src/wled_controller/templates/index.html— Demo badge + banner HTMLserver/src/wled_controller/static/css/app.css— Demo badge + banner stylesserver/src/wled_controller/static/js/app.ts— Demo mode detection and UI toggleserver/src/wled_controller/static/js/core/state.ts— Store demo mode flagserver/src/wled_controller/static/locales/en.json— i18n keysserver/src/wled_controller/static/locales/ru.json— i18n keysserver/src/wled_controller/static/locales/zh.json— i18n keys
Acceptance Criteria
- Demo badge visible next to "LED Grab" title when in demo mode
- Demo badge hidden when not in demo mode
- Banner appears on first demo visit, can be dismissed, stays dismissed across refreshes
- Engine dropdowns clearly label demo engines
- All text is localized
Notes
- Badge should use
--warning-coloror a custom amber for the pill - Banner should be a thin strip, not intrusive
localStoragekey:demo-banner-dismissed
Review Checklist
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)