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

Ú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.
Ú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.
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

Zmeň primárnu farbu vo wizadre na červenú.
Vygeneruj web a over, či sú kľúčové prvky (tlačidlá, nadpisy) červené.
Skontroluj index.html alebo site.css, či obsahuje správne CSS premenné.
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

2.6 KiB Raw Blame History