Skip to content

Instantly share code, notes, and snippets.

@ivan-hilckov
Created May 17, 2026 09:26
Show Gist options
  • Select an option

  • Save ivan-hilckov/ca407aec2c6c34e1c60b374bcfc97bea to your computer and use it in GitHub Desktop.

Select an option

Save ivan-hilckov/ca407aec2c6c34e1c60b374bcfc97bea to your computer and use it in GitHub Desktop.
Скриншоты для инструкций «Установка и настройка» (замена видео-списку на время продакшен-релиза)

Скриншоты для инструкций «Установка и настройка»

Список скриншотов, которые нужно подготовить вместо видео-роликов на время, пока моушен-дизайнер собирает видео. Решение временное: чтобы выкатить инструкции в продакшен, динамические ролики заменяются статичными скриншотами.

Исходный список видео: https://gist.github.com/ivan-hilckov/f1eed175d2995228176f0dadba0ab14e

Для каждой строки нужен один файл:

  • <base>.png (или .webp) — скриншот.

Там, где видео показывало последовательность действий (меню → диалог → результат, ВКЛ → ВЫКЛ), шаг разбит на несколько скриншотов ключевых состояний.

В колонке «Путь к файлу» указан путь без расширения. Всего 54 скриншота.

iPhone — Happ

# Шаг Описание Путь к файлу
1 Шаг 1 — установка Страница приложения «Happ» в App Store с кнопкой загрузки src/assets/images/setup/iphone/step-1
2 Шаг 2 — добавление подписки (deeplink) Диалог подтверждения добавления подписки в Happ src/assets/images/setup/iphone/step-2-dialog
3 Шаг 2 — добавление подписки (deeplink) Подписка появилась в списке Happ src/assets/images/setup/iphone/step-2-added
4 Шаг 2 — добавление вручную Экран Happ с полем ручной вставки ключа подписки src/assets/images/setup/iphone/step-2-manual-paste
5 Шаг 2 — добавление вручную Подписка добавлена в список src/assets/images/setup/iphone/step-2-manual-added
6 Готово Выбран сервер, VPN включён (круглая кнопка в состоянии ВКЛ) src/assets/images/setup/iphone/step-3-on
7 Готово VPN выключен (круглая кнопка в состоянии ВЫКЛ) src/assets/images/setup/iphone/step-3-off

Android — Happ

# Шаг Описание Путь к файлу
1 Шаг 2 — вставка ключа Happ на Android, вставка ключа подписки из буфера src/assets/images/setup/android/step-paste
2 Шаг 2 — вставка ключа Подписка добавлена в список src/assets/images/setup/android/step-paste-added

Windows — Happ

# Шаг Описание Путь к файлу
1 Шаг 2 — скачивание Страница Happ в GitHub Releases с выделенным .exe файлом src/assets/images/setup/windows/happ/step-download
2 Шаг 3 — вставка ключа Окно Happ, кнопка «Из буфера» src/assets/images/setup/windows/happ/step-paste
3 Шаг 3 — вставка ключа Подписка появилась в списке src/assets/images/setup/windows/happ/step-paste-added
4 Готово Выбран сервер, VPN включён (круглая кнопка ВКЛ) src/assets/images/setup/windows/happ/step-done-on
5 Готово VPN выключен (круглая кнопка ВЫКЛ) src/assets/images/setup/windows/happ/step-done-off

Windows — NekoRay

# Шаг Описание Путь к файлу
1 Шаг 3 — добавление подписки Меню «Сервер» → «Добавить профиль из буфера обмена» src/assets/images/setup/windows/nekoray/step-paste-menu
2 Шаг 3 — добавление подписки Диалог «Как подписку (создать новую группу)» src/assets/images/setup/windows/nekoray/step-paste-dialog
3 Шаг 3 — добавление подписки Группа vlv.one появилась в списке src/assets/images/setup/windows/nekoray/step-paste-done
4 Шаг 4 — Режим TUN Вкладка vlv.one с установленной галочкой «Режим TUN» src/assets/images/setup/windows/nekoray/step-tun-check
5 Шаг 4 — Режим TUN Диалог перезапуска src/assets/images/setup/windows/nekoray/step-tun-restart

Windows — v2RayTun

# Шаг Описание Путь к файлу
1 Шаг 3 — запуск от админа Контекстное меню v2RayTun.exe с пунктом «Свойства» src/assets/images/setup/windows/v2raytun/step-admin-menu
2 Шаг 3 — запуск от админа Вкладка «Совместимость», галочка «Запускать от имени администратора» src/assets/images/setup/windows/v2raytun/step-admin-checkbox
3 Шаг 4 — добавление подписки Меню «+» с пунктом «Добавить из буфера обмена» src/assets/images/setup/windows/v2raytun/step-paste-menu
4 Шаг 4 — добавление подписки Подписка добавлена в список src/assets/images/setup/windows/v2raytun/step-paste-added
5 Шаг 5 — подключение Выбрана конфигурация, круглая кнопка «Подключить» src/assets/images/setup/windows/v2raytun/step-connect-ready
6 Шаг 5 — подключение Состояние «подключено» src/assets/images/setup/windows/v2raytun/step-connect-done
7 Готово Активное подключение src/assets/images/setup/windows/v2raytun/step-done
8 Готово Настройки трафика, переключатель «Режим: Туннель» (опционально) src/assets/images/setup/windows/v2raytun/step-done-tunnel

macOS — Happ (Apple Silicon)

# Шаг Описание Путь к файлу
1 Шаг 3 — вставка ключа Happ на macOS, вставка ключа из буфера src/assets/images/setup/macos/happ/step-paste
2 Шаг 3 — вставка ключа Подписка добавлена в список src/assets/images/setup/macos/happ/step-paste-added
3 Готово Выбран сервер, VPN включён (круглая кнопка ВКЛ) src/assets/images/setup/macos/happ/step-done-on
4 Готово VPN выключен (круглая кнопка ВЫКЛ) src/assets/images/setup/macos/happ/step-done-off

macOS — V2Box (Intel)

# Шаг Описание Путь к файлу
1 Шаг 3 — добавление подписки Открытый V2Box, импорт подписки из буфера src/assets/images/setup/macos/v2box/step-paste
2 Шаг 3 — добавление подписки Подписка появилась в списке src/assets/images/setup/macos/v2box/step-paste-added
3 Готово Выбран сервер, VPN включён (круглая кнопка ВКЛ) src/assets/images/setup/macos/v2box/step-done-on
4 Готово VPN выключен (круглая кнопка ВЫКЛ) src/assets/images/setup/macos/v2box/step-done-off

Linux — NekoRay

# Шаг Описание Путь к файлу
1 Шаг 3 — добавление подписки Меню «Сервер» → «Добавить профиль из буфера обмена» src/assets/images/setup/linux/step-paste-menu
2 Шаг 3 — добавление подписки Диалог «Как подписку (создать новую группу)» src/assets/images/setup/linux/step-paste-dialog
3 Шаг 3 — добавление подписки Группа vlv.one появилась в списке src/assets/images/setup/linux/step-paste-done
4 Шаг 4 — Режим TUN Вкладка vlv.one с установленной галочкой «Режим TUN» src/assets/images/setup/linux/step-tun-check
5 Шаг 4 — Режим TUN Диалог перезапуска src/assets/images/setup/linux/step-tun-restart
6 Шаг 5 — подключение ПКМ по конфигурации → пункт «Запустить» src/assets/images/setup/linux/step-connect-menu
7 Шаг 5 — подключение Состояние «подключено» src/assets/images/setup/linux/step-connect-done
8 Готово Активное подключение src/assets/images/setup/linux/step-done
9 Готово ПКМ по конфигурации → пункт «Остановить» src/assets/images/setup/linux/step-done-stop

Android TV — Happ

# Шаг Описание Путь к файлу
1 Шаг 3 — QR-импорт Экран Android TV с QR-кодом src/assets/images/setup/androidtv/step-qr
2 Шаг 3 — QR-импорт На TV прилетела подписка/серверы src/assets/images/setup/androidtv/step-qr-done
3 Шаг 4 — Web Import Экран tv.happ.su в браузере с заполненными UID и Data src/assets/images/setup/androidtv/step-web-import
4 Шаг 4 — Web Import На TV появились подписки/серверы src/assets/images/setup/androidtv/step-web-import-done

Apple TV — Happ

# Шаг Описание Путь к файлу
1 Шаг 4 — QR-импорт Apple TV показывает QR-код src/assets/images/setup/appletv/happ/step-qr
2 Шаг 4 — QR-импорт На Apple TV пришли серверы src/assets/images/setup/appletv/happ/step-qr-done
3 Шаг 5 — Web Import Экран tv.happ.su в браузере с заполненными UID и Data src/assets/images/setup/appletv/happ/step-web-import
4 Шаг 5 — Web Import Данные пришли на Apple TV src/assets/images/setup/appletv/happ/step-web-import-done

Apple TV — Shadowrocket

# Шаг Описание Путь к файлу
1 Шаг 3 — добавление подписки Shadowrocket: форма «+», Type: Subscribe, поле URL с ключом подписки src/assets/images/setup/appletv/shadowrocket/step-paste-form
2 Шаг 3 — добавление подписки Подписка добавлена в список src/assets/images/setup/appletv/shadowrocket/step-paste-added

Технические требования

  • Формат: .png (или .webp), без потерь / с высоким качеством.
  • Соотношение сторон: исходное соотношение экрана устройства (телефон — портрет, ПК/TV — ландшафт).
  • Разрешение: 2× от плотности отображения (~720p для портрета, ~1080p для ландшафта). Минимум — нативное разрешение экрана/окна без апскейла.
  • Тема: только светлая (продукт сейчас в светлой теме).
  • Контент в кадре: реальный UI устройств, без персональных данных (тестовый аккаунт, тестовая подписка).
  • Чистый кадр: без курсора мыши (для ПК), без системных уведомлений, баннеров и посторонних окон.
  • Имя файла: совпадает с путём из колонки «Путь к файлу».

Связь с видео-списком

Один шаг видео = одна или несколько строк здесь. Где видео показывало flow, скриншоты разбиты на ключевые состояния:

Видео (1 ролик) Скриншоты
iPhone · Шаг 1 — установка 1
iPhone · Шаг 2 — deeplink 2 (диалог + результат)
iPhone · Шаг 2 — вручную 2 (вставка + результат)
iPhone · Готово 2 (ВКЛ + ВЫКЛ)
Android · вставка ключа 2 (вставка + результат)
Windows · Happ · скачивание 1
Windows · Happ · вставка ключа 2 (буфер + результат)
Windows · Happ · Готово 2 (ВКЛ + ВЫКЛ)
Windows · NekoRay · подписка 3 (меню + диалог + результат)
Windows · NekoRay · Режим TUN 2 (галочка + перезапуск)
Windows · v2RayTun · от админа 2 (меню + галочка)
Windows · v2RayTun · подписка 2 (меню + результат)
Windows · v2RayTun · подключение 2 (готов + подключено)
Windows · v2RayTun · Готово 2 (подключение + туннель)
macOS · Happ · вставка ключа 2 (вставка + результат)
macOS · Happ · Готово 2 (ВКЛ + ВЫКЛ)
macOS · V2Box · подписка 2 (импорт + результат)
macOS · V2Box · Готово 2 (ВКЛ + ВЫКЛ)
Linux · NekoRay · подписка 3 (меню + диалог + результат)
Linux · NekoRay · Режим TUN 2 (галочка + перезапуск)
Linux · NekoRay · подключение 2 (меню + подключено)
Linux · NekoRay · Готово 2 (подключение + остановка)
Android TV · QR-импорт 2 (QR + результат)
Android TV · Web Import 2 (форма + результат)
Apple TV · Happ · QR-импорт 2 (QR + результат)
Apple TV · Happ · Web Import 2 (форма + результат)
Apple TV · Shadowrocket · подписка 2 (форма + результат)

Итого: 27 видео-роликов → 54 скриншота.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment