Требуется сверстать интерфейс пользователя (HTML + CSS) и разработать SPA приложение на любом фреймворке (Vue, React, Angular)
Готовый интерфейс будет отображаться внутри игры (GTA V) через Chromium Embedded Framework (Google Chrome).
Игра взаимодействует с браузером через консоль разработчика, реактивно изменяя параметры интерфейса.

Проект в Figma – ссылку предоставим при согласовании работы. (Скриншоты из фигмы)

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


Подробное описание:
Интерфейс (далее – HUD) состоит из нескольких частей:
- Постоянно отображаемые данные (слайд 1)
- – Содержит в себе: деньги наличными, деньги на банковском счету и текущую дату и время
- – Средства игрока можно изменять реактивно через консоль браузера (например, hud.money = 1500)
- – Дата и время устанавливаются через консоль, далее таймером происходит обновление этого времени относительно исходного значения
- Транспорт (слайд 2)
- – Содержит в себе: Состояние дверей автомобиля, кол-во литров топлива, текущая скорость
- – Состояние дверей автомобиля передается в виде Boolean значения, если значение false, то текст становится красным (слайд 4)
- – Когда параметр "литры" становится 0, он меняет свой цвет на красный (слайд 4)
- Предмет в руках (слайд 3)
- – Содержит в себе: Название предмета и кол-во патрон в магазине (если таковые были установлены)
- – Кол-во патрон будет актуально только для оружий, если предмет таковым не является, то патроны скрываются, оставляя только название
- – Патроны скрыты при передаче значения соответствующего значения (например, hud.ammoShow = false)
- – Если на патроны установлено значение 0/*, то текст изменяется в соответствии со слайдом 4

Каждую часть HUD'a можно скрыть и показать отдельно, но их порядок расположения относительно друг-друга должен быть идентичным Слайду 3

Требуется верстка элемента с абсолютной, центрированной позицией на экране.
Элемент будет использоваться в игровом проекте. В качестве браузера – Chromium Embedded Framework (Google Chrome)
Добавлять фон не обязательно, он будет заменен на игровой процесс

К верстке нужно добавить логику на любом javascript фреймворке (Jquery, Vue, React)
- Таймер, на скриншоте обозначен как – "10s". Каждую секунду идет отсчет времени и обновление текста "10s" на оставшееся время. После истечения времени элемент сворачивается.
- Кнопка "Принять" и "Отклонить". Закрывает окно и выводит в консоль браузера сообщение true|false
- Функция-конструктор для заполнения текста в элементе. Аргументы: Заголовок, Основной текст, Время до закрытия

Проект в Figma – ссылку предоставим при согласовании работы. (Скриншот из фигмы)

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

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