28 lines
2.5 KiB
Markdown
28 lines
2.5 KiB
Markdown
---
|
||
name: reference-dashboard-design-artifact
|
||
description: Ссылка на согласованный визуальный макет дашборда «Бюджет» (тёмная тема, room-card, dock-навбар) — сверяться при любой работе над UI
|
||
metadata:
|
||
type: reference
|
||
---
|
||
|
||
Макет дашборда согласован заранее (в другой сессии) как Claude Artifact:
|
||
`https://claude.ai/code/artifact/55e7f715-2ee7-45e2-acb7-82b883fcad02` («Бюджет — обзор (макет)»).
|
||
|
||
Ключевые элементы дизайна оттуда, уже перенесённые в `App/media/css/dashboard.css` и
|
||
`App/view/Index/index.html`/`App/view/layout.html`:
|
||
- Тёмная тема (`--bg:#0b0b0f`, `--surface:#17171d`, акцентные цвета per-карточка через
|
||
`--card-accent`), inline SVG-иконки (не Bootstrap Icons) для навигации/типов счетов.
|
||
- Карточки-«комнаты» (`.room-card`) для счетов, кольца прогресса (`.ring`) для целей копилок,
|
||
списки `.budget-list`/`.budget-row` с прогресс-баром для план/факта по категориям.
|
||
- Нижний dock-навбар (`.dock`) вместо верхнего меню: Обзор/Счета/Категории/Операции/Цели.
|
||
- Верхний блок — «Доступно сейчас» + «Всего по всем счетам», строка stat-pills (дата/% бюджета/
|
||
изменение за месяц/курс валюты) — в реализации пока упрощена (нет данных по бюджету/курсу).
|
||
|
||
Макет — на русском, включает демо-данные (Кошелёк/Карта Тинькофф/Евро, цели «Отпуск»/«Остаток»,
|
||
полный список категорий из [[бюджет_текущий_план]]) — не копировать демо-суммы как реальные, только
|
||
структуру/классы/цветовую схему.
|
||
|
||
**How to apply**: перед тем как добавлять новый раздел UI (Счета/Категории/Операции/Цели — сейчас
|
||
это просто неактивные пункты dock-навбара) — свериться с этим макетом (`WebFetch` по ссылке выше),
|
||
не изобретать свой стиль карточек/навигации заново.
|