Revision 11 of 16
Adds a Mocks section with six screenshots of the reference app in place of the paragraph pointing at its source repository.
+13 −1 lines of text vs revision 10 (this site's diff)
| Old | New | Change | Line |
|---|---|---|---|
| @@ -6,8 +6,20 @@ | |||
| 6 | 6 | ||
| 7 | 7 | **Structure and interaction patterns are part of the UX, not the visual design.** Replicate them: which values are plain text edited in place versus real input boxes, what is a full-width band versus a card, which controls sit outside versus inside a card, and where each element sits. Restyle those structures with Postrboard; do not change them. | |
| 8 | 8 | ||
| 9 | − | Reference app (source of truth for UX behavior and copy only, not visuals): `the-urlist/blazor-static-web-apps` at https://github.com/the-urlist/blazor-static-web-apps — see `Client/Pages/*.razor` and `Client/Shared/*.razor` for exact copy, layout structure, and interaction behavior. Ignore `Client/wwwroot/css/app.css` and its Bulma/Font Awesome styling entirely. A live demo (if available) is linked from that repository's README. | |
| 9 | + | ## Mocks | |
| 10 | 10 | ||
| 11 | + | <img width="1729" height="1318" alt="image" src="https://gist.github.com/user-attachments/assets/e5bab31f-5a2e-4315-8648-1796699856bc" /> | |
| 12 | + | ||
| 13 | + | <img width="1729" height="1465" alt="image" src="https://gist.github.com/user-attachments/assets/670739df-6dfc-49c7-bb6e-cc37aef7364a" /> | |
| 14 | + | ||
| 15 | + | <img width="1729" height="1465" alt="image" src="https://gist.github.com/user-attachments/assets/bb786865-445a-405a-b0a4-cfd677ae9cf1" /> | |
| 16 | + | ||
| 17 | + | <img width="1729" height="1465" alt="image" src="https://gist.github.com/user-attachments/assets/0ecd864f-98ad-4021-aed3-f64797e04b06" /> | |
| 18 | + | ||
| 19 | + | <img width="1729" height="1465" alt="image" src="https://gist.github.com/user-attachments/assets/34e70b3b-92c3-4dbe-8fe6-b2d22676a01a" /> | |
| 20 | + | ||
| 21 | + | <img width="1729" height="1401" alt="image" src="https://gist.github.com/user-attachments/assets/52c41df5-065e-479f-bf51-a7152c6bf7dc" /> | |
| 22 | + | ||
| 11 | 23 | ## Technical specification and checklist | |
| 12 | 24 | ||
| 13 | 25 | Before coding, create and commit `TECHNICAL_SPEC.md`. Keep it concise; do not restate this document. | |