# Build Brief: Туристическо изложение — Германия 🇩🇪

> **За Claude Code:** Това е заданието за изграждане на статичен уебсайт за училищен групов проект. Прочети целия файл преди да започнеш. Сайтът е на **български език**, темата е **Германия**. Кодът трябва да е чист, добре коментиран и лесен за разбиране от начинаещ. **Не генерирай реални изображения/видеа** — създавай ясни placeholder слотове (виж Asset Checklist накрая). Логото вече е готово (`assets/logo/logo.svg`) — използвай него. Питай ме, ако нещо е неясно, преди да правиш предположения.

---

## 0. Дизайн философия (НАЙ-ВАЖНО — прочети първо)

Този сайт е **умишлено с малко снимки**. Не разчитай на изображения, за да изглежда добре. Вместо това използвай:
- **Силна типография** — едри заглавия, ясна йерархия.
- **Германска цветова палитра:** бял фон (основен), черно (`#1A1A1A`), червено (`#DD0000`), златно/жълто (`#FFCE00`). Чисто, геометрично, минималистично — в духа на немския дизайн (Bauhaus). Никакви градиенти, никакви тежки сенки.
- **Икони и SVG** вместо снимки, където е възможно (флагове, символи, стрелки) — използвай прости inline SVG или icon font.
- **Интерактивни елементи** (accordion, dropdown, hover ефекти, числа които „броят" нагоре) като основен начин за ангажиране, не галерии от снимки.
- Снимки се ползват САМО там където заданието ги изисква (карусели, сравнение реално-vs-AI). Навсякъде другаде — цвят, текст, форма.

**Тон на съдържанието:** Пиши за **15-годишни**, не за учебник. Кратко, любопитно, с хъс. Хващай вниманието с:
- изненадващи факти („Германия има над 1500 вида бира и 25 000 замъка"),
- неща близки до тийнейджъри — гейминг, футбол (Bundesliga), музика, коли (BMW, Mercedes, Porsche, Autobahn без ограничение на скоростта), Октоберфест, Коледни базари,
- „Знаеше ли, че…?" блокчета, „Вярно или Мит?" въпроси, забавни сравнения.

Placeholder текстовете трябва да задават този ъгъл, за да знае AI-генераторът какъв тон да хване.

## 1. Технологичен стек (задължителен)
- **Само статичен HTML + CSS + vanilla JavaScript.** Без framework, без build стъпки, без npm.
- Една обща таблица със стилове: `css/styles.css`. Един JS файл: `js/main.js`.
- Респонсив, mobile-first. Дефинирай цветовете като CSS променливи (`--black`, `--red`, `--gold`, `--white`) най-горе в `styles.css`.
- Чист семантичен HTML. Коментари на български.
- Шрифт от Google Fonts с кирилица — препоръка: едно силно заглавно (напр. `Oswald` или `Archivo`) + четимо body (`Inter` или `Robото`).

## 2. Структура на проекта
```
/
├── index.html              (Начална — Германия)
├── za-stranata.html        (Вътрешна 1 — За страната)
├── destinatsii.html        (Вътрешна 2 — Дестинации)
├── izzhivyavaniya.html     (Вътрешна 3 — Изживявания)
├── lyubopitno.html         (Вътрешна 4 — Любопитно)
├── za-nas.html             (Вътрешна 5 — За нас)
├── prompts.html            (Подстраница на „За нас" — AI промптове)
├── css/styles.css
├── js/main.js
├── assets/
│   ├── logo/logo.svg       (ГОТОВО — не пипай)
│   ├── images/             (placeholder снимки — само където са нужни)
│   └── presentation/       (5-слайдова презентация)
└── README.md
```

- **Навигация:** еднаква в хедъра на всяка страница, с логото вляво. Маркирай активната страница (напр. златна долна черта).
- Всеки изискван media слот = placeholder с видим етикет (напр. „AI изображение: Бранденбургска врата, 1200×800") + HTML коментар.

## 3. Изисквания по страници

### 3.1 `index.html` — Начална
- Логото (`assets/logo/logo.svg`) горе, голямо.
- Hero секция: едро заглавие „Германия", кратък закачлив подтекст. **Без голяма hero снимка** — вместо това цветен геометричен фон (черно/червено/златни ленти или диагонали) с типография отгоре.
- Представителен текст — **мин. 10 изречения**, ангажиращ тон.
- 3–4 „факт карти" (icon + число + кратък текст) вместо снимки — напр. население, брой замъци, Bundesliga отбори.
- **Footer** (повтаря се на всички страници): икони към соц. мрежи (inline SVG), година.

### 3.2 `za-stranata.html` — За страната
- Текст: география, население, столица и др. — **мин. 20 изречения**.
- Поднеси част от фактите като **инфографика без снимки**: карти с числа, проста SVG карта на Германия с маркирани градове, или хоризонтална времева линия.
- **Карусел** със забележителности (изискване) — мин. 4 слота.
- **Видео** — YouTube `<iframe>` placeholder.

### 3.3 `destinatsii.html` — Дестинации
- **Мин. 5 дестинации**, всяка с описание (закачливо, не сухо).
- Представи ги чрез **падащо меню / accordion** (клик отваря описанието).
- **Карусел** с изображения от дестинациите (изискване).
- **Видео** — вгради: `https://www.youtube.com/embed/qSm49lBzkWk`

### 3.4 `izzhivyavaniya.html` — Изживявания
- Текст — **мин. 20 изречения**, оформен като **accordion за всяко изживяване**.
- **Сравнение реално vs AI изображение** — два слота един до друг с етикети „Реално" / „AI".
- **Видео** — вгради: `https://www.youtube.com/embed/j6xSiSC0QXc`

### 3.5 `lyubopitno.html` — Любопитно
- **Презентация „Местна кухня"** — мин. 5 слайда.
- **Пет любопитни факта** — интерактивни карти (flip на hover или reveal при клик).
- **Видео** — вгради: `https://www.youtube.com/embed/RXCU7_wUka4`
- **„Вярно или Мит?"** мини-куиз (3–4 въпроса, vanilla JS).

### 3.6 `za-nas.html` — За нас
- **Екипът е 3 души:** **Крис**, **Мартин** и **Никол**. Без фамилии, без снимки — цветен кръг с инициала (К / М / Н).
- Карта за всеки: име, роля, кратко представяне.
- Линк/секция с отговорностите + използваните инструменти.
- Линк към **„AI Промптове"** (`prompts.html`).

### 3.7 `prompts.html` — AI Промптове
- Промптове, групирани по категория (Текст / Изображения / Видео / Презентация), всяка с слот за скрийншот + текста.

## 4. Интерактивни елементи (vanilla JS, в `js/main.js`)
- **Карусел:** стрелки + точки, без библиотеки. Преизползваем.
- **Accordion / dropdown:** клик отваря/скрива. Преизползваем.
- **Мобилно меню:** хамбургер toggle.
- **Куиз „Вярно или Мит?":** показва резултат при клик.
- Числа, анимирани нагоре при скрол (факт карти).

## 5. README.md
Кратки инструкции на български: отваряне локално, замяна на placeholder снимки, смяна на YouTube линкове, деплой на Cloudflare Pages през GitHub.

## 6. Дизайн насоки (обобщено)
- Бял фон навсякъде. Черно/червено/златно като акценти.
- Едри заглавия, много „въздух", геометрични форми, цветни ленти вместо снимки.
- Минимализъм — ако се колебаеш дали да добавиш снимка, недей; добави цвят или икона.

---

## ✅ Asset Checklist (за човека)

Claude Code прави само placeholder-ите. Ти създаваш тези с AI инструменти.

**Лого** — ✅ ГОТОВО (`assets/logo/logo.svg`)

**Изображения**
- [ ] Карусел „За страната" — забележителности (мин. 4)
- [ ] Карусел „Дестинации" — мин. 5
- [ ] Сравнение „Изживявания" — реално + AI

**Видео**
- [ ] Видео за Германия на стр. „За страната"

**Презентация**
- [ ] „Местна кухня" — мин. 5 слайда → `assets/presentation/`

**Текст** — тон за 15-годишни
- [ ] Начална: мин. 10 изречения
- [ ] За страната: мин. 20 изречения
- [ ] Изживявания: мин. 20 изречения
- [ ] 5+ дестинации описания
- [ ] Факти + въпроси за куиза

**Промптове**
- [ ] Скрийншот на всеки промпт → `prompts.html`