Mini App: обзор и темы

Мини-аппа — личный кабинет подписчика внутри Telegram. Это лёгкое SPA без сборки (vanilla HTML/CSS/JS), которое веб-сервис отдаёт по пути /app. Бот открывает её через кнопку меню чата «VPN» и инлайн-кнопку «📱 Открыть приложение» — URL берётся из настройки SUBSCRIPTION_MINI_APP_URL, а если она пуста, при старте бота подставляется автоматически из WEB__PUBLIC_URL как <домен>/app.

Все данные мини-аппа получает из cabinet API (/api/cabinet/*) с авторизацией по Telegram initData — контракт описан на странице Контракт cabinet API. Оформление и содержимое задаёт владелец в веб-кабинете — см. Настройку владельцем.

Три вкладки

Один макет на все темы: контент разбит на три вкладки с нижней навигацией.

Вкладка	Что внутри
Главная	Приветствие владельца, карточка статуса подписки (активна / пробный период / нет подписки, счётчик «дней осталось», прогресс-бар, дата окончания), кнопка «Попробовать бесплатно» (если триал доступен), тарифы с выбором срока и способа оплаты (баланс / ⭐ Stars / подключённые онлайн-шлюзы), карточка «Пригласи друга», MTProto-прокси (если включён) и кастомные блоки владельца
Подключение	Пошаговый мастер подключения (см. ниже)
Кабинет	Профиль (имя, @username, баланс), сводка по подписке, «Мои устройства» — список HWID-устройств с отвязкой в один тап, поле промокода, история платежей, MTProto-прокси и встроенный чат поддержки (отвечает ИИ-поддержка, ответы оператора приходят туда же)

В режиме продаж «конструктор» (SALES_MODE) вместо готовых тарифов на Главной показывается сборка «срок + пакет трафика» с итоговой ценой — подробнее в настройках кабинета.

Мастер подключения

Вкладка «Подключение» — пошаговый мастер на весь экран, ведущий подписчика от нуля до включённого VPN (кнопка «Установка и настройка» на Главной ведёт сюда же):

0. Интро — «Настройка на iOS/Android/…» (платформа определяется автоматически), выбор приложения фишками, если владелец включил несколько, и две кнопки: «Начать настройку на этом устройстве» либо «Установить на другом устройстве» (тогда платформа выбирается вручную, а подписка передаётся ссылкой).
1. Приложение — «Установить приложение»: кнопка стора подставляется под выбранное приложение и платформу.
2. Подписка — «Добавить подписку»: deep-link в один тап (через /dl-редирект для кастомных схем) плюс копируемая ссылка для ручного добавления.
3. Готово! — конфетти и подсказка нажать круглую кнопку включения VPN в приложении.

Прогресс показан дугой вокруг центральной иконки; весь мастер нарисован на переменных темы, так что каждая из 18 тем красит его в своём характере.

Deep-links формируются на бэкенде для девяти клиентов:

happ://add/<subscription_url>        # или crypto_link из панели, если есть
incy://add/<subscription_url>
v2raytun://import/<subscription_url>
hiddify://import/<subscription_url>
streisand://import/<subscription_url>
shadowrocket://add/sub://<base64(url)>
v2box://install-sub?url=<urlencoded>
clash://install-config?url=<urlencoded>
sing-box://import-remote-profile?url=<urlencoded>

Какие из них видит подписчик и в каком порядке — настройка CONNECTION_APPS (первое приложение = основное в мастере).

Скрытая ссылка подписки

Если владелец включил HIDE_SUBSCRIPTION_LINK, копируемая ссылка на шаге 2 не показывается — остаётся только кнопка «Открыть в приложении», импорт через deep-link продолжает работать.

8 тем оформления

Владелец выбирает одну из 8 тем (внутренние коды a..h). Макет и данные одинаковые — различаются палитра, шрифты и форма элементов.

Тема	Код	Характер
Минимал	minimal (a)	Нейтральная палитра, синий акцент — чистый базовый вид
Прайват	private (b)	Серифная Georgia, тёмно-зелёный с золотом — «закрытый клуб»
Бадди	buddy (c)	Nunito, крупные скругления, оранжевый акцент — дружелюбный
Нативный	native (d)	Системная типографика и цвета в духе нативных списков
Терминал	terminal (e)	JetBrains Mono, зелёный на тёмном — консоль
Журнал	magazine (f)	Georgia, нулевые скругления, карточки без боковых рамок — editorial
Неон	neon (g)	Градиентный фон, «стеклянные» карточки с blur, градиентные кнопки
Поп	pop (h)	Unbounded, жирные рамки и жёсткие тени, лаймовый акцент

Галерея

Светлая и тёмная схема

Каждая тема имеет светлую и тёмную палитру. Схема берётся из Telegram (colorScheme) при открытии и переключается на лету по событию themeChanged — если пользователь сменит тему Telegram, мини-аппа перекрасится без перезагрузки. Для превью схему можно зафиксировать параметром ?mode=light|dark.

Локализация RU/EN

Язык интерфейса берётся из профиля пользователя (user.language): при первом контакте он определяется по language_code из Telegram — en даёт английский, всё остальное — русский. Переведены все строки, включая вкладки (Home / Connect / Account), шаги подключения и тосты. Параметр ?lang=ru|en переопределяет язык для превью.

Живое демо

Посмотреть мини-аппу вживую можно в демо-боте @bot_vpn4_bot.