forked from eva/focus-flow
44 lines
2 KiB
Markdown
44 lines
2 KiB
Markdown
# UI Plan 1 Mockup Reference
|
|
|
|
**Status:** Planned reference assets
|
|
|
|
This folder contains the semi-strict visual truth for UI Plan 1.
|
|
|
|
## Clean mockups
|
|
|
|
- `clean/main_screen_compact.png`
|
|
- Compact Today timeline without a selected task.
|
|
- `clean/task_selected_modal.png`
|
|
- Compact Today timeline with a selected task modal open.
|
|
|
|
Use these for visual matching.
|
|
|
|
## Annotated mockups
|
|
|
|
- `annotated/main_screen_compact_notes.png`
|
|
- `annotated/task_selected_modal_notes.png`
|
|
|
|
Use these for implementation notes only. The opaque note blocks are not part of the product UI.
|
|
|
|
## Visual fidelity rules
|
|
|
|
1. Preserve the dark, calm, information-dense desktop composition.
|
|
2. Preserve the sidebar, top bar, required banner, timeline rail, card colors, and modal proportions unless Flutter constraints force minor differences.
|
|
3. Do not add a white page/app background.
|
|
4. Do not make no-op buttons greyed out.
|
|
5. The reward symbol must use solid sparkles/stars.
|
|
6. Difficulty must always be five bars, with the number of filled bars derived from task difficulty.
|
|
7. Prefer custom painters for the reward/difficulty icons rather than generic icon fonts when generic icons do not match.
|
|
8. Runtime date should default to current owner-local day; tests/screenshot fixtures may use the mockup date.
|
|
|
|
## Component truth map
|
|
|
|
| Component | Primary mockup truth | Notes |
|
|
|---|---|---|
|
|
| App frame/sidebar | `clean/main_screen_compact.png` | Desktop-first. Sidebar controls are no-op. |
|
|
| Top bar/date/toggles | `clean/main_screen_compact.png` | Compact selected. Normal visible/no-op. |
|
|
| Next required banner | `clean/main_screen_compact.png` | Derived from backend read model. |
|
|
| Timeline rail/grid | `clean/main_screen_compact.png` | 4:00 PM through 8:45 PM visible. |
|
|
| Task cards | `clean/main_screen_compact.png` | Colors and density matter more than exact font metrics. |
|
|
| Reward/difficulty icons | Both clean mockups | Solid reward sparkles; five difficulty bars. |
|
|
| Selected-task modal | `clean/task_selected_modal.png` | Close/outside-click functional; action buttons no-op. |
|