Описание проекта: Браузерная игра rock-paper-scissors на основе блокчейна.
Страницы: главная, рефералка, 3 политики, faq.
Дизайн еще в работе, но со структурой можно уже ознакомиться: https://www.figma.com/file/CdxJZAFotyjiZGh1mkgegZ/RPS?type=design&node-id=0%3A1&mode=design&t=Sh6pBVDIbeNEWn8Q-1
Нюансы:
1) Таблица. Данные для таблицы можно ajax запросом сделать на jquery без фреймворка.
2) Рефералка. Юзер вставляет адрес кошелька, автоматически происходит проверка валидности кошелька и он получает уникальную реферальную ссылку. Можно сделать регуляркой str.match(/(\b0x[a-f0-9]{40}\b)/g)
Браузеры:
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 должен быть доступен весь контент на сайте.
В финальной версии сайта - логотип будет другой, сейчас стоит заглушка
Задачи:
index
- Можно использовать Lazy Load
- Анимация ссылок в хедере, пример - https://infinizai.webflow.io/
- Анимация кнопок Play, Play now, пример - https://axieinfinity.com/
- Анимация иконок соц сетей в футере - https://orivium.io/contact (кликабельны)
- Подгрузка контента - плавное появление
- Анимация значка “copy address” в таблице - легкое затемнение при наведении (кликабельно) (функция - по клику копирует адрес кошелька)
- Анимация адреса кошелька в таблице - легкое затемнение при наведении (кликабельно)
- Анимация монеток вокруг человечков - легкий эффект парения в воздухе как на этом примере парят сундучки. В разнобой.
- Анимация появления второго блока с текстом, таблицей и кнопкой - по примеру как тут . Таблица слева, текст и кнопка справа.
- Анимация появления третьего блока текстом и картой NFT аналогично второму.
- Анимация текста View More в таблице - легкое подсвечивание при наведении (кликабельно)