129 lines
7.8 KiB
Markdown
129 lines
7.8 KiB
Markdown
# Prompt для копирования стиля dvr_admin
|
||
|
||
Скопируй этот промпт в начало разговора с LLM (Claude / ChatGPT / другое), когда хочешь сделать новый веб-интерфейс в том же визуальном стиле — **независимо от стека** (React, Vue, Svelte, Next, Vite, Django, Flask, Rails, PHP, статические HTML).
|
||
|
||
---
|
||
|
||
## PROMPT (копировать целиком)
|
||
|
||
Сделай веб-интерфейс в следующем визуальном стиле. Это минималистичный "Notion-like" admin UI — плоский, тонкие 0.5px границы, мягкие цвета, 13px базовый размер, много whitespace.
|
||
|
||
### Layout
|
||
|
||
**Shell**: `.shell` (`display: flex`), внутри `.sidebar` (фиксированная слева) + `.main` (контент).
|
||
|
||
**Sidebar** 196px × 100vh, фиксированная (`position: fixed`), сворачивается в 44px кнопкой (состояние в localStorage). Внутри сверху вниз:
|
||
- `.logo` (44px, цветная `.logo-dot` 8px + название + кнопка collapse)
|
||
- `.nav-section` (uppercase 11px tertiary) → `.nav-item` (SVG иконка 15px opacity 0.6 + label). Активный — `.nav-item.active` с `background-secondary` и `font-weight: 500`.
|
||
- Опционально `.nav-divider` + ещё секция
|
||
- `.nav-bot` внизу (username + theme-toggle)
|
||
|
||
**Main** (`flex: 1`, `margin-left: 196px`): сверху `.topbar` 44px sticky с `<h1>` 15px weight 500, снизу `.content` padding 20px.
|
||
|
||
**Mobile** (< 768px): sidebar + topbar скрываются, появляется `.mob-nav` снизу (54px, fixed, иконки 20px + label 10px). `.metrics` становится 2 колонки вместо 4.
|
||
|
||
### Цветовая система (CSS-переменные на `:root`)
|
||
|
||
```css
|
||
--color-background-primary:#ffffff; /* карточки, sidebar */
|
||
--color-background-secondary:#f7f6f3; /* hover, inputs, th */
|
||
--color-background-tertiary:#eeece5; /* body */
|
||
--color-background-info:#e6f1fb; /* selected row / highlight */
|
||
--color-border-tertiary:#e2e0d8; /* тонкие линии */
|
||
--color-border-secondary:#ccc9be; /* input border */
|
||
--color-text-primary:#1a1916;
|
||
--color-text-secondary:#6b6960;
|
||
--color-text-tertiary:#999790;
|
||
--color-text-danger:#c0392b;
|
||
--border-radius-md:6px;
|
||
--border-radius-lg:10px;
|
||
--accent:#378add;
|
||
```
|
||
|
||
### Тёмная тема
|
||
|
||
`body.dark` переопределяет переменные: primary `#1c1c1e`, secondary `#2c2c2e`, tertiary `#111113`, info `#0d2a45`, text-primary `#f0ede6`, text-secondary `#a0a09a`. Badge-цвета инвертируются отдельно.
|
||
|
||
Toggle — кнопка в nav-bot + localStorage `app-theme`. SVG SUN ↔ MOON.
|
||
|
||
### Компоненты (CSS-классы)
|
||
|
||
- **`.card`** — `background-primary`, `border: 0.5px solid border-tertiary`, `border-radius-lg` (10px), margin-bottom 16px. Внутри `.card-head` (padding 12/16, border-bottom) + `.card-body` (padding 16).
|
||
- **`.metrics`** — CSS grid 4 колонки (2 mobile), внутри `.metric` с лейблом (11px uppercase tertiary), значением (22px weight 500), подписью (11px secondary).
|
||
- **`.tbl`** — `width: 100%`, `border-collapse`. `th`: 11px uppercase tertiary на `background-secondary`, padding 8/14. `td`: padding 9/14. `tr:hover td` → `background-secondary`. `tr.selected td` → `background-info`.
|
||
- **`.btn`** — 12px, padding 5/10, border 0.5px, `border-radius-md`. Варианты:
|
||
- `.btn-primary` — inverted (text-primary фон, primary текст)
|
||
- `.btn-danger` (красный), `.btn-success` (зелёный)
|
||
- `.btn-sm` — 11px padding 3/8
|
||
- **`.badge`** — inline 11px, `border-radius: 20px`. Цвета: green/red/gray/blue/amber (пара background/color, инвертируется в dark).
|
||
- **`.dot`** — inline 7×7 кружок для статусов (green/red/amber/gray).
|
||
- **`.form-row`** — `label` uppercase 11px tertiary, `input/select/textarea` width 100%, padding 7/10, focus → border `--accent`, фон `background-primary`.
|
||
- **`.search`** — компактный input 200px для топбара.
|
||
- **`.overlay.open`** + **`.modal`** — modal dialog, 420px max-width, `border-radius-lg`, shadow. `.modal-head/body/foot` с border между ними.
|
||
- **`.flash`** — баннер сверху content, `.flash-ok` (зелёный) / `.flash-err` (красный).
|
||
|
||
### Типография
|
||
|
||
- `font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
|
||
- Базовый размер **13px**
|
||
- Подписи/header-cells/form labels — **11px uppercase** letter-spacing 0.04–0.05em
|
||
- Значения метрик — 22px weight 500 (мягкий bold, не 700)
|
||
- Заголовки `<h1>` — 15px weight 500
|
||
|
||
### Детали
|
||
|
||
- Все borders **0.5px** (не 1px) — ключевая деталь эстетики.
|
||
- Border-radius: инпуты/кнопки `--border-radius-md (6px)`, карточки/модали `--border-radius-lg (10px)`.
|
||
- Padding/gap кратны 4: `4, 8, 12, 16, 20`.
|
||
- SVG иконки **inline** (`viewBox="0 0 16 16"`, `stroke: currentColor`, `stroke-width: 1.5`, `fill: none`). **НЕ** используй Font Awesome, Material Icons, Heroicons через `<img>`.
|
||
- Тени только у модали (`0 8px 32px rgba(0,0,0,.18)`).
|
||
- Транзишены 0.2s ease на sidebar/main-margin, 0.1s на hover.
|
||
|
||
### JS поведения
|
||
|
||
- Sidebar collapse с сохранением в `localStorage.app-sb`
|
||
- Theme toggle с сохранением в `localStorage.app-theme`
|
||
- Modal open/close через `.overlay.open` + Escape закрывает всё
|
||
|
||
### Что НЕ делать
|
||
|
||
- НЕ использовать фреймворки (bootstrap, tailwind, material-ui) — весь стиль через эту CSS-систему
|
||
- НЕ использовать 1px borders — только 0.5px
|
||
- НЕ использовать жирный текст >500 weight
|
||
- НЕ использовать большие padding (> 24px) — дизайн компактный
|
||
- НЕ использовать яркие акценты кроме `--accent` (focus) и `--color-text-danger`
|
||
|
||
### Референс
|
||
|
||
Полный рабочий пример в `doc/web_template/`:
|
||
- `styles.css` — все стили (можно копировать целиком)
|
||
- `app.js` — JS для theme/sidebar/modal
|
||
- `index.html` — демо со всеми компонентами
|
||
|
||
Просто скопируй `styles.css` + `app.js` в свой проект, подключи их, и повторяй HTML-разметку из `index.html` для новых страниц. Все компоненты — обычные CSS-классы, работают в любом фреймворке / шаблонизаторе.
|
||
|
||
---
|
||
|
||
## Использование
|
||
|
||
### Статический сайт / любой framework
|
||
|
||
```html
|
||
<link rel="stylesheet" href="styles.css">
|
||
<script src="app.js"></script>
|
||
```
|
||
|
||
Затем пиши HTML с этими классами (`.shell`, `.sidebar`, `.card`, `.btn`, и т.д.).
|
||
|
||
### React / Vue / Svelte
|
||
|
||
Положи `styles.css` в `src/` и импортируй: `import './styles.css'`. JS из `app.js` можно либо так же подключать, либо переписать на хуки — семантика классов не изменится.
|
||
|
||
### Django / Flask / Rails / PHP
|
||
|
||
Положи `styles.css` + `app.js` в `static/` и ссылайся на них из шаблонов.
|
||
|
||
### AI-ассистент
|
||
|
||
Прикрепи содержимое `styles.css` к разговору вместе с промптом выше — LLM будет создавать новый HTML/компоненты в том же стиле.
|