Вёрстка

Посмотри в окно

Интерфейс для просмотра городских видео: выбор города и времени суток, плеер и список сцен.

HTML
CSS
JavaScript
BEM

Задача и назначение

Нужно было сделать стилизовать экран плеера.

Что реализовано

Видеоплеер с переключением ролика из списка сцен
Поиск по городу и времени суток: утро, день, ночь
Подгрузка следующих карточек по кнопке «Показать ещё»
Прелоадер и сообщение, если для города нет видео

Особенности реализации

Разметка и стили на HTML, CSS и BEM, кастомные чекбоксы, hover и focus-visible. Карточки собираются из HTML-шаблона. Список и видео приходят с API, пагинация и смена ролика — на чистом JavaScript, с прелоадером и пустым состоянием.

Результат

Работающий плеер видео: фильтр, список сцен и плеер на одной странице.