Кейсы
July 22, 2021

Разработка личного кабинета ученика для онлайн-школы Russmo

Это был очень большой проект, в котором были закастомизированы практически все страницы, до которых может добраться пользователь на платформе GetCourse.

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

Всё, что вы видите, это не картинки, не кастомные HTML-блоки, а именно стандартные блоки геткурса, которые сильно застилизованы.

Страница входа

Встречают по одёжке ;)

На странице входа мне больше всего нравится динамичный плейсхолдер, который съезжает наверх, когда поле попадает в фокус. Кстати, видеоурок о том, как сделать такой плейсхолдер я записывал для Клуба Магии.

Главная страница тренингов

Анимация карточек тренингов на главной странице

На этой странице, карточки тренингов есть двух видов: доступные и недоступные, но тут их не видно :)

Календарик отсчитывает дни до ЕГЭ с помощью небольшого скрипта :)

Страница отдельного тренинга

Анимация элементов на странице тренинга

Тут уже глаза разбегаются, поэтому давайте разберём некоторые моменты :)

Вывод длительности урока в карточку урока

В рамках геткурса это выглядит как что-то сложное и почти не реальное, это так и есть)) Поэтому тут никакой автоматизации нет) Реализовано это очень просто. Нужное значение длительности прописывается через CSS для каждой карточки урока, только и всего.

Диаграммы пройденных уроков в карточках тренингов.

Тут дизайнер предложил, на мой взгляд, очень смелое решение. Сама диаграмма большинству из вас уже хорошо знакома. Это один из первых скриптов, которые я выложил в магазин GetHelpers (он всё ещё там), но, конечно, её пришлось немного переделать в соответствии с дизайном.

Блоки диаграммы "вливаются" в карточки уроков с помощью несложного скрипта. А вот, получить значение пройденных уроков для этих диаграмм было не так уж просто)) Сначала, я планировал это делать через шкалы достижений (как обычно), но, когда увидел, сколько в этой школе тренингов, то стало ясно, что это не вариант 😅 В итоге был написан скрипт, который проходит по каждому тренингу и смотрит, сколько в нём пройденных уроков. Кстати, как работает этот скрипт, я объяснял в одном из последних уроков в Клубе Магии.

Расписание уроков

Полностью переделанный блок расписания уроков, стоит отдельного внимания) Да-да, это тот самый блок "Актуальные события", его теперь совсем не узнать 😊 Только посмотрите, каким он был раньше, ноу комментс))

Жизни пользователя

В этой школе мы реализовали прикольную идею, которую я давно хотел сделать: у пользователя есть жизни, как в игре, и если он совершил ошибку в задании, то тратится одна жизнь. Значение жизней скрипт получает из доп полей пользователя, куда их сначала заносят кураторы. Видеоурок об этом уже тоже есть в Клубе Магии 😊

Стикеры

Это как раз та картинка с человеком, у которого слетает фуражка. Эти картинки меняются и зависят от того, сколько баллов набрал пользователь. Т.е. по одной из шкал достижений выдаётся стикер вместо стандартного бейджа. Такой видеоурок я тоже записал, и вы уже сами понимаете, где его искать :)

Календарик с датой

Дата окончания подписки в виде календарика сделана на основе "блока продления купленного продукта". Как говорится, "просто, но со вкусом" :)

Страница профиля

На тот момент, когда я работал над этим проектом, это была единственная полностью кастомизированная страница профиля в GetCourse. И поэтому это было для меня целое достижение :)

Дело в том, что в геткурсе эту страницу чрезвычайно сложно стилизовать. И даже сейчас этим практически никто не занимается, насколько я знаю :)

Скриншот страницы профиля

P.S. Страницы уроков тоже очень красиво застилизованы, но, к сожалению, не могу показывать контент уроков, сами понимаете :)