Задача

Сделать адаптивную html+css+js верстку 5 страниц сайта и дополнительных элементов UI этих страниц.

Страницы

  1. Главная страница (названия макетов - 2560/1600/1170/320px)
  2. Страница каталога инструкций (названия макетов - 2560/1600/1170/320px INSTRUCTIONS CATALOG)
  3. Страница каталога скриптов (названия макетов - 2560/1600/1170/320px SCRIPTS CATALOG)
  4. Страница конкретной инструкции (названия макетов - 2560/1600/1170/320px INSTRUCTION)
  5. Страница конкретного скрипта (названия макетов - 2560/1600/1170/320px SCRIPT)

Дополнительные макеты:

2560/1170/320px POPUPS - модальные окна

UI - различные состояния элементов сайта

1170/320px MENU - главное меню для макетов 1170/320px

<aside> 📌 На макетах специально для вас сделаны комментарии, ознакомьтесь с ними и уточните все непонятные моменты.

</aside>

Разрешения

от 1600px - рабочая область статичная 1420px, макеты 2560px

от 1170 до 1600px - рабочая область статичная 1110px, макеты 1600px

от 720 до 1170px - рабочая область статичная 690px, макеты 1170px

от 320 до 720px - рабочая область "резиновая", макеты 320px ("резиновыми" должны быть не все элементы, а контейнеры, меню и текст)

Должна быть поддержка х2 DPI

Поддержка браузеров

Должна быть согласована с исполнителем заказа для выбора оптимального баланса между актуальными технологиями и поддерживаемыми браузерами.

Ниже прикреплена статистика браузеров за год на нашем текущем сайте.

Статистика браузеров AdrenalinebotCom.xlsx

Оптимизация

Наша цель - 100 баллов в Google Page Speed.

Но мы понимаем, что возможно для достижения максимального результата потребуется использовать какие-то неадекватные техники, поэтому нужно просто сделать все возможное в разумных рамках.

Должен быть использован сборщик для CSS и JS.

Семантика

HTML разметка должна удовлетворять всем базовым правилам SEO.

Наш сайт активно продвигается в поисковых системах, поэтому для нас это очень важно.

Гибкость

Разметка должна подстраиваться под контент. Разметка, стили и настройки скриптов должны быть легко изменяемыми людьми с минимальными знаниями.

Сайт делается не на один год, мы хотим иметь возможность без проблем изменить текст, порядок блоков, цвета, тип или длительность анимации (css или js) и прочее.

Для большинства анимаций должны быть применены или быть возможны к применению библиотеки эффектов animate.css, magic.css, wow.js, ani.js.

Должен быть использован препроцессор CSS.

Набор готовых стилей и скриптов

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

Для этого, пожалуй, предпочтительно будет использование CSS и JS библиотек c набором популярных решений.

Точно нужны решения для различных: модальных окон, уведомлений, анимаций текста и кнопок, анимаций при прокрутке страницы

Этот момент лучше согласовать с нами.

Детали

Метатеги

Необходимо добавить основные мета теги Open Graph + <meta name="theme-color" content="#000000">

Якори

Главное меню и кнопки на сайте в основном перемещают пользователя к различным блокам в пределах этой же страницы. Переходы должны быть плавными.

У каждого блока должна быть ссылка, которую можно было бы отправить другому человеку и после перехода по ней открывался бы сайт и страница плавно прокручивалась до этого блока.

Модальные окна

Должны открываться поверх друг друга, если в модальном окне вызов другого модального окна.

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

Табы / вкладки

У каждой вкладки должна быть ссылка, которую можно было бы отправить другому человеку и после перехода по ней открывался бы сайт, прокручивалась страница до нужного блока и выбиралась нужная вкладка.

Форма покупки Digiseller

Очень важный скрипт - это интеграция API сервиса Digiseller в форму оплаты в модальном окне.

Как работает API:

  1. изначально в модальном окне уже будет отрисована форма со всеми необходимыми элементами, но она будет не заполнена. в форме будут храниться некоторые данные в виде хидден атрибутов: product_id, lang, currency
  2. для первоначального заполнения формы нужно отправить запрос вида https://api.digiseller.ru/api/products/info?transp=cors&format=json&product_id=2528963&currency=USD&lang=en-US (подробнее: https://my.digiseller.com/inside/api_catgoods.asp#product_info) - в ответ мы получаем цены \ названия \ способы оплаты \ валюты и тд - на базе этих данных заполняем select'ы в форме и цену продукта
  3. при изменении способа оплаты \ валюты \ кол-ва нужно отсылать запрос https://api.digiseller.ru/api/products/price?format=json&transp=cors&p=2528982&c=WMZ&n=2&x=<response></response> и в ответе уже прилетает новая цена или ошибка (превышено допустимое кол-во товара) Т.е. JS должен мониторить изменения в форме и если что отправлять запрос и перерисовывать форму (если все ок - менять цену, иначе - выделять красным \ показывать тултип с ошибкой)

Также на мобильных устройствах в форме Select'ы должны быть нативными в плане выбора элемента.

Пример на iOS:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1eaa23a6-8be2-4a65-a14d-baf52506af59/Select_iOS.jpg

Дополнительные элементы

Некоторые элементы не представлены в макете или не используются на страницах сайтах в данный момент, но они должны быть сверстаны в стиле сайта:

<aside> 🔥 Если какие-то моменты вызывают у вас вопросы или могут, по вашему мнению, иметь разночтения - уточняйте их. Как говорится, 7 раз отмерь и 1 отрежь.

</aside>