Прототип intro с использованием React Typescript Redux

Дата публикации: 11.05.2022 19:46:08
Нужен минималистичный пример для оценки применимости технологии к моей задаче. Нужны технологии: React, Typescript, Redux, intro.js (или аналог), webpack (или react-scripts). 1. Одна страница, на ней расположен пустой <canvas> на 100% размера, и справа вверху одна кнопка "Кнопка" поверх canvas. 2. Запускается режим intro: 3. В центре canvas рисуется круг 100 пикселов диаметром. Рядом с кругом отображается подсказка "Это круг", при этом остальная часть окна затенена и заблокирована (т.е. "Кнопка" не нажимается). На подсказке есть кнопка "Далее", после её нажатия переходим к следующему шагу intro: 4. Подсвечивается "Кнопка" в правом верхнем углу экрана, рядом с ней подсказка "Это кнопка, нажмите на неё". Кнопки "Далее" в подсказке нет. После нажатия "Кнопки", переходит на 3й шаг Intro: 5. справа "выезжает" поле многострочного ввода. Размер примерно на 80 % по высоте и на 20% по ширине окна, остаётся в правой части. Внизу редактора текста одна кнопка "Готово". После "выезда", всё затеняется кроме редактора текста, подсказка рисуется рядом с ним и сообщает "Введите сюда любой текст и нажмите "Готово". После нажатия "Готово", затенение исчезает, интро завершено. Состояние intro и вообще системы через Redux. Реализацию intro можно самописанную, можно intro.js или другую на ваш выбор. Результат должен быть представлен в виде .tar.gz архива, который я распакую, запущу yarn && yarn dev (или аналогичные команды типа npm) и получу браузер с открытым intro.
Источник: www.fl.ru
Число просмотров: 2

Еще проекты:

Фотошоп товаров для веб-сайта

  Задачи:  Ищу человека на длительное сотрудничество. Я делаю предметы интерьера ручной работы и ассортимент постоянно обновляется, значит работу буду давать вам переодически в течении всего года. Для меня важны качество и стоимость ваших услуг, так как бизнес новый, бюджеты очень маленькие. Из первого (товар на белом фоне) изображения получать второе (перенести товар в интерьеры).  Поменять фон и подобные задачи

100page translation from English into Ukrainian and Russian

We're currently looking for experienced translators that can translate English into Russian and Ukraine please only native individuals

18+ Инфографика для презервативов, БАДов, смазок и т.д., с целью продажи на маркетплейсах

Необходимо составить инфографику для карточек товаров, которые будут представлены на маркетплейсах Wildberries и Ozon. Вид товара: контрацептивы, лубриканты, БАДы (Omega,...

Copy writing

Looking for an experienced copy writer to write copy of landing page for an online course

Озвучка носителем на немецком (Бюджет: 3000 руб)

Добрый день! Нужно озвучить видео ролик с синхронизацией на немецкий язык. Важно,чтобы это был качественный перевод носителем (без акцента и тп). Текст прикрепляю , на выходе нужна аудио дорожка,подходящая под хронометраж. ВАЖНО присылайте пожалуйста сразу демки озвучки . Сроки 5-7 дней. Буду рад сотрудничеству !)