# ThaiForTravel Telegram Mini App

Статус: структура и цветовой фундамент для согласования  
Дата: 23 июля 2026  
Целевой viewport: 390 px  
Visitor mode: Operate

## 1. Design Read

Мобильная сервисная витрина для русскоязычного туриста, который уже находится в Telegram и хочет быстро получить подтверждённую экскурсию или трансфер. Визуальный язык солнечный и курортный, но сценарий остаётся спокойным, доверительным и операционным.

Рабочая калибровка:

- `DESIGN_VARIANCE: 4` - узнаваемые мобильные паттерны, немного брендовой асимметрии в фото и промоблоках.
- `MOTION_INTENSITY: 3` - быстрые состояния, нажатия и раскрытия без декоративной хореографии.
- `VISUAL_DENSITY: 5` - достаточно информации для выбора, но без длинных текстовых простыней.

## 2. Основная продуктовая логика

Главная мысль интерфейса: пользователь не покупает экскурсию мгновенно. Он выбирает подходящий вариант и отправляет заявку, а менеджер подтверждает детали в Telegram.

Постоянная цепочка доверия:

1. В карточке и форме видно, что заявка не списывает деньги и не завершает бронирование автоматически.
2. Telegram-профиль пользователя уже определён.
3. Перед отправкой показывается обещание: "Ответим в этом Telegram-боте".
4. После отправки бот сразу подтверждает получение.
5. Менеджер продолжает диалог в том же чате.

## 3. Информационная архитектура

```mermaid
flowchart TD
    A["Главная"] --> B["Каталог"]
    A --> C["План отдыха"]
    A --> D["Направление: трансферы"]
    A --> E["Популярная услуга"]
    B --> F["Фильтрованный список"]
    F --> G["Карточка услуги"]
    E --> G
    D --> G
    G --> H["Заявка на услугу"]
    C --> N["Даты и состав поездки"]
    N --> O["План по дням"]
    O --> P["Проверка плана"]
    P --> I["План на согласование"]
    H --> J["Успешная отправка"]
    I --> J
    J --> K["Сообщение от бота"]
    P --> Q["Личные напоминания"]
    K --> R["Сервисные напоминания"]
    K --> L["Диалог с менеджером"]
    A --> M["Избранное"]
    B --> M
    G --> M
    M --> G
```

### Нижняя навигация MVP

Используем 4 пункта:

| Пункт | Назначение | Примечание |
| --- | --- | --- |
| Главная | Быстрый старт и популярное | Точка входа |
| Каталог | Все услуги и фильтры | Внутри живут экскурсии, трансферы, яхты и другие категории |
| Избранное | Сохранённые варианты | Показывает счётчик только при наличии |
| Мои заявки | История заявок и планов | Показывает статусы, даты и быстрый переход в чат с менеджером |

Трансферы не выносим в пятый пункт. На ширине 390 px четыре понятных пункта читаются лучше, а трансфер остаётся быстрым направлением на главной и фильтром каталога.

### Поведение навигации

- На главной, в каталоге, избранном и списке заявок видна нижняя навигация.
- Над нижней навигацией закреплена отдельная кнопка "Чат с менеджером", которая открывает Telegram-бота.
- На детальной карточке нижняя навигация скрывается. Её заменяют закреплённый CTA "Оставить заявку" и компактная кнопка чата.
- В форме используется основная кнопка "Отправить заявку", а быстрый вход в чат остаётся закреплённым снизу.
- На вложенных экранах используется Telegram Back Button.
- Состояние поиска, фильтров и черновика сохраняется при возврате назад.

## 4. Карта экранов

| Экран | Главная задача | Основное действие |
| --- | --- | --- |
| Главная | Быстро выбрать направление или популярную услугу | Открыть каталог, карточку или быстрый подбор |
| Каталог | Сузить выбор и сравнить услуги | Открыть карточку |
| Карточка услуги | Понять ценность, цену и условия | Оставить заявку |
| Избранное | Вернуться к сохранённым вариантам | Открыть карточку |
| Новая заявка | Передать минимум данных менеджеру | Отправить заявку |
| Мои заявки | Проверить все обращения и их статусы | Открыть детали или чат |
| План отдыха | Распределить экскурсии по датам | Отправить план на проверку менеджеру |
| Успех | Убедиться, что заявка получена | Вернуться в каталог или написать менеджеру |

## 5. Структура экранов

### 5.1 Главная

Порядок сверху вниз:

1. Компактная бренд-зона: оригинальный логотип и номер лицензии TAT №11/05234.
2. Фото-оффер "Таиланд без лишних забот" с коротким обещанием русскоязычной поддержки.
3. Поиск.
4. Четыре компактных направления: Паттайя, Пхукет, Трансфер, Яхты.
5. Вход "Составить план отдыха".
6. "Популярные экскурсии": вертикальный список полноширинных карточек.
7. Компактный блок доверия: 200+ экскурсий, 1000+ отзывов, лицензия TAT №11/05234.
8. Кнопка "Чат с менеджером" и нижняя навигация.

В первом viewport видны логотип, лицензия, основной оффер, поиск, все четыре направления и вход в планировщик.

### 5.2 Каталог

Порядок:

1. Переключатель направления Паттайя или Пхукет.
2. Горизонтальная лента категорий.
3. Строка количества результатов и сортировки.
4. Вертикальный список полноширинных карточек, такой же, как на главной.
5. Нижняя навигация.

Фильтры:

- Первый уровень: Все, Морские, Семейные, Активные, Индивидуальные, Зоопарки, Вечерние.
- Второй уровень в bottom sheet: город, цена, подходит детям, длительность, формат, сортировка.
- Один активный фильтр можно снять прямо с чипа.
- Действие "Сбросить всё" появляется только при изменённых фильтрах.

Карточка каталога:

1. Фото 16:10.
2. Функциональная кнопка избранного в правом верхнем углу фото.
3. Бейджи "Хит" и категория находятся сверху слева на фото. Направление Паттайя или Пхукет находится снизу слева.
4. Название до 3 строк.
5. Короткое описание до 2 строк.
6. Цены: взрослый, детский или несколько тарифов.
7. Текстовая ссылка "Подробнее".

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

### 5.3 Карточка услуги

Порядок:

1. Галерея с индикатором количества фото.
2. Бейджи, город и категория.
3. Полное название.
4. Рейтинг и число отзывов, только если есть реальные данные.
5. Цена или таблица тарифов.
6. Краткое описание.
7. Быстрые факты: длительность, формат, трансфер, язык.
8. Аккордеоны: что входит, программа, условия, что взять с собой.
9. Отзывы.
10. Вторичная ссылка "Открыть на сайте".
11. Закреплённый CTA "Оставить заявку".

Если данных для блока нет, блок не показывается. Пустые заголовки и декоративные заглушки не используются.

### 5.4 Заявка

Верх формы:

- Название выбранной услуги.
- Цена как ориентир, если она есть.
- Telegram-контакт: имя или username, статус "Ответим сюда".
- Пояснение: "Менеджер подтвердит дату, места и детали в Telegram".

Общие поля:

- Дата или период.
- Взрослые.
- Дети, с возрастом при необходимости.
- Имя.
- Телефон или WhatsApp, необязательно.
- Отель или район.
- Комментарий, необязательно.

Условные поля:

- Для трансфера: откуда, куда, дата и время, рейс, пассажиры, багаж, детское кресло.
- Для подбора отеля: даты, гости, район, ориентир по бюджету.

Поведение:

- Выбранная услуга уже заполнена и редактируется через "Изменить".
- Счётчики взрослых и детей имеют большие кнопки плюс и минус.
- Ошибка находится под конкретным полем.
- Во время отправки кнопка блокируется и показывает состояние.
- Повторное нажатие не создаёт дубликат.
- Черновик сохраняется при случайном закрытии.

### 5.5 План отдыха

Сценарий состоит из трёх этапов:

1. Пользователь выбирает направление, даты приезда и отъезда, точное количество взрослых и детей.
2. Пользователь выбирает одну или несколько категорий: морские, семейные, активные, индивидуальные.
3. Приложение создаёт дни поездки. Для каждого дня можно добавить одну экскурсию, оставить день свободным, написать комментарий и включить личное напоминание.
4. Если рекомендации не подходят, пользователь открывает поиск по каталогу выбранного направления и заменяет экскурсию в выбранном дне.
5. Пользователь проверяет план целиком в одном из двух режимов и отправляет его менеджеру на согласование.

Основные действия мастера закреплены снизу вместо кнопки чата с менеджером: "Создать план по дням", "Назад", "Следующий день", "Проверить" и "Отправить план менеджеру".

Рекомендации в планировщике:

- учитывают направление, количество взрослых, наличие детей и все выбранные категории;
- объясняют причину рекомендации короткой подписью;
- не ставят длинные экскурсии в день приезда и отъезда без предупреждения;
- учитывают длительность в один или два дня;
- двухдневная экскурсия автоматически занимает текущий и следующий день;
- связанная двухдневная запись снимается целиком при замене на любом из занятых дней;
- не меняют план автоматически и не обещают наличие мест;
- финальную логистику, трансфер и наличие подтверждает менеджер.

Поиск по каталогу:

- открывается из экрана конкретного дня;
- ищет по названию, описанию и категории;
- показывает только услуги выбранного направления;
- позволяет выбрать одну экскурсию на день, а новый выбор заменяет предыдущий;
- имеет пустое состояние с подсказкой изменить запрос.

Итоговый план имеет два дизайнерских режима:

- "Маршрут": вертикальный таймлайн с акцентом на последовательность дней;
- "Карточки": более плотная сводка для быстрого сравнения;
- переключение режима не меняет данные плана.

Напоминания разделяются на два типа:

- личное напоминание по комментарию включается пользователем вручную для конкретного дня и предлагает варианты от недели до часа перед событием;
- сервисное напоминание о времени выезда и списке вещей создаётся только после подтверждения экскурсии менеджером.

Обычный комментарий не превращается в напоминание без согласия пользователя. Все уведомления приходят в тот же Telegram-бот.

### 5.6 Успешная отправка

Основной текст:

> Заявка отправлена. Менеджер ThaiForTravel скоро свяжется с вами в Telegram.

Поддерживающий текст:

> Можно закрыть Mini App. Подтверждение и ответ придут в этот чат.

Действия:

- Основное: "Открыть мои заявки".
- Вторичное: "Написать менеджеру".

## 6. Состояния и крайние случаи

| Состояние | Решение |
| --- | --- |
| Loading | Скелетон повторяет фото, заголовок, две строки текста и цену карточки |
| Нет результатов | Короткое объяснение, "Сбросить фильтры" и "Подобрать экскурсию" |
| Ошибка каталога | "Не удалось загрузить каталог", кнопка "Повторить" |
| Нет сети | Сохраняем уже загруженные карточки, показываем неблокирующую плашку |
| Нет фото | Подложка Sea Mist, иконка изображения, стабильное соотношение сторон |
| Длинное название | До 3 строк в каталоге, без сокращения на детальной странице |
| Несколько цен | Компактные строки тарифов, одна валюта в конце каждой строки |
| Акция или хит | Бейдж Sun с тёмным текстом |
| Избранное пусто | Объяснение пользы и CTA "Перейти в каталог" |
| Ошибка формы | Ошибка у поля и общий фокус на первой проблеме |
| Отправка | Кнопка блокируется, данные не очищаются до подтверждения сервера |
| Ошибка отправки | Черновик остаётся, доступна кнопка "Повторить" |
| План без экскурсий | Свободные дни сохраняются, план можно отправить с одними комментариями |
| Длинная поездка | В прототипе ограничение 14 дней, в продукте лимит определяется после проверки сценария |
| Комментарий без напоминания | Текст сохраняется, уведомление не создаётся |
| Экскурсия ещё не подтверждена | Рекомендация помечена как требующая проверки наличия менеджером |
| Поиск ничего не нашёл | Пояснение и предложение изменить название, категорию или направление |
| Категории не выбраны | Рекомендации строятся по направлению и составу группы |

## 7. Цветовая стратегия

Стратегия: полная брендовая палитра с жёстко разделёнными ролями.

- Sun отвечает только за главное действие, акции и короткие акценты.
- Sea отвечает за навигацию, выбранные фильтры, ссылки и сообщения доверия.
- Фотографии отвечают за эмоцию путешествия.
- Нейтральные поверхности отвечают за спокойствие и читаемость.

Так жёлтый и бирюзовый не конкурируют за одно и то же действие.

### 7.1 Цвета, извлечённые с сайта

| Токен | Значение | Роль на сайте |
| --- | --- | --- |
| `brand.sun.500` | `#F1C059` | CTA, иконки, акценты |
| `brand.ink.800` | `#363636` | Основной тёмный текст |
| `brand.mist.100` | `#E7F0F0` | Светлые секции и карточки |
| `neutral.cloud.50` | `#F6F8F7` | Светлый фон |
| `neutral.white` | `#FFFFFF` | Поверхности |

### 7.2 Расширение для Mini App

| Токен | Значение | Назначение |
| --- | --- | --- |
| `brand.sea.600` | `#137E87` | Выбранные элементы, вторичные кнопки |
| `brand.sea.700` | `#0F737C` | Ссылки, focus ring, активная навигация |
| `brand.sea.800` | `#0E5961` | Тёмный бирюзовый текст и иконки |
| `neutral.ink.950` | `#242829` | Текст на Sun, тёмный фон элементов |
| `neutral.slate.600` | `#596164` | Вторичный текст в светлой теме |
| `neutral.border` | `#D7E1E1` | Границы и разделители |
| `status.success` | `#0F7652` | Успешная отправка |
| `status.danger` | `#B94424` | Ошибки и опасные действия |

### 7.3 Светлая тема

| Семантический токен | Значение |
| --- | --- |
| `bg.app` | `#F6F8F7` |
| `bg.surface` | `#FFFFFF` |
| `bg.surfaceSubtle` | `#E7F0F0` |
| `text.primary` | `#363636` |
| `text.secondary` | `#596164` |
| `border.default` | `#D7E1E1` |
| `action.primary.bg` | `#F1C059` |
| `action.primary.text` | `#363636` |
| `action.secondary.bg` | `#137E87` |
| `action.secondary.text` | `#FFFFFF` |
| `link.default` | `#0F737C` |
| `focus.ring` | `#0F737C` |

### 7.4 Тёмная тема

| Семантический токен | Значение |
| --- | --- |
| `bg.app` | `#0B1416` |
| `bg.surface` | `#121F22` |
| `bg.surfaceRaised` | `#18272A` |
| `bg.control` | `#1A292C` |
| `bg.selection` | `#193337` |
| `bg.info` | `#172F33` |
| `text.primary` | `#EDF4F3` |
| `text.secondary` | `#A7B5B6` |
| `border.default` | `#34494D` |
| `border.control` | `#526E72` |
| `action.primary.bg` | `#F1BD59` |
| `action.primary.text` | `#292F31` |
| `action.secondary.bg` | `#193337` |
| `action.secondary.text` | `#82D0D5` |
| `link.default` | `#82D0D5` |
| `focus.ring` | `#82D0D5` |

### 7.5 Проверенные контрастные пары

| Пара | Контраст | Результат |
| --- | ---: | --- |
| `#363636` на `#F1C059` | 7.15:1 | AAA |
| `#FFFFFF` на `#137E87` | 4.81:1 | AA |
| `#0F737C` на `#FFFFFF` | 5.58:1 | AA |
| `#596164` на `#F6F8F7` | 5.93:1 | AA |
| `#EDF4F3` на `#121F22` | 15.13:1 | AAA |
| `#A7B5B6` на `#121F22` | 7.98:1 | AAA |
| `#82D0D5` на `#193337` | 7.60:1 | AAA |
| `#292F31` на `#F1BD59` | 7.87:1 | AAA |

Белый текст на `#F1C059` не используется. Для Sun всегда применяется тёмный текст.

### 7.6 Правила применения

- Sun занимает не больше 10 процентов экрана и всегда указывает на главное действие.
- Sea может занимать крупную зону только в доверительном сообщении, активном фильтре или навигации.
- Бейдж "Хит" и акция: Sun с тёмным текстом.
- Бейджи "Морская" и "Семейная": Sea Mist с Sea 800.
- Ошибки не окрашивают всю форму. Красный используется локально у поля и в сообщении.
- Текст поверх фотографий допускается только с устойчивым затемняющим слоем и проверенным контрастом.
- Изображения не инвертируются в тёмной теме.

## 8. Telegram-темизация

Mini App принимает тему Telegram в реальном времени, но сохраняет брендовые роли.

| Наш токен | Telegram fallback |
| --- | --- |
| `bg.app` | `--tg-theme-bg-color` |
| `bg.surface` | `--tg-theme-section-bg-color` или `--tg-theme-secondary-bg-color` |
| `text.primary` | `--tg-theme-text-color` |
| `text.secondary` | `--tg-theme-subtitle-text-color` или `--tg-theme-hint-color` |
| `link.default` | `--tg-theme-link-color` |
| `action.primary` | Брендовый Sun с тёмным текстом |

Правила:

- Реагировать на `themeChanged` без перезагрузки.
- Учитывать `safeAreaInset` и `contentSafeAreaInset`.
- Не привязывать закреплённые элементы к нестабильной высоте viewport.
- Нижняя навигация и CTA получают нижний padding из safe area.
- В dark mode Sun сохраняет узнаваемый тёплый тон, но остаётся только у главного CTA и редких статусных акцентов.
- Большие интерактивные поверхности остаются графитовыми. Бирюзовый используется для текста, границ, focus и выбранного состояния.

## 9. Геометрия для 390 px

| Параметр | Значение |
| --- | --- |
| Боковой отступ | 16 px |
| Полезная ширина | 358 px |
| Базовый шаг | 4 px |
| Частые интервалы | 8, 12, 16, 24, 32 px |
| Минимальный touch target | 44 x 44 px |
| Высота основной кнопки | 52 px |
| Радиус карточки | 18 px |
| Радиус поля | 14 px |
| Радиус основной кнопки | 16 px |
| Радиус чипа | 999 px |
| Фото каталога | 16:10 |
| Нижняя навигация | 64 px плюс safe area |
| Закреплённый CTA | 72 px плюс safe area |

Система формы:

- Карточки и крупные блоки: 18 px.
- Поля и небольшие поверхности: 14 px.
- Основные кнопки: 16 px.
- Чипы и компактные фильтры: pill.

## 10. Что считаем согласованным после этой фазы

- Четыре пункта нижней навигации.
- Трансферы находятся внутри каталога и быстрых направлений.
- На главной нет отдельного направления "Зоопарки".
- Вместо раздела отелей на главной используется вход "Составить план отдыха".
- Кнопка "Чат с менеджером" доступна из нижней зоны основных экранов, но скрывается внутри мастера планирования.
- В шапке вместо выбора города показана лицензия TAT №11/05234.
- Бейджи "Хит" и категория показаны сверху фотографии, направление показано в нижней части.
- Карточки на главной и в каталоге идут вертикальным полноширинным списком.
- В начале каталога расположен переключатель Паттайя или Пхукет.
- Четвёртый пункт навигации называется "Мои заявки" и показывает историю обращений.
- Планировщик создаёт дни поездки, предлагает одну экскурсию на день, связывает двухдневные услуги и позволяет добавить комментарии и личные напоминания.
- На карточке услуги нижняя навигация заменяется закреплённым CTA.
- Заявка ведёт в Telegram, а не в оплату.
- Sun является цветом главного действия.
- Sea является цветом структуры и доверия.
- Светлая и тёмная темы используют одну семантическую систему.
- Интерактивный прототип охватывает главную, каталог, карточку, заявку, избранное, мои заявки, план отдыха и успешную отправку.