Краткое ТЗ (полное в переписке)
1) Горизонтальная листаемая полоска «Быстрые сервисы»
Где: главная страница (зимняя версия), сразу под шапкой (мобайл/десктоп).
Состав плиток (порядок, как на ski-gv.ru):
1. Ски-пасс и тарифы
2. Личный кабинет
3. Веб-камеры
4. Трассы и подъёмники
5. Прокат
6. Инструкторы
7. Кафе и рестораны
8. Проживание
9. Контакты
10. Все сервисы
Поведение:
· Клик/тап по плитке ведёт на соответствующий раздел/страницу.
· «Все сервисы» открывает отдельную страницу-каталог сервисов (grid, поиск, фильтры).
· Ленивая загрузка изображений (lazy).
· Плитки и их порядок должны быть управляемы из CMS (название, ссылка, иконка/foto, включено/выключено).
2) Упрощённая шапка (мобайл)
Где: главная страница (мобильная версия).
Что убрать на мобайле c первого экрана:
· Карусель/большое фоновое фото, длинные описания, «принимаем гостей», перечисления, блок бронирования и т.п.
Что оставить/добавить:
· Верхняя панель: «гамбургер» (меню), название парка («Волен»), небольшой лаконичный фон (статичный градиент/иллюстрация без анимации), опционально — компактная погода (иконка + температура).
· Сразу под шапкой — горизонтальная полоска «Быстрые сервисы» (из п.1).
Критерии приёмки:
· Высота первого экрана на iPhone 13/Android базовом — шапка ≤ 96px.
· Нет «тяжёлых» фонов и автоплея; CLS = 0 для шапки.
· Меню открывается в полноэкранный оверлей (scroll-lock, закрытие по кресту/свайпу вниз).
3) Нижнее фиксированное меню (мобайл)
Где: все ключевые страницы зимней версии на мобайле.
Состав иконок/пунктов (слева→вправо):
· Главная
· О курорте
· Все сервисы (иконка «решётка/квадратики»)
· Трассы
· SOS
Поведение:
· Фиксация к нижней кромке экрана, учёт safe-area (iOS). Высота 64–72px, фон — полупрозрачный blur.
· Активный пункт подсвечен.
· «Все сервисы» ведёт в каталог сервисов.
· «Трассы» — на страницу статуса трасс/подъёмников.
· SOS: по тапу модальное окно с двумя действиями:
1. «Позвонить спасателям» (tel:+7-495 161 61 30);
2. «Открыть раздел SOS» (страница с инструкциями, телефонами, возможно — карта).
· Меню видно всегда (кроме экранов модалок/поп-апов), не перекрывает системную навигацию.
4) Блок «Трассы и подъёмники» + кнопка «Пополнить ски-пасс» (мобайл)
Где: на главной (мобайл) сразу после полоски «Быстрые сервисы».
· Карточки по зонам/линиям, как на ski-gv.ru:
o Статус: «открыто», «закрыто», «откроется через … (часы/минуты)» + пиктограмма.
o В карточке — маленький «профиль высоты/горы» как декоративный фон (SVG).
· Под блоком — заметная кнопка «Пополнить ски-пасс».
Переход по кнопке «Пополнить ски-пасс»:
· Страница выбора способа пополнения (3 карточки):
1. Телеграм-бот (открыть t.me/…);
2. Мобильное приложение (кнопки App Store / Google Play / «Как установить»);
3. Личный кабинет на сайте (переход в /lk на соответствующий путь).
· На карточках — краткие подсказки/шаги.
Данные и интеграции:
· Предусмотреть систему интерации с фидом Yandex.disk файл таблицы с расписанием – уже реализовано для большого блока – расписание, для статусов трасс/подъёмников (в том числе. Нужно оттуда фильтровать):
o → список трасс с полями: id, name, area, status(open/closed/pending), opens_at(ISO), updated_at.
o → список подъёмников с аналогичными полями. (под вопросом – может подъемники и не надо выводить в этом блоке, а оставить только трассы)
· Частота обновления на фронте: при загрузке страницы + автопуллинг каждые 60–120 секунд (видимый индикатор «Обновлено N сек назад»).
· Скелет-лоадеры и понятные пустые/ошибочные состояния («Нет данных», «Проблемы со связью. Обновить»).
Критерии приёмки:
· Отображается актуальный статус минимум по 3 зонам; таймер «откроется через …» корректно считает время (учёт часовых поясов).
· Кнопка «Пополнить ски-пасс» ведёт на страницу выбора и все три ветки переходов работают.
· При обрыве сети — корректный fallback, отсутствие крашей.
Дополнительные общие требования
Адаптив/брейкпоинты
· Mobile: ≤ 1023px; Desktop: ≥ 1024px.
· Поддержка: iOS 15+, Android 9+, современные десктоп-браузеры (последние 2 версии).
· Тестовые устройства: iPhone 11/13, Pixel 6, iPad, macOS/Win десктоп.
Дизайн и ассеты
· Стиль согласовать с бренд-гайдом сайта (цвета, шрифты).
· Иконки — монохромные SVG, 24px (мобайл), 32px (десктоп).
· Фото для десктоп-плиток: WebP, 1200×1200, <150KB, lazy-load, srcset.
Производительность и SEO
· Lighthouse: Perf ≥ 85 мобайл, SEO ≥ 90, Accessibility ≥ 90.
· CSS/JS критический минимум, код-сплиттинг, preconnect для API/шрифтов.
· Семантическая разметка, alt-тексты, корректные <h1…h3>.
Доступность
· Контраст для текста в плитках ≥ WCAG AA.
· Фокус-стили клавиатурной навигации (десктоп).
· Роли/aria-label для карусели и нижнего меню.
Логи и аналитика (GTM/Я.Метрика)
События (events):
· quick_services_click (service_name)
· bottom_nav_click (item)
· sos_open, sos_call_click, sos_page_open
· slopes_block_view, slopes_refresh, slope_card_click (area/status)
· topup_open, topup_method_click (telegram/app/lk)
Опубликован 27.10.2025 в 17:09