added files with prompts
This commit is contained in:
70
docs/prompts/step06.md
Normal file
70
docs/prompts/step06.md
Normal file
@ -0,0 +1,70 @@
|
||||
# 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
|
||||
1. Vytvorenie `public/index.html` s:
|
||||
- Kontajnerom pre jednotlivé kroky wizardu.
|
||||
- Navigačnými prvkami (Späť / Pokračovať).
|
||||
- Indikátorom progresu.
|
||||
2. Vytvorenie `public/css/wizard.css` pre základný layout a vizuálnu stránku wizardu.
|
||||
3. 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
|
||||
1. Otvor `public/index.html` v prehliadači.
|
||||
2. Over v DevTools (Application -> Local Storage), či sa vygenerovalo `ww_user_id`.
|
||||
3. Vyskúšaj klikanie na tlačidlá pre prechod medzi krokmi.
|
||||
4. 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
|
||||
Reference in New Issue
Block a user