5a964a1a8d
14 stories TDD prin echipa de workeri (lead orchestreaza, 3 teammates pe valuri cu fisiere disjuncte; routes.py + base.html serializate ca fisiere fierbinti). - US-001 fix filtrare data (_iso_date_prefix pe garda+comparatie, prinde timestamp cu ora) - US-002/007 operatie service distincta in payload_view + afisare in detaliu - US-003 pill-uri categorii (button/aria-pressed; needs_mapping --warn, needs_data/error --err); fara lista ID-uri/dropdown - US-004 paginare numerotata 25/pag (total ramificat SQL-COUNT vs fetch-all+slice, clamp page, poll pastreaza pagina) - US-005 VIN block-level sub nr - US-006/006b editare cod RAR + validare nomenclator + recalcul idempotency (needs_data/needs_mapping via /corecteaza, error via /repune) - US-008 card eroare 3-niveluri doar pe read-only + rezumat top-of-form - US-009 Mapari in meniu hamburger; scoatere tab-bar + role=tablist orfan - US-010/011 pagina Mapari consolidata + butoane icon SVG + dirty-state (fara kebab/emoji) - US-012/012b header centrat + logo ROMFAST (/static/romfast_logo.png) in header - US-013 paleta azur ROMFAST (#2E74D6/#1F66C9) + IBM Plex Sans/Mono self-host (woff2 reale) - US-014 selector tema ciclic Light/Dark/Petrol/Auto + anti-FOUC pe 4 stari Backend trimitere (worker/masina stari/idempotenta/mapping) + schema NEATINSE (UI/UX pur + 1 fix de filtrare). VERIFY context curat PASS; /code-review high: 1 finding material reparat (US-006b). Regresie 896 passed, 1 skipped, 0 failed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
151 lines
7.0 KiB
Markdown
151 lines
7.0 KiB
Markdown
# DESIGN.md — Sistem de design AutoPass (by ROMFAST)
|
|
|
|
> Sursa de adevar pentru identitatea vizuala a dashboard-ului. Implementarea concreta sta in
|
|
> `app/web/templates/base.html` (variabile CSS `:root` + `[data-theme="light"]`). Acest fisier
|
|
> spune *ce* si *de ce*; base.html spune *cum*.
|
|
|
|
## Lucrul de retinut
|
|
|
|
> „Software serios pentru o obligatie legala serioasa — dar parte din familia ROMFAST/ROA, nu un
|
|
> tool anonim." Operatorul de service trebuie sa simta ca declara la stat printr-un instrument de
|
|
> incredere, cu identitatea producatorului (ROMFAST) prezenta discret, nu griul generic de azi.
|
|
|
|
## Context produs
|
|
|
|
Gateway web care declara prezentari de service-auto la RAR AUTOPASS (L.142/2023). Utilizatori:
|
|
operatori de service-auto si integratori ROAAUTO. Face parte din familia **ROA — Romfast
|
|
Applications** (ERP romanesc, modul Service Auto). Referinta de brand: **romfast.ro** — alb curat,
|
|
accent albastru azur, pill-uri rotunjite, comutator de tema, logo rosu+albastru.
|
|
|
|
## Decizie cromatica
|
|
|
|
Accentul functional = **albastrul ROMFAST** (acelasi cu „FAST" din logo si cu accentul de pe
|
|
romfast.ro), nu albastrul generic SaaS de pana acum. Rosul apare DOAR in wordmark-ul „ROM" — nu ca
|
|
accent de UI, fiindca rosul e rezervat starilor de eroare. Un singur accent, restul neutre, ca
|
|
sistemul sa ramana discret.
|
|
|
|
### Paleta — Dark (default)
|
|
|
|
```
|
|
--bg: #0f1218 fundal aplicatie
|
|
--card: #181c24 suprafete (carduri, modal, inputuri pe fundal)
|
|
--ink: #e6e9ef text principal
|
|
--muted: #8b93a7 text secundar (label-uri, coduri, „by")
|
|
--line: #262b36 borduri, separatoare
|
|
--accent:#2E74D6 azur ROMFAST — butoane primare, pill activ, linkuri, focus
|
|
--ok: #2FBF8F sent / succes
|
|
--warn: #E0A93B sending / atentie / Lipsa cod
|
|
--err: #E05D5D error / needs_data / Date incomplete
|
|
```
|
|
|
|
### Paleta — Light (`[data-theme="light"]`)
|
|
|
|
```
|
|
--bg: #f5f7fa fundal (alb-rece ca romfast.ro)
|
|
--card: #ffffff suprafete
|
|
--ink: #1a1d24 text principal
|
|
--muted: #5c6473 text secundar
|
|
--line: #e2e5ea borduri
|
|
--accent:#1F66C9 azur, variantă mai inchisa pentru contrast AA pe alb
|
|
--ok: #15803d verde AA pe alb
|
|
--warn: #b45309 chihlimbar AA pe alb
|
|
--err: #dc2626 rosu AA pe alb
|
|
```
|
|
|
|
### Paleta — Petrol (`[data-theme="petrol"]`, tema selectabila)
|
|
|
|
Tema intunecata alternativa, cu accent petrol-teal (directia initiala aleasa, pastrata ca optiune).
|
|
Aceleasi neutre-calde inchise; doar accentul difera de azur.
|
|
|
|
```
|
|
--bg: #0e1416 fundal petrol-inchis
|
|
--card: #161e20 suprafete
|
|
--ink: #e6e9ef text principal
|
|
--muted: #8b93a7 text secundar
|
|
--line: #232c2e borduri
|
|
--accent:#0E7C7B teal petrol — butoane, pill activ, linkuri, focus
|
|
--ok: #2FBF8F sent
|
|
--warn: #E0A93B atentie
|
|
--err: #E05D5D eroare
|
|
```
|
|
|
|
### Culori de brand (doar wordmark, NU variabile de UI)
|
|
|
|
```
|
|
ROM: #D1342F rosu logo
|
|
FAST: #2E74D6 albastru logo (= accentul de UI in dark)
|
|
```
|
|
|
|
Contrast: textul principal pe fundal ramane AA in ambele teme; accentul pe alb foloseste varianta
|
|
mai inchisa (`#1F66C9`) ca text/linkul sa treaca AA.
|
|
|
|
## Tipografie
|
|
|
|
- **UI / titluri**: **IBM Plex Sans** — sans-serif cu caracter ingineresc, open-source, potrivit
|
|
pentru „software serios", parte din limbajul vizual tehnic. Fallback: `system-ui, sans-serif`.
|
|
- **Coduri / monospace**: **IBM Plex Mono** — pentru coduri RAR (REV2), VIN, numar inmatriculare,
|
|
detalii tehnice. Inlocuieste `ui-monospace/Menlo` actual cu o familie coerenta cu UI-ul.
|
|
- **Incarcare**: self-host `woff2` (subset latin + latin-ext pentru diacritice romanesti) in
|
|
`app/web/static/fonts/`, `font-display: swap`. Fara CDN extern (gateway intern, fara dependente
|
|
de retea la runtime). Pana la self-host, fallback la stiva de sistem nu strica layout-ul.
|
|
|
|
## Header & branding
|
|
|
|
- Titlul „Gateway RAR AUTOPASS" **centrat** pe header.
|
|
- Sub titlu, mic: **logo-ul ROMFAST** (`/static/romfast_logo.png`, ~28px inaltime). Decizie user
|
|
(2026-06-25, US-012b): se foloseste PNG-ul real al logo-ului (ROM rosu + FAST albastru, fundal
|
|
transparent — lizibil pe light/dark/petrol), NU wordmark-ul text. Wordmark-ul text (`by ROM FAST`
|
|
cu `ROM #D1342F` / `FAST #2E74D6`) ramane documentat ca alternativa, dar livrabila finala
|
|
foloseste imaginea.
|
|
- Controalele (comutator tema, versiune, hamburger ☰) raman la **dreapta**, fara a strica
|
|
centrarea optica a titlului (ex. grila 3 coloane: stanga goala/echilibru, centru titlu, dreapta
|
|
controale).
|
|
- Responsiv: pe mobil, wordmark-ul ramane sub titlu; controalele nu se suprapun (degrada elegant,
|
|
eventual titlu mai mic).
|
|
|
|
## Selector de tema
|
|
|
|
Inlocuieste comutatorul binar soare/luna cu un **buton ciclic** (pattern ca demoanaf.ro): un
|
|
singur buton care roteste la fiecare click prin setul de teme, cu iconita + tooltip/`aria-label`
|
|
care arata tema curenta („Tema: Light" etc.).
|
|
|
|
Ordinea ciclului: **Light → Dark → Petrol → Auto → (inapoi la Light)**.
|
|
|
|
- `Light` → `data-theme="light"` (azur pe alb)
|
|
- `Dark` → `data-theme="dark"` (azur pe inchis, comportamentul implicit actual)
|
|
- `Petrol` → `data-theme="petrol"` (teal pe petrol-inchis)
|
|
- `Auto` → urmeaza `prefers-color-scheme`; rezolva la Light azur sau Dark azur in functie de OS
|
|
(nu seteaza `data-theme` fix, ci il deriva la paint).
|
|
|
|
Persistenta: preferinta explicita (inclusiv „Auto") in `localStorage`, doar la click. Scriptul
|
|
anti-FOUC din `<head>` trebuie sa rezolve „Auto"→light/dark inainte de primul paint (fara blink).
|
|
Iconite: ☀ Light, ☾ Dark, ◐ Petrol, ◉ Auto. Default la prima vizita = Auto (OS-aware), ca azi.
|
|
|
|
## Componente — note de aplicare
|
|
|
|
- **Pill-uri de stare/filtru**: rotunjite (`border-radius:99px`), ca badge-ul „ROA" de pe
|
|
romfast.ro. Pill activ = fundal accent discret (`color-mix(in srgb, var(--accent) ...)`), text
|
|
pe accent. Categoriile de problema isi pastreaza registrul: Date incomplete/Eroare = `--err`,
|
|
Lipsa cod = `--warn`.
|
|
- **Butoane primare**: fundal `--accent`, text alb (neschimbat ca structura, doar culoarea noua).
|
|
- **Linkuri / sugestii**: `--accent`.
|
|
- **Focus**: `outline:2px solid var(--accent)` (deja folosit pe randuri).
|
|
- **Suprafete de stare** (banner, flash, eroare-3n): raman pe `color-mix` peste `--err/--warn/--ok`,
|
|
deci se adapteaza automat la noua paleta si la light/dark.
|
|
|
|
## Ce NU schimbam
|
|
|
|
- Mecanismul light/dark existent (anti-FOUC, persistenta `localStorage`, comutator) — il pastram,
|
|
doar reimprospatam variabilele.
|
|
- Nu introducem rosu ca accent de UI (conflict cu eroare).
|
|
- ~~Nu folosim PNG-ul logo cu efect 3D in interfata (wordmark redat ca text).~~ REVIZUIT
|
|
(decizie user 2026-06-25): logo-ul PNG real e folosit in header (US-012b). Fundal transparent +
|
|
culori proprii il fac lizibil pe toate temele; nu aplicam filtre.
|
|
- Nu adaugam un al doilea accent — sistemul ramane monocrom-accent + neutre.
|
|
|
|
## Legatura cu implementarea (PRD 5.10)
|
|
|
|
US-012 (header „by ROMFAST" + titlu centrat) si US-013 (paleta) din
|
|
`docs/prd/prd-5.10-ux-filtre-pill-paginare-mapari-meniu.md` implementeaza acest sistem. Valorile de
|
|
mai sus sunt sursa pentru variabilele din `base.html`.
|