WebWizard/docs/prompts/step10.md

Krok 10 - Wizard - Vizuál a Assety (Krok 4)

Kontext projektu

V tomto kroku si používateľ vyberá vizuálny štýl webu a nahráva svoje assety (logo, obrázky). MVP podporuje asynchrónny upload súborov.

Pred implementáciou si preštuduj

• docs/wizard.md - Sekcia 5 (Krok 4 - Vizualny styl a assety).
• docs/architecture.md - Sekcia 13 (Bezpečnostné minimum).

Cieľ

Implementovať výber vizuálneho štýlu a bezpečný asynchrónny upload obrázkov.

Požadované zmeny

1. Na frontende (index.html + wizard.js):
   • Výber štýlu (Minimal, Modern, Premium, atď.).
   • Výber farebnej schémy (preddefinované palety).
   • UI pre nahrávanie loga a obrázkov (file input).
   • Asynchrónne odoslanie súboru na API akciu uploadAsset.
   • Zobrazenie náhľadu nahraného obrázka.
2. Na backende (ajax.php):
   • Implementácia akcie uploadAsset.
   • Striktná validácia:
     • MIME typ (JPG, PNG, WEBP, SVG).
     • Prípona súboru.
     • Maximálna veľkosť (napr. 2MB).
     • Ochrana proti path traversal.
   • Ukladanie do exports/<project_id>/assets/images/.
   • Vrátenie cesty k súboru.
3. Uloženie vizuálnych nastavení cez saveStep.

Implementačné pravidlá

• Nahrané súbory nesmú byť spustiteľné.
• Každý projekt má vlastný podadresár v exports/.
• Používaj FileStorage pre správu ciest.

Súbory ktoré je potrebné vytvoriť

Žiadne.

Súbory ktoré je potrebné upraviť

• public/index.html (DOM pre Krok 4)
• public/js/wizard.js (logika pre Krok 4 + upload)
• public/ajax.php (akcia uploadAsset + validácia kroku 4)

API a dátové štruktúry

Akcia uploadAsset:

• Request: FormData (file, project_id).
• Response: {"success": true, "data": {"path": "..."}}.

Frontend požiadavky

• Progress bar alebo spinner počas uploadu.
• Možnosť zadať alt text k obrázku.

Backend požiadavky

• Bezpečné ukladanie súborov (unikátne názvy alebo bezpečné sanitizovanie).
• Kontrola GD alebo finfo pre MIME typ.

Testovací scenár

1. Vyber vizuálny štýl.
2. Nahraj JPG súbor ako logo. Over, či sa zobrazí náhľad.
3. Skús nahrať .php alebo .exe súbor a over, či ho backend odmietne.
4. Over, či sa súbor fyzicky nachádza v exports/<project_id>/assets/images/.

Definition of Done

• Vizuálne nastavenia sú uložené.
• Assety sú bezpečne nahrané a priradené k projektu.
• Validácia súborov funguje správne.

Obmedzenia

• Nepoužívaj externé knižnice na upload (napr. Dropzone.js).

Výstup

• zoznam vytvorených súborov
• zoznam upravených súborov
• stručné zhrnutie vykonaných zmien
• prípadné otvorené problémy