mail/web_template/STYLE_PROMPT.md

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)

--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

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