Сделать адаптивную html+css+js верстку 5 страниц сайта и дополнительных элементов UI этих страниц.
<aside> 🔥 Если какие-то моменты вызывают у вас вопросы или могут, по вашему мнению, иметь разночтения - уточняйте их. Как говорится, 7 раз отмерь и 1 отрежь.
</aside>
Прогресс работы вы можете демонстрировать на своем хостинге, конечный результат в том числе должен быть продемонстрирован на вашем хостинге.
По итогу работы, до закрытия заказа разумеется, мы должны получить от вас все исходные файлы проекта - gulp + html + scss + js.
Мы заказываем и платим именно за эти исходники, и мы так же хотим иметь возможность оценить их адекватность. Это может быть сделано уже в последнюю очередь, когда мы подтвердим, что нас полностью устраивает то, что мы видим на вашем хостинге в браузере.
Сборщик должен быть настроен и собирать 1 в 1 то, что вы демонстрируете на своем тестовом хостинге.
Дополнительные макеты:
2560/1170/320px POPUPS - модальные окна
UI - различные состояния элементов сайта
1170/320px MENU - главное меню для макетов 1170/320px
<aside> 📌 На макетах в Figma сделаны важные комментарии! Ознакомьтесь с ними! Нейминг секций используйте согласно 2560px макету.
</aside>
от 1600px - рабочая область статичная 1420px, макеты 2560px
от 1170 до 1600px - рабочая область статичная 1110px, макеты 1600px
от 720 до 1170px - рабочая область статичная 690px, макеты 1170px
от 320 до 720px - рабочая область "резиновая", макеты 320px ("резиновыми" должны быть не все элементы, а контейнеры, меню и текст)
Должна быть поддержка х2 DPI (retina) - общая поддержка, подготовленная графика и т.д.
Должна быть согласована с нами для выбора оптимального баланса между актуальными технологиями и поддерживаемыми браузерами.
Ниже прикреплена статистика браузеров за год на нашем текущем сайте.
Статистика браузеров AdrenalinebotCom.xlsx
Вы должны точно знать минимальные версии браузеров, на которых сайт будет отображаться и функционировать полностью корректно и предоставить эту информацию нам.
Применить подход graceful degradation для браузеров, которые неполностью поддерживают примененные вами технологии. Это тоже нужно согласовывать с нами для выбора наиболее эффективного решения для конкретного случая.
Для браузеров, на которых сайт не сможет нормально отображаться и функционировать, необходимо отображать сверху сообщение об этом с просьбой обновления.
Разумеется вы должны сами проверить работу сайта в браузерах перед сдачей работы, устранить недостатки и предоставить нам отчет о тестировании.
Наша цель - 100 баллов в Google Page Speed для мобильной и десктопной версии. Как минимум - зеленая зона для обоих случаев.
Соответственно должны быть выбраны эффективные решения для достижения наивысшего результата, как для верстки, так и для скриптов. Должны быть применены современные форматы графики, лейзилоад и графика должна быть оптимизирована (без заметных потерь в качестве). При наличии технической возможности реализации элементов средствами CSS - сделать именно через CSS, а не изображения.
Неадекватные методы мы применять не требуем, но все адекватные рекомендации Page Speed должны быть выполнены.
Все оптимизации, хоть как-то затрагивающие дизайн сайта и приводящие к несоответствию макетам, должны быть согласованы с нами.
Должен быть использован сборщик - минификация, объединение, сжатие графики, создание спрайтов и т.д.. Также при сборке автоматически всем(!) файлам, включая картинки, должны присваиваться версии(или хеш-суммы) и информация о времени кеширования. Все должно работать в "1 клик", собрал и загрузил на хостинг.
В случае не достижения максимального результата по Page Speed, необходимо провести анализ проблем и поиск их решения, обсудить с нами.
Верстка должна точно соответствовать макетам, pixel perfect. При наложении поверх картинки макета должно быть полное соответствие.
Исключением может быть несоответствие шрифтов из-за особенности рендеринга браузером.
При невозможности реализации полного соответствия в каких-то случаях, необходимо согласовать это с нами.
HTML разметка должна удовлетворять всем базовым правилам SEO. Нами будет осуществляться как минимум проверка W3C валидатором.
Наш сайт активно продвигается в поисковых системах, поэтому для нас это очень важно.
Разметка должна подстраиваться под контент. Разметка, стили и настройки скриптов должны быть легко изменяемыми людьми с минимальными знаниями. Большинство динамически изменяемых элементов сайта, которые работают так за счет JS скриптов - должны иметь data-атрибуты, чтобы их поведением можно было управлять из HTML'a, без необходимости лезть в JS код
Сайт делается не на один год, мы хотим иметь возможность без проблем изменить текст, порядок блоков, цвета, тип или длительность анимации (css или js) и прочее.
Для большинства элементов должна быть возможность легко применить библиотеки анимаций: animate.css, magic.css, wow.js, ani.js и т.п.
Должен быть использован препроцессор CSS.
Для большей гибкости сайта и быстрого его изменения мы бы хотели иметь набор готовых стилей и скриптов на большинство случаев жизни, которые возможно не нужны для реализации текущих макетов, но могут понадобиться в будущем.
Для этого, пожалуй, предпочтительно будет использование CSS и JS библиотек c набором популярных решений.
Точно нужны решения для различных: модальных окон, уведомлений, анимаций текста и кнопок, анимаций при прокрутке страницы
Этот момент лучше согласовать с нами для достижения оптимального баланса между удобством и производительностью / оптимизацией.
Необходимо добавить основные мета теги Open Graph + <meta name="theme-color" content="#000000">
Главное меню и кнопки на сайте в основном перемещают пользователя к различным блокам в пределах этой же страницы. Переходы должны быть плавными.
У каждой секции должна быть ссылка с якорем, которую можно было бы отправить другому человеку и после перехода по ней открывался бы сайт и страница плавно прокручивалась до этой секции.
Должны открываться поверх друг друга, если в модальном окне есть ссылка, вызывающая другое модальное окно.
У каждого модального окна должна быть ссылка, которую можно было бы отправить другому человеку и после перехода по ней открывался бы сайт, страница прокручивалась до нужного блока, выбиралась нужная вкладка (опционально) и появлялось модальное окно. ID блока и вкладки и модального окна указывается в ссылке в якоре.
Должна быть возможность добавить в модальном окне ссылку-якорь, по клику на которую закрывалось бы модальное окно и выполнялся переход.
У каждой вкладки/фильтра должна быть ссылка, которую можно было бы отправить другому человеку и после перехода по ней открывался бы сайт, прокручивалась страница до нужного блока и выбиралась нужная вкладка/фильтр. Опять же, ID блока и вкладки/фильтра будут храниться непосредственно в якоре ссылки.
Форма содержит в себе - очень важный скрипт для всего сайта - интеграция сервиса Digiseller в модальном окне с использованием API их сервиса.
Ссылка на оф доку на всякий случай: https://my.digiseller.com/inside/api.asp - но вам она вероятно даже не понадобится.
Прежде всего, на сайте в данный момент представлено всего 5 товаров, но их кол-во может увеличиться в будущем. Для покупки каждого товара должно открываться модальное окно с его описанием + формой оплаты. При этом текст в модальных окнах должен индексироваться, поэтому подгрузка его за счет запроса к бекенду по клику - нам не очень подходит. Но в то же мы предполагаем, что делать 5 почти идентичных кусков HTML'a - вероятно тоже не очень грамотное решение. Возможно мы заблуждаемся - хотели бы услышать Ваши мысли по этому поводу.
Увидеть формы вживую можно на странице: https://adrenalinebot.com/buy-license-keys/, на их примерно можно как минимум увидеть все отправляемые запросы, а так же тот JS код, который есть в оригинальной либе, предоставляемой сервисом (но он, конечно, сильно захламлен). В реальности нам требуется совершить всего лишь 2 запроса и 1 submit формы.
Как работает форма оплаты и API, пошаговая инструкция:
Изначально в модальном окне уже будет отрисована форма оплаты целиком, со всеми необходимыми элементами, но она будет не заполнена. В форме каким-либо образом должны быть заполнены некоторые данные в виде хидден атрибутов: product_id, lang, currency
Для первоначального заполнения формы необходимо отправить запрос вида (запрос должен отправляться при открытии модального окна):
https://adrenalinebot.com/digiseller/product-info/?product_id=2528963¤cy=EUR&lang=ru-RU (параметры как раз будут браться из data-атрибутов формы)
(Это созданная нами для удобства прокси-прослойка, оригинальный метод: https://my.digiseller.com/inside/api_catgoods.asp#product_info )
В ответ мы получаем:
is_available - если = 0, то показываем на форме оверлей "У нас все ракупили", иначе показываем оверлей "подтвердите, что все прочитали"payment_methods - словарь, на базе которого должны будут работать select'ы с выбором способа платежа и доступными для него валютамиprices - словарь, в котором указаны цены за 1 единицу товара для выбранного метода оплаты \ валютыПри каждом изменении способа оплаты \ валюты \ кол-ва товара нужно отсылать запрос:
https://adrenalinebot.com/digiseller/product-price/?product_id=2528963¤cy=WME&amount=15 , где currency - это значение из prices
В ответ мы получаем:
cnt - указанное кол-во товараamount - сумма, которую нужно отобразить в форме сверхуcurr - валюта, которую нужно отобразить в форме сверхуerr - код ошибки, если 0, то все ок, если 2 - то нужно показать тултип с уведомлением о том, что "столько товара нет в наличии". Если код ошибки = 0, но и amount = 0, значит нужно показать тултип с уведомлением "для данного метода оплаты превышена максимальная сумма единоразового платежа". Более детально визуальная часть изображена на макете, слова здесь - чисто для удобства понимания.Хотелось бы так же отметить, что текст уведомлений будет мультиязычным - поэтому нужно не захардкодить его в JS код, а вынести возможно в какой-нибудь HTML тэг с нужным ID, где мы могли бы уже им управлять как захотим, а из JSa бы только дергалась "ручка" для его отображения.
При нажатии кнопки "купить" должен просто происходить сабмит формы с методом POST в новом окне:
<form action="<https://www.oplata.info/asp2/pay.asp>" class="form" method="post" target="_blank">
<input type="hidden" name="id_d" value="{{ product_id }}" />
<input type="hidden" name="cart_uid" value="" />
<input type="hidden" name="typecurr" value="{{ product_id }}" />
<input type="hidden" name="email" value="" />
<input type="hidden" name="lang" value="ru-RU" />
<input type="hidden" name="failpage" value="<https://adrenalinebot.com/>" />
<input type="hidden" name="agent" value="" />
<input type="hidden" name="promocode" value="" />
<input type="number" name="cnt" value="2" />
<button type="submit" class="btn btn-primary mr-1 mb-1">Submit</button>
</form>
Также на мобильных устройствах в форме Select'ы должны быть нативными в плане выбора элементов.
Пример на iOS
Пример на Android
Для отображения реального числа онлайна на нашем Discord сервере (в футере и модальном окне "связаться с нами") необходимо отправлять GET AJAX запрос на https://adrenalinebot.com/discord-online/ - в ответ будет приходить число, которое и необходимо вставить в соответствующие HTML теги. В случае отсутствия ответа от сервера - отображать дефолтное значение = 1000. Этот запрос в идеале отправлять раз в 10 секунд, и перерисовывать это число.
Некоторые элементы не представлены в макете или не используются на страницах сайтах в данный момент, но они должны быть сверстаны в стиле сайта: