Сверстать готовый дизайн и установить на хостинг.

Можно также ознакомиться с техническим заданием по ссылке.

Хостинг: такой

Ссылка на дизайн

Название сайта:

• Masikov.com

Тесты сайта

• Google Speed для web 98-100

• Google Speed для mobile 98-100

Сайт адаптивный под все виды разрешений.

Должен быть быстрым, надежным.

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

Main

На данный момент присутствует одна доступная категория под названием математика и два текста с названием (скоро не кликабельные)

При наведении на математика появляется pointer cursor, данная категория открывает главную страницу.

Total time game:

Отображается общее игровое время.

При обновлении страницы время аннулируется.

При заходе на сайт время автоматически не запускается 

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

Таймер можно поставить на паузу.

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

Подсказка:

При наведении текст меняет цвет на #161515 и появляется cursor pointer.

При нажатии на подсказку появляется pop-up окно. Окно можно закрыть по нажатию на крестик так и по нажатию по пустому месту.

В данном окне отображается подсказка как можно правильно посчитать пример, а ниже указан ответ на предоставленный пример, если нет примера, то отображается текст как считать пример.

Answers:

В данном блоке отображаются правильные и неправильные ответы.

При обновлении страницы счет обновляется.

Если не выбран ни один режим по нажатию начать появляется текст, под текстом начать Выберите в настройках любой режим слово настройка кликабельно и открывает страницу с настройками. Текст исчезает через 5 секунд.

Main - play

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

Подсказка:

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

Если выбрано две категории для счета: сложение и вычитание, то при нажатии на подсказку, в зависимости от примера если к примеру появился пример сложение, по текст о том как посчитать пример, появляется текст с описанием и решением (сложение) и также наоборот.

Числа можно вводить как на боковой панели чисел если есть, так и верхними числами.

Удаление происходит back space.

Ввод чисел происходит сразу по нажатию на числа.

Плавная смена примеров (небольшая анимация). 

Сделать ограничение по количеству ввода цифр - 8.

Если пример введен правильно -  введенный ответ становиться зеленым, появляется новый пример.

Если пример введен не правильно - ответ становиться красным после полного ввода чисел. 

Введенный неправильный пример меняется на новый.

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

Таймер:

Если в настройках установлено время, то таймер имеет плавное уменьшение времени.

По окончанию времени меняется пример на новый, данные не вносятся как правильный или не правильный пример.

Settings - addition

При нажатии на шестеренку откроется страница.

Таб бар:

Имеет категории: Сложение, вычитание, умножение, деление.

При наведении на вычитание появляется cursor pointer, а при нажатии линия плавно появляется с левой стороны. Также и со сложением. Умножение и деление недоступно. 

При открывании настроек выбрано изначально Сложение и имеет активную галочку в выборе режима. Можно включать и выключать.

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

Количество чисел:

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

Можно сочетать как со сложением так и с вычитанием и с появлением новых категорий.

Таймер:

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

Минимальное время устанавливается 10 сек.

Максимальное время можно установить до 120 сек на всем ползунке. 

Настройка времени сохраняется при нажатии на кнопку сохранить.

При нажатии на кнопку сохранить, с левой стороны от кнопки появляется надпись уведомляющее о том, что внесенные настройки сохранены (текст Сохранено! через 3 секунд текст исчезает) 

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

Settings - subtraction

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

Количество чисел:

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

Можно сочетать как со сложением так и с вычитанием.

Мобильная версия:

Main - mobile:

В мобильной версии появляется бургер меню

Play - mobile:

При нажатии на начать  появляется клавиатура для ввода чисел.

У появившейся клавиатуры по нажатию на числа меняется цвет.

Кнопка удалить имеет неизменный цвет.

Я не буду копировать тот же самый текст, что и в desktop версии, так как функционал одинаковый.