Sesiunea 3 - Design, i18n, Dark Mode si Autentificare

Pasul 1

Imbunatatiri de design

Trecem la un design modern, curat si profesional. Un design bun face diferenta intre o aplicatie care pare un proiect de scoala si una care pare un produs real.

Principii de design modern

Spatiu alb generos - elementele au nevoie de spatiu sa "respire"
Tipografie consistenta - maximum 2 fonturi, ierarhie clara
Culori cu scop - fiecare culoare transmite un mesaj (rosu = pericol, verde = succes)
Componente reutilizabile - butoane, carduri, formulare cu acelasi stil

CSS Variables pentru consistenta

:root {
    /* Culori principale */
    --primary: #1E88E5;
    --secondary: #7B1FA2;
    --success: #43A047;
    --danger: #E53935;

    /* Spatiere */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Font sizes */
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
}

Cum ceri design de la Claude Code

"Redesign-uieste interfata cu un look modern, minimalist. Foloseste CSS variables, spatiere consistenta, border-radius pe carduri, si o paleta de culori profesionala."

Tip

Poti da Claude un exemplu de site care iti place ca referinta de design. De exemplu: "Vreau un design similar cu tornoreanu.ai - modern, curat, cu spatiu alb generos."

Pasul 2

Internationalizare (i18n)

Adaugarea suportului multi-limba in aplicatia noastra. i18n vine de la "internationalization" (i + 18 litere + n).

De ce i18n?

Aplicatia poate fi folosita de vorbitori de limbi diferite
Profesionalism - arata ca aplicatia e gandita pentru scalare
Usor de adaugat la inceput, greu de refactorizat mai tarziu

Abordarea simpla cu JSON

// translations/ro.json
{
    "nav": {
        "home": "Acasa",
        "dashboard": "Panou de control",
        "settings": "Setari",
        "logout": "Deconectare"
    },
    "auth": {
        "login": "Autentificare",
        "register": "Inregistrare",
        "email": "Adresa de email",
        "password": "Parola"
    }
}

// translations/en.json
{
    "nav": {
        "home": "Home",
        "dashboard": "Dashboard",
        "settings": "Settings",
        "logout": "Logout"
    },
    "auth": {
        "login": "Login",
        "register": "Register",
        "email": "Email address",
        "password": "Password"
    }
}

Implementare in JavaScript

// Functie simpla de traducere
let currentLang = localStorage.getItem('lang') || 'ro';
let translations = {};

async function loadTranslations(lang) {
    const response = await fetch(`/translations/${lang}.json`);
    translations = await response.json();
    currentLang = lang;
    localStorage.setItem('lang', lang);
    updateUI();
}

function t(key) {
    const keys = key.split('.');
    let value = translations;
    for (const k of keys) {
        value = value?.[k];
    }
    return value || key;
}

// Utilizare: t('nav.home') => "Acasa" sau "Home"

Tip

Cere Claude Code sa implementeze i18n de la inceput. Spune-i: "Adauga suport pentru romana si engleza. Foloseste fisiere JSON pentru traduceri si o functie t() pentru afisare."

Pasul 3

Tema Dark & Light

Implementarea unui toggle intre tema intunecata si cea luminoasa. Utilizatorii moderni se asteapta la aceasta functionalitate.

Strategia cu CSS Variables

/* Tema Light (default) */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border-color: #e0e0e0;
}

/* Tema Dark */
[data-theme="dark"] {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --border-color: #30363d;
}

Toggle JavaScript

function toggleTheme() {
    const current = document.documentElement
        .getAttribute('data-theme');
    const next = current === 'dark' ? 'light' : 'dark';

    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('theme', next);
}

// La incarcare, aplica tema salvata
const saved = localStorage.getItem('theme')
    || (window.matchMedia('(prefers-color-scheme: dark)')
        .matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', saved);

Tip

Foloseste prefers-color-scheme pentru a detecta automat preferinta sistemului de operare. Daca utilizatorul are macOS/Windows in dark mode, aplicatia ta porneste automat in dark mode.

Pasul 4

Icoane minimaliste

Iconele adauga claritate vizuala si fac interfata mai intuitiva. Folosim icoane SVG inline pentru performanta si flexibilitate.

De ce SVG inline?

Fara cereri HTTP extra - iconele sunt direct in HTML
Customizabile cu CSS - poti schimba culoarea cu currentColor
Scalabile - arata perfect la orice dimensiune
Dark mode friendly - se adapteaza automat la tema

Surse de icoane recomandate

Lucide Icons - minimaliste, open source (lucide.dev)
Heroicons - de la echipa Tailwind (heroicons.com)
Phosphor Icons - flexibile, multiple stiluri

Exemplu de utilizare

<!-- Icona de setari cu currentColor -->
<svg width="20" height="20" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="3"/>
    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42
             M18.36 18.36l1.42 1.42"/>
</svg>

<!-- Culoarea se mosteneste de la parinte -->
<button style="color: var(--text-primary);">
    <svg ...>...</svg> Setari
</button>

Pasul 5

Autentificare

Adaugam sistem de login/register pentru a proteja continutul aplicatiei si a oferi experienta personalizata fiecarui utilizator.

Componente necesare

Pagina de Login - formular cu email si parola
Pagina de Register - formular de inregistrare
Middleware de autentificare - verifica daca utilizatorul e logat
Sesiuni/Tokens - pastreaza utilizatorul logat

Flux simplu de autentificare

Utilizatorul completeaza formularul de login
Serverul verifica email + parola
Daca sunt corecte: genereaza un token (JWT)
Token-ul se salveaza in browser (localStorage/cookie)
La fiecare cerere, token-ul se trimite in header
Serverul verifica token-ul si raspunde

Securitate la autentificare

Parole hashed - niciodata nu salvam parola in clar (folosim bcrypt)
HTTPS obligatoriu - token-urile calatoresc criptat
Token expiration - token-urile expira dupa un timp
Rate limiting - limiteaza numarul de incercari de login

Securitate

Nu stoca niciodata parole in clar in baza de date. Foloseste intotdeauna bcrypt sau argon2 pentru hashing. Claude Code poate implementa asta corect daca ii ceri explicit.

Pasul 6

Securitate & Verificare incrucisata

Claude verifica Antigravity si viceversa, cu focus special pe securitate. Aceasta abordare de verificare incrucisata asigura ca ambele tool-uri gasesc si corecteaza potentiale probleme.

Ce verificam?

SQL Injection - input-urile sunt sanitizate?
XSS (Cross-Site Scripting) - output-ul este escaped?
CSRF - formularele au token de protectie?
Autentificare - rutele private sunt protejate?
Expunere date - API-ul returneaza doar datele necesare?

Cum ceri un audit de securitate

"Analizeaza codul aplicatiei din punct de vedere al securitatii. Verifica: SQL injection, XSS, CSRF, expunere de date sensibile, parole in clar, si orice alta vulnerabilitate. Listeaza fiecare problema gasita si propune fix-ul."

Checklist de securitate

Toate input-urile sunt validate si sanitizate
Parolele sunt hashed cu bcrypt/argon2
Token-urile JWT au expiration time
HTTPS este configurat corect
Erorile nu expun detalii interne
Rate limiting pe rute sensibile
Headers de securitate configurate (CORS, CSP)

Abordare

Foloseste Claude Code pentru a verifica codul generat de Antigravity, si invers. Doua perspective diferite gasesc mai multe probleme decat una singura.