Разработка личного кабинета ученика для онлайн-школы Russmo
Это был очень большой проект, в котором были закастомизированы практически все страницы, до которых может добраться пользователь на платформе GetCourse.
В этом проекте используется много анимации, поэтому я записал несколько видео, чтобы показать, как работают некоторые страницы.
Всё, что вы видите, это не картинки, не кастомные HTML-блоки, а именно стандартные блоки геткурса, которые сильно застилизованы.
Страница входа
На странице входа мне больше всего нравится динамичный плейсхолдер, который съезжает наверх, когда поле попадает в фокус. Кстати, видеоурок о том, как сделать такой плейсхолдер я записывал для Клуба Магии.
Главная страница тренингов
На этой странице, карточки тренингов есть двух видов: доступные и недоступные, но тут их не видно :)
Календарик отсчитывает дни до ЕГЭ с помощью небольшого скрипта :)
Страница отдельного тренинга
Тут уже глаза разбегаются, поэтому давайте разберём некоторые моменты :)
Вывод длительности урока в карточку урока
В рамках геткурса это выглядит как что-то сложное и почти не реальное, это так и есть)) Поэтому тут никакой автоматизации нет) Реализовано это очень просто. Нужное значение длительности прописывается через CSS для каждой карточки урока, только и всего.
Диаграммы пройденных уроков в карточках тренингов.
Тут дизайнер предложил, на мой взгляд, очень смелое решение. Сама диаграмма большинству из вас уже хорошо знакома. Это один из первых скриптов, которые я выложил в магазин GetHelpers (он всё ещё там), но, конечно, её пришлось немного переделать в соответствии с дизайном.
Блоки диаграммы "вливаются" в карточки уроков с помощью несложного скрипта. А вот, получить значение пройденных уроков для этих диаграмм было не так уж просто)) Сначала, я планировал это делать через шкалы достижений (как обычно), но, когда увидел, сколько в этой школе тренингов, то стало ясно, что это не вариант 😅 В итоге был написан скрипт, который проходит по каждому тренингу и смотрит, сколько в нём пройденных уроков. Кстати, как работает этот скрипт, я объяснял в одном из последних уроков в Клубе Магии.
Полностью переделанный блок расписания уроков, стоит отдельного внимания) Да-да, это тот самый блок "Актуальные события", его теперь совсем не узнать 😊 Только посмотрите, каким он был раньше, ноу комментс))
В этой школе мы реализовали прикольную идею, которую я давно хотел сделать: у пользователя есть жизни, как в игре, и если он совершил ошибку в задании, то тратится одна жизнь. Значение жизней скрипт получает из доп полей пользователя, куда их сначала заносят кураторы. Видеоурок об этом уже тоже есть в Клубе Магии 😊
Это как раз та картинка с человеком, у которого слетает фуражка. Эти картинки меняются и зависят от того, сколько баллов набрал пользователь. Т.е. по одной из шкал достижений выдаётся стикер вместо стандартного бейджа. Такой видеоурок я тоже записал, и вы уже сами понимаете, где его искать :)
Дата окончания подписки в виде календарика сделана на основе "блока продления купленного продукта". Как говорится, "просто, но со вкусом" :)
Страница профиля
На тот момент, когда я работал над этим проектом, это была единственная полностью кастомизированная страница профиля в GetCourse. И поэтому это было для меня целое достижение :)
Дело в том, что в геткурсе эту страницу чрезвычайно сложно стилизовать. И даже сейчас этим практически никто не занимается, насколько я знаю :)
P.S. Страницы уроков тоже очень красиво застилизованы, но, к сожалению, не могу показывать контент уроков, сами понимаете :)