# П’ять макетів Singing Coach

Відкрийте [галерею](index.html) у браузері. Вона містить прев’ю всіх концепцій, порівняння двох варіантів поруч і позначення фаворитів. Для перегляду не потрібні npm, Nuxt, база даних або зовнішні сервіси.

## Варіанти

| № | Концепція | Інтерактивний макет | Повна сторінка | Телефон |
|---|---|---|---|---|
| 1 | Акцентний мінімалізм — «Простір голосу» | [Відкрити](minimal.html) | [PNG](previews/minimal-desktop.png) | [PNG](previews/minimal-mobile.png) |
| 2 | Експериментальна та кінетична типографіка — «Голос у русі» | [Відкрити](kinetic.html) | [PNG](previews/kinetic-desktop.png) | [PNG](previews/kinetic-mobile.png) |
| 3 | Нео-скеоморфізм / тактильний дизайн — «Вокальна майстерня» | [Відкрити](tactile.html) | [PNG](previews/tactile-desktop.png) | [PNG](previews/tactile-mobile.png) |
| 4 | Глассморфізм — «Світло і резонанс» | [Відкрити](glass.html) | [PNG](previews/glass-desktop.png) | [PNG](previews/glass-mobile.png) |
| 5 | Темний режим — «Після увертюри» | [Відкрити](dark.html) | [PNG](previews/dark-desktop.png) | [PNG](previews/dark-mobile.png) |

## Cloudflare Pages

Публічна галерея: https://oksana-singing-coach-designs.pages.dev/

Проєкт: `oksana-singing-coach-designs`. Публікується лише папка `designs`; вихідний бриф і таблиця з відповідями не завантажуються. Серверна логіка, реальні бронювання та платежі не підключені.

Повторний деплой із кореня репозиторію після авторизації через `wrangler login`:

```bash
WRANGLER_SEND_METRICS=false npx wrangler@4.158.0 pages deploy designs --project-name oksana-singing-coach-designs --branch main --commit-dirty=true
```

Команда публікує поточні файли, включно з незакоміченими; Git-коміт і push не потрібні.

## Перегляд

Можна відкрити `index.html` подвійним натисканням. Скрипти, зображення та шрифти локальні; використання `file://` підтримане. Якщо переглядач редактора не виконує JavaScript, відкрийте файл у звичайному браузері або запустіть із кореня репозиторію:

```bash
python3 -m http.server 8147 --bind 127.0.0.1 --directory designs
```

Після цього відкрийте [локальну галерею](http://127.0.0.1:8147/). Зупинення сервера — Ctrl+C.

На кожному макеті верхня панель дозволяє змінити концепцію та прочитати примітки до дизайну. Вона є інструментом перегляду, а не частиною майбутнього сайту.

## Що спробувати

- Головна сторінка: підхід, вокальні стилі, історія викладачки, аудиторії, тарифи, кабінет, відгуки, FAQ та завершальний запис.
- «Забронювати пробний урок»: оберіть демонстраційну дату, формат і часовий пояс, потім час. Заповніть синтетичні дані, наприклад `student@example.test`, перегляньте помилку оплати й стан підтвердження. Реальної оплати немає, реквізити картки не запитуються.
- «Мій кабінет»: розклад, історія оплат, завдання з відміткою виконання, матеріали та зворотний зв’язок. Показані як наповнені, так і порожні стани. Усі записи вигадані спеціально для макета й позначені як приклади.
- «Залишити відгук» і «Зв’язатися»: демонстрація полів, перевірки заповнення й підтвердження. Форми нічого не надсилають і не зберігають.
- «Макет адмінпанелі» у підвалі: редагування текстів і цін та демонстраційний стан збереження; фактичні файли не змінюються.
- У типографічному макеті «Відчути ритм» запускає коротку анімацію. При `prefers-reduced-motion` вона вимкнена.
- Клавіша Escape закриває діалог; стрілки перемикають вкладки. На телефоні доступне розкривне меню.

У `previews/` також є окремі скриншоти календаря (`*-booking.png`), деталей і стану помилки (`*-checkout.png`), кабінету (`*-account.png`), адмінпанелі (`*-admin.png`) та мобільних діалогів.

## Що є дизайн-пропозицією

Макети використовують [бриф і уточнення](../docs/website-brief.md). Підтверджені тарифи та правила скасування збережено. Візуальний план, палітри, композиції та початкову самокритику дивіться в [design-explorations.md](../docs/design-explorations.md).

- Досліджуються п’ять стилів; жоден не затверджений як остаточний.
- Відкладені питання про початок строку використання, пакет із двох уроків і ціни в євро не вирішувалися. У прототипах не вигадані дати закінчення пакетів або євроціни.
- Публічне відображення цін, порядок кроків запису, поля форм і стан модерації відгуків показані як дизайн-пропозиції.
- Мова повного макета — українська. Перемикач мов пояснює, що англійський і польський переклади ще не додані.
- Публічне ім’я, фото, відео, контакти й тексти відгуків поки відсутні. Абстрактні композиції — оригінальні декоративні елементи, а не портрети викладачки. Розміщення матеріалів явно підписане; чужих фотографій, цитат або досягнень немає.
- Усі інтерфейси — локальні демонстрації. Бронювання, оплата, Google Calendar, надсилання листів, вхід у кабінет і збереження контенту не підключені.
- Галерея зберігає в localStorage лише ідентифікатори обраних дизайн-концепцій. Дані форм туди не потрапляють.

## Файли

`assets/app.js` містить спільний зміст, п’ять різних hero-композицій та демонстраційні сценарії. `assets/styles.css` — палітри, компоненти, відмінні оформлення та адаптивність. `assets/gallery.*` — галерея й порівняння. Шрифти й ліцензії зберігаються в `assets/fonts/`.

Цей етап не обирає production-архітектуру і не замінює майбутню реалізацію Nuxt відповідно до AGENTS.md.

## Перевірка готових макетів

Перевірено у headless Google Chrome через Playwright на ізольованих синтетичних даних:

- усі п’ять сценаріїв запису, перерахунок часу, перевірка email, стан помилки, повернення до календаря й демонстраційне підтвердження;
- вкладки кабінету, виконання завдання, форми відгуку й контакту, демонстрація адмінпанелі;
- 26 перевірок ширини сторінки: п’ять концепцій на 320, 390, 768, 1024 та 1440 px, а також галерея на 320 px; горизонтального переповнення немає;
- 27 станів сторінок і діалогів у axe-core з правилами WCAG A/AA: автоматично виявлених порушень немає; це не замінює повний ручний аудит доступності;
- циклічний фокус у діалогах, Escape, повернення фокуса, керування вкладками стрілками та reduced motion;
- галерея, вибір фаворитів, порівняння desktop/mobile, відкриття всіх п’яти макетів і галереї через `file://`, завантаження локальних шрифтів;
- помилок JavaScript і запитів до зовнішніх ресурсів у перевірених сценаріях немає.

Результати збережено в [previews/validation.json](previews/validation.json). Візуально переглянуто п’ять desktop-концепцій, мобільні екрани, календар, кабінети та галерею. Production build не застосовується: це автономні HTML/CSS/JS-макети без збірки.