Пожалуйста, ознакомьтесь внимательно с тех.заданием. Данное задание несет в себе исключительно инфомативный характер для исполнителя для оценки ресурсов, сроков и бюджета. Любые аргументированные предложения или критика приветствуются. Эту задачу я публикую второй раз, поскольку при первой публикации не был готов дизайн для полной оценки проекта.
Качественно выполненная работа несет в себе много перспективных заказов для исполнителя, поэтому важно чтобы вы имели релевантный опыт и могли выполнить работу быстро, ответственно и имели возможность поддержки проекта в дальнейшем.
Ожидаю ответы в следующем порядке:
Ваш опыт
Кейсы
Приблизительные сроки
Цена
В ответ обязательно добавьте что ознакомились с задачей, чтобы я понимал что вы хотя-бы дочитали до этого пункта)
Описание проекта: Браузерная игра rock-paper-scissors на основе блокчейна.
Задача: Верстка мини сайта с использованием HTML5/CSS3/Jquery.
Страницы: 3 (пк+моб) - главная, рефералка, faq.
Доступы к фигме: https://www.figma.com/file/jqqMijb48BpWbxuupLxfYi/FRONT-TZ?type=design&node-id=0%3A1&mode=design&t=QzGTUBdkeRgvdrfN-1
Доступы ко всем картинкам и необходимым файлам выдам уже по запросу.
Платформы: Windows, MacOs.
Браузеры:
Safari
Google Chrome
Mozilla Firefox
Opera
Браузеры мобильных устройств iOS 7 и выше
Браузеры мобильных устройств Android 5 и выше, за исключением UC Browser
При верстке учитываются особенности браузеров, их ограничения внешнего вида и поведения объектов.
Стандарты: HTML5/CSS3/Jquery
Соответствие дизайну: верстка может не выполняется методом Pixel Perfect и возможны отличия с относительной погрешностью до 5% (размеры элементов, рендеринг шрифтов и межстрочных/межбуквенных расстояний, а также внутренних и внешних отступов).
Общее: Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически. Понятный, структурный код. На сайт будут добавлены скрипты трекеров типа: GTM, HotJar, Pixels и тд.
Перед стартом:
Проверить доступ к фигме
Проверить доступ к шрифтам (выдам по запросу если их нету в гугле)
Дать фидбек по доработке, предложениям и улучшению тз и лендоса.
Заранее проверить макеты на предмет возможности экспорта векторных файлов, режимов наложения и технический возможности реализации задумок дизайнера.
Проверить скрытые слои если таковые присутствуют
В процессе работы проверять стили текстов в плане line-height, letter-spacing и др. Часто это упускается из виду.
Проверить сетку макета. Иногда сетки имеют gutter space в 20px или 50px, а не стандартные 30px. Это поможет избежать необходимости в костылях в дальнейшем.
Гайд для дизайнеров по верстке
Ширина сайта: статична, сайт выровнен по центру. При 1024px должна отсутствовать горизонтальная прокрутка.
Подвал прижат к низу
Шапка статична
Расширяемость: блоки с изменяющимся содержимым подстраиваются в соответствии с дизайном при уменьшении/увеличении контента.
Для текстовых блоков, заполняемых с помощью визуальных редакторов, должны быть прописаны стили оформления c тегами.
Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70 -150% в браузерах Chrome, Safari должны выглядеть так же как и при 100%. Допускаются небольшие погрешности, которые возникают из-за неправильных округлений координат браузеров.
HTML код:
Кодировка – utf-8
Структурный, комментируемый код (обозначается начало/конец крупных блоков).
На кнопках висят идентификаторы для дальнейшего использования тригеров на эти кнопки.
Имена классов и идентификаторов – на твое усмотрение.
Изображения:
Иконки и маленькие изображения:
Первый приоритет - использование svg спрайтов.
Второй приоритет - png спрайты через элемент <i>, <span>
Третий приоритет - html теги img
Все иконки должны быть оптимизированы для retina экранов
Шрифты: шрифты, доступные через сервис google fonts должны подключаться с CDN https://fonts.google.com/
Файловая организация: HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
Адаптивность:
Содержимое страницы подстраивается под фактические размеры окна браузера, без рывков по ширине глобальных контейнеров на ключевых точках
При размерах более 320px не должно возникать горизонтальной прокрутки страницы.
Использование desktop first методов в подходе
За основные разрешения берем - 1920(hd+), 1440 (hd), 1200px (wide), 992 px (desktop), 568 px(mobile), 414 px(mobile-s).
Дополнительно:
При включенном adblock должен быть доступен весь контент на сайте.
В финальной версии сайта - логотип будет другой, сейчас стоит заглушка
Добавить мета-теги
Добавить favicon
Проверить чтобы при share ссылки нашего сайта - был предпросмотр картинки (лого) и текста с тегов.
Задачи:
Общие рекомендации для всех страниц:
Main page:
- Анимация адреса кошелька в таблице - легкое затемнение при наведении. Ссылка адреса ведет на etherscan транзакцию (предоставлю). (пк+моб)
- Анимация монеток вокруг человечков - легкий эффект парения в воздухе как на этом примере парят сундучки. В разнобой. (пк+моб)
- Анимация появления второго блока с текстом, таблицей и кнопкой - по примеру как тут . Таблица слева, текст и кнопка справа (пк). Анимация на моб версии отсутствует - применяется обычное появление.
- Анимация появления третьего блока текстом и картой NFT аналогично второму. Анимация на моб версии отсутствует - применяется обычное появление.
- Анимация текста View More в таблице - легкое подсвечивание при наведении. Ссылка ведет на etherscan. На моб версии эта кнопка отсутствует.
- Таблица реализуется методом ajax. Выдам файл для подгрузки информации, ссылок и тд.
faq page:
referral page:
Анимация молнии между пальцами рук. Можно реализовать легкую анимацию светом. Такая-же анимация паращих монеток как на главной. (пк+моб
Реализовать реферальную программу с функцией валидацией адреса. Пример:
str.match(/(\b0x[a-f0-9]{40}\b)/g).
Когда юзер вставляет адрес в поле для адреса, то автоматически генерируется и выводится уникальная ссылка (параметры скину) в поле. Юзер может кликнуть на кнопку копировать чтобы ее скопировать либо просто выделить.
