Krok 06 - Kostra Wizardu (Frontend UI)

Kontext projektu

Používateľské rozhranie WebWizardu je postavené na Vanilla JavaScript bez použitia frontend frameworkov. Celá interakcia prebieha v rámci jednej stránky (index.html).

Pred implementáciou si preštuduj

docs/wizard.md - Sekcia 1 (Prehľad wizardu).
docs/architecture.md - Sekcia 8 (Identifikácia používateľa).

Cieľ

Vytvoriť základnú HTML štruktúru, CSS štýly a JavaScriptovú logiku pre navigáciu v rámci wizardu a inicializáciu používateľskej relácie.

Požadované zmeny

Vytvorenie public/index.html s:
- Kontajnerom pre jednotlivé kroky wizardu.
- Navigačnými prvkami (Späť / Pokračovať).
- Indikátorom progresu.
Vytvorenie public/css/wizard.css pre základný layout a vizuálnu stránku wizardu.
Vytvorenie public/js/wizard.js s logikou:
- Kontrola localStorage.getItem('ww_user_id').
- Volanie initSession cez AJAX, ak ID chýba.
- Správa stavu (aktuálny krok).
- Funkcie nextStep() a prevStep().
- Funkcia showStep(n) pre zobrazenie správneho kontajnera v DOM.

Implementačné pravidlá

Používaj moderný Vanilla JS (ES6+).
AJAX volania realizuj pomocou fetch.
Nepoužívaj žiadne externé knižnice (jQuery, Bootstrap, atď.).
Layout musí byť responzívny.

Súbory ktoré je potrebné vytvoriť

public/index.html
public/css/wizard.css
public/js/wizard.js

Súbory ktoré je potrebné upraviť

Žiadne.

API a dátové štruktúry

Používa API akciu initSession z Kroku 04.

Frontend požiadavky

Čistý a moderný dizajn.
Plynulé prechody medzi krokmi (môže byť jednoduchý show/hide).
Ukladanie ww_user_id do localStorage.

Backend požiadavky

API musí byť dostupné na ajax.php.

Testovací scenár

Otvor public/index.html v prehliadači.
Over v DevTools (Application -> Local Storage), či sa vygenerovalo ww_user_id.
Vyskúšaj klikanie na tlačidlá pre prechod medzi krokmi.
Over, či sa vizuálne mení obsah podľa aktuálneho kroku.

Definition of Done

Kostra wizardu je funkčná.
Používateľ je identifikovaný a relácia je inicializovaná.
Prepínanie krokov funguje správne.

Obmedzenia

Žiadny build proces (žiadne Webpack, Vite, atď.).
Všetko v rámci priečinka public/.

Výstup

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

2.5 KiB Raw Blame History