Дмитрий
887abf444e
Получен handoff-пакет liderra_v8_handoff/ от дизайнера Платона (kpd9363@gmail.com) от 07.05.2026 — v8 Forest. Заказчик 08.05 решил применить только в части дизайна, имени, логотипа. Функционал, состав страниц и правила (CTO-11, click-wrap, SSO break-glass, 14 статусов воронки) — без изменений (источник — ТЗ v8.5/schema v8.5). Что сделано: - Массовая замена Лидпоток→Лидерра (с учётом падежей: Лидерры/Лидерре) в 33 файлах (449 вхождений) — все .md/.sql/.json/.toml/.yml/.txt/.html, кроме исторических упоминаний внутри liderra_v8_handoff/ - Удалён docs/brandbook.md v1.1 — заменён на BRANDBOOK_v2.md из handoff - Скопированы 13 концептов liderra_v8_handoff/concepts/v8_*.html в web/v8/. Удалены старые web/01-login.html, 02-dashboard.html, 03-deals.html, index.html (палитра v1.1 deprecated) - CLAUDE.md v1.0→v1.1: §0 (BRANDBOOK_v2 + DEVELOPER_HANDOFF в источниках), §2 (палитра Forest, Inter+JBM, Lucide), §5 п.6 (anti-pattern Inter снят — в Forest Inter наш основной шрифт), §6 (13 концептов в web/v8/) - Реестр Открытые_вопросы_v8_3.md v1.12→v1.13: добавлена запись о ребрендинге + 4 точечных расхождений handoff vs ТЗ (статусы воронки, click-wrap чекбоксы, SSO fallback, axe violations) - package.json/package-lock.json: name lidpotok→liderra 4 расхождения handoff vs ТЗ (НЕ применены, источник истины — ТЗ/schema): 1. 14 «обобщённых» статусов в BRANDBOOK_v2 §3.6 ≠ 14 slug'ов в schema.sql:2076 (совпадает 2 из 14: «Переговоры», «Оплачено»). Источник — schema/ТЗ §6.4 (реселлерская модель из аудита crm.bp-gr.ru, 6 системных + 8 настраиваемых статусов). 2. 3-й click-wrap в v8_login.html («маркетинг-опционально») ≠ ТЗ §1.5/§4.1 («согласие на ПДн», обязательное, OPEN-Ж-3). 3. SSO в v8_admin.html («локальный 2FA fallback») ≠ ТЗ OPEN-И-13 (break-glass super_admin, локальный 2FA выключен). 4. Заявление «axe-core 4.10.2 — 0 violations» в README handoff — локально Pa11y 9.1.1 + axe нашёл 81 violation на 10/13 HTML (преимущественно color-contrast на декоративных separator'ах с --ink-disabled). Чисто: settings/errors/palette_options. Что НЕ включено в коммит: - лендинг/TZ_landing_v1_0.md — untracked, не моя работа в этой сессии - .tmp/ — gitignored Что осталось (для следующих сессий): - Возможное переименование GitHub-репо CoralMinister/lidpotok → liderra (отдельное решение заказчика) - Опционально: обратная связь Платону по 4 расхождениям handoff vs ТЗ Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
570 lines
34 KiB
HTML
570 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Лидерра · Developer Hub</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; }
|
||
:root {
|
||
--bg:#F6F3EC; --surface:#FFFDFA; --sunken:#F0EDE4;
|
||
--hairline:#D9D5CD; --hairline-soft:#E8E3D6;
|
||
--ink:#081319; --ink-2:#343C41; --ink-3:#66635C; --ink-disabled:#92907B;
|
||
--accent:#0F6E56; --accent-tint:#E1EEEA; --accent-deep:#084635;
|
||
--side-bg:#012019; --side-icon-act:#32C8A9;
|
||
--st-quote:#008A4D; --st-paid:#007EB8; --st-call:#9A6700; --st-new:#B94837; --st-fail:#6C60C4;
|
||
--r-sm:6px; --r-md:10px; --r-lg:14px;
|
||
--font-ui:'Inter',system-ui,sans-serif;
|
||
--font-mono:'JetBrains Mono',ui-monospace,monospace;
|
||
}
|
||
body { background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-feature-settings:'cv11','ss01'; -webkit-font-smoothing:antialiased; font-variation-settings:'opsz' 14; min-height:100vh; }
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font-family: inherit; }
|
||
a:focus-visible, button:focus-visible {
|
||
outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
|
||
}
|
||
|
||
/* Top header (dark) */
|
||
.head {
|
||
background: var(--side-bg);
|
||
color: #fff;
|
||
padding: 28px 32px 32px;
|
||
}
|
||
.head-inner { max-width: 1280px; margin: 0 auto; }
|
||
.brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:-0.012em; font-variation-settings:'opsz' 18; }
|
||
.brand .mark { width:28px; height:28px; border-radius:6px; background:#fff; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
|
||
.brand .mark svg { width:100%; height:100%; display:block; }
|
||
.brand .dot { color:var(--side-icon-act); }
|
||
.brand .tag { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.06em; padding:3px 7px; border-radius:3px; background:rgba(50,200,169,0.15); color:var(--side-icon-act); margin-left:8px; }
|
||
.head h1 { font-size:36px; font-weight:600; font-variation-settings:'opsz' 32; letter-spacing:-0.022em; line-height:1.1; margin:18px 0 10px; max-width:760px; }
|
||
.head p { font-size:14.5px; color:#B1C2BD; line-height:1.55; margin:0; max-width:680px; letter-spacing:-0.005em; }
|
||
.head-meta { font-family:var(--font-mono); font-size:11.5px; color:#7A8C87; letter-spacing:-0.005em; margin-top:18px; display:flex; gap:14px; flex-wrap:wrap; }
|
||
.head-meta .num { color: var(--side-icon-act); font-weight: 600; }
|
||
|
||
/* Quick links bar */
|
||
.quicklinks { background:#0A2A22; border-top:1px solid #1A3A30; padding: 12px 32px; }
|
||
.quicklinks-inner { max-width: 1280px; margin: 0 auto; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||
.quicklinks .label { font-family:var(--font-mono); font-size:10.5px; color:#A0B5AE; letter-spacing:0.06em; font-weight:700; }
|
||
.quicklinks a { font-size: 12.5px; color: #B1C2BD; padding: 5px 10px; border-radius: 4px; transition: background 100ms; }
|
||
.quicklinks a:hover { background: rgba(255,255,255,0.06); color: #fff; }
|
||
|
||
/* Main */
|
||
.wrap { max-width: 1280px; margin: 0 auto; padding: 40px 32px 80px; }
|
||
.section-h { margin: 36px 0 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
|
||
.section-h:first-child { margin-top: 0; }
|
||
.section-h h2 { font-size: 22px; font-weight: 600; font-variation-settings:'opsz' 24; letter-spacing:-0.018em; margin: 0; }
|
||
.section-h .label { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.06em; color:var(--accent); }
|
||
|
||
/* Card grid */
|
||
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
||
.grid.col2 { grid-template-columns: repeat(2, 1fr); }
|
||
.grid.col4 { grid-template-columns: repeat(4, 1fr); }
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
padding: 18px 20px;
|
||
display: flex; flex-direction: column; gap: 6px;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: border-color 120ms ease, transform 120ms ease;
|
||
cursor: pointer;
|
||
}
|
||
.card:hover { border-color: var(--ink-disabled); transform: translateY(-1px); }
|
||
.card .num {
|
||
font-family: var(--font-mono);
|
||
font-size: 10.5px; font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
color: var(--ink-3);
|
||
text-transform: uppercase;
|
||
}
|
||
.card .name {
|
||
font-size: 16px; font-weight: 600;
|
||
font-variation-settings:'opsz' 18;
|
||
letter-spacing: -0.012em;
|
||
margin-top: 4px;
|
||
color: var(--ink);
|
||
}
|
||
.card .desc {
|
||
font-size: 12.5px;
|
||
color: var(--ink-2);
|
||
line-height: 1.5;
|
||
letter-spacing: -0.005em;
|
||
margin-top: 4px;
|
||
flex: 1;
|
||
}
|
||
.card .open {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
margin-top: 8px;
|
||
color: var(--accent);
|
||
font-size: 12px; font-weight: 500;
|
||
}
|
||
.card .open svg { width: 11px; height: 11px; stroke-width: 1.7; }
|
||
|
||
/* Doc cards (markdown) */
|
||
.card.doc { border-left: 3px solid var(--accent); padding-left: 17px; }
|
||
|
||
/* Status pill on cards */
|
||
.pill {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
padding: 2px 8px;
|
||
border-radius: 100px;
|
||
font-family: var(--font-mono);
|
||
font-size: 10px; font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
width: fit-content;
|
||
}
|
||
.pill.ready { background: var(--accent-tint); color: var(--accent-deep); }
|
||
.pill.ready::before { content: '●'; color: var(--accent); margin-right: 2px; }
|
||
|
||
/* Brand & tokens preview blocks */
|
||
.tokens {
|
||
background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
|
||
padding: 22px 24px;
|
||
font-family: var(--font-mono);
|
||
font-size: 12.5px;
|
||
overflow-x: auto;
|
||
}
|
||
.tokens pre { margin: 0; line-height: 1.6; color: var(--ink-2); white-space: pre; }
|
||
.tokens .v { color: var(--accent); font-weight: 600; }
|
||
.tokens .c { color: var(--ink-3); font-style: normal; }
|
||
|
||
/* Palette swatches */
|
||
.swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
|
||
.sw { display: flex; flex-direction: column; gap: 4px; }
|
||
.sw .chip { height: 36px; border-radius: var(--r-sm); border: 1px solid var(--hairline-soft); }
|
||
.sw .label { font-size: 9.5px; color: var(--ink-3); font-family: var(--font-mono); font-feature-settings:'tnum'; letter-spacing:-0.005em; text-align:center; }
|
||
|
||
/* 14 status grid */
|
||
.statuses { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
|
||
.st-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
|
||
.st-card .top { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
|
||
.st-card .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; position: relative; }
|
||
.st-card .dot::after { content:''; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(10,19,25,0.10); }
|
||
.st-card .hex { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing:-0.005em; }
|
||
|
||
/* Brand display */
|
||
.brand-row {
|
||
display: grid;
|
||
grid-template-columns: 280px 1fr;
|
||
gap: 18px;
|
||
}
|
||
.brand-render {
|
||
background: var(--side-bg);
|
||
border-radius: var(--r-md);
|
||
padding: 36px 24px;
|
||
display: flex; flex-direction: column; align-items: center; gap: 14px;
|
||
}
|
||
.brand-render .big-mark { width: 80px; height: 80px; border-radius: 18px; background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
|
||
.brand-render .big-mark svg { width: 100%; height: 100%; }
|
||
.brand-render .wm { font-size: 28px; font-weight: 600; color: #fff; font-variation-settings:'opsz' 28; letter-spacing: -0.022em; }
|
||
.brand-render .wm .dot { color: var(--side-icon-act); }
|
||
.brand-info {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
padding: 22px 24px;
|
||
}
|
||
.brand-info dl { display: grid; grid-template-columns: 140px 1fr; row-gap: 10px; column-gap: 18px; margin: 0; font-size: 12.5px; }
|
||
.brand-info dt { color: var(--ink-3); font-size: 11px; font-weight: 500; padding-top: 2px; letter-spacing: -0.005em; }
|
||
.brand-info dd { margin: 0; color: var(--ink); letter-spacing: -0.005em; }
|
||
.brand-info dd.mono { font-family: var(--font-mono); font-feature-settings:'tnum'; font-size: 12px; }
|
||
|
||
@media (max-width: 1100px) {
|
||
.grid { grid-template-columns: 1fr 1fr; }
|
||
.grid.col4 { grid-template-columns: 1fr 1fr; }
|
||
.swatches { grid-template-columns: repeat(4, 1fr); }
|
||
.statuses { grid-template-columns: repeat(3, 1fr); }
|
||
.brand-row { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.head { padding: 22px 18px 24px; }
|
||
.head h1 { font-size: 28px; }
|
||
.quicklinks { padding: 10px 18px; }
|
||
.wrap { padding: 28px 18px 60px; }
|
||
.grid, .grid.col2, .grid.col4 { grid-template-columns: 1fr; }
|
||
.swatches, .statuses { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="head">
|
||
<div class="head-inner">
|
||
<a href="#" class="brand">
|
||
<span class="mark"><svg viewBox="0 0 48 48"><path d="M16 14 L16 34 L32 34" stroke="#012019" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg></span>
|
||
<span style="color:#fff">Лидерра<span class="dot">.</span></span>
|
||
<span class="tag">DEV HUB</span>
|
||
</a>
|
||
<h1>Всё, что нужно разработчику для портала Лидерра.</h1>
|
||
<p>Дизайн-система v8 Forest, 25 живых HTML-макетов, токены, компонентная библиотека и полный handoff. Production-ready по разметке, нужна только интеграция с реальными данными.</p>
|
||
<div class="head-meta">
|
||
<span><span class="num">25</span> макетов</span>
|
||
<span><span class="num">0</span> axe violations · WCAG 2.1 AA</span>
|
||
<span><span class="num">14</span> OKLCH-статусов · ΔE2000 ≥ 10.57</span>
|
||
<span><span class="num">4</span> viewports проверено · 1680/1440/768/375</span>
|
||
<span>v8 Forest · 2026-05-07</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<nav class="quicklinks" aria-label="Быстрые ссылки">
|
||
<div class="quicklinks-inner">
|
||
<span class="label">QUICK LINKS</span>
|
||
<a href="DEVELOPER_HANDOFF.md">📘 Полный handoff (markdown)</a>
|
||
<a href="BRANDBOOK_v2.md">🎨 Brandbook v2</a>
|
||
<a href="#screens">25 экранов</a>
|
||
<a href="#tokens">CSS токены</a>
|
||
<a href="#statuses">14 статусов</a>
|
||
<a href="../palette_v7.py">palette_v7.py</a>
|
||
<a href="../palette_14.py">palette_14.py</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="wrap">
|
||
|
||
<!-- ===== BRAND ===== -->
|
||
<header class="section-h">
|
||
<h2>Бренд</h2>
|
||
<span class="label">01 · brand</span>
|
||
</header>
|
||
<div class="brand-row">
|
||
<div class="brand-render">
|
||
<span class="big-mark"><svg viewBox="0 0 48 48"><path d="M16 14 L16 34 L32 34" stroke="#012019" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg></span>
|
||
<span class="wm">Лидерра<span class="dot">.</span></span>
|
||
</div>
|
||
<div class="brand-info">
|
||
<dl>
|
||
<dt>Имя</dt><dd>Лидерра (Liderra)</dd>
|
||
<dt>Wordmark</dt><dd>Лидерра<span style="color:var(--accent);font-weight:600">.</span> · с Teal-точкой</dd>
|
||
<dt>Знак</dt><dd>L-Square: белый rounded-square + dark stroke L + Teal-точка</dd>
|
||
<dt>Tone of voice</dt><dd>Уверенный, технический, прямой про деньги</dd>
|
||
<dt>Не использовать</dt><dd>«Лидпоток» (старое имя), lowercase «лидерра.»</dd>
|
||
<dt>Бренд-цвет</dt><dd class="mono">Teal #0F6E56 · oklch(0.46 0.10 175)</dd>
|
||
<dt>Bright variant</dt><dd class="mono">#32C8A9 · для иконок на тёмном sidebar</dd>
|
||
<dt>Палитра</dt><dd>Forest: warm ivory main + deep teal-noir sidebar</dd>
|
||
</dl>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== TOKENS ===== -->
|
||
<header class="section-h" id="tokens">
|
||
<h2>Дизайн-токены</h2>
|
||
<span class="label">02 · tokens</span>
|
||
</header>
|
||
|
||
<div style="margin-bottom: 16px">
|
||
<div style="font-size: 13px; color: var(--ink-2); margin-bottom: 14px; max-width: 760px; line-height: 1.55; letter-spacing: -0.005em">
|
||
Все цвета через OKLCH с проверкой WCAG AA. Скопировать в <code style="font-family:var(--font-mono);background:var(--sunken);padding:2px 6px;border-radius:3px;font-size:11.5px">assets/tokens.css</code> и подключить глобально. Полный список — в <a href="DEVELOPER_HANDOFF.md#3-дизайн-токены--css-variables" style="color:var(--accent);font-weight:500">handoff §3</a>.
|
||
</div>
|
||
|
||
<div class="tokens" tabindex="0" role="region" aria-label="CSS-токены палитры">
|
||
<pre>:root {
|
||
<span class="c">/* Поверхности (Forest light) */</span>
|
||
--bg: <span class="v">#F6F3EC</span>; <span class="c">/* page bg */</span>
|
||
--surface: <span class="v">#FFFDFA</span>; <span class="c">/* карточки */</span>
|
||
--sunken: <span class="v">#F0EDE4</span>;
|
||
--hairline: <span class="v">#D9D5CD</span>;
|
||
--hairline-soft: <span class="v">#E8E3D6</span>;
|
||
|
||
<span class="c">/* Текст */</span>
|
||
--ink: <span class="v">#081319</span>; <span class="c">/* 16.96:1 на bg */</span>
|
||
--ink-2: <span class="v">#343C41</span>; <span class="c">/* 10.34:1 */</span>
|
||
--ink-3: <span class="v">#66635C</span>; <span class="c">/* 5.42:1 */</span>
|
||
--ink-disabled: <span class="v">#92907B</span>; <span class="c">/* 3.48:1 — для UI, не для текста */</span>
|
||
|
||
<span class="c">/* Бренд */</span>
|
||
--accent: <span class="v">#0F6E56</span>; <span class="c">/* Teal · 5.94:1 на bg */</span>
|
||
--accent-tint: <span class="v">#E1EEEA</span>;
|
||
--accent-deep: <span class="v">#084635</span>;
|
||
|
||
<span class="c">/* Sidebar (тёмный) */</span>
|
||
--side-bg: <span class="v">#012019</span>;
|
||
--side-text: <span class="v">#B1C2BD</span>; <span class="c">/* 9.23:1 */</span>
|
||
--side-active: <span class="v">#13382F</span>;
|
||
--side-icon-act: <span class="v">#32C8A9</span>; <span class="c">/* bright Teal · 8.15:1 */</span>
|
||
}</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="font-size:14px;font-weight:600;margin:20px 0 10px;color:var(--ink-2);font-variation-settings:'opsz' 16">Поверхности и текст</h3>
|
||
<div class="swatches">
|
||
<div class="sw"><div class="chip" style="background:#F6F3EC"></div><div class="label">bg<br>F6F3EC</div></div>
|
||
<div class="sw"><div class="chip" style="background:#FFFDFA"></div><div class="label">surface<br>FFFDFA</div></div>
|
||
<div class="sw"><div class="chip" style="background:#F0EDE4"></div><div class="label">sunken<br>F0EDE4</div></div>
|
||
<div class="sw"><div class="chip" style="background:#D9D5CD"></div><div class="label">hairline<br>D9D5CD</div></div>
|
||
<div class="sw"><div class="chip" style="background:#081319"></div><div class="label">ink<br>081319</div></div>
|
||
<div class="sw"><div class="chip" style="background:#343C41"></div><div class="label">ink-2<br>343C41</div></div>
|
||
<div class="sw"><div class="chip" style="background:#66635C"></div><div class="label">ink-3<br>66635C</div></div>
|
||
</div>
|
||
|
||
<h3 style="font-size:14px;font-weight:600;margin:24px 0 10px;color:var(--ink-2);font-variation-settings:'opsz' 16">Бренд и sidebar</h3>
|
||
<div class="swatches">
|
||
<div class="sw"><div class="chip" style="background:#0F6E56"></div><div class="label">accent<br>0F6E56</div></div>
|
||
<div class="sw"><div class="chip" style="background:#084635"></div><div class="label">accent-deep<br>084635</div></div>
|
||
<div class="sw"><div class="chip" style="background:#E1EEEA"></div><div class="label">accent-tint<br>E1EEEA</div></div>
|
||
<div class="sw"><div class="chip" style="background:#012019"></div><div class="label">side-bg<br>012019</div></div>
|
||
<div class="sw"><div class="chip" style="background:#13382F"></div><div class="label">side-active<br>13382F</div></div>
|
||
<div class="sw"><div class="chip" style="background:#B1C2BD"></div><div class="label">side-text<br>B1C2BD</div></div>
|
||
<div class="sw"><div class="chip" style="background:#32C8A9"></div><div class="label">side-icon-act<br>32C8A9</div></div>
|
||
</div>
|
||
|
||
<!-- ===== STATUS PALETTE ===== -->
|
||
<header class="section-h" id="statuses">
|
||
<h2>14 статусов воронки</h2>
|
||
<span class="label">03 · status palette · ΔE2000 ≥ 10.57</span>
|
||
</header>
|
||
|
||
<div style="font-size:13px;color:var(--ink-2);margin-bottom:14px;max-width:760px;line-height:1.55;letter-spacing:-0.005em">
|
||
OKLCH-распределённые solid цвета для status-dots. Repulsion-итерация в <a href="../palette_14.py" style="color:var(--accent);font-weight:500">palette_14.py</a> гарантирует ΔE2000 ≥ 10 между соседними парами — статусы визуально различимы даже при цветовой слепоте средней степени.
|
||
</div>
|
||
|
||
<div class="statuses">
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#B94837"></span>Новая</div><div class="hex">#B94837</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#B35100"></span>В работе</div><div class="hex">#B35100</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#9A6700"></span>Дозвон</div><div class="hex">#9A6700</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#7E7500"></span>Не дозвон.</div><div class="hex">#7E7500</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#538200"></span>Переговоры</div><div class="hex">#538200</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#008A4D"></span>КП отправл.</div><div class="hex">#008A4D</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#008C7E"></span>Думает</div><div class="hex">#008C7E</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#00889B"></span>Ждёт оплату</div><div class="hex">#00889B</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#007EB8"></span>Оплачено</div><div class="hex">#007EB8</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#406DC8"></span>Возврат</div><div class="hex">#406DC8</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#6C60C4"></span>Отказ</div><div class="hex">#6C60C4</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#9052AE"></span>Дубликат</div><div class="hex">#9052AE</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#AA4788"></span>Спам</div><div class="hex">#AA4788</div></div>
|
||
<div class="st-card"><div class="top"><span class="dot" style="background:#B7445F"></span>Архив</div><div class="hex">#B7445F</div></div>
|
||
</div>
|
||
|
||
<!-- ===== SCREENS ===== -->
|
||
<header class="section-h" id="screens">
|
||
<h2>25 макетов</h2>
|
||
<span class="label">04 · screens · все 0 axe violations</span>
|
||
</header>
|
||
|
||
<h3 style="font-size:14px;font-weight:600;margin:8px 0 10px;color:var(--ink-2);font-variation-settings:'opsz' 16">Кабинет тенанта (8)</h3>
|
||
<div class="grid">
|
||
<a class="card" href="../concepts/v8_dashboard.html" target="_blank">
|
||
<span class="num">02 · /dashboard</span>
|
||
<span class="name">Дашборд</span>
|
||
<span class="desc">KPI strip · Hero balance с runway · Activity chart · Funnel · Recent deals · System health · Quick actions</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
<span class="open">Открыть макет <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_deals.html" target="_blank">
|
||
<span class="num">03 · /deals</span>
|
||
<span class="name">Список сделок</span>
|
||
<span class="desc">Таблица 14 строк · 14 status-chips · sticky thead · selected-row solid fill · slide-over drawer открыт</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
<span class="open">Открыть макет <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_deal_card.html" target="_blank">
|
||
<span class="num">04 · /deals/{id}</span>
|
||
<span class="name">Карточка сделки</span>
|
||
<span class="desc">Hero + параметры + комментарий с 8 шаблонами + напоминание · aside: менеджер + метрики + history (timeline)</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
<span class="open">Открыть макет <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_kanban.html" target="_blank">
|
||
<span class="num">05 · /deals/kanban</span>
|
||
<span class="name">Канбан-доска</span>
|
||
<span class="desc">14 колонок DnD (виртуализация-ready) · карточки с иконками 🔥 / ⏰ / ✓ · optimistic UI</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
<span class="open">Открыть макет <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_billing.html" target="_blank">
|
||
<span class="num">06 · /billing</span>
|
||
<span class="name">Биллинг и тарифы</span>
|
||
<span class="desc">Кошелёк ₽ · ГЦК баланс лидов · runway · pending-banner · история транзакций · счета и УПД (1С 8.3 XML)</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
<span class="open">Открыть макет <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_settings.html" target="_blank">
|
||
<span class="num">07 · /settings</span>
|
||
<span class="name">Настройки</span>
|
||
<span class="desc">8 вкладок · Профиль · Безопасность · Проекты · Команда · API/Webhook · Интеграции · Тихие часы · Уведомления</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
<span class="open">Открыть макет <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_reports.html" target="_blank">
|
||
<span class="num">08 · /reports</span>
|
||
<span class="name">Отчёты</span>
|
||
<span class="desc">Форма запроса · 4 типа · 4 формата · jobs (done / running с progressbar / queued / failed + retry) · квота 2/3</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
<span class="open">Открыть макет <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_login.html" target="_blank">
|
||
<span class="num">01 · /login и др.</span>
|
||
<span class="name">Вход / Регистр / 2FA</span>
|
||
<span class="desc">5 состояний: login · register с zxcvbn · 2FA (6-cell код) · forgot password · 8 recovery codes</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
<span class="open">Открыть макет <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
</div>
|
||
|
||
<h3 style="font-size:14px;font-weight:600;margin:24px 0 10px;color:var(--ink-2);font-variation-settings:'opsz' 16">Экраны ошибок (3)</h3>
|
||
<div class="grid col4">
|
||
<a class="card" href="../concepts/v8_errors.html#404" target="_blank">
|
||
<span class="num">09 · 404</span>
|
||
<span class="name">Не найдено</span>
|
||
<span class="desc">Декоративный SVG-маркер · кнопки «На дашборд» / «Назад» · mailto support</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_errors.html#403" target="_blank">
|
||
<span class="num">10 · 403</span>
|
||
<span class="name">Нет доступа</span>
|
||
<span class="desc">Replace-key SVG · REQ-id для копирования · контакт поддержки</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_errors.html#500" target="_blank">
|
||
<span class="num">11 · 500/503</span>
|
||
<span class="name">Сервис недоступен</span>
|
||
<span class="desc">Status-list (API/Telegram/YooKassa) · INC-id · ссылка на status page</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_errors.html" target="_blank">
|
||
<span class="num">все 3</span>
|
||
<span class="name">Switcher</span>
|
||
<span class="desc">Открыть файл с переключателем между состояниями</span>
|
||
<span class="open">Открыть <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
</div>
|
||
|
||
<h3 style="font-size:14px;font-weight:600;margin:24px 0 10px;color:var(--ink-2);font-variation-settings:'opsz' 16">Админка SaaS (6) · admin.liderra.app</h3>
|
||
<div class="grid">
|
||
<a class="card" href="../concepts/v8_admin.html#login" target="_blank">
|
||
<span class="num">12 · /admin/login</span>
|
||
<span class="name">SSO Yandex 360</span>
|
||
<span class="desc">Yandex 360 primary + локальный 2FA fallback · rate-limit 5/15 · captcha</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_admin.html#tenants" target="_blank">
|
||
<span class="num">13 · /admin/tenants</span>
|
||
<span class="name">Список тенантов</span>
|
||
<span class="desc">142 тенанта · фильтры · 4 статус-чипа (active/trial/overdue/suspended) · MRR · желаем×факт</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_admin.html#tenant-card" target="_blank">
|
||
<span class="num">14 · /admin/tenants/{id}</span>
|
||
<span class="name">Карточка тенанта</span>
|
||
<span class="desc">Профиль · баланс · корректировки · impersonation · удаление 152-ФЗ · журнал действий</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_admin.html#impersonation" target="_blank">
|
||
<span class="num">15 · impersonation</span>
|
||
<span class="name">Войти как клиент</span>
|
||
<span class="desc">Красный sticky banner · спец. avatar «Админ → ИП» · обязательный reason</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_admin.html#incidents" target="_blank">
|
||
<span class="num">16 · /admin/incidents</span>
|
||
<span class="name">Журнал инцидентов</span>
|
||
<span class="desc">HIGH/MED/LOW · read-only для compliance · webhook timeout / RLS bypass / payment retry</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_admin.html#system" target="_blank">
|
||
<span class="num">17 · /admin/system</span>
|
||
<span class="name">System settings</span>
|
||
<span class="desc">6 sys-cards: settings/tariffs/legal/payment/webhook_log/auth_log · только super_admin</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
</div>
|
||
|
||
<h3 style="font-size:14px;font-weight:600;margin:24px 0 10px;color:var(--ink-2);font-variation-settings:'opsz' 16">Лендинг и юр. (4)</h3>
|
||
<div class="grid col4">
|
||
<a class="card" href="../concepts/v8_landing.html#home" target="_blank">
|
||
<span class="num">18 · /</span>
|
||
<span class="name">Главная</span>
|
||
<span class="desc">Hero + 3 hi-cards · 6 features · 4 tariffs · FAQ · footer (контент Lorem ipsum, Диз-4 закрыт)</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_landing.html#pricing" target="_blank">
|
||
<span class="num">19 · /pricing</span>
|
||
<span class="name">Тарифы</span>
|
||
<span class="desc">4 заглушки · Start/Basic/Команда POPULAR/Enterprise · цены 1.00 ₽ на MVP</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_landing.html#offer" target="_blank">
|
||
<span class="num">20 · /legal/offer</span>
|
||
<span class="name">Договор-оферта</span>
|
||
<span class="desc">TOC · 8 разделов · шаблон Прил. Ж · ждёт регистрации ООО (Б-1)</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
<a class="card" href="../concepts/v8_landing.html#privacy" target="_blank">
|
||
<span class="num">21 · /legal/privacy</span>
|
||
<span class="name">Политика</span>
|
||
<span class="desc">TOC · 10 разделов · 152-ФЗ compliant · Yandex Cloud РФ</span>
|
||
<span class="pill ready">PROD-READY</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- ===== DOCS ===== -->
|
||
<header class="section-h">
|
||
<h2>Документация</h2>
|
||
<span class="label">05 · docs</span>
|
||
</header>
|
||
<div class="grid col2">
|
||
<a class="card doc" href="DEVELOPER_HANDOFF.md">
|
||
<span class="num">📘 HANDOFF</span>
|
||
<span class="name">Developer Handoff</span>
|
||
<span class="desc">Главный документ. Стек, архитектура, токены, типографика, компоненты, все 25 экранов, WCAG-правила, Vue 3 + Vuetify 3 mapping, API hints, тестирование, FAQ. Открой первым.</span>
|
||
<span class="open">Открыть <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card doc" href="BRANDBOOK_v2.md">
|
||
<span class="num">🎨 BRAND</span>
|
||
<span class="name">Brandbook v2</span>
|
||
<span class="desc">Имя, лого, палитра, типографика, do/don't, голос бренда, использование Teal #0F6E56. Деприкейтит старый брендбук Лидпоток v1.1.</span>
|
||
<span class="open">Открыть <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card doc" href="../concepts/v8_brand.html" target="_blank">
|
||
<span class="num">BR-1</span>
|
||
<span class="name">10 имён + 5 логотипов (архив)</span>
|
||
<span class="desc">Все варианты, рассмотренные при выборе. Лидерра + L-Square — финальный выбор.</span>
|
||
<span class="open">Открыть <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
<a class="card doc" href="../concepts/v8_palette_options.html" target="_blank">
|
||
<span class="num">BR-2</span>
|
||
<span class="name">5 палитр на выбор (архив)</span>
|
||
<span class="desc">А Graphite · Б Forest (выбран) · В Slate-Blue · Г Champagne · Д Inverted Hero. Архив выбора палитры.</span>
|
||
<span class="open">Открыть <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- ===== TECH ARTIFACTS ===== -->
|
||
<header class="section-h">
|
||
<h2>Технические артефакты</h2>
|
||
<span class="label">06 · scripts & sources</span>
|
||
</header>
|
||
<div class="grid">
|
||
<a class="card" href="../palette_v7.py">
|
||
<span class="num">.py · OKLCH</span>
|
||
<span class="name">palette_v7.py</span>
|
||
<span class="desc">Расчёт всех cool-tech токенов с WCAG-проверкой. Python 3 + colour-science. Базовая палитра (унаследована Forest).</span>
|
||
</a>
|
||
<a class="card" href="../palette_14.py">
|
||
<span class="num">.py · OKLCH</span>
|
||
<span class="name">palette_14.py</span>
|
||
<span class="desc">14 hue-распределённых статусов с repulsion-итерацией. min ΔE2000 = 10.57. min/max/mean — выводит в console.</span>
|
||
</a>
|
||
<a class="card" href="../palette_options.py">
|
||
<span class="num">.py · OKLCH</span>
|
||
<span class="name">palette_options.py</span>
|
||
<span class="desc">5 вариантов палитры (А/Б/В/Г/Д) с side-by-side WCAG verification всех ключевых пар.</span>
|
||
</a>
|
||
<a class="card" href="../v4_critic.py">
|
||
<span class="num">.py · audit</span>
|
||
<span class="name">v4_critic.py</span>
|
||
<span class="desc">Критика старого v4 (cream + Instrument Serif). Контрасты, ΔE2000 между chip-фонами. Архив.</span>
|
||
</a>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
</body>
|
||
</html>
|