Сделать верстку для сайта видеоконференции по готовому дизайну сделанном в figma.
Нужно сверстать несколько страниц:
- таймер обратного отсчета до начала сеанса
- диалоговое окно для принятия решения на участие в сеансе
- диалоговое окно-предупреждение о нарушении правил
группа 1:
- страница с примером участия в сеансе 2-х участников
- страница с примером участия в сеансе 2-х участников, видимые детали сеанса
- страница с примером участия в сеансе 2-х участников, фрейм одного из которых увеличен, другие уменьшены
группа 2:
- страница с примером участие в сеансе 4-х участников
- страница с примером участия в сеансе 4-х участников, видимые детали сеанса
- страница с примером участия в сеансе 4-х участников, фрейм одного из которых увеличен, другие уменьшены
группа 3:
- страница с примером участия в сеансе 12-ти участников
- страница с примером участия в сеансе 12-х участников, видимые детали сеанса
- страница с примером участия в сеансе 12-х участников, фрейм одного из которых увеличен, другие уменьшены
Страницы в группах должны иметь одинаковое иерархию элементов DOM (одинаковую верстку), но разные стили.
Также это может быть одна страница которая будет реагировать на действия пользователя и менять размещения компонентов с помощью CSS стилей и / или JS.
Если этого достичь невозможно то страницы в группах должны обладать как можно более близкую иерархию элементов DOM чтобы можно было легче имплементировать смену состояний.
Приложение будет создаваться с помощью React. Необходимо чтобы верстка была представлена как простой проект React с разбивкой на составляющие.
Вариант верстки готовой для разделения на компоненты (адаптирована под фреймворк) обсуждается.
Верстка должна быть адаптивной и отображаться на мобильных устройствах. Дизайн мобильной версии тоже есть.