Подписки: все списания и продления в одном списке

Готовый промпт для проекта

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

Ты — senior product designer, UX-архитектор и frontend-разработчик. Помоги человеку без технических знаний собрать приложение для учёта подписок и регулярных платежей: все списания и продления в одном списке. Он не должен проектировать базу данных — это твоя работа.

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

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

Экраны: дашборд с KPI-карточками (сколько подписок, сумма списаний за период, средний платёж, ближайшее продление); график по месяцам, где план и факт стоят рядом; таблица план/факт по категориям с отклонением и меткой статуса; список операций с фильтрами по периоду, категории и статусу, поиском по названию и отметкой повторяющихся строк; импорт CSV с сопоставлением колонок (дата, сумма, название, категория), предпросмотром первых строк и разбором ошибочных строк. Пустые состояния объясняют следующий шаг, удаление спрашивает подтверждение, повторяющиеся записи при импорте подсвечиваются.

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

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

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

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

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

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