Задача: Доработать фронтенд для проекта, написан на Angular 11 + Bootstrap 4.

О чем проект: Сервис для создания и проведения розыгрышей в соц-сети. Дизайн минималистичный, интерфейс простой, интуитивно понятный.

Что есть сейчас: 2 страницы, с разной степенью готовности.

• Структура

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

Предлагаю разделить работу на два этапа.

Этап первый

Нужно полностью доделать эти 2 страницы.

Страница View

Информационная страница, на ней отображается основная информация о созданном конкурсе (пост из соц-сети, условия участия, призы и текущие участники). Данные приходят с сервера и рисуются, готово ~60%.

• Как выглядит страница View
• Основные задачи:
  1. Переделать поиск. Сейчас он работает по нажатию на кнопку поиска, нужно чтобы работал моментально после ввода символов. Добавить скроллбар, если участников больше 10.
  2. Немного подправить верстку для мобилок.
  3. Изменить иконки в блоке "Conditions"
  4. Добавить отображения для других состояний конкурса. На картинке отображен активный конкурс (state='active').
     • Если state='finished', то центральный блок ("Will be drawn...") заменяем "The contest was played on {{ended_at}} participants count: {{participants_count}} ". Блок "Participants" заменяется на блок "Winners". Нужно сверстать,
       • шаблон Winners:
     • Если state='inactive', то блок "Giveaway from" заменяется на форму с одним полем и кнопкой "Check". Над формой текст: Your giveaway has been created but not yet activated. You must send a comment with the text "Avada Kedavra" under the post with the giveaway. You can also paste this text directly into the post when you create it. If within a few minutes you do not receive confirmation from our bot, please insert the link to the post where you wrote "Avada Kedavra". Текст "Avada Kedavra" выделяется легким бэкграундом, и справа добавляется иконка "Copy", при нажатии этот текст копируется в буффер. После этого сообщения идет поле для ввода, туда вводится ссылка, при нажатии кнопки "Check" она заменяется на loader, идет запрос на сервер, в ответе может быть ошибка (рисуем под формой и активируем кнопку Check), если нет то просто перезагружаем страницу.

Страница Create

Страница для создания нового розыгрыша. Обычная форма с простейшей валидацией, после заполнения отправляется на сервер, готово ~80%.

• Как выглядит страница Create
• Основные задачи:
  1. Добавить ограничение на выбор максимальной даты. Не более 30 дней с текущего момента.
  2. В блоке "What should the participants do" рисуется неправильные данные, нужно поменять. В новых данных (Like/Reclout/Comment/Follow/Invest) должна быть обязательно отмечена хотя бы одна опция Like или Comment.
  3. Доработать валидацию призов.
     • Максимальное число призов не более 3 (кнопка Add prize должна пропасть при добавления третьего)
     • Призы не должны повторяться, быть от 2 до 20 символов. Добавить иконку удаления напротив первого приза (появляется если призов больше одного).
     • Валидировать ручной ввод кол-ва конкретного приза. Должно быть число от 1 до 10. При вводе числа вручную, неподходящего под эти параметры, выдается соответствуеющее предупреждение.