# Návrh B „Noční směna“: unikátní prvky Popis prvků, kterými se návrh B liší od běžného webu řemeslníka. U každého: co to je, proč tam je, z čeho se skládá, jak se chová, jaká data potřebuje, jak je přístupný, co dělá při omezeném pohybu a jak ho postavit v Laravelu (Blade + Tailwind v4). Odkazy na soubory jsou relativní ke složce návrhu. Přehled: 1. Klíčová dírka s fotkou 2. Otočení klíče (hlavní CTA) 3. Přepínač Den / Noc 4. Denní pás s příplatky 5. Orientační kalkulačka 6. Karty-visačky 7. Technické kresby 8. Plovoucí mobilní lišta 9. Živý stav „Pohotovost aktivní“ 10. Duotónový portrét 11. Vizitka 12. Záře pouliční lampy --- ## 1. Klíčová dírka s fotkou **Co to je:** fotka otevírání auta (`otevirani-auta.jpg`) v hero sekci úvodu, oříznutá do tvaru klíčové dírky (kruh + zužující se štěrbina), s tenkým oranžovým obrysem a slabou září okolo. **Proč:** jediný obrázek, který během zlomku vteřiny řekne „zámečník“, a zároveň vypadá jako pohled klíčovou dírkou do světla lampy. Nahrazuje obecnou fotku v obdélníku, kterou má každý web. **Anatomie:** - `figure.keyhole` s `filter: drop-shadow(0 0 28px var(--c-glow-strong))` (záře sleduje tvar), - `.keyhole__frame` s poměrem 5 : 8 a CSS maskou (inline SVG jako data URI, `viewBox="0 0 100 160"`, cesta `M37 81.4A34 34 0 1 1 63 81.4L74 152Q75 156 71 156L29 156Q25 156 26 152Z`), - `` (WebP + JPG, `srcset` 600w / 1200w), fotka zvětšená 1,22× a posunutá tak, aby v kruhu byl zámek a ve štěrbině ruka, - `::after` vrstva: oranžové světlo shora a tma zdola (`mix-blend-mode: multiply`), ve dne slabší, - `svg.keyhole__outline` se stejnou cestou, tah 1,5 px `--c-accent`, `non-scaling-stroke`. **Chování:** statické. Jen jednorázový náběh (`scale(.96)` na 1 + opacity, 1,2 s) při načtení. **Data:** jedna fotka. V administraci pole „Hero fotka“ s ořezem (bod zájmu) nebo pevný soubor. Pozici lze doladit CSS proměnnými `object-position` / `transform-origin`. **Přístupnost:** alt text z `content.md` („Ruce zámečníka otevírají zámek dveří bílého auta speciálním nástrojem“). Obrys je `aria-hidden`. **Reduced motion:** bez náběhu. **Responzivita:** desktop vpravo vedle textu (max. 360 px), mobil pod CTA a menší (max. 200 px), takže CTA je nad ohybem. **Laravel:** ``, maska jako CSS utilita (`@utility mask-keyhole { mask: url("data:…") center / 100% 100% no-repeat; }`). Obrázek přes `spatie/laravel-medialibrary` s konverzemi `thumb` (600) a `full` (1200) ve WebP. `fetchpriority="high"`, bez lazy-load. **V ukázce:** `index.html`, sekce 1; CSS `8. HERO A KLÍČOVÁ DÍRKA`. --- ## 2. Otočení klíče (hlavní CTA) **Co to je:** velké oranžové tlačítko s číslem „730 915 828“. Vlevo tmavý kruh s ikonou klíče (Phosphor `ph-key`), která se při najetí nebo fokusu otočí o 90°, jako když klíč v zámku odemyká. **Proč:** v krizi musí být tlačítko hovoru nejvýraznější prvek stránky. Otočení je zpětná vazba (tohle je ta akce, která „otevírá“) a zároveň podpis značky. Číslo místo slova „Zavolat“ znamená, že člověk vidí číslo i bez klepnutí a může ho opsat. **Anatomie:** `a.btn-call[href="tel:+420730915828"]` › `span.btn-call__key` (48 px kruh `--c-on-accent`, ikona `--c-accent`) + skrytý text „Zavolat“ + `span.btn-call__num` (Archivo 112 %, 650, 22 až 28 px, tabulkové číslice). Výška 64 px, pilulka. **Stavy:** - výchozí: `--c-accent`, záře `0 18px 44px -20px var(--c-glow-strong)`, - hover: `--c-accent-hover`, silnější záře, klíč `rotate(90deg)` za 0,5 s s pružinovou křivkou `cubic-bezier(.34, 1.56, .64, 1)`, - focus-visible: stejné otočení, prstenec 2 px v `--c-ink` s odsazením 4 px, - active: `scale(.98)`. **Data:** telefon z nastavení (`config('tootevru.phone')`), zobrazení bez předvolby, odkaz s předvolbou. **Přístupnost:** název „Zavolat 730 915 828“ (viditelný popisek je obsažen, WCAG 2.5.3), ikona `aria-hidden`, kontrast textu 6,8 : 1 (noc) a 6,0 : 1 (den). **Reduced motion:** klíč se neotáčí, zůstává jen změna barvy. **Měření:** každé tlačítko hovoru má `data-track="click_to_call"` a `data-track-location` (hero, header, topbar, mobile_bar, footer, calculator, poptavka_acute, kontakt_vizitka, …) pro GA4 událost po souhlasu. **Laravel:** `` (varianty `xl` s klíčem, `compact` s telefonem). **V ukázce:** hero, panel „Akutní?“ na poptávce, závěrečné výzvy na ceníku a O mně; CSS `.btn-call`. --- ## 3. Přepínač Den / Noc **Co to je:** segmentový přepínač se dvěma tlačítky (ikona měsíce „Noc“, ikona slunce „Den“) v top baru. Web je výchozí tmavý, přepínač ho celý přepne do světlé sady tokenů. **Proč:** tmavý režim je rozhodnutí značky (noc, OLED, méně oslnění), ale ve dne na slunci nebo pro starší uživatele může být světlý čitelnější. Volba je ruční a vědomá: systémové `prefers-color-scheme` se **nesleduje**, aby web v noci neoslnil jen proto, že má někdo telefon nastavený na světlý vzhled. **Anatomie:** `div.theme-switch[role=group][aria-label="Barevný režim"]` › 2× `button[data-theme-set][aria-pressed]`. Na mobilu jen ikony (popisky zůstávají pro čtečky), od 900 px s textem. Aktivní režim: pozadí `--c-surface-2`, obrys `--c-line-strong`, ikona `--c-accent-text`. **Chování:** 1. Inline skript v `` přečte `localStorage['tootevru-theme']` (v `try/catch`) a před vykreslením nastaví `html[data-theme="light"]` a `meta[name=theme-color]`, takže stránka neblikne. 2. Klik: `main.js` nastaví atribut, synchronizuje `aria-pressed`, `theme-color`, uloží volbu (v `try/catch`, v soukromém okně se jen neuloží) a znovu sestaví mapu (sdílený skript čte barvy jen při startu). 3. Pokud prohlížeč umí View Transitions a uživatel nemá omezený pohyb, změna proběhne jako prolínání 0,35 s. Přerušený přechod (skrytá karta) se tiše ignoruje. 4. Vizuál aktivního tlačítka řídí CSS podle atributu na ``, ne JS, takže je správně i před spuštěním skriptu. **Data:** žádná serverová. Volitelně cookie `theme` (nezbytná, funkční), aby Blade mohl vykreslit správný režim už na serveru. **Přístupnost:** `aria-pressed`, skupina s názvem, 32 px vysoká tlačítka uvnitř 38 px pilulky (v top baru, sekundární ovládání), fokus prstencem. Oba režimy splňují WCAG AA. **Reduced motion:** přepnutí bez prolínání. **Laravel:** `` v layoutu; skript do `` jako inline partial (musí běžet před CSS vykreslením). V Tailwindu tokeny přes `@theme` + přepis pod `[data-theme="light"]` (viz `BRAND.md`, kap. 15). **V ukázce:** všechny stránky, top bar; `main.js` sekce „Přepínač Den / Noc“; tokeny v `style.css` kap. 1. --- ## 4. Denní pás s příplatky **Co to je:** vodorovný pás 0:00 až 24:00, který ukazuje, kdy dnes platí běžná cena a kdy příplatek. Oranžová značka „teď“ stojí na aktuálním čase. Nad pásem věta „Teď platí běžná cena / příplatek +50 % / +100 %“. **Proč:** příplatky jsou nejčastější zdroj nedůvěry u pohotovostních služeb. Pás je vysvětlí za dvě sekundy a férově, bez drobného písma. Zároveň uklidňuje: „volat můžete kdykoli“, jen víte předem, na čem jste. **Anatomie:** - hlavička: den a čas („Dnes, sobota, 19:44“), stav („Teď platí příplatek +100 %“, stav v `--c-accent-text`), - pás (60 až 72 px, na kontaktu 44 px) se třemi zónami přes `--from` / `--to` v hodinách: 0 až 8, 8 až 17, 17 až 24. Běžná cena = světlejší plná plocha, příplatek = šrafování (u +100 % hustší), - hodinové rysky každou hodinu (`repeating-linear-gradient` s krokem `100% / 24`), - značka „teď“: 2px svislá čára `--c-live` se září, `left: calc(var(--now-fraction) * 100%)`; popisek se posouvá `translateX(calc(var(--now-fraction) * -100%))`, aby nikdy nevyjel z pásu, - osa (0:00, 8:00, 17:00, 24:00) a legenda se čtyřmi pravidly. **Data a výpočty:** - `--now-fraction` (0 až 1) a hodiny nastavuje sdílený `common.js` každých 30 s (čas `Europe/Prague`). - `main.js` zjistí datum a den v týdnu v Praze (`Intl.DateTimeFormat`), zda je státní svátek (pevné svátky + Velký pátek a Velikonoční pondělí z výpočtu Velikonoc), a nastaví `data-daytype="weekday|weekend|holiday"`. - Pravidla z ceníku: denně 8:00 až 17:00 běžná cena; všední den mimo tuto dobu +50 %; víkend mimo tuto dobu +100 %; svátek +100 % (v ukázce celý den, **ověřit s majitelem**). - Aktualizace při každé události `tootevru:hours` ze sdíleného skriptu. **Přístupnost:** grafika je `aria-hidden`. Význam nese viditelný text (stav, legenda) a skrytý odstavec `[data-dayband-sr]`, který JS přepisuje celou větou („Dnes je sobota. Od 0:00 do 8:00 příplatek 100 procent, od 8:00 do 17:00 běžná cena, … Teď je 19:44, platí příplatek 100 procent z ceny práce.“). Barvy zón se liší i vzorem (šrafování), ne jen barvou. **Reduced motion:** nic se neanimuje (značka se jen přepočítá). **Laravel:** ``. Pravidla (hodiny, procenta) z administrace (tabulka `settings` nebo `surcharge_rules`), svátky z konfigurace nebo balíčku (např. `azuyalabs/yasumi`, provider `CzechRepublic`) předané do `data-*` atributů, aby JS nepočítal svátky sám. Server může vykreslit výchozí stav podle času serveru (bez blikání). **V ukázce:** úvod sekce 3 (plná verze), kontakt (kompaktní); partial `_src/partials/day-band.html`, CSS kap. 10, `main.js` „Denní pás s příplatky“. --- ## 5. Orientační kalkulačka **Co to je:** na ceníku dvě skupiny voleb (co potřebujete, kdy) a výsledek: cena práce + příplatek + výjezd = orientačně celkem. **Proč:** lidé volají hlavně kvůli ceně. Kalkulačka odpoví dřív, než zavolají, a zbaví je strachu z „noční přirážky“. Po výpočtu je hned po ruce tlačítko hovoru. **Anatomie:** - `form[data-calc][data-trip="500"]`, dvě `fieldset` s čipy (radio pilulky). Služby nesou `data-price` a u cen „od“ atribut `data-from`. Volby času nesou `data-surcharge` (0 / 50 / 100), - výsledek `aside.calc__result` (od 1024 px sticky) s `dl` řádky a velkým součtem, drobné písmo a kompaktní CTA hovoru. **Chování a výpočet:** - příplatek = `round(cena práce × procento / 100)`, **jen z ceny práce**, - celkem = cena práce + příplatek + výjezd (500 Kč, započtený vždy, označeno jako orientační; **ověřit s majitelem**, zda se výjezd účtuje vždy a jak mimo 3 okresy), - u cen „od“ se „od“ zobrazí u ceny práce, příplatku i součtu, - předvýběr „kdy“ podle aktuálního času v Praze (včetně víkendu a svátku), hláška „Předvybral jsem podle aktuálního času.“, - předvýběr služby z URL `?sluzba=zabouchnute|zamcene|klic|mechanismus|auto|montaz` (odkazy z visaček na úvodu), - formát čísel `Intl.NumberFormat('cs-CZ')` s nezlomitelnými mezerami. **Stavy:** vybraný čip = oranžová plocha, fokus prstencem, hover obrys `--c-ink`. Výsledek se mění okamžitě při změně (žádné tlačítko „Spočítat“). **Přístupnost:** skupiny s `legend`, nativní radio (šipky fungují), výsledek v `aria-live="polite"` + `aria-atomic`, takže čtečka přečte novou cenu. **Reduced motion:** bez animací. **Laravel:** ``, data z tabulek `services` (název, cena, `is_from`, kategorie, `slug` pro URL) a nastavení. Stejná data plní ceník i visačky, takže se cena mění na jednom místě. Bez JS se zobrazí jen volby a výchozí výsledek ze serveru (progressive enhancement). **V ukázce:** `cenik.html#kalkulacka`; CSS kap. 17; `main.js` „Orientační kalkulačka“. --- ## 6. Karty-visačky **Co to je:** hlavní služby na úvodu jako papírové visačky na klíče: karta se skutečným otvorem vlevo nahoře, zesíleným okrajem otvoru a tenkým oranžovým kroužkem, který otvorem prochází (motiv kroužku z loga). Pod nimi řádek menších visaček „Další služby“. **Proč:** visačka na klíče je předmět, který zná každý, a nese cenu stejně přirozeně jako cenovka. Kroužek navazuje na logo, takže služby vypadají jako součást značky, ne jako obecné karty. **Anatomie:** - `a.tag` (neořezaný obal, nese fokus a kroužek) › `span.tag__body` (plocha `--c-surface-2`, rádius 14 px, maska `radial-gradient(circle at 30px 30px, transparent 9px, #000 9.6px)` = skutečný průsek) › název (H3 styl), cena (Archivo 112 %, 30 až 42 px), u širokých karet technická kresba, šipka vpravo dole, - `::before` na těle: zesílený okraj otvoru (kruh +4 px, obrys `--c-line-strong`), - `span.tag__ring`: kruh 53 px, tah 2,5 px `--c-accent`, střed posunutý od otvoru o (-18, -18) px, takže kroužek prochází středem otvoru. Maska `conic-gradient(#000 0 155deg, transparent 155deg 208deg, #000 208deg)` skryje úsek, který by byl „pod“ kartou: nahoře jde kroužek přes kartu, do otvoru a zpátky pod ni. - mřížka 12 sloupců: 7 + 5 a 5 + 7 (střídání, žádné 4 stejné sloupce), mobil pod sebou, široké karty s kresbou od 480 px. - menší visačky: otvor vlevo uprostřed, bez kroužku, vodorovný `scroll-snap` řádek (pod 1024 px), mřížka 3 / 6 sloupců nad tím. **Stavy:** hover: obrys `--c-line-strong`, šipka oranžová a o 4 px vpravo, tělo se zhoupne `rotate(-1.4deg)` (široké `-0.8deg`) kolem otvoru (`transform-origin` = střed otvoru), kroužek zůstává na místě. Fokus: prstenec kolem obalu (maska ho neořízne, protože je na neořezaném rodiči). Malé visačky mají fokus jako vnitřní 2px linku. **Data:** služby z administrace (název, cena, „od“, poznámka, `slug`, příznak „zobrazit na úvodu“, pořadí, volitelně kresba). Odkaz vede do kalkulačky s předvybranou službou. **Přístupnost:** seznam odkazů, název služby i cena jsou text, kroužek a kresby `aria-hidden`. **Reduced motion:** bez zhoupnutí, jen změna obrysu. **Laravel:** `` a ``. Geometrie otvoru v CSS proměnných (`--hole-x`, `--hole-y`, `--hole-r`); při změně je nutné přepočítat pozici kroužku a úhly masky (vzorec v komentáři komponenty: úhel otvoru 135° v souřadnicích `conic-gradient`, skrytý úsek od okraje otvoru po průsečík s levou hranou karty). **V ukázce:** úvod sekce 2; CSS kap. 9. --- ## 7. Technické kresby **Co to je:** tři liniové ilustrace ve stylu dílenského výkresu: řez cylindrickou vložkou (stavítka, pružiny, střižná rovina, klíč, jedno stavítko oranžově), klíč se zuby a kroužkem (oranžový kroužek, skrytá část čárkovaně), klika a zámek auta (oranžová vložka). **Proč:** klient chtěl ilustrace, ale obecné kreslené obrázky by působily hravě a lacino. Výkres říká „rozumím mechanice zámku“ a sedí k přesnému, nočnímu jazyku. **Anatomie:** inline SVG, tahy 1,25 px s `vector-effect: non-scaling-stroke`, třídy `.ill__ink` (obrys), `.ill__acc` (jediný oranžový prvek), `.ill__void` (prázdné prostory v barvě podkladu přes `--ill-bg`), `.ill__hatch-a/-b` (šrafování řezu přes ``), `.ill__center` (osa čerchovaně), `.ill__hidden` (skrytá hrana čárkovaně), `.ill__dim` (kóty). Barvy výhradně z tokenů, takže fungují v obou režimech. **Chování:** statické. **Data:** žádná. Geometrie je generovaná skriptem (přesné souřadnice stavítek podle zubů klíče), hotové SVG jsou v `_src/partials/ill-*.html` a jako samostatné soubory v `assets/img/illustrations/`. **Přístupnost:** dekorativní, `aria-hidden="true"` a `focusable="false"`. **Pravidla použití:** max. jedna kresba na sekci, nikdy jako hlavní obrázek hero, nikdy s textem nebo čísly uvnitř. **Laravel:** Blade komponenty `` (obsah SVG v `resources/views/components/illustration/*.blade.php`), `--ill-bg` nastavit podle podkladu rodiče. ID vzorů šrafování musí být na stránce unikátní (při více kresbách téhož typu přidat suffix). **V ukázce:** visačky na úvodu (vložka, klíč), hlavička ceníku (vložka), skupina Auta v ceníku (auto), vizitka v kontaktu (klíč). --- ## 8. Plovoucí mobilní lišta **Co to je:** na telefonu plovoucí pilulka 12 px nad spodním okrajem: široké oranžové tlačítko „730 915 828“ a vedle kruhové tlačítko s ikonou na poptávku. **Proč:** hlavní akce je vždy pod palcem, i když člověk scrolluje ceník nebo recenze. Na úvodu se objeví až ve chvíli, kdy hlavní CTA v hero zmizí z obrazovky, aby nebyla dvě stejná tlačítka nad sebou. **Anatomie:** `div.callbar[data-callbar]`, pozadí `--c-surface-2` (s `backdrop-filter` jen tam, kde to prohlížeč umí, jinak plné), obrys `--c-line`, tónovaný stín. Tlačítko hovoru 52 px, ikonové tlačítko 52 px kruh (`aria-label="Poslat poptávku"`). Respektuje `env(safe-area-inset-bottom)`. **Chování:** - `data-callbar="hero"` (úvod): `main.js` sleduje `[data-hero-cta]` přes IntersectionObserver a přidá `.is-visible`, když hero CTA není vidět. Bez JS je lišta vidět vždy. - ostatní stránky: vidět hned, - skrytá při otevřeném mobilním menu, - na stránce Poptávka bez ikonového tlačítka (jste na ní), - od 768 px se nezobrazuje (hlavička má vlastní tlačítko), stránka má dole rezervu 80 px. **Přístupnost:** skrytá lišta má `visibility: hidden` (není v pořadí tabulátoru), popisek hovoru „Zavolat 730 915 828“, ikonové tlačítko s `aria-label`. **Reduced motion:** objeví se bez vysunutí. **Laravel:** `` v layoutu. **V ukázce:** všechny stránky (mobil), CSS kap. 15, `main.js` „Plovoucí mobilní lišta“. --- ## 9. Živý stav „Pohotovost aktivní“ **Co to je:** řádek nad sloganem (a v panelu „Akutní?“ na poptávce): oranžová tečka s jemným pulzem, text „Pohotovost aktivní“ a aktuální čas oddělený tenkou linkou. **Proč:** v noci je nejdůležitější otázka „bere to teď někdo?“. Řádek odpoví dřív než cokoli jiného. Tečka je jediná tečka na webu a znamená skutečný stav (pohotovost je nonstop, takže je vždy aktivní). **Anatomie:** `p.live` › `span.live__dot` (9 px, `--c-live`, `::after` pulz `scale(1 → 2.8)` + opacity za 2,4 s) + text + `time[data-now-time]` (sdílený skript vypisuje HH:MM v pražském čase). **Přístupnost:** tečka `aria-hidden`, stav je řečený textem. Čas se aktualizuje bez `aria-live` (nechceme každých 30 s rušit čtečku). **Reduced motion:** statická tečka. **Laravel:** ``. Pokud by majitel někdy pohotovost přerušil (dovolená), přidat v administraci přepínač „Pohotovost dočasně nedostupná“, který změní text i barvu tečky na `--c-muted` a zobrazí náhradní kontakt. **V ukázce:** hero úvodu, panel „Akutní?“ na poptávce. --- ## 10. Duotónový portrét **Co to je:** fotka Ondřeje převedená do dvou tónů: stíny téměř černé (`--duo-lo`), světla v sodíkové oranžové (`--duo-hi`). **Proč:** dostupná fotka je dovolenková z hor. Duotón ji sjednotí se značkou a odvede pozornost od pozadí k člověku. Až vznikne pracovní portrét, stejné zpracování drží jednotný vzhled. **Anatomie:** `figure.duotone` (pozadí `--duo-hi`, `isolation: isolate`) › `img` (`grayscale(1) contrast(1.18)`, `mix-blend-mode: multiply`) + `::after` (`--duo-lo`, `mix-blend-mode: lighten`). Ořez posunutý na postavu (`object-position` + mírné zvětšení). **Přístupnost:** alt text z `content.md`. Duotón nemění obsah obrázku. **Laravel:** ``; bod zájmu z administrace. **V ukázce:** úvod „Kdo přijede“, hero O mně. --- ## 11. Vizitka **Co to je:** hlavní panel stránky Kontakt jako velká tmavá vizitka: logo, jméno, obrovské číslo (+420 nad ním drobně), e-mail, IČ, „Nejsem plátce DPH“, základna, tlačítko „Uložit do telefonu“ (stáhne `.vcf`). V rohu velký výřez oranžového kroužku z loga, vpravo dole technická kresba klíče. **Proč:** na kontaktu lidé chtějí číslo a jistotu, že je to skutečný člověk s IČ. Vizitka dá obojí na jedno místo a tlačítko „Uložit do telefonu“ řeší situaci „budu ho potřebovat jindy“. **Anatomie:** `article.vcard-panel` (plocha `--c-surface-2`, rádius 14 px, `::before` kroužek 300 px s tahem 3 px, `::after` záře), `a.vcard-panel__phone` (Archivo 112 %, 36 až 62 px, tabulkové číslice), `a[download]` na `../_shared/assets/data/tootevru-zamecnik.vcf`. **Stavy:** číslo na hover oranžové, fokus prstencem. Kresba se pod 560 px skrývá, kroužek se zmenší. **Přístupnost:** číslo je odkaz „Zavolat 730 915 828“, obsah vizitky je čistý text (kopírovatelný), dekorace `aria-hidden`. **Laravel:** `` s údaji z nastavení (NAP musí být shodné s patičkou a JSON-LD). Soubor `.vcf` generovat routou (`/kontakt/vizitka.vcf`, `Content-Type: text/vcard`) z týchž dat. **V ukázce:** `kontakt.html`; CSS kap. 20. --- ## 12. Záře pouliční lampy **Co to je:** statický oranžový radiální přechod (12 až 14 % krytí) v pravém horním rohu hero, hlaviček podstránek a některých panelů. **Proč:** dává tmavé stránce hloubku a „místo“ (ulice v noci) bez obrázku a bez animace. Na klíčové dírce vypadá, jako by na ni svítila lampa. **Pravidla:** vždy statická, vždy jen jedna na obrazovku, nikdy za textem tak, aby snížila kontrast. Sekce se září má `overflow-x: clip`, takže záře nevytvoří vodorovný posuv a svisle může doznít do další sekce. **Laravel:** utilita `@utility glow-corner { … }` s `::before`. **V ukázce:** hero, `.page-head`, panel „Akutní?“, vizitka, závěrečné výzvy.