Π‘Π²Π΅ΡΡΡΠ°ΡΡ: ΠΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΡΠΉ ΡΠ°ΠΉΡ. ΠΠ»Π°ΡΡΠΎΡΠΌΠ°: ΠΏΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠ°. Π’ΠΈΠΏ Π²ΡΡΡΡΠΊΠΈ: Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ. ΠΡΡΡ ΠΌΠ°ΠΊΠ΅Ρ. ΠΠ°Π΄Π°ΡΠ°: Π²ΡΡΡΡΠΊΠ° βΠΠΈΡΠ½ΡΠΉ ΠΊΠ°Π±ΠΈΠ½Π΅Ρβ ΠΏΠΎ Figma (React + Tailwind + PWA-ΠΌΠΈΠ½ΠΈΠΌΡΠΌ) Π‘ΡΠ΅ΠΊ/ΠΏΡΠ°Π²ΠΈΠ»Π° React + TypeScript, Tailwind CSS, lucide-react. Π’ΠΎΠ»ΡΠΊΠΎ UI (Π±Π΅Π· API/Π±ΠΈΠ·Π½Π΅Ρ‑Π»ΠΎΠ³ΠΈΠΊΠΈ). Π‘Π΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ HTML, a11y (aria, ΠΊΠΎΠ½ΡΡΠ°ΡΡ AA). ΠΠΌΠΏΠΎΡΡΡ ΡΠ΅ΡΠ΅Π· alias '@' (ΠΊΠΎΡΠ΅Π½Ρ src). Π§ΠΈΡΡΡΠ΅ Tailwind‑ΠΊΠ»Π°ΡΡΡ. Π§ΡΠΎ ΡΠ²Π΅ΡΡΡΠ°ΡΡ (ΡΡΡΠΎΠ³ΠΎ ΠΏΠΎ Figma, pixel‑perfect ≤2px) ΠΠ°ΡΠΊΠ°Ρ: Sidebar ≈295px ΡΠ»Π΅Π²Π° + Header ΡΠ²Π΅ΡΡ
Ρ + ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π°; Π°Π΄Π°ΠΏΡΠΈΠ² β Π±ΡΡΠ³Π΅Ρ/ΠΎΠ²Π΅ΡΠ»Π΅ΠΉ. ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ: Header, Sidebar(+UserProfile, NavigationMenu), Chat(+ChatMessage), RightPanel, MainContent, DashboardPage. ΠΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ: hover/active/focus/disabled, Π±Π΅ΠΉΠ΄ΠΆΠΈ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ, ΠΏΠ»Π°Π²Π½ΡΠ΅ transitions. ΠΡΠ΅Π½Π΄/Π°ΡΡΠ΅ΡΡ Π¦Π²Π΅Ρ: #036336; ΡΡΠΈΡΡΡ: Inria Sans / Inter. Π€ΠΎΠ½ hexagon (SVG). ΠΡΡΠ΅ΡΡ ΠΈΠ· Figma‑ΡΠΊΡΠΏΠΎΡΡΠ° (public/images/...). PWA‑ΠΌΠΈΠ½ΠΈΠΌΡΠΌ (Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΡΠ°Π·Ρ) manifest.json: name, short_name, start_url='/', scope='/', display='standalone', theme_color=#036336, background_color, icons 192/512/1024 (maskable). ΠΠΊΠΎΠ½ΠΊΠΈ: favicon, apple‑touch‑icon, maskable PNG. Meta: theme‑color, viewport, apple‑mobile‑web‑app‑capable, status‑bar‑style. SW: ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ + Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΊΡΡ (vite-plugin-pwa/Workbox); offline‑fallback; beforeinstallprompt (A2HS) β Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΠ°. Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΠΊΠΎΠ΄Ρ/ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌ Π€Π°ΠΉΠ»Ρ ΠΈ ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΏΡΠΈΠ΅ΠΌ ΠΏΡΠΎΠΏΡΠΎΠ² (active/disabled/variant/size), onClick/onToggle β Π±Π΅Π· Π²Π½Π΅ΡΠ½Π΅ΠΉ Π»ΠΎΠ³ΠΈΠΊΠΈ. ΠΠ΅Π· ΠΈΠ½Π»Π°ΠΉΠ½ΠΎΠ²ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ (ΠΊΡΠΎΠΌΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ), Π±Π΅Π· ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ
UI‑ΠΊΠΈΡΠΎΠ². ΠΡΠΈΡΠΌΠΊΠ° Pixel‑perfect ≤2px, ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΡΠΉ Π°Π΄Π°ΠΏΡΠΈΠ² (desktop/tablet/mobile), Π±Π΅Π· ΠΎΡΠΈΠ±ΠΎΠΊ ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ/404. Lighthouse PWA ≥ 90 (Chrome mobile), ΠΊΡΠΎΡΡ‑Π±ΡΠ°ΡΠ·Π΅Ρ (Chrome/Firefox/Safari/Edge). Π§ΡΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΏΠΎ ΠΈΡΠΎΠ³Π°ΠΌ ΠΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠΈ React‑ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ DashboardPage. manifest.json, ΠΈΠΊΠΎΠ½ΠΊΠΈ, meta‑ΡΠ΅Π³ΠΈ, Π±Π°Π·ΠΎΠ²ΡΠΉ SW + ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ. ΠΡΠ°ΡΠΊΠ°Ρ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ Π·Π°ΠΏΡΡΠΊΠ° (npm run dev). Π ΠΎΡΠΊΠ»ΠΈΠΊΠ΅ Π‘ΡΠΎΠΊ/ΡΡΠΎΠΈΠΌΠΎΡΡΡ, ΠΊΡΠ°ΡΠΊΠΈΠΉ ΠΏΠ»Π°Π½ (ΡΡΠ°ΠΏΡ 2β3 Π΄Π½Ρ). ΠΠΎΠ΄ΡΠ²Π΅ΡΠΆΠ΄Π΅Π½ΠΈΠ΅ Π³ΠΎΡΠΎΠ²Π½ΠΎΡΡΠΈ ΡΠΎΠ±Π»ΡΡΡΠΈ Figma 1:1, a11y ΠΈ PWA‑ΠΌΠΈΠ½ΠΈΠΌΡΠΌ.