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

Что именно хотел заказчик

1. Таймер, который работает сам

• Если в уроке есть аудио-медитация — таймер должен запускаться автоматически вместе со звуком.
• Если человек медитирует в тишине — таймер можно включить вручную.

2. Два режима

• Таймер — на фиксированное время: 5, 10, 15 или 20 минут.
• Секундомер — просто считает минуты, пока пользователь медитирует.

В конце должен быть мягкий звук гонга.

3. Подсказка внутри таймера

По клику на иконку «i» — всплывающая подсказка с объяснением, как пользоваться таймером.

4. Собирание статистики

Таймер должен автоматически сохранять:

• время по каждому уроку,
• время по каждому модулю,
• общее накопленное время по всему тренингу.

Прогресс показывается:

• на карточках уроков,
• внутри аккордеона с модулями и уроками,
• в общем прогрессе по программе.

Если ученик набрал нужное время — урок помечается галочкой.

5. Аккордеон с модулями и уроками

• Модули раскрываются списком.
• Каждый урок показывает своё время + сколько студент уже сделал.
• Из списка можно перейти на урок.

6. Гибкость

Если ученик медитирует больше нормы — всё идёт в общий зачёт.

7. Много тренингов

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

8. Работа не только в браузере, но и в приложении GetCourse

Таймер и прогресс должны работать и в веб-версии GetCourse, и в приложении Chatium.

Что я сделал

Я создал полноценную систему учёта медитаций внутри GetCourse — от умного таймера до визуального прогресса по урокам, модулям и целым программам.
Фактически это мини-приложение, встроенное в обучающую платформу.

1. Разработал умный таймер

• Автоматически запускается, когда ученик включает аудиомедитацию.
• Может запускаться и вручную — как секундомер или таймер.
• Автоматом фиксирует прогресс каджые 10 сек.
• Работает и в браузере, и в приложении GetCourse.

2. Реализовал точный подсчёт времени

Таймер считает секунды, минуты и часы без пропусков — даже если:

• страницу обновили,
• интернет подвис,
• пользователь ушёл в фоновый режим.

Все данные сохраняются в базе и синхронизируются между устройствами.

3. Связал таймер с аудиомедитацией

Я реализовал глубокую интеграцию таймера с аудиоплеером внутри уроков. Теперь всё работает полностью автоматически:

• таймер автоматически стартует при включении аудиомедитации,
• при перемотках и остановках аудио таймер сам подстраивается,
• если таймер запущен без аудио, то при завершении отсчёта звучит «гонг» сигнализирующий о том, что время вышло.

3. Настроил автоматический учёт времени по урокам

Каждый урок получает собственную статистику:

• сколько минут медитации выполнено,
• сколько нужно по программе,
• достигнута ли норма (появляется галочка).

4. Построил систему прогресса по модулям

Для каждого модуля я настроил:

• суммирование времени по всем урокам,
• определение, выполнен ли модуль,
• отображение прогресса в удобном формате.

5. Добавил общий прогресс по тренингу

Ученик видит:

• общий накопленный объём медитаций,
• сколько осталось до нормы,
• прогресс по всем модулям и урокам в виде удобного аккордеона.

6. Реализовал аккордеон с модулями и уроками

В нём:

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

7. Учёл особенности трёх программ

У каждой программы разные:

• количество модулей,
• количество уроков,
• нормы по минутам.

Я сделал таймер, который корректно работает для всех трёх направлений независимо.

8. Адаптировал под реальную механику ГК

Учитывая ограничения GetCourse, я подключил логику учёта к GC API и собственной базе, оптимизировал работу таймера под фронт и бэкенд.

Итоги

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

Студенты теперь видят:

• сколько времени они уже медитировали,
• сколько осталось до норм по уроку, модулю и всей программе,
• какие уроки закрыты и где нужно добрать минуты.

Таймер работает автоматически, запускается вместе с аудио, корректно реагирует на перемотку, паузу и ручной режим, а прогресс синхронизируется между уроками, модулями и тремя независимыми тренингами. Всё это работает как в вебе GetCourse, так и в приложении Chatium.

Для школы это дало:

• рост вовлечённости в практику,
• повышение завершения уроков и модулей,
• меньше вопросов от учеников о том, как учитывать время,
• полностью автоматизированный и честный учёт медитаций без участия менеджеров.

Проект превратил сложный процесс подсчёта времени в простой и интуитивный инструмент, который работает «сам по себе» — студенту остаётся только медитировать.

Видеоотзыв заказчика

Если перед вами стоит сложная, нестандартная или «невозможная» задача — скорее всего, её можно решить. Просто напишите мне 👉 @DmitrySpace

Объём входящих большой, школа крупная, и сотрудникам приходится вручную отсекать технические сообщения от тех, что требуют ответа. Кроме того, часть однотипных обращений нужно обрабатывать автоматически, отвечая на них от имени менеджера (например, отправлять бонус).

Ситуацию усложняет то, что пользователь может отправить ключевое слово через любой канал: Telegram, email, встроенный чат — поэтому нужно уметь корректно перехватить сообщение и отправить ответ через тот же канал связи, который использовал пользователь.

Чтобы решить все эти задачи, я разработал универсальную систему автоответов, работающую поверх всех «транспортов» GetCourse.

Теперь:

• каждый входящий запрос сначала проходит через отдельного бота (фильтр);
• обращения с ключевыми словами автоматически закрываются, не попадают в поддержку и не отвлекают менеджеров;
• система гибко реагирует на разные ключевые слова: где-то просто закрывает обращение, а где-то отправляет пользователю заранее подготовленный ответ — например, выдаёт бонус.
• в некоторых случаях добавляется задержка перед автоответом, чтобы диалог выглядел более живым.

Для удобства настройки ответов была сделана страница настроек, на которой указывается, при каких ключевых слова и как именно бот будет реагировать:

Результаты

• Команда школы избавилась от лишнего «спама» в сообщениях. Технические обращения больше не отвлекают во Входящих.
• Автоматизировались повторяющиеся коммуникации.
  На часть обращений теперь автоматически отправляются заранее подготовленные ответы.
• Ускорилась работа с реальными обращениями.
  Благодяря тому, что нагрузка на менеджеров значительно снизилась.
• Благодаря грамотной автоматизации процессов школа вошла в Топ-100 крупнейших онлайн-школ на платформе GetCourse 🎉
  

Теперь можно пойти дальше и привязать нейронку, которая будет реагировать не только на ключевые слова в сообщении, но и отвечать на определённые типовые обращения, по типу «Как получить рассрочку?».

Если хотите разгрузить поддержку и убрать бессмысленную рутину из работы менеджеров, пишите — @DmitrySpace

В одной из онлайн-школ, специализирующихся на подготовке отельеров, решили пойти дальше — не просто обучать, а дать своим ученикам реальный инструмент, упрощающий их работу.

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

При первом запуске отельер заполняет детальную анкету и загружает связанные документы: сведения об отеле, финансовые показатели, правовые аспекты, текущие задачи, бизнесс-процессы и прочее:

После этого ИИ обучается именно на этих данных и начинает думать в контексте данного бизнеса. Теперь, когда отельер задаёт вопрос, нейросеть анализирует ситуацию с учётом внутренних показателей и особенностей отеля — как будто это его персональный цифровой ассистент, знакомый со всеми деталями.

Таким образом ИИ-помощник работает в контексте текущего пользователя. Вся переписка, данные отеля и файлы, которые загружены пользователем в чат, используются для формирования уникального контекста общения. Благодаря этому ИИ-помощник не просто отвечает на общие вопросы, а анализирует всю доступную информацию: показатели бизнеса, внутренние документы, историю запросов и переписку с этим конкретным пользователем.

Как и в ChatGPT, пользователь может создавать отдельные чаты под разные направления работы. Каждый чат сохраняет свой контекст: историю сообщений, документы и связанные данные.

Благодаря этому отельер может легко переключаться между задачами, не теряя логики обсуждения. В одном диалоге ИИ помогает анализировать расходы, в другом — готовит тексты для сайта, а в третьем — предлагает идеи для повышения рейтинга на OTA-площадках. Всё это происходит внутри одной системы, но с чётким разделением тем и контекстов.

Также мы добавили преднастроенные рубрики, которые ещё больше сжимают контект задачи. Например, "Написать документ", "Провести аналитику", "Написать текст" и прочее. И каждой рубрике можно выбрать предварительно заготовленные шаблоны запросов и при необходимости переписать их под себя.

Для оперативной работы мы добавили возможность пользователю добавлять собственные рубрики с кастомными промптами и стартовые сообщения для них:

Итоги

Онлайн-школа теперь не просто обучает отельеров, а даёт им реального цифрового помощника, который помогает применять знания на практике — прямо в процессе работы.

Для школы это стало мощным конкурентным преимуществом:

• повышается вовлечённость учеников,
• сокращается нагрузка на кураторов,
• растёт ценность обучения, ведь выпускники получают не только знания, но и персональный ИИ-инструмент для работы.

Если вы представляете онлайн-школу и хотите внедрить нейросеть, обученную не только на ваших данных, но и персонально на данных учеников, с учётом тематики курсов, документов и студентов — пишите в телегргам @DmitrySpace.

Мы разрабатываем такие решения «под ключ»: от проектирования логики и интерфейса до настройки ИИ-контекста и интеграции с платформами вроде GetCourse.

Обычно в таких случаях, в качестве альтернативы, я предлагаю реализовать выдачу дипломов в виде PDF-файла, который автоматически заполняется скриптом. Тогда в него можно добавлять и аватарку, и любые другие данные.

Однако, в результате обсуждения задачи выяснилось, что этот функционал нужен только для того, чтобы менеджер взял картинку "диплома" и отправил её в телегеграм-чат школы. Таким образом школа поднимает активность в чате и поздравляет тех учеников, которые поступили на обучающий курс.

Выдавать "дипломы" и генерировать PDF в этом случае слишком избыточно и неудобно. В связи с чем, я предложил реализовать другой вариант:

Страничка для менеджеров, на которой они указывают ID или Email пользователя, который есть в системе, и выбирают один из 4х дизайнов. И в результате генерируется картинка с аватарокой и именем пользователя.

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

Чтобы было ещё удобнее я добавил 2 кнопки:
— «Скачать», при нажатии на неё готовое изображение сразу скачивается на компьютер;
— «Отправить» — открывает системный диалог "Поделиться", который позволяет отправить изображение в другое приложение. Т.е. можно сразу отправить готовую картинку в нужный телеграм-чат.

Результат

Итог

Менеджерам больше не приходится делать кучу действий, создавая картинки в "фигме" вручную. Вместо этого генерация происходит автоматически. Всё что остаётся менеджеру - ввести Email пользователя, выбрать один из дизайнов и отправить картинку в телеграм-чат.

Нужно больше автоматизации?

В текущем решении мы остановились на браузерной генерации картинок, что очень упрощает создание и отправку в чат картинок, но всё ещё требует некоторых действий со стороны менеджера.

Но можно пойти ещё дальше, и сделать полную автоматизацию. Для этого потребуется серверная генерация. Т.е. можно арендовать сервер/хостинг, на котором бы картинки генерировались без участия человека.

То есть, когда пользователь преобретает курс на платформе GetCourse, на сервер передаются его данные, где сразу генерируется картинка и отправляется в телеграм-чат через телеграм-бота. И всё это полностью автоматически, без каких-либо действий со стороны человека.

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

Если вы тоже устали от рутинных действий, напишите мне в телеграм @DmitrySpace, будем автоматизировать!

1. Посещаемость на вебах мы отслеживать умеем, но админам необходимо получать сообщение в телеграм-бот, если человек пропустил более 3-х вебов подряд или больше 10 вебов за месяц. Также нужна таблица посещений, в которой было бы с первого взгляда понятно, кто пропускает занятия.

2. Нам нужно что бы админу/менеджеру приходило уведомление, что конкретный пользователь не сделал домашку (Например, нужна проверка выполнения ДЗ после окончания раздела. Ученик закончил Раздел 1 и начал Раздел 2 - проверяем сдал ли ученик итоговое ДЗ в Разделе 1)

Обычными средствами платформы GetCourse эти задачи невыполнимы, поэтому без программирования тут не обойтись.

Мониторинг посещаемости вебинаров

Узнать был ли ученик на вебинаре довольно просто, но как узнать, на каком вебинаре ученику нужно было быть?

В школе вебинары ученики проходят по группам, и у каждой группы разное расписание, которое нужно учитывать. Сотрудники школы регулярно создают расписание на неделю вперёд для всех групп, но единой базы расписания не было. Поэтому я предложил сделать доработку интерфейса платформы GetCourse, которая позволяет заносить в базу расписание определённых групп:

Отлично! Теперь мы можем проверить был ли ученик на вебинаре, который проводился для его конкретной группы и сделать наглядную табличку посещений по группам и датам вебинаров:

Далее делаем периодическую проверку посещений с уведомлениями о пропусках в админский телеграм-канал, и готово:

Уведомления о невыполнении ДЗ

Необходимо, чтобы при открытии ученику следующего обучающего Раздела в тренинге проверялось выполнение итогового ДЗ в предыдущем Разделе.

В школе уже имеются процессы для открытия Разделов, поэтому встраиваем запуск такой проверки прямо в них.

Саму проверку реализуем через Chatium API, который интегрирован в платформу GetCourse по умолчанию. Через него же отправляем сообщение о пропусках уроков в отдельный телеграм-канал для админов и делаем отдельное напоминание конктретным пользователям:

Итог

То, что раньше отнимало много времени у сотрудников школы, теперь полностью автоматизировано. Менеджеры школы больше не занимаются "вычислением прогульщиков", а тратят время и средства на более важные дела.

Теперь, благодаря своевременным уведомлениям и таблицы пропусков, сотрудникам онлайн-школы гораздо проще составлять отчётность об успеваемости учеников для компаний-партнёров.

Отзыв заказчика

Если вы тоже устали от рутинных действий, напишите мне в телеграм @DmitrySpace, будем автоматизировать!

Привет, друзья! Хочу поделиться с вами моим новым кейсом по оформлению личного кабинета в GetCourse. Обычно я не занимаюсь созданием дизайна с нуля, так как у нас есть ремейк, в котором уже проработаны многие элементы, и его намного дешевле использовать. Но недавно мне показали дизайн школы, специализирующейся на инвестициях в криптовалюты, и я просто не смог устоять.

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

Создание нового оформления заняло у меня около двух недель. Основные страницы были полностью стилизованы, и даже добавлены кастомные страницы, такие как календарь и база знаний. Это было увлекательное погружение в проект, который, несмотря на все свои сложности, дал мне массу удовольствия.

Одной из ключевых особенностей стало отсутствие стандартного левого меню — я заменил его на более компактное и функциональное решение. Меню, которое появляется при клике на аватарку пользователя, содержит только самые необходимые элементы. Также был добавлен поиск по курсам и урокам, что значительно улучшает навигацию.

На главной странице пользователи могут видеть свои доступные курсы, которые подсвечиваются желтым цветом, а недоступные курсы — фиолетовым. Все это автоматически организовано с помощью скриптов, что упрощает управление контентом. К каждому курсу добавлена информация о прогрессе его прохождения, что делает интерфейс еще более информативным.

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

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

Одной из самых интересных страниц стал календарь событий. Здесь автоматически отображаются только предстоящие события, а прошедшие удаляются. У пользователей есть возможность подписаться на события, чтобы получать уведомления о них.

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

Этот проект стал для меня настоящим вызовом и отличным опытом, и я рад, что смог реализовать его на высоком уровне. Если у вас есть вопросы или предложения, пишите в комментарии — буду рад обсудить!

Создавать чат-ботов — это настоящее творчество 🎨 А мы имеем все кисти и краски, чтобы воплотить в жизнь очередной шедевр автоматизации, который визуализировали неделями в своей голове. Ведь мы прекрасно знаем на что способны чат-боты, все мы ими пользовались, и много раз 🤔

Однако, когда дело доходит до практики, всё оказывается сложнее:

• Если кодишь бота самостоятельно, то мало того, что нужно шарить в программировании, так ещё и API телеграма нужно изучить вдоль и поперёк. Требуется учитывать кучу типов сообщений, которые умеют отправлять боты. Текст, видео, аудио, голосовые. все они имеют определённые нюансы, в которых легко запутаться.
• Ок, будем использовать какой-нибудь сервис для создания ботов без кода. Но и тут нам предлагают идти на копромисс и смириться с тем, что некоторые возможности ботов будут урезаны.
  Просто их недопилили, бывает 🥲

Но мы-то, творческие люди, и пришли не за тем, чтобы разбираться в этих дебрях! У нас есть идея, и её нужно реализовать быстро! Ещё вчера! 🤬

Новый способ отправки любых сообщений через телеграм-бота

Иногда мы сталкиваемся с ограничениями в отправке определенных типов сообщений. Например, на геткурсе нельзя отправлять голосовые и кругляши. Но что делать, если хочется? 😄 Вот бы существовал метод, позволяющий обойти эти ограничения и отправлять разнообразные сообщения через те платформы, которые казалось бы, не поддерживают их… Звучит удивительно, не так ли?)

Представляю вам своё мегаинновационное решение, о котором я, признаюсь, и сам давно мечтал: телеграм-бот, способный трансформировать сообщения в API-запросы.

@Msg_to_Req_bot

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

Принцип работы этого телеграм-бота крайне прост: он автоматически создает ссылки для API-запросов, соответствующие содержимому вашего сообщения. Это позволяет вам отправлять самые разнообразные типы контента, не углубляясь в технические детали.

Как получить ссылку для отправки сообщения

1. ВАЖНО! Предварительная подготовка: Создайте новый чат в телеграме, и добавьте в него админами @Msg_to_Req_bot и своего собственного бота, через которого вы будете отправлять итоговые сообщения.
2. Отправьте в созданный чат сообщение в таком виде, в каком его должны получить конечные пользователи вашего бота.
3. Бот @Msg_to_Req_bot пришлёт в чат специальную ссылку для создания API-запроса, и проверочное сообщение, которое создано этим же запросом.
   В идеале проверочное сообщение должно полностью копировать ваше, но есть нюансы.
4. В полученной ссылке замените {ApiToken} на токен вашего бота (узнать его можно через @BotFather), а вместо {ChatID} укажите Telegram ID человека, кому будет отправляться сообщение.
   Для теста можете взять свой собственный ID. Узнать его можно у бота.
5. Скопируйте получившуюся ссылку и откройте её в браузере. Как только вы сделаете это, ваш собственный бот пришлёт вам сообщение (если вы ввели свой ID).
   

Как это применять на практике

Просто используйте готовую ссылку в коде своего собственного бота, чтобы отправлять такие сообщения.

Либо, если вы хотите отправить сообщение отпределённого типа через сервис, который ограничивает эту возможность, но при этом поддерживает создание запросов на внешние ресурсы («Вебхуки», «Вызовы URL»). То использйте эту возможность для того, чтобы прописать там ссылку, которую сгенерировал бот @Msg_to_Req_bot. Таким образом, вы можете обойти ограничения платформы и успешно доставить необходимое сообщение.

Пример использования в геткурсе

Вы можете отправлять любые телеграм-сообщения, включая голосовые и кругляши, прямо из геткурса, через операцию «Вызов URL» в Процессе.

Чтобы отправить сообщение конкретному пользователю в телеграм, в ссылке нужно заменить {ChatID} на переменную доп поля пользователя, в которой содержится ID пользователя в телеграме.

Лайфхаки

Пересылайте боту сообщения

Пересланные сообщения бот понимает так же, как и обычные. Т.е. вы можете переслать любое сообщение боту и он его «скопирует».

Узнайте ID

Бот @Msg_to_Req_bot позволяет вам легко узнать Telegram ID канала, чата, другого бота, конкретного пользователя и ваш собственный. Для этого отправьте боту команду /id, бот откроет клавиатуру, на которой нужно выбрать ID чего или кого вы хотите получить (см. скриншот).

В ответ вы получите ID, который вы можете использовать вместо переменной {ChatID} в запросах к телеграму.

Отправляйте сообщения в чаты и каналы

Вы можете отправлять сообщения не только конкретным пользователям, но и в чат и даже в канал, если бот является там админом. Для этого замените {ChatID} в сгенерированной ссылке на имя канала (например, @my_channel_name) или на ID чата (например, -1001234567890). Да, минус в ID чата писать обязательно.

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

Добавьте в сообщение кнопки

В телеграме нет возможности добавить кнопки в сообщения обычного пользователя, такая возможность доступна только ботам. Поэтому, чтобы показать боту, что в сообщении должны быть кнопки, их нужно описать в формате JSON. (В параметрах кнопок используются стандартные опции reply_markup)

Чтобы показать боту, где начинается описание кнопок, нужно перед этим JSON-кодом поставить ключевое слово reply_markup. При этом и ключевое слово, и сам JSON должны быть отформатированы в вашем сообщении, как моноширинный текст (код). Заметьте, что это вхождение моноширинного текста будет вырезано из итогового сообщения.

Пример сообщения:

Нюансы

Бот не может отправлять сообщения "незнакомцу"

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

Предпросмотр ссылок

Если в вашем сообщении есть ссылка, то её превьюшка будет автоматически добавлена к сообщению, т.к. когда вы отправляете сообщение боту, он не может видеть, есть ли в вашем сообщении эта превьюшка или нет.

Но! Если вам не нужен предпросмотр ссылок, то его можно отключить. Для этого просто допишите к тому коду, который скинет бот:
&disable_web_page_preview=True

Используйте стандартные Emoji

Telegram-боты пока что не умеют отправлять премиум Emoji. С этим ничего не поделать. Просто учитывайте это. Любые премиум Emoji будут автоматически конвертироваться в обычные.

Обязательно ли использовать чат для работы бота?

Да, если вы используете сообщения с медиафайлами (картинки, видео, видиозаметки, голосовые...). Вашему боту нужно "увидеть" то сообщение, которое вы отправили в чат, иначе он не сможет отправлять те медиафайлы, которые включены в ваше сообщение, т.к. у него не будет к ним доступа.

Конвертация типов сообщений

Аудио → Голосовое сообщение

Для конвертации аудиосообщения в голосовое прикрепите аудио-файл к сообщению, а в тексте этого сообщения напишите одну из ключевых фраз:
voice,голосовое, голос или войс

Рекомендуемая длина голосового сообщения — 1 минута

Видео → Видеозаметка (Кругляш)

Для конвертации видеосообщения в видеозаметку прикрепите аудио-файл к сообщению, а в тексте этого сообщения напишите одну из ключевых фраз:
video_note, videonote, circle, circlevideo, видеозаметка, круг или кругляш

Рекомендуемая длина видеозаметки — 1 минута

В тексте сообщения не должно быть ничего кроме ключевого слова.

Лимиты

Бесплатная версия

• Количество ссылок, которые можно сгенерировать — 5 ссылок в день.
• Конвертация типов сообщений.
  

Расширеная версия

Стоимость: день — 70 руб | неделя — 300 руб | месяц — 700 руб

• Количество ссылок, которые можно сгенерировать — 100 ссылок в день.
• Возможность конвертации типов сообщений:
  Аудио → Голосовое сообщение
  Видео → Видеозаметка (Кругляш)

Меню

Левое меню тут просто космическое)) Верите или нет, сделано оно из стандартного бокового меню геткурса. Но, конечно, пришлось немало пошаманить и внести целую кучу изменений, чтобы оно стало таким:

Главная фишка этого меню в том, что оно может быть как компактным, так и развёрнутым (по умолчанию оно широкое). Пользователи сами выбирают, как им будет удобнее. Для этого внизу есть кнопка "свернуть/развернуть". Выбор пользователя запоминается при переходах между страницами. Т.е. если пользователь ранее выбрал компактный вариант, то ему откроется страница сразу со свёрнутым меню.

Подменю больше не открывается как раньше, все пункты подменю перенесены "внутрь" кнопок меню и разворачиваются, при нажатии на них.

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

Здесь карточки тренингов застилизованы так, что попасть внутрь тренинга можно только при нажатии на кнопку "Начать обучение". Кстати, эти карточки - не кастомные блоки, а настоящий список тренингов. Т.е. если в онлайн-школе появится новый тренинг, то его карточка будет автоматически выглядеть так же.

Так же на этой странице есть блок "Магазин", где по сути отображаются недоступные тренинги, которые можно приобрести:

Список модулей

Прежде всего обратите внимание на шапку страницы. Она тоже генерируется автоматически, картинка и описание модуля подтягиваются так же из чатиума, а кол-во уроков в тренинге и кол-во заданий определяется скриптом.

Внутри каждого тренинга есть модули, и они выглядят иначе, чем обычные тренинги. У модулей есть 3 состояния: обычное, закрытое и пройденное. Пройденные модули определяются скриптом, и на такие карточки автоматически ставится зелёная галочка. На закрытых модулях вместо галочки будет замочек. Также карточки модулей автоматически нумеруются.

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

Страница модуля

Здесь используется прогресс-бар, который показывает сколько модулей уже пройдено, и сколько осталось пройти до следующего модуля. Такой прогресс-бар я уже давно использую, тут я его просто немного модифицировал в соответствии с дизайн-макетом.

Список уроков тоже переделан и очень упрощён визуально. Но в целом, работает он так же, как мы с вами привыкли)

И ещё одна максимально простая, но такая удобная штука - это кнопки переключения модулей. С помощью них можно перейти на следующий или предыдущий модуль. Это просто маст-хэв)

Страница урока

У уроков внутри похожая шапка, как и на страницах тренингов. Кнопки следующий и предыдущий урок, так же перемещены в неё.

В целом, контент самих уроков почти не трогался. В основном добавились скругления у элементов и заменены шрифты. Но некоторые блоки всё же были сильно застилизованы, хотя и не попали на этот скриншот. Среди них "список файлов", "форма", "анкета", "тестирование" и некоторые другие.

Но сложнее всего стилизовать оказалось блок комментариев, впрочем, как обычно) В нём очень много разных элементов, а его вёрстка оставляет желать лучшего, поэтому стили приходилось порой забивать костылями))

Остальные страницы

На самом деле в этой онлайн-школе застилизованы почти все страницы, куда может попасть рядовой пользователь. Скринить их все я не стал, т.к. их реально много, но все красивые) Кто не верит на слово, пишите в ЛС))

И напоследок, вот, подборка самых интересных страниц. Все они были стилизованы на основе стандартных. Думаю, описывать каждую нет необходимости. Но если у вас появились вопросы, пишите в комменты, всем отвечу :)

Посмотреть оригиналы скриншотов в хорошем разрешении можно тут:
https://drive.google.com/drive/folders/1BQ3XBK1zztsPgF0gVu48yUoGMjyvgMWR?usp=sharing

Скрыть имя основного преподавателя на карточке тренинга
(код для JavaScript-блока)

* Моё имя нужно заменить на имя преподавателя

Убрать иконки на карточках урока

Скрыть картинки у всех карточек уроков

Показывать картинки уроков в мобильной версии сайта

Добавить лейбл/ярлычок на карточку урока

* ID урока заменяете на свой

ЮMoney
#YANDEXMONEY