Сверстал адаптивную админ-панель центра дополнительного образования по дизайн-макету заказчика: списки групп и учеников, экзамены и курсы, форма добавления группы и чат обратной связи.
Центр дополнительного образования, который работает с учениками, группами и компаниями. Для сотрудников нужен был веб-интерфейс: учёт обучающихся, экзамены и курсы, материалы, проверка работ, отчётность и обратная связь. Заказчик подготовил дизайн-макет админ-панели — по нему нужно было адаптивно сверстать экраны, чтобы на готовой вёрстке собрать панель управления.
Сверстал админку по макету: список групп обучающихся с поиском, пятью фильтрами и пагинацией, карточки учеников с привязкой к группам и компаниям, страницы экзаменов и курсов, форму добавления группы с выбором учеников, курсов и ответственных, а также чат обратной связи с перепиской учеников, преподавателей и администратора. Тёмное боковое меню с зелёным акцентом перенесено с макета без изменений, каждая страница одинаково работает от экрана смартфона до широкого десктопа.
Скриншоты демо-версии: список групп обучающихся, карточки учеников, чат обратной связи и мобильная версия. Полные страницы открываются по ссылкам в конце кейса.
Все экраны админ-панели — по дизайн-макету заказчика. Тёмное боковое меню с зелёным акцентом, единая сетка от экрана смартфона до широкого десктопа.
Список групп с поиском, пятью фильтрами — ответственный, компания, программа обучения, курс, преподаватель — карточками групп и пагинацией по страницам.
Карточки обучающихся с фото, привязкой к группам и компаниям, ответственными в группах и фильтрами по группе, компании и направлению обучения.
Страницы экзаменов и курсов обучения — разделы учёбы, предусмотренные макетом заказчика. Оформлены в едином стиле с остальными экранами панели.
Страница создания новой группы с выбором учеников, курсов и ответственных — экраны выбора открываются в модальных окнах, как в макете.
Переписка по обращению: сообщения ученика и преподавателя, ответ администратора с датами отправки и поле для ответа на вопрос.
Группы, ученики, экзамены, курсы, добавление группы и чат обратной связи — все открываются онлайн по ссылкам ниже.
Каждая страница свёрстана и для десктопа, и для смартфона — мобильная версия списка групп показана в скриншотах кейса.
Тёмное боковое меню с зелёным акцентом, карточки групп и учеников — вёрстка повторяет дизайн-макет заказчика и готова к интеграции с CMS.
В демо-версии открыты 6 типовых страниц — ссылки ниже.
После передачи проекта заказчику мы не контролируем сайт — он может быть изменён или вовсе отключён. Поэтому ниже собраны примеры типовых страниц на нашем хостинге: вёрстка в том виде, в каком она сдавалась заказчику.
Демо-версия размещена на demo.avoweb.net — страницы открываются без регистрации.
Пришлите дизайн-макет сайта или админки и расскажите про проект — сверстаю все экраны адаптивно, от первого до последнего, готовые к интеграции с CMS. Коммерческое предложение — в течение 24 часов в рабочее время.
Получить предложениеКонсультация бесплатна и ни к чему не обязывает