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>
51 lines
2.5 KiB
Markdown
51 lines
2.5 KiB
Markdown
# Phase 5: Frontend Demo Indicator & Sandbox UX
|
||
|
||
**Status:** ⬜ Not Started
|
||
**Parent plan:** [PLAN.md](./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_mode` field to system info API response schema (if not already done in Phase 1)
|
||
- [ ] Task 2: In frontend initialization (`app.ts` or `state.ts`), fetch system info and store `demoMode` in app state
|
||
- [ ] Task 3: Add `<span class="demo-badge" id="demo-badge" style="display:none">DEMO</span>` next to app title in `index.html` header
|
||
- [ ] Task 4: CSS for `.demo-badge`: amber/yellow pill shape, subtle pulse animation, clearly visible but not distracting
|
||
- [ ] Task 5: On app load, if `demoMode` is true: show badge, set `document.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 HTML
|
||
- `server/src/wled_controller/static/css/app.css` — Demo badge + banner styles
|
||
- `server/src/wled_controller/static/js/app.ts` — Demo mode detection and UI toggle
|
||
- `server/src/wled_controller/static/js/core/state.ts` — Store demo mode flag
|
||
- `server/src/wled_controller/static/locales/en.json` — i18n keys
|
||
- `server/src/wled_controller/static/locales/ru.json` — i18n keys
|
||
- `server/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-color` or a custom amber for the pill
|
||
- Banner should be a thin strip, not intrusive
|
||
- `localStorage` key: `demo-banner-dismissed`
|
||
|
||
## Review Checklist
|
||
- [ ] All tasks completed
|
||
- [ ] Code follows project conventions
|
||
- [ ] No unintended side effects
|
||
- [ ] Build passes
|
||
- [ ] Tests pass (new + existing)
|
||
|
||
## Handoff to Next Phase
|
||
<!-- Filled in after completion -->
|