# 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/компоненты в том же стиле.