65 lines
2.6 KiB
Markdown
65 lines
2.6 KiB
Markdown
# Krok 17 - Rendering Vrstva (CSS Assety)
|
|
|
|
## Kontext projektu
|
|
Vizuálny štýl webu (farby, fonty, spacing) je definovaný v `wizard_data`. Renderer musí tieto nastavenia transformovať do CSS, ktoré sa aplikuje na exportovaný web.
|
|
|
|
## Pred implementáciou si preštuduj
|
|
- `docs/wizard.md` - Sekcia 5 (Krok 4 - Vizualny styl).
|
|
- `docs/prompts/step15.md` - Core Renderer.
|
|
|
|
## Cieľ
|
|
Implementovať generovanie dynamického CSS na základe vizuálnych preferencií používateľa.
|
|
|
|
## Požadované zmeny
|
|
1. Úprava `Renderer.php`:
|
|
- Generovanie bloku `:root` v HTML hlavičke alebo v samostatnom súbore.
|
|
- Mapovanie `wizard_data.visuals.color_scheme` na CSS premenné (`--primary-color`, `--bg-color`, atď.).
|
|
- Mapovanie `wizard_data.visuals.font_style` na konkrétne font-family (napr. Google Fonts importy).
|
|
- Mapovanie `wizard_data.visuals.layout_density` na premenné pre padding a margin.
|
|
2. Úprava `src/Templates/css/site.css`:
|
|
- Použitie CSS premenných v celom štýle.
|
|
- Definícia tried pre rôzne štýly (Minimal, Modern, Corporate) - napr. zaoblenie rohov, tiene.
|
|
3. Zabezpečenie kopírovania finalizovaného `site.css` do `exports/<project_id>/assets/site.css`.
|
|
|
|
## Implementačné pravidlá
|
|
- Preferuj systémové fonty alebo bezpečné webové fonty pre MVP.
|
|
- Farby musia mať dostatočný kontrast (WCAG compliance).
|
|
- Žiadny inline CSS v HTML tagoch (okrem `:root` premenných).
|
|
|
|
## Súbory ktoré je potrebné vytvoriť
|
|
Žiadne.
|
|
|
|
## Súbory ktoré je potrebné upraviť
|
|
- `src/Services/Renderer.php`
|
|
- `src/Templates/css/site.css`
|
|
|
|
## API a dátové štruktúry
|
|
Vstupné dáta: `wizard_data.visuals`.
|
|
|
|
## Frontend požiadavky
|
|
- Web musí vizuálne zodpovedať voľbe vo wizadre.
|
|
- Podpora tmavého/svetlého módu (ak je v rozsahu).
|
|
|
|
## Backend požiadavky
|
|
- PHP logika pre výpočet kontrastnej farby textu (voliteľne).
|
|
|
|
## Testovací scenár
|
|
1. Zmeň primárnu farbu vo wizadre na červenú.
|
|
2. Vygeneruj web a over, či sú kľúčové prvky (tlačidlá, nadpisy) červené.
|
|
3. Skontroluj `index.html` alebo `site.css`, či obsahuje správne CSS premenné.
|
|
4. Zmeň štýl na "Minimal" a over, či sa zmenili napr. zaoblenia rohov (border-radius).
|
|
|
|
## Definition of Done
|
|
- Vizuálne nastavenia sú úspešne aplikované cez CSS premenné.
|
|
- Exportovaný web rešpektuje voľbu farieb, fontov a layoutu.
|
|
- CSS je čisté a udržiavateľné.
|
|
|
|
## Obmedzenia
|
|
- Nepoužívaj CSS preprocesory (Sass/Less) pri renderovaní na serveri.
|
|
|
|
## Výstup
|
|
- zoznam vytvorených súborov
|
|
- zoznam upravených súborov
|
|
- stručné zhrnutie vykonaných zmien
|
|
- prípadné otvorené problémy
|