# Спецификация интерфейсов системы бронирования билетов (Fight & Sports)

**Общий стиль:** Modern SaaS, Dark Theme.
**Цветовая палитра:** Фон #121212, Акцентный красный #E32636 (кнопки, активные состояния), Золотой/Желтый (лояльность).
**Шрифты:** Без засечек (San Francisco / Inter / Roboto), четкая иерархия заголовков.

---

## I. Клиентское мобильное приложение (Client App)

### 01-login.png — Вход в систему
* **Назначение:** Авторизация и регистрация.
* **Логика:** Переключатель (Segmented Control) между E-mail и Телефоном. Поля с валидацией. Социальный вход (Apple, Google, VK) в нижней части экрана.
* **Кнопки:** "Войти" (Primary), "Создать аккаунт" (Secondary/Ghost).

### 02-events.png — Главный экран (Каталог)
* **Назначение:** Поиск и выбор спортивного события.
* **Логика:** Горизонтальные табы-фильтры («Все», «Ближайшие», «Популярные»). Список карточек с вертикальным скроллом.
* **Контент карточки:** Миниатюра афиши, название (напр. "Турнир по ММА"), дата/время, площадка, цена "от 2500 ₽".

### 03-event-details.png — Страница события
* **Назначение:** Подробная информация об ивенте перед покупкой.
* **Логика:** Большая афиша (Hero Image) сверху. Блоки: «Ключевая информация» (возраст 18+, длительность), описание, правила возврата, что включено в билет.
* **Действие:** Закрепленная внизу кнопка «Выбрать места».

### 04-seat-selection.png — Выбор мест (Схема зала)
* **Назначение:** Интерактивное бронирование мест.
* **Логика:** Карта арены с секторами. Цветовая индикация: VIP (фиолетовый), Стандарт (синий). Интерактивные точки (кресла).
* **Панель итогов:** Выбранное место (Ряд/Место), количество и общая стоимость с кнопкой перехода к оплате.

### 05-checkout.png — Оформление заказа
* **Назначение:** Финализация покупки и выбор метода оплаты.
* **Логика:** Проверка данных заказа. Ввод промокода, тумблер использования бонусных баллов. Выбор Apple Pay или Карты.
* **Безопасность:** Текст «Все платежи защищены».

### 06-my-tickets.png — Список билетов
* **Назначение:** Хранение купленных билетов пользователя.
* **Логика:** Табы «Активные» и «История». Карточки с перфорацией (визуальный стиль билета), краткие данные места.
* **Действие:** Кнопка «Открыть билет» для перехода к QR.

### 07-ticket-qr.png — Электронный билет
* **Назначение:** Контроль доступа на входе.
* **Логика:** Крупный QR-код. Информация о секторе, ряде и месте продублирована крупным шрифтом для удобства стюардов.
* **Действие:** Кнопки «Добавить в Wallet» и «Скачать».

### 08-profile-loyalty.png — Профиль и лояльность
* **Назначение:** Личный кабинет и геймификация.
* **Логика:** Карточка уровня лояльности («Серебро»). Баланс бонусов в рублях. Прогресс-бар до следующего уровня (Золото).
* **Навигация:** Меню настроек, заказов и реферальной программы.

### 09-order-history.png — История заказов
* **Назначение:** Просмотр прошлых транзакций.
* **Логика:** Список заказов с датами. Цветовые статусы: Зеленый («Оплачен»), Синий («Завершен»), Красный («Отменен»).
* **Детали:** Сумма заказа и ссылка на подробности.

### 10-notifications.png — Настройки уведомлений
* **Назначение:** Управление каналами коммуникации.
* **Логика:** Список переключателей (Switch) для каждого канала: SMS, E-mail, Push, Telegram, WhatsApp.
* **Группировка:** Отдельно системные уведомления и маркетинговые предложения.

---

## II. Админ-панель (Admin Interface)

### admin-01-dashboard.png — Дашборд аналитики
* **Назначение:** Оперативный мониторинг продаж.
* **Виджеты:** KPI (Выручка, Билеты, Конверсия). Линейный график продаж. Круговая диаграмма источников трафика.
* **Действия:** Быстрые кнопки «Создать событие» и «Рассылка».

### admin-02-events.png — Управление событиями
* **Назначение:** Список и модерация ивентов.
* **Логика:** Табличное отображение мероприятий. Для каждого: статус (Черновик/Опубликовано), количество проданных мест в %, текущая выручка.
* **Действия:** Редактировать, Статистика.

### admin-03-create-event.png — Форма создания
* **Назначение:** Добавление нового матча/боя в базу.
* **Поля:** Название, дата (Datepicker), время, площадка (Dropdown), описание (Textarea), загрузка афиши.
* **Логика:** Валидация обязательных полей перед публикацией.

### admin-04-seat-map.png — Настройка схемы зала
* **Назначение:** Привязка категорий к местам.
* **Логика:** Область предпросмотра схемы (SVG). Панель конфигурации: выбор категории (VIP/Стандарт) и выделение соответствующих зон на карте.

### admin-05-pricing.png — Управление ценами
* **Назначение:** Настройка стоимости и динамического ценообразования.
* **Логика:** Список категорий с полями ввода цены. Блок автоматизации: % наценки при высоком спросе или скидки при низком.

### admin-06-segments.png — Сегментация аудитории
* **Назначение:** Группировка пользователей для маркетинга.
* **Фильтры:** По городу, LTV (сумме покупок), дате регистрации.
* **Результат:** Сохраненные сегменты с количеством доступных контактов.

### admin-07-campaign-create.png — Создание рассылки
* **Назначение:** Запуск маркетинговых кампаний.
* **Логика:** Выбор сегмента из списка. Редактор сообщения с превью (как это увидит пользователь). Выбор каналов доставки.
* **Действие:** Кнопки «Отправить сейчас» или «Запланировать».

### admin-08-campaign-stats.png — Аналитика рассылок
* **Назначение:** Анализ эффективности маркетинга.
* **Метрики:** Open Rate (открытия), Click Rate (клики), Conversion (покупки). Графики вовлеченности во времени.

### admin-09-users.png — Список пользователей
* **Назначение:** CRM система.
* **Логика:** Список клиентов с быстрыми метриками: уровень лояльности, количество билетов, общая сумма трат (LTV).
* **Поиск:** По имени, телефону или ID.

### admin-10-user-profile.png — Карточка клиента (Админ)
* **Назначение:** Детальная информация и ручное управление.
* **Логика:** Просмотр всех заказов пользователя, редактирование бонусного баланса, история активности.
* **Действия:** Кнопки связи и блокировки.