# 📘 Instalační manuál Cookie lišty (Consent Mode v2)
Tato složka obsahuje univerzální a snadno přenosný modul pro implementaci Cookie lišty splňující legislativní požadavky GDPR a Cookie Law (česká legislativa a nařízení EU) s podporou **Google Consent Mode v2**.
---
## 📁 Obsah složky `cookies_bar`
1. **`consent_head.html`**: Inicializační kód Google Consent Mode v2, který se vkládá na začátek sekce ``.
2. **`banner.html`**: HTML struktura samotné cookie lišty a detailního panelu nastavení (vkládá se na konec ``).
3. **`style.css`**: CSS stylování s plynulými přechody, animacemi a moderním tmavým vzhledem.
4. **`main.js`**: JavaScriptová logika řízení souhlasů, automatické generování cookies a napojení na GTM DataLayer.
---
## 🛠️ Postup instalace na nový web
### 1. Inicializace hlavičky
Zkopírujte obsah souboru `consent_head.html` a vložte jej do šablony webu do sekce `` (co nejvýše, před načtení jakýchkoliv analytických či reklamních kódů, včetně samotného GTM kontejneru).
### 2. Vložení HTML struktury
Zkopírujte obsah souboru `banner.html` a vložte jej na konec šablony před uzavírací značku ``.
### 3. Nastavení odkazů na správu souhlasů
- **V patičce webu (Footer)**: Přidejte odkaz s ID `openCookieSettingsLink`, který uživateli umožní kdykoliv vyvolat změnu nastavení:
```html
Nastavení cookies
```
- **Na stránce Ochrana osobních údajů (GDPR)**: Přidejte tlačítko nebo odkaz s ID `gdprCookieSettingsLink` pro odvolání souhlasu přímo z dokumentu zásad:
```html
Změnit nastavení cookies
```
### 4. Import CSS a Javascriptu
- Připojte soubor `style.css` do šablon nebo jeho obsah vložte na konec vašeho globálního CSS souboru.
- Připojte soubor `main.js` do šablon (s atributem `defer` a případným cache-busting parametrem jako `?v=1`).
---
## 🎨 Přizpůsobení barev (Customization)
Chcete-li, aby se vzhled lišty přizpůsobil designu konkrétního webu, stačí v souboru `style.css` upravit CSS proměnné v selektoru `:root`:
```css
:root {
--cookie-primary: #10b981; /* Hlavní barva (např. tlačítko přijmout, zapnuté přepínače) */
--cookie-primary-dark: #059669; /* Tmavší odstín pro hover efekty */
--cookie-primary-light: #34d399; /* Světlejší odstín (pro texty a zvýraznění odkazů) */
}
```
---
## ⚙️ Správa služeb a cookies výhradně přes GTM
Pokud chce administrátor spravovat veškeré cookies a seznamy služeb **pouze z rozhraní Google Tag Manageru** bez nutnosti jakéhokoliv dalšího zásahu do zdrojového kódu webu:
Pro každou novou službu (např. *Seznam Sklik*), kterou přidáte do GTM, vytvořte v GTM novou značku typu **Vlastní HTML** (Custom HTML) spouštěnou na triggeru **Consent Initialization** (Inicializace souhlasu) nebo **Initialization**:
```html
```
Tímto způsobem se nová služba automaticky zaregistruje v modulu lišty a okamžitě se vykreslí v nastavení lišty pod příslušným přepínačem.
---
## 🤖 Pokyny pro AI Coding Agenty (Prompty)
Pokud kód nasazuje AI programátor (např. Antigravity, Claude, ChatGPT), můžete mu předat následující instrukce:
> **AI Prompt k nasazení:**
> *"Nasaď na tento web modul Cookie lišty ze složky `/cookies_bar`. Vlož `consent_head.html` na začátek `` před GTM. Vlož `banner.html` na konec ``. Přidej stálý odkaz „Nastavení cookies“ s ID `openCookieSettingsLink` do patičky vedle odkazu na GDPR. Propoj CSS a JS z této složky. Uprav barevné schéma CSS proměnných `--cookie-primary` v `style.css` tak, aby barevně přesně odpovídalo dominantním barvám tohoto webu (prostuduj stávající stylesheet)."*