Сделать адаптивную html+css+js верстку 5 страниц сайта и дополнительных элементов UI этих страниц.
Дополнительные макеты:
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 блока и вкладки и модального окна указывается в ссылке.
У каждой вкладки должна быть ссылка, которую можно было бы отправить другому человеку и после перехода по ней открывался бы сайт, прокручивалась страница до нужного блока и выбиралась нужная вкладка.
Очень важный скрипт - это интеграция API сервиса Digiseller в форму оплаты в модальном окне.
Как работает API:
product_id, lang, currency
https://api.digiseller.ru/api/products/info?transp=cors&format=json&product_id=2528963¤cy=USD&lang=en-US
(подробнее: https://my.digiseller.com/inside/api_catgoods.asp#product_info) - в ответ мы получаем цены \ названия \ способы оплаты \ валюты и тд - на базе этих данных заполняем select'ы в форме и цену продуктаhttps://api.digiseller.ru/api/products/price?format=json&transp=cors&p=2528982&c=WMZ&n=2&x=<response></response>
и в ответе уже прилетает новая цена или ошибка (превышено допустимое кол-во товара)
Т.е. JS должен мониторить изменения в форме и если что отправлять запрос и перерисовывать форму (если все ок - менять цену, иначе - выделять красным \ показывать тултип с ошибкой)Также на мобильных устройствах в форме Select'ы должны быть нативными в плане выбора элемента.
Пример на iOS:
Некоторые элементы не представлены в макете или не используются на страницах сайтах в данный момент, но они должны быть сверстаны в стиле сайта:
<aside> 🔥 Если какие-то моменты вызывают у вас вопросы или могут, по вашему мнению, иметь разночтения - уточняйте их. Как говорится, 7 раз отмерь и 1 отрежь.
</aside>