insane-idea / museum

Museum

Watch deploy

Этапы работы над проектом:

• фиксированная вёрстка - 1 неделя
• адаптивная вёрстка - 1 неделя
• добавление JavaScript - 1 неделя

Фиксированная вёрстка. Ключевые навыки:

• валидная семантическая вёрстка
• легкоподдерживаемый читаемый код
• экспорт стилей и графики из Figma
• работа с растровой и векторной графикой
• подключение шрифтов
• использование flexbox и grid для построения сеток
• вёрстка навигационных элементов интерфейса
• вёрстка карточных элементов интерфейса
• вёрстка и стилизация интерактивных элементов интерфейса (кнопки, ссылки, переключатели)
• вёрстка и стилизация форм
• плавная прокрутка по якорям
• изменение стиля интерактивных элементов при наведении и при клике
• параллакс
• соответствие вёрстки макету (в качестве инструмента для проверки используем расширение PerfectPixel)

Адаптивная вёрстка. Ключевые навыки:

• работа с медиа-запросами
• легкоподдерживаемый читаемый код
• использование подхода "desktop first" при работе с адаптивностью
• корректное отображение вёрстки на большинстве устройств
• использование для адаптации верстки flexbox и/или grid, функции calc(), css-переменных
• рефакторинг кода

Добавление JavaScript. Ключевые навыки:

• написание собственного js-кода для реализации указанного в задании функционала
• подключение и использование js-библиотек
• создание бесконечного слайдера/свайпера или добавление его при помощи библиотеки
• создание кастомного HTML5 видеоплеера
• создание слайдера сравнения изображений
• добавление на сайт калькулятора продажи товаров (калькулятор продажи билетов в секции Tickets и в форме продажи билетов)
• легкоподдерживаемый читаемый качественный код c использованиеv современных возможностей js

Функционал приложения

1. Слайдер в секции Welcome

• есть возможность перелистывания слайдов влево и вправо кликами по стрелкам
• есть возможность перелистывания слайдов влево и вправо свайпами (движениями) мышки
• есть возможность перелистывания слайдов кликами по буллетам (квадратики внизу слайдера)
• слайды перелистываются плавно с анимацией смещения вправо или влево
• перелистывание слайдов бесконечное (зацикленное)
• при перелистывании слайдов буллет активного слайда подсвечивается (выделяется стилем)
• при перелистывании слайдов кликами или свайпами меняется номер активного слайда
• даже при частых кликах или свайпах нет ситуации, когда слайд после перелистывания находится не по центру, нет ситуации, когда видны одновременно два слайда

2. Кастомный видеоплеер в секции Video

• при клике по кнопке "Play" слева внизу на панели видео начинается проигрывание видео, иконка кнопки при этом меняется на "Pause", большая кнопка "Play" по центру видео исчезает. Повторный клик на кнопку останавливает проигрывание видео, иконка меняется на первоначальную, большая кнопка "Play" по центру видео снова отображается
• при клике по большой кнопке "Play" по центру видео, или при клике по самому видео, начинается проигрывание видео, иконка кнопки "Play" слева внизу на панели видео меняется на "Pause", большая кнопка "Play" по центру видео исчезает. Клик на видео, которое проигрывается, останавливает проигрывание видео, иконка кнопки "Play" слева внизу на панели видео меняется на первоначальную, большая кнопка "Play" по центру видео снова отображается
• прогресс-бар отображает прогресс проигрывания видео
• перетягивание ползунка прогресс-бара позволяет изменить время с которого проигрывается видео
• если прогресс-бар перетянуть до конца, видео останавливается, соответственно, меняется внешний вид кнопок "Play"
• при клике на иконку динамика происходит toggle звука и самой иконки (звук включается или выключается, соответственно изменяется иконка)
• при перемещении ползунка громкости звука изменяется громкость видео
• если ползунок громкости звука перетянуть до 0, звук выключается, иконка динамика становится зачеркнутой
• если при выключенном динамике перетянуть ползунок громкости звука от 0, звук включается, иконка громкости перестаёт быть зачёркнутой
• при нажатии на кнопку fullscreen видео переходит в полноэкранный режим, при этом видео и панель управления разворачиваются во весь экран. При нажатии на кнопку fullscreen повторно видео выходит из полноэкранного режима. Нажатие на клавишу для выхода из полноэкранного режима Esc не проверяем и не оцениваем
• панель управления в полноэкранном режиме визуально выглядит так же, как на макете - кнопки равномерно распределены по всей ширине страницы, относительные размеры между кнопками и ползунками, а также относительные размеры самих кнопок остались прежними
• управление плеером с клавиатуры. Горячие клавиши должны работать так же, как работают эти клавиши в YouTube видео Клавиши и группы клавиш работают в русской и английской раскладке клавиатуры. При изменении скорости воспроизведения поверх видео появляется и исчезает число с текущим коэффициентом воспроизведения, как это происходит в YouTube видео
  1. клавиша Пробел — пауза, при повторном нажатии - play
  2. Клавиша M (англ) — отключение/включение звука
  3. Клавиша F — включение/выключение полноэкранного режима
  4. Клавиши SHIFT+, (англ) — петемотка ролика назад
  5. Клавиши SHIFT+. (англ) — петемотка ролика вперёд