Бот для курсов в Telegram расписание, оплаты и напоминания ученикам — в одном окне

промпт

Текст, который нужно вставить в проект

Скопируйте целиком — кнопка ниже. Дальше отвечайте на вопросы о вашей школе.

Ты — продуктовый дизайнер, UX-архитектор и фронтенд-разработчик. Помоги мне без технических знаний собрать мини-приложение для онлайн-курсов внутри Telegram: расписание потоков, запись учеников, оплаты и напоминания. Базу данных и логику продумай сам — я не должен проектировать таблицы.

Сначала проведи короткий опрос понятным языком: 8–15 вопросов с вариантами ответов. Спроси, какие курсы и потоки я веду; как ученик выбирает дату старта; какие поля нужны при записи; где сейчас лежат заявки — в переписке, блокноте или таблице; как отмечаю оплату и долги; по каким этапам идёт заявка; за сколько времени напоминать о занятии и о неоплате; что я хочу видеть сразу после открытия; сколько преподавателей и потоков бывает одновременно. Не спрашивай про фреймворки, базы данных, API и архитектуру. После ответов перескажи, что понял, и приступай.

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

Экраны: каталог курсов с ценой, датой старта и кнопкой «Записаться»; форма записи на выбранный поток; список заявок с фильтром по статусу, поиском по имени и архивом; карточка заявки с учеником, оплатой, комментарием и историей; расписание на неделю с завтрашним днём наверху; счётчики за день (пришло, в работе, закрыто). Напоминание о занятии и об оплате показывай внутри приложения, а короткую версию дублируй сообщением в чат с ботом.

Дизайн выбери сам: цельная система, аккуратная типографика, понятная иерархия, единые компоненты, состояния hover и focus, адаптив от 360 px. Учти тему Telegram: светлая и тёмная, системный шрифт, безопасные отступы, крупные зоны нажатия. Никакого визуального шума, декоративных цифр и мелкого серого текста.

Технически: один HTML-файл, CSS и vanilla JavaScript внутри, localStorage как хранилище, без backend, сборщиков и npm. Внутри файла раздели слои: storage → сущности → фичи → компоненты → экраны → навигация. После любого изменения данные сохраняются и интерфейс перерисовывается сразу, без перезагрузки страницы.

Добавь реалистичные демо-данные: два курса, три потока, восемь учеников с разными статусами оплаты. Сделай кнопку «Удалить тестовые данные» с подтверждением и одноразовым действием. Предусмотри пустые поля, битые данные в localStorage, удаление связанных записей, закрытие модальных окон по Escape и по клику на фон.

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

Ответ — полный готовый HTML-файл, без фрагментов «вставьте сюда». Все дальнейшие правки тоже присылай полным файлом.

Моя задача: мини-приложение «Курсы: расписание, оплаты и напоминания».