mirror of
https://github.com/wasrusgen/zashita-brandbook.git
synced 2026-06-03 17:44:47 +00:00
04 UI: юридический контент вместо RADAR
KPI: договора/риски/сроки; Таблица: реальные дела; Обложка: @wasrusgen1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
WASRUSGEN
parent
02eed0b260
commit
00dfd41ebf
@ -470,7 +470,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
<div class="cover-meta-item">
|
<div class="cover-meta-item">
|
||||||
<strong>Платформа</strong>
|
<strong>Платформа</strong>
|
||||||
Юр-кабинет в CRM
|
SaaS · юридический сервис
|
||||||
</div>
|
</div>
|
||||||
<div class="cover-meta-item">
|
<div class="cover-meta-item">
|
||||||
<strong>Акцент</strong>
|
<strong>Акцент</strong>
|
||||||
@ -478,7 +478,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
<div class="cover-meta-item">
|
<div class="cover-meta-item">
|
||||||
<strong>Зонтичный бренд</strong>
|
<strong>Зонтичный бренд</strong>
|
||||||
РАДАР
|
@wasrusgen1
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1054,16 +1054,16 @@ body {
|
|||||||
<div class="comp-card__demo">
|
<div class="comp-card__demo">
|
||||||
<div class="badges-row" style="margin-bottom:12px">
|
<div class="badges-row" style="margin-bottom:12px">
|
||||||
<span class="badge badge-cyan">ЗАЩИТА</span>
|
<span class="badge badge-cyan">ЗАЩИТА</span>
|
||||||
<span class="badge badge-success">▲ Рост 12%</span>
|
<span class="badge badge-success">✅ Проверен</span>
|
||||||
<span class="badge badge-danger">▼ −0.08</span>
|
<span class="badge badge-danger">⚡ Критично</span>
|
||||||
<span class="badge badge-warning">⚠ Контроль</span>
|
<span class="badge badge-warning">⚠ Срок</span>
|
||||||
<span class="badge badge-neutral">Нейтрально</span>
|
<span class="badge badge-neutral">На проверке</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="badges-row" style="margin-bottom:12px">
|
<div class="badges-row" style="margin-bottom:12px">
|
||||||
<span class="badge badge-cyan">Ценовой индекс</span>
|
<span class="badge badge-cyan">Договор</span>
|
||||||
<span class="badge badge-success">В норме</span>
|
<span class="badge badge-success">Рисков нет</span>
|
||||||
<span class="badge badge-danger">Тревога</span>
|
<span class="badge badge-danger">Риски найдены</span>
|
||||||
<span class="badge badge-warning">На проверке</span>
|
<span class="badge badge-warning">Сопровождение</span>
|
||||||
<span class="badge badge-dark">Premium</span>
|
<span class="badge badge-dark">Premium</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="badges-row">
|
<div class="badges-row">
|
||||||
@ -1074,31 +1074,31 @@ body {
|
|||||||
<div class="comp-card__label">Бейджи и статусы</div>
|
<div class="comp-card__label">Бейджи и статусы</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- KPI Cards — analytic metrics -->
|
<!-- KPI Cards — legal metrics -->
|
||||||
<div class="comp-card">
|
<div class="comp-card">
|
||||||
<div class="comp-card__demo">
|
<div class="comp-card__demo">
|
||||||
<div class="cards-row">
|
<div class="cards-row">
|
||||||
<div class="ui-card" style="border-top:3px solid #9F1239">
|
<div class="ui-card" style="border-top:3px solid #9F1239">
|
||||||
<div class="ui-card__title">Ценовой индекс</div>
|
<div class="ui-card__title">Договоров проверено</div>
|
||||||
<div class="ui-card__sub">vs. конкуренты</div>
|
<div class="ui-card__sub">За последние 30 дней</div>
|
||||||
<div class="ui-card__num" style="color:#9F1239">0.94</div>
|
<div class="ui-card__num" style="color:#9F1239">14</div>
|
||||||
<div class="ui-card__delta delta-neg">▼ −0.03 за неделю</div>
|
<div class="ui-card__delta delta-pos">▲ +3 к прошлому месяцу</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-card" style="border-top:3px solid #10B981">
|
<div class="ui-card" style="border-top:3px solid var(--s-danger)">
|
||||||
<div class="ui-card__title">Покрытие</div>
|
<div class="ui-card__title">Рисков выявлено</div>
|
||||||
<div class="ui-card__sub">Товаров отслежено</div>
|
<div class="ui-card__sub">Критических</div>
|
||||||
<div class="ui-card__num">1 247</div>
|
<div class="ui-card__num" style="color:var(--s-danger)">8</div>
|
||||||
<div class="ui-card__delta delta-pos">▲ +18%</div>
|
<div class="ui-card__delta delta-neg">▼ требуют реакции</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-card" style="border-top:3px solid #F59E0B">
|
<div class="ui-card" style="border-top:3px solid #F59E0B">
|
||||||
<div class="ui-card__title">Аномалии</div>
|
<div class="ui-card__title">Сроков истекает</div>
|
||||||
<div class="ui-card__sub">Скачки цен</div>
|
<div class="ui-card__sub">В течение 14 дней</div>
|
||||||
<div class="ui-card__num">7</div>
|
<div class="ui-card__num">3</div>
|
||||||
<div class="ui-card__delta delta-neg">▼ высокий риск</div>
|
<div class="ui-card__delta delta-neg">⚠ срочно</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="comp-card__label">KPI-карточки — статус документов (Бордо акцент)</div>
|
<div class="comp-card__label">KPI-карточки — статус дел и договоров (Бордо акцент)</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Alerts -->
|
<!-- Alerts -->
|
||||||
@ -1106,77 +1106,77 @@ body {
|
|||||||
<div class="comp-card__demo">
|
<div class="comp-card__demo">
|
||||||
<div class="alerts-col">
|
<div class="alerts-col">
|
||||||
<div class="ui-alert" style="background:var(--p-50);color:var(--p-700)">
|
<div class="ui-alert" style="background:var(--p-50);color:var(--p-700)">
|
||||||
<div class="ui-alert-icon">📊</div>
|
<div class="ui-alert-icon">✅</div>
|
||||||
<div class="ui-alert__body">
|
<div class="ui-alert__body">
|
||||||
<div class="ui-alert__title">Отчёт готов</div>
|
<div class="ui-alert__title">Экспертиза завершена</div>
|
||||||
<div class="ui-alert__text">Недельный анализ конкурентов сформирован — 1 247 позиций</div>
|
<div class="ui-alert__text">Договор подряда проверен — выявлено 5 рисков, 2 критических</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-alert alert-warning">
|
<div class="ui-alert alert-warning">
|
||||||
<div class="ui-alert-icon">⚠</div>
|
<div class="ui-alert-icon">⏰</div>
|
||||||
<div class="ui-alert__body">
|
<div class="ui-alert__body">
|
||||||
<div class="ui-alert__title">Ценовой индекс снизился</div>
|
<div class="ui-alert__title">Срок ответа истекает</div>
|
||||||
<div class="ui-alert__text">−0.03 за 7 дней — рекомендуется пересмотр позиций</div>
|
<div class="ui-alert__text">По делу №176 — осталось 3 дня для подачи возражений</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-alert alert-danger">
|
<div class="ui-alert alert-danger">
|
||||||
<div class="ui-alert-icon">⚡</div>
|
<div class="ui-alert-icon">⚡</div>
|
||||||
<div class="ui-alert__body">
|
<div class="ui-alert__body">
|
||||||
<div class="ui-alert__title">Аномальный скачок цены</div>
|
<div class="ui-alert__title">Критический риск</div>
|
||||||
<div class="ui-alert__text">Конкурент снизил цену на 34% — требует реакции</div>
|
<div class="ui-alert__text">Условие п. 8.3 нарушает ваши права — одностороннее изменение цены</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="comp-card__label">Уведомления и контроль сроков</div>
|
<div class="comp-card__label">Уведомления — риски, сроки, статус экспертизы</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Analytics Table -->
|
<!-- Documents Table -->
|
||||||
<div class="comp-card" style="grid-column:1/-1">
|
<div class="comp-card" style="grid-column:1/-1">
|
||||||
<div class="comp-card__demo" style="padding:24px;background:#fff">
|
<div class="comp-card__demo" style="padding:24px;background:#fff">
|
||||||
<table class="ui-table">
|
<table class="ui-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Конкурент</th>
|
<th>Документ</th>
|
||||||
<th>Категория</th>
|
<th>Тип</th>
|
||||||
<th>Ценовой индекс</th>
|
<th>Рисков</th>
|
||||||
<th>Δ нед.</th>
|
<th>Срок</th>
|
||||||
<th>Статус</th>
|
<th>Статус</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><strong>Наш магазин</strong> <span class="badge badge-cyan" style="margin-left:6px">Наши</span></td>
|
<td><strong>Договор подряда №14</strong> <span class="badge badge-cyan" style="margin-left:6px">Новый</span></td>
|
||||||
<td>Кухни</td>
|
<td>Подряд</td>
|
||||||
<td style="font-weight:700;font-family:'Inter',sans-serif;color:#9F1239">0.94</td>
|
<td style="font-weight:700;font-family:'Inter',sans-serif;color:#9F1239">5 · 2 крит.</td>
|
||||||
<td><span style="color:var(--s-danger);font-weight:600">▼ −0.03</span></td>
|
<td><span style="color:var(--s-danger);font-weight:600">12.06.2026</span></td>
|
||||||
<td><span class="badge badge-warning">Контроль</span></td>
|
<td><span class="badge badge-danger">Требует ответа</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Мебель Комфорт</td>
|
<td>ДДУ № 780/Черниговская</td>
|
||||||
<td>Кухни</td>
|
<td>Долевое</td>
|
||||||
<td style="font-weight:700;font-family:'Inter',sans-serif">1.02</td>
|
<td style="font-weight:700;font-family:'Inter',sans-serif">13 рисков</td>
|
||||||
<td><span style="color:var(--s-success);font-weight:600">▲ +0.01</span></td>
|
<td><span style="color:var(--s-warning);font-weight:600">20.05.2026</span></td>
|
||||||
<td><span class="badge badge-neutral">Стабильно</span></td>
|
<td><span class="badge badge-warning">На сопровождении</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>КухниПрофи</td>
|
<td>Договор поставки №88</td>
|
||||||
<td>Кухни</td>
|
<td>Поставка</td>
|
||||||
<td style="font-weight:700;font-family:'Inter',sans-serif;color:var(--s-danger)">0.78</td>
|
<td style="font-weight:700;font-family:'Inter',sans-serif;color:var(--s-success)">0 рисков</td>
|
||||||
<td><span style="color:var(--s-danger);font-weight:600">▼ −0.16</span></td>
|
<td>—</td>
|
||||||
<td><span class="badge badge-danger">Демпинг</span></td>
|
<td><span class="badge badge-success">Проверен</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Стиль Интерьер</td>
|
<td>Оферта SaaS-сервиса</td>
|
||||||
<td>Кухни</td>
|
<td>Оферта</td>
|
||||||
<td style="font-weight:700;font-family:'Inter',sans-serif">1.08</td>
|
<td style="font-weight:700;font-family:'Inter',sans-serif">2 риска</td>
|
||||||
<td><span style="color:var(--s-success);font-weight:600">▲ +0.04</span></td>
|
<td>—</td>
|
||||||
<td><span class="badge badge-success">Растёт</span></td>
|
<td><span class="badge badge-neutral">На проверке</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="comp-card__label">Таблица документов — кабинет ЗАЩИТА</div>
|
<div class="comp-card__label">Таблица договоров — кабинет ЗАЩИТА</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Dark mode preview -->
|
<!-- Dark mode preview -->
|
||||||
@ -1184,26 +1184,26 @@ body {
|
|||||||
<div class="comp-card__demo dark" style="display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start">
|
<div class="comp-card__demo dark" style="display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start">
|
||||||
<!-- Dark KPI -->
|
<!-- Dark KPI -->
|
||||||
<div style="background:rgba(159,18,57,0.1);border:1px solid rgba(159,18,57,0.2);border-radius:14px;padding:20px;min-width:180px;flex:1">
|
<div style="background:rgba(159,18,57,0.1);border:1px solid rgba(159,18,57,0.2);border-radius:14px;padding:20px;min-width:180px;flex:1">
|
||||||
<div style="font-size:11px;color:rgba(159,18,57,0.7);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:8px">ЦЕНОВОЙ ИНДЕКС</div>
|
<div style="font-size:11px;color:rgba(159,18,57,0.7);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:8px">ДОГОВОРОВ</div>
|
||||||
<div style="font-size:40px;font-weight:800;color:#fff;line-height:1;letter-spacing:-0.04em">0.94</div>
|
<div style="font-size:40px;font-weight:800;color:#fff;line-height:1;letter-spacing:-0.04em">14</div>
|
||||||
<div style="font-size:12px;color:#FCA5A5;margin-top:8px;font-weight:600">▼ −0.03 за неделю</div>
|
<div style="font-size:12px;color:#6EE7B7;margin-top:8px;font-weight:600">▲ +3 за месяц</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:20px;min-width:180px;flex:1">
|
<div style="background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:20px;min-width:180px;flex:1">
|
||||||
<div style="font-size:11px;color:rgba(255,255,255,0.35);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:8px">ПОКРЫТИЕ</div>
|
<div style="font-size:11px;color:rgba(255,255,255,0.35);letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:8px">РИСКОВ</div>
|
||||||
<div style="font-size:40px;font-weight:800;color:#fff;line-height:1;letter-spacing:-0.04em">1 247</div>
|
<div style="font-size:40px;font-weight:800;color:#fff;line-height:1;letter-spacing:-0.04em">8</div>
|
||||||
<div style="font-size:12px;color:#6EE7B7;margin-top:8px;font-weight:600">▲ +18% товаров</div>
|
<div style="font-size:12px;color:#FCA5A5;margin-top:8px;font-weight:600">⚡ 2 критических</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="flex:2;min-width:260px">
|
<div style="flex:2;min-width:260px">
|
||||||
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px">
|
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px">
|
||||||
<span class="badge" style="background:rgba(159,18,57,0.2);color:#E8909F">ЗАЩИТА</span>
|
<span class="badge" style="background:rgba(159,18,57,0.2);color:#E8909F">ЗАЩИТА</span>
|
||||||
<span class="badge" style="background:rgba(16,185,129,0.15);color:#6EE7B7">▲ Рост</span>
|
<span class="badge" style="background:rgba(16,185,129,0.15);color:#6EE7B7">✅ Проверен</span>
|
||||||
<span class="badge" style="background:rgba(239,68,68,0.15);color:#FCA5A5">⚡ Демпинг</span>
|
<span class="badge" style="background:rgba(239,68,68,0.15);color:#FCA5A5">⚡ Критично</span>
|
||||||
<span class="badge" style="background:rgba(245,158,11,0.15);color:#FCD34D">⚠ Контроль</span>
|
<span class="badge" style="background:rgba(245,158,11,0.15);color:#FCD34D">⏰ Срок</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="btns-row">
|
<div class="btns-row">
|
||||||
<button class="btn" style="background:#9F1239;color:#fff;font-size:13px">Открыть документ</button>
|
<button class="btn" style="background:#9F1239;color:#fff;font-size:13px">Открыть договор</button>
|
||||||
<button class="btn" style="background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.65);font-size:13px;border:1px solid rgba(255,255,255,0.1)">Настройки</button>
|
<button class="btn" style="background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.65);font-size:13px;border:1px solid rgba(255,255,255,0.1)">История дел</button>
|
||||||
<button class="btn" style="background:transparent;color:rgba(159,18,57,0.8);font-size:13px">Экспорт CSV</button>
|
<button class="btn" style="background:transparent;color:rgba(159,18,57,0.8);font-size:13px">Скачать отчёт</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1378,7 +1378,7 @@ body {
|
|||||||
</div>
|
</div>
|
||||||
<div style="font-size:13px;color:var(--n-700);line-height:2">
|
<div style="font-size:13px;color:var(--n-700);line-height:2">
|
||||||
1. Montserrat 700 — только для логотипа. В UI не применять.<br>
|
1. Montserrat 700 — только для логотипа. В UI не применять.<br>
|
||||||
2. Суббренд ЗАЩИТА — юридический кабинет: экспертиза договоров, контроль сроков, сопровождение сделок. РАДАР — мониторинг. CRM — кабинет. ЭКСПЕРТ — аналитика цен.<br>
|
2. Суббренд ЗАЩИТА — юридический кабинет: экспертиза договоров, контроль сроков, сопровождение сделок.<br>
|
||||||
3. Logo gray <strong>#5B5B5B</strong> — цвет суббренда на светлом. На тёмном фоне — <strong>rgba(255,255,255,0.92)</strong>.<br>
|
3. Logo gray <strong>#5B5B5B</strong> — цвет суббренда на светлом. На тёмном фоне — <strong>rgba(255,255,255,0.92)</strong>.<br>
|
||||||
4. Все цвета — только через токены. Не хардкодить HEX в компонентах.<br>
|
4. Все цвета — только через токены. Не хардкодить HEX в компонентах.<br>
|
||||||
5. Sidebar ЗАЩИТА: <strong>#0C1929</strong> (Бордо-dark tint), не чистый чёрный. Active nav border: <strong>#9F1239</strong>.
|
5. Sidebar ЗАЩИТА: <strong>#0C1929</strong> (Бордо-dark tint), не чистый чёрный. Active nav border: <strong>#9F1239</strong>.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user