Plan de Acțiune Unificat: Transformarea Dashboard-ului I. Filosofia de Design Generală: Modern, Aerisit și "Glassmorphism" Ne vom îndepărta de aspectul actual și vom adopta o estetică modernă, bazată pe următoarele principii: Glassmorphism (Efectul de Sticlă Mată): Acesta va fi elementul vizual central. Componentele cheie (sidebar, modale, chat) vor avea un fundal semi-transparent și un efect de blur, dând impresia că plutesc deasupra conținutului. Spațiere generoasă: Vom mări spațiile dintre elemente pentru a reduce zgomotul vizual și pentru a crea o interfață care "respiră", fiind mai calmă și mai ușor de parcurs. Ierarhie Vizuală Clară: Vom folosi dimensiuni de font, grosimi și culori pentru a ghida ochiul utilizatorului către cele mai importante informații și acțiuni. Interactivitate Subtilă: Vom adăuga micro-interacțiuni (efecte de hover, tranziții fine) pentru a face experiența mai fluidă și mai plăcută. II. Layout-ul Principal & Navigație Responsive (Planul Inițial, Rafinat) Layout Desktop: Păstrăm structura flex cu sidebar în stânga și conținut principal în dreapta. Layout Mobil (Off-Canvas Sidebar): Sidebar-ul va fi ascuns complet în afara ecranului. La apăsarea butonului "hamburger" (#mobileMenuToggle), sidebar-ul va glisa elegant în ecran. Un overlay cu efect de blur (backdrop-blur) va acoperi conținutul principal, semnalând clar utilizatorului că se află în meniu. Click-ul pe overlay sau pe un link din meniu va închide automat sidebar-ul. III. Revoluția Cardurilor de Conținut (Punctul Central al Schimbării) Aceasta este cea mai mare modificare și adresează direct nemulțumirea ta. Vom transforma toate listele de intrări în galerii de carduri interactive și informative. Principiu General: Fiecare intrare (jurnal, fișă, material, test) va fi un "card" distinct, cu un design consistent. Cardurile vor fi colapsabile pentru a nu încărca pagina. Secțiunea Jurnal & Fișe: Design Card: Fiecare intrare va fi un card cu header, conținut colapsabil și footer cu acțiuni. Header Card: Va conține Titlul intrării (pentru jurnale) sau o previzualizare a situației (pentru fișe) și data. Întregul header va fi click-abil pentru a extinde/restrânge cardul. Conținut Colapsabil: Secțiunea ascunsă va conține textul complet al jurnalului/fișei și istoricul de feedback AI. Footer Acțiuni: Butoane clare pentru "Regenerează Feedback", "Șterge Intrarea" și noua funcție propusă "Discută cu AI" (care va deschide chat-ul cu contextul acelei intrări). Secțiunea Materiale (Propunere Nouă, inspirată de ideea ta): Layout de Galerie: Vom folosi un grid (ex: grid-cols-1 md:grid-cols-2 lg:grid-cols-3) pentru a afișa materialele ca o galerie de articole, similar cu un blog modern. Design Card de Articol: Imagine Reprezentativă: Fiecare card va avea o imagine deasupra. Propun să folosim un serviciu precum Unsplash API sau Picsum Photos pentru a genera o imagine random, dar relevantă vizual, pe baza titlului/temei materialului. Acest lucru va aduce un dinamism vizual extraordinar. Titlu și Preview: Sub imagine, vom afișa titlul materialului și un scurt preview de 2-3 rânduri din conținut. Acțiuni: Butonul "Citește mai mult" va extinde cardul pentru a afișa tot conținutul, iar butoanele "Șterge" și "Generează Fișă de Lucru" vor fi vizibile aici. Secțiunea Teste: Istoric: Lista testelor completate va fi și ea o listă de carduri. Fiecare card va afișa numele testului și data completării. Rezultate Vizuale: La vizualizarea rezultatelor, vom renunța la textul simplu și vom folosi: Bare de Progres Colorate: Pentru scorurile la YSQ și SMI, pentru a vedea dintr-o privire care scheme/moduri sunt mai active. Etichete de Culoare: Pentru GAD-7 și PHQ-9, scorul total va fi afișat într-o "pastilă" colorată (ex: verde pentru "Minim", galben pentru "Ușor", roșu pentru "Sever") pentru o interpretare imediată. IV. Componente Cheie și Efectul "Sticlă Mată" Sidebar: Va avea fundal semi-transparent cu efect de backdrop-blur. Chat (#chatContainer): Design: Va folosi același efect de "sticlă mată" (bg-card/80 backdrop-blur-sm). Comportament Mobil: La deschidere, va ocupa tot ecranul, oferind o experiență nativă, fără compromisuri. Modale (Autentificare, Joc, etc.): Overlay: Fundalul din spatele modalului va fi un overlay întunecat cu un blur pronunțat (bg-black/30 backdrop-blur-md). Modal Content: Fereastra modalului va pluti deasupra acestui fundal blurat și va avea propriul său efect de "sticlă mată", mai subtil. V. Funcționalități Noi Propuse: Profil de Utilizator Pentru a duce dashboard-ul la "nivelul superior", propun adăugarea unei noi secțiuni în sidebar: "Profil & Setări". Aceasta va duce la o pagină dedicată unde utilizatorul poate: Vizualiza/Modifica Datele: Schimba numele afișat, avatarul (dacă implementăm), și parola. Vizualiza Statistici: Un mic panou cu statistici simple și motivante: "Total intrări în jurnal", "Teste completate", "Materiale generate". Gestiona Contul ("Danger Zone"): Butoane clare și sigure pentru a exporta toate datele într-un format JSON și pentru a șterge permanent contul și toate datele asociate. VI. Plan de Acțiune Tehnic (Cum vom face asta) Curățare: Eliminăm complet referințele către assets/css/ și blocurile <style> din dashboard.html. Păstrăm doar snakeGame.css (care va fi încărcat condiționat de JS, ideal). Tailwind la Putere: Reimplementăm fiecare componentă descrisă mai sus folosind clase utilitare Tailwind. JavaScript: Actualizăm fișierele JS (ui.js, dashboard.js, etc.) pentru a interacționa cu noile structuri de carduri (ex: logica pentru "expand/collapse") și pentru a gestiona meniul mobil.