Видео24

Добавлено 18 июн 2023 в 13:25
Ссылка на верстку: https://yanovskiynv.store/cctv-up
Сайт для компании, занимающейся услугами установки и обслуживания систем видеонаблюдения.
В макете соблюдены семантика и правила доступности. Код полностью валидный, минимизированный и аккуратный. Верстал по методологии БЭМ.
Соответствие дизайн-макету - pixel perfect!
Макет полностью кроссбраузерный (включая iOS Safari 12+)
Показатели PageSpeed Insight высокие (можно найти в прикрепленных изображениях)

Много чистого JavaScript написанного мною:
1. Навигационная панель (адаптивность). Соблюдены правила доступности: открытие/закрытие по нажатию на Esc; предусмотрена возможность перемещения с помощью кнопки Tab (перемещение происходит только внутри меню, если оно открыто).
2. Модальное окно. Так же соблюдены правила доступности и компонент так же управляется с помощью клавиатуры.
3. "Ловушка" фокуса (для зацикливания переключения фокуса с помощью клавиатуры на активном компоненте). Работает для модалок и для меню.
4. Скрипт (js-класс) обсепечивающий правильное взаимодействие между модальным окном и навигационной панелью.. Ведь нужно учитывать, что открывать в данный момент, а что закрывать, если например из меню хотим вызвать модальное окно.
5. Собственный ScrollSpy. Это скрипт (js-класс) отслеживающий текущую просматриваемую область страницы и подсвечивающий нужный пункт в навигации. А так же при переходе по ссылке скрипт переносит нас в нужную область просмотра страницы.
6. Переключение содержимого в тарифах (внизу сайта).
7. Меню переключения языка (в футере)
8. Форма заявки (в модальном окне): валидация и верификация данных.
9. Отправка данных из формы заявки в local storage.

Весь перечисленный js-код написан мной в ООП-стиле с использованием ES6-классов и модулей.
Пример исходного кода js-класса из пункта №9 можно найти в прикрепленных изображениях

Сторонние js-плагины, подключенные через npm:
1. imask - ограничение вводимых символов в полях формы.
2. swiper - слайдер для отзывов
3. popperjs - для плавающего позиционирования выпадающего меню выбора языка - при прокрутке оно подстраивается под экран.

При верстке использовал препроцессор SCSS.
Все иконки выполнены в формате SVG
Проект собирается при помощи Gulp и Webpack.
E84529f793 68cf6f435a 3c6e927e19 Ef4863380d E15ec061da 13fe9f02c2 84a4f5f024 D7a2451fa5