# Sdílené podklady návrhů

Vše, co je společné pro návrhy A, B, C. Každý návrh je ve své složce `design/navrh-*/`.

```
_shared/
  content.md                  jednotný obsah (NAP, služby, ceník, texty, mock recenze, SEO meta, JSON-LD)
  gdpr.md                     GDPR nástřel: co formuláře sbírají, právní základy, retence, úkoly
  integrace-recenze-mapy.md   proveditelnost recenzí Google / Seznam, mapové podklady, profily
  seo-lokalni.md              lokální SEO: struktura, schema.org, Google Business Profile, Firmy.cz
  partials/gdpr-content.html  text stránky Ochrana osobních údajů (vkládá se do všech návrhů)
  assets/
    img/                      logo (+ světlá varianta), fotky, dokumenty se začerněnými osobními údaji
    css/base-components.css   funkční základ lightboxu, výběru data, mapy, cookie lišty
    js/common.js              sdílené chování (viz kontrakt níže)
    js/coverage-map.js        Leaflet mapa působnosti
    js/cookieconsent-config.js  orestbida/cookieconsent v3 + Google Consent Mode v2
    data/okresy-3.js          hranice okresů Jablonec n. N., Semily, Liberec (GeoJSON jako JS)
    data/tootevru-zamecnik.vcf  vizitka „Uložit do telefonu“
  previews/                   náhledy návrhů pro galerii design/index.html
```

## Sestavení HTML

Stránky návrhů se skládají z `_src/layout.html` + `_src/pages/*.html` (hlavička a patička se nepíšou 18×).

```bash
python3 design/_build/build.py
```

Náhledy pro galerii (`_shared/previews/`) a screenshoty libovolné stránky s přesnou emulací mobilu:

```bash
bash design/_build/tools/screenshots.sh
node design/_build/tools/screenshot.mjs --url http://localhost:8790/navrh-a-signal/cenik.html --out cenik.png --w 390 --h 844 --dpr 2 --mobile --full
```

Výstupem build.py jsou hotové statické soubory `design/navrh-*/index.html`, `cenik.html`, `o-me.html`, `poptavka.html`, `kontakt.html`, `ochrana-osobnich-udaju.html`. Otevírají se přímo v prohlížeči (file://). Struktura `layout + pages + partials` odpovídá budoucím Blade šablonám (`layouts/app.blade.php`, `pages/*.blade.php`, `components/*`).

## Kontrakt data-atributů (`common.js`)

| Atribut | Chování |
|---|---|
| `html[data-hours="open\|closed"]` | nastaví JS podle času v Praze (běžná doba denně 8:00 až 17:00). CSS proměnná `--now-fraction` (0 až 1) = aktuální čas dne |
| `[data-hours-text]` + `data-open-text` / `data-closed-text` | přepne text podle stavu |
| `[data-now-time]` | vypíše aktuální čas HH:MM |
| `[data-nav-toggle][aria-controls]` | mobilní menu, panel dostane `data-open`, `body.nav-open` |
| `[data-header]` | dostane `.is-scrolled` po odscrollování (IntersectionObserver, žádný scroll listener) |
| `[data-reveal]` | dostane `.is-visible` při vstupu do viewportu (animaci řeší CSS, jen pod `html.js` a `prefers-reduced-motion: no-preference`) |
| `[data-tabs]` + `[role=tab][data-tab][aria-controls]` + `[role=tabpanel]` | přístupné záložky, kontejner dostane `data-active`, prvky `[data-tab-show="klic"]` se zobrazí jen u aktivní záložky |
| `a[data-lightbox="skupina"][data-caption]` | lightbox v nativním `<dialog class="lightbox">` (šipky, Esc, počítadlo) |
| `[data-date-strip][data-days][data-name]` | vyrenderuje 14 dní jako radio „čipy“ `.date-chip`; `[data-date-other]` v rodiči = pole pro jiný den |
| `form[data-demo-form]` | ukázková validace; chyby do `[data-error-for="id"]`, text z `data-msg`; skupiny radio `[data-required-group="name"]`; po úspěchu se zobrazí `[data-form-success]` |
| `[data-year]` | aktuální rok |
| `[data-cc="show-preferencesModal"]` | otevře nastavení cookies (orestbida) |
| `[data-coverage-map][data-tiles="light\|dark"][data-labels="all\|major\|none"][data-zoom-snap]` | Leaflet mapa, barvy z CSS proměnných `--map-area-fill`, `--map-area-stroke`, `--map-area-opacity`, `--map-base`, `--map-town`, `--map-label`, `--map-halo`; vzhled podkladu `--map-tile-filter` (OSM dlaždice odbarvené filtrem, v produkci Mapy.com) |

## Tokeny, které musí definovat každý návrh

`--c-bg`, `--c-surface`, `--c-ink`, `--c-muted`, `--c-line`, `--c-accent`, `--c-on-accent`, `--radius-sm`, `--radius-md`, `--radius-btn`, `--font-body`, `--font-display`, `--font-mono` (volitelně). Sdílené komponenty z nich berou barvy.

## Externí knihovny v ukázkách (v produkci přes npm + Vite, self-host)

- Leaflet 1.9.4 – `https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/`
- Phosphor Icons 2.1.2 (webfont) – `https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/{regular|bold|fill}/style.css`
- vanilla-cookieconsent 3.1.0 – `https://cdn.jsdelivr.net/npm/vanilla-cookieconsent@3.1.0/dist/`
- Google Fonts (jen v ukázce; v produkci self-host kvůli GDPR a výkonu)