Разработка дизайна страницы группы

Задание на разработку дизайна страницы группы.

Назначение страницы - управление учебной группой школы.

Функционал страницы:

• Привязка учителя к группе

• Привязка курса к группе

• Добавление, удаление студентов из группы

• Старт курса группы

• Завершение курса группы

Предполагаемые элементы управления на странице.

• Выбор учителя - выпадающий список

• Выбор курса - выпадающий список

• Карточка-курса

• Управление студентами группы - два смежных списка с полями поиск

• Показывать неактивных студентов - чек-бокс

• Показывать только студентов без группы - чек-бокс

• Кнопка Start

• Кнопка Stop

• Кнопка Finish

• Кнопка Save

Предполагаемый алгоритм работы с страницей. 

Прежде всего пользователь должен выбрать курс, все элементы кроме выбора курса  -

не активны. После выбора курса из списка курсов, кнопка Save становится активной. После нажатия на кнопку Save ->элемен выбора курсов меняется на элемент -

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

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

Кнопка Save сохраняет состояние группы:

Статус группы:

-Opened

-Inprocess

-Finished

Меняется кнопками Start, Stop и Finish.

После нажатия на кнопку Start: группа переходит в состояние “Inprocess” кнопка старт меняется на кнопку Stop помимо этого появляется кнопку Finish.

После нажатия на кнопку Stop группа переходит в состояние - Opened, Кнопка Stop меняется на Start, кнопка Finish пропадает.

После нажатия на кнопку Finish группа переходит в состояние “Finished” и Все элементы становятся неактивными, то есть страница доступна только для просмотра.

Дизайн страницы должен соответствовать общему стилю шаблона сайте. 

(Кнопки, списки, выпадающие списки - это все стандартные элемента материал дизайна)

Дизайн должен быть адаптивным поэтому продумать дизайн для мобильных устройств.

Нужно учесть расположение кнопок Save, Stop, Start и Finish, чтобы интуитивно было понятно за что они отвечают. Возможно, будет удобней использовать другие элементы нежели кнопки.

Готовые экраны без дизайна:

группа в состоянии start.

Группа в состоянии finished:

элементы на странице и приблизительное расположение.

p.s. Верстка не нужна.