Для удобства проект собран и помещен в ветку gh-pages. Так же есть опубликованная версия тут.

Верстка содержит разметку и стили для двух страниц "Scan" и "Get Route Name", а так же небольшое кол-во скриптов для демонстрации. Сделано с помощью шаблонизатора Pug препроцессора SASS и автоматизатора Gulp. Для наименования классов и разделения на логические компоненты используеться методология БЭМ. Готовые файлы после сборки собираются в директорию dist/.

Векторные изображения, которые вставляються в код разметки, собираються в спрайт dist/img/sprite.svg и вызываются через специальную конструкцию.

<use xlink:href="img/sprite.svg#{icon-filename}"></use>

Готовая сборка имеет 2 стиливых файла:

• style.css — основые стили
• dev.css — стили только для демонстрации верстки

• Установить Node.js 18
• Выполнить команду npm i для установки зависимостей

• npm run build — собрать верстку в директорию dist/
• npm run dev — собрать верстку в директорию dist/ и запустить локальный сервер для разработки
• npm run gh-pages — перенести данные из директории dist/ в ветку gh-pages