Дмитрий
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>
1439 lines
60 KiB
HTML
1439 lines
60 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>v8 · Сделки — Лидерра (Forest)</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; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.has-motion { animation: none !important; transition: none !important; }
|
||
}
|
||
|
||
:root {
|
||
/* v8 Forest — warm ivory main + deep teal-noir sidebar (palette_options.py) */
|
||
--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;
|
||
|
||
/* Forest sidebar tokens */
|
||
--side-bg: #012019;
|
||
--side-text: #B1C2BD;
|
||
--side-text-2: #7A8C87;
|
||
--side-active: #13382F;
|
||
--side-icon: #5C7A72;
|
||
--side-icon-act: #32C8A9;
|
||
--side-hover: #0A2A22;
|
||
--side-border: #1A3A30;
|
||
|
||
/* 14 funnel statuses — OKLCH (palette_14.py, min ΔE2000 = 10.57) */
|
||
--st-new-tint: #FFD8CF; --st-new-solid: #B94837;
|
||
--st-work-tint: #FFDBC4; --st-work-solid: #B35100;
|
||
--st-call-tint: #F6E2BC; --st-call-solid: #9A6700;
|
||
--st-nocall-tint: #E9E8BD; --st-nocall-solid: #7E7500;
|
||
--st-neg-tint: #D9EDC6; --st-neg-solid: #538200;
|
||
--st-quote-tint: #C7F0D7; --st-quote-solid: #008A4D;
|
||
--st-think-tint: #BCF1E9; --st-think-solid: #008C7E;
|
||
--st-wait-tint: #BAF0F6; --st-wait-solid: #00889B;
|
||
--st-paid-tint: #C0ECFF; --st-paid-solid: #007EB8;
|
||
--st-refund-tint: #D1E5FF; --st-refund-solid: #406DC8;
|
||
--st-fail-tint: #E1E0FF; --st-fail-solid: #6C60C4;
|
||
--st-dup-tint: #F2DAFF; --st-dup-solid: #9052AE;
|
||
--st-spam-tint: #FFD7EE; --st-spam-solid: #AA4788;
|
||
--st-arch-tint: #FFD6DD; --st-arch-solid: #B7445F;
|
||
|
||
--r-xs: 4px;
|
||
--r-sm: 6px;
|
||
--r-md: 10px;
|
||
--r-lg: 14px;
|
||
|
||
--font-ui: 'Inter', system-ui, sans-serif;
|
||
--font-mono:'JetBrains Mono', ui-monospace, monospace;
|
||
|
||
--row-h: 36px; /* table density: comfortable */
|
||
--row-h-compact: 28px;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: var(--font-ui);
|
||
font-feature-settings: 'cv11', 'ss01', 'ss03';
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
font-variation-settings: 'opsz' 14;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font-family: inherit; }
|
||
|
||
/* Focus — 2px ring of accent + 2px offset, WCAG 2.4.7 */
|
||
a:focus-visible, button:focus-visible, input:focus-visible,
|
||
select:focus-visible, [tabindex]:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: 2px;
|
||
border-radius: var(--r-sm);
|
||
}
|
||
|
||
.skip-link {
|
||
position: absolute; top: -40px; left: 12px;
|
||
background: var(--ink); color: #fff;
|
||
padding: 9px 16px; z-index: 200;
|
||
text-decoration: none; font-weight: 600;
|
||
border-radius: var(--r-sm);
|
||
}
|
||
.skip-link:focus { top: 12px; }
|
||
|
||
/* ============================================================
|
||
APP FRAME
|
||
============================================================ */
|
||
.app {
|
||
display: grid;
|
||
grid-template-columns: 232px 1fr;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* ===== SIDEBAR — Forest dark teal-noir ===== */
|
||
.side {
|
||
background: var(--side-bg);
|
||
border-right: 1px solid var(--side-border);
|
||
padding: 18px 12px 24px;
|
||
position: sticky; top: 0; height: 100vh;
|
||
overflow-y: auto;
|
||
color: var(--side-text);
|
||
}
|
||
.brand {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 6px 8px 18px;
|
||
font-weight: 600;
|
||
font-size: 14.5px;
|
||
letter-spacing: -0.01em;
|
||
font-variation-settings: 'opsz' 18;
|
||
color: #FFFFFF;
|
||
}
|
||
.brand-mark {
|
||
width: 22px; height: 22px;
|
||
border-radius: var(--r-xs);
|
||
background: #FFFFFF;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
.brand-mark svg { width: 100%; height: 100%; display: block; }
|
||
.brand-dot { color: var(--side-icon-act); }
|
||
.nav { display: flex; flex-direction: column; gap: 1px; }
|
||
.nav-eyebrow {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.01em;
|
||
color: var(--side-text-2);
|
||
padding: 14px 10px 6px;
|
||
}
|
||
.nav-item {
|
||
display: flex; align-items: center; gap: 10px;
|
||
height: 32px; padding: 0 10px;
|
||
border-radius: var(--r-sm);
|
||
font-size: 13px;
|
||
color: var(--side-text);
|
||
transition: background 100ms ease, color 100ms ease;
|
||
}
|
||
.nav-item.has-motion { transition: background 100ms ease, color 100ms ease; }
|
||
.nav-item:hover { background: var(--side-hover); color: #FFFFFF; }
|
||
.nav-item.active {
|
||
background: var(--side-active); color: #FFFFFF;
|
||
font-weight: 500;
|
||
}
|
||
.nav-item.active .nav-icon { color: var(--side-icon-act); }
|
||
.nav-item.active .nav-count { background: rgba(255,255,255,0.14); color: #fff; }
|
||
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--side-icon); stroke-width: 1.6; }
|
||
.nav-item:hover .nav-icon { color: #FFFFFF; }
|
||
.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.nav-count {
|
||
font-family: var(--font-mono);
|
||
font-size: 10.5px;
|
||
font-weight: 500;
|
||
font-feature-settings: 'tnum';
|
||
background: rgba(255,255,255,0.10);
|
||
color: var(--side-text);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* ===== MAIN ===== */
|
||
.main { display: flex; flex-direction: column; min-width: 0; }
|
||
|
||
.topbar {
|
||
height: 48px;
|
||
border-bottom: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
padding: 0 24px;
|
||
display: flex; align-items: center; gap: 12px;
|
||
position: sticky; top: 0; z-index: 50;
|
||
}
|
||
.crumb {
|
||
font-size: 12.5px; color: var(--ink-3);
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.crumb strong { color: var(--ink); font-weight: 500; }
|
||
.crumb svg { width: 11px; height: 11px; color: var(--ink-3); opacity: 0.5; }
|
||
.topbar-spacer { flex: 1; }
|
||
|
||
.searchbar {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
height: 30px; padding: 0 10px 0 12px;
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm);
|
||
background: var(--surface);
|
||
font-size: 12.5px; color: var(--ink-3);
|
||
cursor: pointer;
|
||
min-width: 280px;
|
||
transition: border-color 120ms ease;
|
||
}
|
||
.searchbar:hover { border-color: #BFC4C8; }
|
||
.searchbar svg { width: 13px; height: 13px; flex-shrink: 0; }
|
||
.searchbar kbd {
|
||
margin-left: auto;
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
color: var(--ink-3);
|
||
background: var(--sunken);
|
||
padding: 2px 5px;
|
||
border-radius: 3px;
|
||
border: 1px solid var(--hairline);
|
||
}
|
||
|
||
.icon-btn {
|
||
width: 30px; height: 30px;
|
||
border-radius: var(--r-sm);
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
color: var(--ink-2);
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
|
||
.icon-btn .pip {
|
||
position: absolute; top: 5px; right: 5px;
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
box-shadow: 0 0 0 2px var(--surface);
|
||
}
|
||
|
||
.user-chip {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
height: 30px; padding: 0 10px 0 4px;
|
||
border-radius: 100px;
|
||
border: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
}
|
||
.user-chip .ava {
|
||
width: 22px; height: 22px;
|
||
border-radius: 50%;
|
||
background: var(--ink); color: #fff;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 9.5px; font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.user-chip .uname { font-size: 12px; color: var(--ink); font-weight: 500; }
|
||
|
||
/* ===== CONTENT ===== */
|
||
.content { padding: 24px 28px 56px; flex: 1; }
|
||
|
||
/* Page head — no oversized display, just precise */
|
||
.page-head {
|
||
display: flex; align-items: flex-end; justify-content: space-between;
|
||
margin-bottom: 20px; gap: 16px;
|
||
}
|
||
.page-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
font-variation-settings: 'opsz' 28;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.1;
|
||
margin: 0 0 6px;
|
||
}
|
||
.page-stats {
|
||
display: flex; gap: 14px;
|
||
font-size: 12.5px;
|
||
color: var(--ink-3);
|
||
align-items: center;
|
||
}
|
||
.page-stats .num {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
color: var(--ink-2);
|
||
font-weight: 500;
|
||
}
|
||
.page-stats .accent-num { color: var(--accent); font-weight: 600; }
|
||
.page-stats .sep { color: var(--ink-disabled); }
|
||
|
||
.page-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
height: 32px; padding: 0 12px;
|
||
border-radius: var(--r-sm);
|
||
border: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
font-size: 12.5px;
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
color: var(--ink);
|
||
cursor: pointer;
|
||
transition: border-color 120ms ease, background 120ms ease;
|
||
}
|
||
.btn:hover { border-color: #BFC4C8; background: var(--sunken); }
|
||
.btn-primary {
|
||
background: var(--accent); color: #fff;
|
||
border-color: var(--accent);
|
||
}
|
||
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
|
||
.btn svg { width: 13px; height: 13px; stroke-width: 1.7; }
|
||
|
||
/* ===== FILTER BAR — segmented chips (status), search, density ===== */
|
||
.filterbar {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 8px 0 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.chiprow { display: inline-flex; gap: 2px; padding: 2px; background: var(--sunken); border-radius: var(--r-sm); }
|
||
.chiprow button {
|
||
height: 26px; padding: 0 10px;
|
||
border: none; background: transparent;
|
||
font-family: inherit;
|
||
font-size: 12px; font-weight: 500;
|
||
color: var(--ink-2);
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
letter-spacing: -0.005em;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.chiprow button.active { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
|
||
.chiprow button .badge {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 10px;
|
||
color: var(--ink-3);
|
||
font-weight: 500;
|
||
}
|
||
.chiprow button.active .badge { color: var(--accent); }
|
||
|
||
.search-input {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
flex: 1; min-width: 220px;
|
||
height: 30px; padding: 0 10px;
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm);
|
||
background: var(--surface);
|
||
}
|
||
.search-input svg { width: 13px; height: 13px; color: var(--ink-3); flex-shrink: 0; }
|
||
.search-input input {
|
||
flex: 1; min-width: 0;
|
||
border: none; outline: none; background: none;
|
||
font-family: inherit; font-size: 12.5px;
|
||
color: var(--ink);
|
||
}
|
||
.search-input input::placeholder { color: var(--ink-3); }
|
||
.search-input kbd {
|
||
font-family: var(--font-mono);
|
||
font-size: 9.5px;
|
||
color: var(--ink-3);
|
||
background: var(--sunken);
|
||
padding: 2px 4px;
|
||
border-radius: 3px;
|
||
border: 1px solid var(--hairline);
|
||
}
|
||
|
||
.fbtn {
|
||
height: 30px; padding: 0 10px;
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm);
|
||
background: var(--surface);
|
||
font-family: inherit;
|
||
font-size: 12px;
|
||
color: var(--ink-2);
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.fbtn:hover { border-color: #BFC4C8; }
|
||
.fbtn svg { width: 12px; height: 12px; color: var(--ink-3); }
|
||
.fbtn .dropdown-arrow { width: 9px; height: 9px; opacity: 0.6; }
|
||
|
||
.applied {
|
||
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
|
||
padding: 0 0 12px;
|
||
font-size: 11.5px; color: var(--ink-3);
|
||
}
|
||
.applied-chip {
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
height: 22px; padding: 0 4px 0 9px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: 100px;
|
||
font-size: 11px; color: var(--ink-2);
|
||
font-weight: 500;
|
||
}
|
||
.applied-chip button {
|
||
width: 16px; height: 16px;
|
||
border: none; background: transparent;
|
||
border-radius: 50%;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
color: var(--ink-3);
|
||
cursor: pointer;
|
||
padding: 0;
|
||
}
|
||
.applied-chip button:hover { background: var(--sunken); color: var(--ink); }
|
||
.applied-chip button svg { width: 8px; height: 8px; stroke-width: 2.5; }
|
||
.applied-clear {
|
||
border: none; background: none;
|
||
color: var(--ink-3);
|
||
text-decoration: underline; text-underline-offset: 3px;
|
||
font-size: 11px; cursor: pointer;
|
||
font-family: inherit;
|
||
padding: 0 6px;
|
||
}
|
||
.applied-clear:hover { color: var(--ink); }
|
||
|
||
/* ===== TABLE — hairline-only, no shadows ===== */
|
||
.tbl-wrap {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
overflow: hidden;
|
||
}
|
||
.tbl {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
.tbl thead th {
|
||
text-align: left;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.005em;
|
||
color: var(--ink-2);
|
||
padding: 10px 14px;
|
||
background: var(--sunken);
|
||
border-bottom: 1px solid var(--hairline);
|
||
white-space: nowrap;
|
||
position: sticky; top: 0;
|
||
}
|
||
.tbl thead th.sortable { cursor: pointer; user-select: none; }
|
||
.tbl thead th.sortable:hover { color: var(--ink); }
|
||
.tbl thead th.sortable .arrow { display: inline-block; margin-left: 4px; opacity: 0.55; font-family: var(--font-mono); font-size: 9.5px; }
|
||
.tbl thead th.sortable.is-sort .arrow { opacity: 1; color: var(--accent); }
|
||
.tbl thead th.cb-col { width: 36px; padding-right: 0; }
|
||
.tbl thead th.act-col { text-align: right; }
|
||
.tbl thead th.num { text-align: right; font-family: var(--font-mono); font-feature-settings: 'tnum'; }
|
||
|
||
.tbl tbody tr {
|
||
border-bottom: 1px solid var(--hairline-soft);
|
||
cursor: pointer;
|
||
transition: background 80ms ease;
|
||
}
|
||
.tbl tbody tr:hover { background: var(--sunken); }
|
||
.tbl tbody tr:last-child { border-bottom: none; }
|
||
.tbl tbody tr.selected { background: var(--ink); color: #fff; }
|
||
.tbl tbody tr.selected:hover { background: var(--ink); }
|
||
.tbl tbody tr.selected .deal-phone,
|
||
.tbl tbody tr.selected .cell-product,
|
||
.tbl tbody tr.selected .cell-manager,
|
||
.tbl tbody tr.selected .num-soft,
|
||
.tbl tbody tr.selected .cell-time { color: rgba(255,255,255,0.65); }
|
||
.tbl tbody tr.selected .cb { background: #fff; color: var(--ink); border-color: #fff; }
|
||
.tbl tbody tr.selected .row-action { color: rgba(255,255,255,0.7); }
|
||
.tbl tbody tr.selected .row-action:hover { background: rgba(255,255,255,0.12); color: #fff; }
|
||
|
||
.tbl tbody td {
|
||
padding: 9px 14px;
|
||
vertical-align: middle;
|
||
height: var(--row-h);
|
||
}
|
||
.tbl.is-compact tbody td { padding: 5px 14px; height: var(--row-h-compact); }
|
||
|
||
.cb {
|
||
width: 16px; height: 16px;
|
||
border: 1.5px solid var(--ink-disabled);
|
||
border-radius: 4px;
|
||
background: var(--surface);
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
vertical-align: middle;
|
||
transition: border-color 100ms ease;
|
||
}
|
||
.cb:hover { border-color: var(--ink-2); }
|
||
.cb.checked { background: var(--ink); border-color: var(--ink); color: #fff; }
|
||
.cb svg { width: 10px; height: 10px; stroke-width: 3; }
|
||
|
||
/* deal cell with hairline-ring avatar */
|
||
.cell-deal { display: flex; align-items: center; gap: 10px; }
|
||
.deal-avatar {
|
||
width: 26px; height: 26px;
|
||
border-radius: 50%;
|
||
background: var(--sunken);
|
||
color: var(--ink-2);
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 9.5px; font-weight: 600;
|
||
flex-shrink: 0;
|
||
letter-spacing: 0.02em;
|
||
position: relative;
|
||
}
|
||
.deal-avatar::after {
|
||
content: ''; position: absolute; inset: 0;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(10,19,25,0.08);
|
||
pointer-events: none;
|
||
}
|
||
.tbl tbody tr.selected .deal-avatar {
|
||
background: rgba(255,255,255,0.10);
|
||
color: #fff;
|
||
}
|
||
.tbl tbody tr.selected .deal-avatar::after { border-color: rgba(255,255,255,0.20); }
|
||
|
||
.deal-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
|
||
.deal-name {
|
||
font-weight: 500; color: inherit;
|
||
letter-spacing: -0.005em;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
max-width: 180px;
|
||
font-size: 13px;
|
||
}
|
||
.deal-phone {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
letter-spacing: -0.005em;
|
||
}
|
||
|
||
/* status chip — dot + text, NO background by default (premium-quiet) */
|
||
.chip {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--ink);
|
||
letter-spacing: -0.005em;
|
||
white-space: nowrap;
|
||
}
|
||
.chip .dot {
|
||
width: 7px; height: 7px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
.chip .dot::after {
|
||
content: ''; position: absolute; inset: -1px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(10,19,25,0.10);
|
||
}
|
||
.tbl tbody tr.selected .chip .dot::after { border-color: rgba(255,255,255,0.18); }
|
||
|
||
.chip-new .dot { background: var(--st-new-solid); }
|
||
.chip-work .dot { background: var(--st-work-solid); }
|
||
.chip-call .dot { background: var(--st-call-solid); }
|
||
.chip-nocall .dot { background: var(--st-nocall-solid); }
|
||
.chip-neg .dot { background: var(--st-neg-solid); }
|
||
.chip-quote .dot { background: var(--st-quote-solid); }
|
||
.chip-think .dot { background: var(--st-think-solid); }
|
||
.chip-wait .dot { background: var(--st-wait-solid); }
|
||
.chip-paid .dot { background: var(--st-paid-solid); }
|
||
.chip-refund .dot { background: var(--st-refund-solid); }
|
||
.chip-fail .dot { background: var(--st-fail-solid); }
|
||
.chip-dup .dot { background: var(--st-dup-solid); }
|
||
.chip-spam .dot { background: var(--st-spam-solid); }
|
||
.chip-arch .dot { background: var(--st-arch-solid); }
|
||
|
||
/* tinted variant — used in drawer "current status" emphasis */
|
||
.chip-tinted {
|
||
padding: 3px 9px 3px 7px;
|
||
border-radius: 100px;
|
||
}
|
||
.chip-tinted.chip-new { background: var(--st-new-tint); }
|
||
.chip-tinted.chip-work { background: var(--st-work-tint); }
|
||
.chip-tinted.chip-call { background: var(--st-call-tint); }
|
||
.chip-tinted.chip-nocall { background: var(--st-nocall-tint); }
|
||
.chip-tinted.chip-neg { background: var(--st-neg-tint); }
|
||
.chip-tinted.chip-quote { background: var(--st-quote-tint); }
|
||
.chip-tinted.chip-think { background: var(--st-think-tint); }
|
||
.chip-tinted.chip-wait { background: var(--st-wait-tint); }
|
||
.chip-tinted.chip-paid { background: var(--st-paid-tint); }
|
||
.chip-tinted.chip-refund { background: var(--st-refund-tint); }
|
||
.chip-tinted.chip-fail { background: var(--st-fail-tint); }
|
||
.chip-tinted.chip-dup { background: var(--st-dup-tint); }
|
||
.chip-tinted.chip-spam { background: var(--st-spam-tint); }
|
||
.chip-tinted.chip-arch { background: var(--st-arch-tint); }
|
||
|
||
.cell-product { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
|
||
.cell-manager {
|
||
display: flex; align-items: center; gap: 6px;
|
||
color: var(--ink-2);
|
||
font-size: 12.5px;
|
||
}
|
||
.mini-ava {
|
||
width: 18px; height: 18px;
|
||
border-radius: 50%;
|
||
background: var(--sunken);
|
||
color: var(--ink-2);
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 8px; font-weight: 600;
|
||
position: relative;
|
||
}
|
||
.mini-ava::after {
|
||
content: ''; position: absolute; inset: 0;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(10,19,25,0.08);
|
||
}
|
||
.tbl tbody tr.selected .mini-ava {
|
||
background: rgba(255,255,255,0.12);
|
||
color: rgba(255,255,255,0.92);
|
||
}
|
||
|
||
.num {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 12.5px;
|
||
color: var(--ink);
|
||
text-align: right;
|
||
font-weight: 500;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.num-soft { color: var(--ink-disabled); }
|
||
.cell-time {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
white-space: nowrap;
|
||
text-align: right;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
|
||
.cell-actions { text-align: right; white-space: nowrap; }
|
||
.row-action {
|
||
width: 24px; height: 24px;
|
||
border: none; background: none;
|
||
color: var(--ink-3);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
}
|
||
.row-action:hover { background: rgba(10,19,25,0.06); color: var(--ink); }
|
||
.row-action svg { width: 13px; height: 13px; stroke-width: 1.7; }
|
||
|
||
.tbl-foot {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 10px 16px;
|
||
border-top: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
font-size: 12px; color: var(--ink-2);
|
||
}
|
||
.tbl-foot .lo { display: flex; align-items: center; gap: 14px; }
|
||
.tbl-foot .lo .num-line { font-family: var(--font-mono); font-feature-settings: 'tnum'; color: var(--ink-2); }
|
||
.tbl-foot .lo .num-line strong { color: var(--ink); font-weight: 600; }
|
||
.density-toggle {
|
||
display: inline-flex; gap: 1px;
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-xs);
|
||
padding: 1px;
|
||
background: var(--surface);
|
||
}
|
||
.density-toggle button {
|
||
height: 22px; padding: 0 8px;
|
||
border: none; background: transparent;
|
||
font-family: inherit; font-size: 11px; color: var(--ink-3);
|
||
cursor: pointer; border-radius: 3px;
|
||
}
|
||
.density-toggle button.active { background: var(--ink); color: #fff; }
|
||
|
||
.pager { display: inline-flex; gap: 2px; align-items: center; }
|
||
.pager button {
|
||
height: 26px; min-width: 26px; padding: 0 8px;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-xs);
|
||
background: transparent;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px; font-weight: 500;
|
||
color: var(--ink-2);
|
||
cursor: pointer;
|
||
}
|
||
.pager button:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }
|
||
.pager button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
|
||
.pager button:disabled { opacity: 0.35; cursor: not-allowed; }
|
||
.pager .ellipsis { padding: 0 4px; color: var(--ink-3); font-size: 12px; }
|
||
|
||
/* ============================================================
|
||
SLIDE-OVER DRAWER — open static for demo
|
||
============================================================ */
|
||
.scrim {
|
||
position: fixed; inset: 0;
|
||
background: rgba(10,19,25,0.18);
|
||
z-index: 90;
|
||
backdrop-filter: blur(2px);
|
||
-webkit-backdrop-filter: blur(2px);
|
||
}
|
||
.drawer {
|
||
position: fixed; top: 0; right: 0; bottom: 0;
|
||
width: 440px;
|
||
background: var(--surface);
|
||
border-left: 1px solid var(--hairline);
|
||
z-index: 100;
|
||
display: flex; flex-direction: column;
|
||
overflow: hidden;
|
||
box-shadow: -16px 0 40px rgba(10,19,25,0.10);
|
||
}
|
||
|
||
.drawer-head {
|
||
padding: 18px 22px 14px;
|
||
border-bottom: 1px solid var(--hairline);
|
||
display: flex; align-items: flex-start; justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.drawer-title-block { min-width: 0; }
|
||
.drawer-eyebrow {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--ink-3);
|
||
letter-spacing: 0.005em;
|
||
margin-bottom: 6px;
|
||
}
|
||
.drawer-title-block h2 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
font-variation-settings: 'opsz' 22;
|
||
letter-spacing: -0.018em;
|
||
line-height: 1.2;
|
||
margin: 0 0 4px;
|
||
}
|
||
.drawer-title-block .meta {
|
||
font-size: 11.5px; color: var(--ink-3);
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
display: flex; gap: 10px; align-items: center;
|
||
}
|
||
.drawer-title-block .meta .id { color: var(--accent); }
|
||
.drawer-close {
|
||
border: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
width: 28px; height: 28px;
|
||
border-radius: var(--r-sm);
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
cursor: pointer; color: var(--ink-2);
|
||
flex-shrink: 0;
|
||
}
|
||
.drawer-close:hover { background: var(--sunken); color: var(--ink); }
|
||
.drawer-close svg { width: 13px; height: 13px; stroke-width: 1.7; }
|
||
|
||
.drawer-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 20px 22px 24px;
|
||
display: flex; flex-direction: column; gap: 22px;
|
||
}
|
||
|
||
.d-section { display: flex; flex-direction: column; gap: 10px; }
|
||
.d-section-label {
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
font-weight: 500;
|
||
letter-spacing: 0.005em;
|
||
}
|
||
|
||
.d-status-card {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 10px 12px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm);
|
||
}
|
||
.d-status-card .change-link {
|
||
margin-left: auto;
|
||
font-size: 12px;
|
||
color: var(--accent);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
}
|
||
.d-status-card .change-link svg { width: 11px; height: 11px; stroke-width: 1.7; }
|
||
|
||
.d-grid {
|
||
display: grid;
|
||
grid-template-columns: 110px 1fr;
|
||
row-gap: 8px;
|
||
column-gap: 14px;
|
||
font-size: 13px;
|
||
}
|
||
.d-grid .k { color: var(--ink-3); font-size: 12px; }
|
||
.d-grid .v { color: var(--ink); }
|
||
.d-grid .v.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; font-size: 12px; }
|
||
|
||
.timeline {
|
||
display: flex; flex-direction: column; gap: 16px;
|
||
position: relative; padding-left: 18px;
|
||
}
|
||
.timeline::before {
|
||
content: ''; position: absolute;
|
||
left: 5px; top: 6px; bottom: 6px;
|
||
width: 1px;
|
||
background: var(--hairline);
|
||
}
|
||
.t-item { position: relative; }
|
||
.t-item::before {
|
||
content: ''; position: absolute;
|
||
left: -18px; top: 4px;
|
||
width: 11px; height: 11px;
|
||
border-radius: 50%;
|
||
background: var(--surface);
|
||
border: 1.5px solid var(--ink-disabled);
|
||
}
|
||
.t-item.done::before { background: var(--accent); border-color: var(--accent); }
|
||
.t-item.next::before { border-style: dashed; }
|
||
.t-time {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 10.5px;
|
||
color: var(--ink-3);
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.t-text { font-size: 12.5px; color: var(--ink); margin-top: 2px; line-height: 1.5; }
|
||
|
||
.drawer-foot {
|
||
padding: 12px 22px;
|
||
border-top: 1px solid var(--hairline);
|
||
background: var(--bg);
|
||
display: flex; gap: 6px;
|
||
}
|
||
.drawer-foot .btn { flex: 1; justify-content: center; }
|
||
|
||
/* ============================================================
|
||
RESPONSIVE
|
||
============================================================ */
|
||
@media (max-width: 1100px) {
|
||
.app { grid-template-columns: 56px 1fr; }
|
||
.side { padding: 14px 6px; }
|
||
.brand .brand-text,
|
||
.nav-eyebrow,
|
||
.nav-text,
|
||
.nav-item:not(.active) .nav-count { display: none; }
|
||
.nav-item { justify-content: center; padding: 0; }
|
||
.drawer { width: min(440px, calc(100vw - 56px)); }
|
||
.topbar { padding: 0 16px; }
|
||
.content { padding: 18px 18px 56px; }
|
||
.searchbar { min-width: 200px; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.app { grid-template-columns: 1fr; }
|
||
.side { display: none; }
|
||
.topbar .crumb span:first-child { display: none; }
|
||
.page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
|
||
.page-title { font-size: 24px; }
|
||
.filterbar { gap: 8px; }
|
||
.chiprow { order: -1; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
|
||
.search-input { order: 0; flex: 1 1 100%; }
|
||
|
||
.tbl thead { display: none; }
|
||
.tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
|
||
.tbl tbody { padding: 8px; }
|
||
.tbl tbody tr {
|
||
padding: 12px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
margin-bottom: 8px;
|
||
}
|
||
.tbl tbody tr.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
|
||
.tbl tbody td { padding: 3px 0; border: none; height: auto; }
|
||
.num, .cell-time { text-align: left; }
|
||
.cb-col, .cell-actions { display: none !important; }
|
||
.drawer { width: 100%; box-shadow: none; }
|
||
.tbl-foot { flex-direction: column; gap: 10px; align-items: flex-start; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<a href="#main" class="skip-link">К контенту</a>
|
||
|
||
<div class="app">
|
||
|
||
<!-- ===== SIDEBAR ===== -->
|
||
<aside class="side" aria-label="Главное меню">
|
||
<div class="brand">
|
||
<span class="brand-mark" aria-hidden="true">
|
||
<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="brand-text">Лидерра<span class="brand-dot">.</span></span>
|
||
</div>
|
||
<nav class="nav">
|
||
<div class="nav-eyebrow">Работа</div>
|
||
<a class="nav-item" href="#">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
||
<span class="nav-text">Дашборд</span>
|
||
</a>
|
||
<a class="nav-item active" href="#" aria-current="page">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M6 12h12M9 18h6"/></svg>
|
||
<span class="nav-text">Сделки</span>
|
||
<span class="nav-count">247</span>
|
||
</a>
|
||
<a class="nav-item" href="#">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="6" height="18"/><rect x="11" y="3" width="6" height="12"/><rect x="19" y="3" width="2" height="8"/></svg>
|
||
<span class="nav-text">Канбан</span>
|
||
</a>
|
||
<a class="nav-item" href="#">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 6v6l4 2"/><circle cx="12" cy="12" r="9"/></svg>
|
||
<span class="nav-text">Напоминания</span>
|
||
<span class="nav-count">12</span>
|
||
</a>
|
||
|
||
<div class="nav-eyebrow">Финансы</div>
|
||
<a class="nav-item" href="#">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="6" width="18" height="13" rx="1"/><path d="M3 10h18M7 15h3"/></svg>
|
||
<span class="nav-text">Биллинг</span>
|
||
</a>
|
||
<a class="nav-item" href="#">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
|
||
<span class="nav-text">Отчёты</span>
|
||
</a>
|
||
|
||
<div class="nav-eyebrow">Команда</div>
|
||
<a class="nav-item" href="#">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||
<span class="nav-text">Менеджеры</span>
|
||
<span class="nav-count">4</span>
|
||
</a>
|
||
<a class="nav-item" href="#">
|
||
<svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
<span class="nav-text">Настройки</span>
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- ===== MAIN ===== -->
|
||
<div class="main">
|
||
|
||
<div class="topbar">
|
||
<div class="crumb">
|
||
<span>Рабочая область</span>
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
|
||
<strong>Сделки</strong>
|
||
</div>
|
||
<div class="topbar-spacer"></div>
|
||
<button type="button" class="searchbar" aria-label="Поиск, ⌘K">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<span>Поиск</span>
|
||
<kbd>⌘K</kbd>
|
||
</button>
|
||
<button type="button" class="icon-btn" aria-label="Уведомления, есть новые">
|
||
<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.7" aria-hidden="true"><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||
<span class="pip" aria-hidden="true"></span>
|
||
</button>
|
||
<button type="button" class="user-chip" aria-label="Профиль · Иван Петров">
|
||
<span class="ava" aria-hidden="true">ИП</span>
|
||
<span class="uname">Иван П.</span>
|
||
</button>
|
||
</div>
|
||
|
||
<main id="main" class="content">
|
||
|
||
<!-- ===== Page head ===== -->
|
||
<header class="page-head">
|
||
<div>
|
||
<h1 class="page-title">Сделки</h1>
|
||
<div class="page-stats">
|
||
<span><span class="num accent-num">+3</span> новых лида с утра</span>
|
||
<span class="sep">·</span>
|
||
<span><span class="num">247</span> всего</span>
|
||
<span class="sep">·</span>
|
||
<span><span class="num">18</span> в работе</span>
|
||
<span class="sep">·</span>
|
||
<span><span class="num">4</span> ждут оплату</span>
|
||
</div>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button type="button" class="btn">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||
<span>Экспорт</span>
|
||
</button>
|
||
<button type="button" class="btn btn-primary">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
<span>Новая сделка</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== Filter bar ===== -->
|
||
<div class="filterbar" role="search" aria-label="Фильтры сделок">
|
||
<div class="chiprow" role="tablist" aria-label="Срез статусов">
|
||
<button type="button" role="tab" aria-selected="false">Все <span class="badge">247</span></button>
|
||
<button type="button" role="tab" aria-selected="true" class="active">Активные <span class="badge">8</span></button>
|
||
<button type="button" role="tab" aria-selected="false">Ждут оплату <span class="badge">4</span></button>
|
||
<button type="button" role="tab" aria-selected="false">Закрытые <span class="badge">230</span></button>
|
||
<button type="button" role="tab" aria-selected="false">Невалидные <span class="badge">5</span></button>
|
||
</div>
|
||
<label class="search-input">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<input type="search" placeholder="Поиск: имя, телефон, проект…" aria-label="Поиск по сделкам">
|
||
<kbd>/</kbd>
|
||
</label>
|
||
<button type="button" class="fbtn" aria-haspopup="listbox">
|
||
<span>Проект:</span><strong>Окна Москва</strong>
|
||
<svg class="dropdown-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<button type="button" class="fbtn" aria-haspopup="listbox">
|
||
<span>Менеджер:</span><strong>Все</strong>
|
||
<svg class="dropdown-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<button type="button" class="fbtn" aria-haspopup="listbox">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
|
||
<span>Ещё</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ===== Applied filters ===== -->
|
||
<div class="applied" aria-label="Активные фильтры">
|
||
<span>Применено:</span>
|
||
<span class="applied-chip">
|
||
активные
|
||
<button type="button" aria-label="Убрать фильтр активные"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
|
||
</span>
|
||
<span class="applied-chip">
|
||
Окна Москва
|
||
<button type="button" aria-label="Убрать фильтр Окна Москва"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button>
|
||
</span>
|
||
<button type="button" class="applied-clear">сбросить всё</button>
|
||
</div>
|
||
|
||
<!-- ===== Table ===== -->
|
||
<div class="tbl-wrap">
|
||
<table class="tbl">
|
||
<thead>
|
||
<tr>
|
||
<th class="cb-col" scope="col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать все"></span></th>
|
||
<th class="sortable is-sort" scope="col">Лид <span class="arrow" aria-hidden="true">↑</span></th>
|
||
<th scope="col">Статус</th>
|
||
<th scope="col">Проект</th>
|
||
<th scope="col">Менеджер</th>
|
||
<th class="num sortable" scope="col">Стоимость <span class="arrow" aria-hidden="true">↕</span></th>
|
||
<th class="num sortable" scope="col">Время</th>
|
||
<th class="act-col" scope="col"><span style="position:absolute;left:-9999px">Действия</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
|
||
<tr class="selected">
|
||
<td class="cb-col"><span class="cb checked" role="checkbox" aria-checked="true" tabindex="0" aria-label="Выбрать сделку Анна Соколова"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">АС</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Анна Соколова</span>
|
||
<span class="deal-phone">+7 (916) 871-23-45</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-new"><span class="dot" aria-hidden="true"></span>Новая</span></td>
|
||
<td class="cell-product">Натяжные потолки</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">ИП</span>Иван П.</span></td>
|
||
<td class="num">1 850 ₽</td>
|
||
<td class="cell-time">28м</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Анна Соколова"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Иван Петров"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">ИП</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Иван Петров</span>
|
||
<span class="deal-phone">+7 (909) 234-56-78</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-neg"><span class="dot" aria-hidden="true"></span>Переговоры</span></td>
|
||
<td class="cell-product">Окна Москва</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">ИП</span>Иван П.</span></td>
|
||
<td class="num">2 200 ₽</td>
|
||
<td class="cell-time">1ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Иван Петров"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Дмитрий Котов"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">ДК</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Дмитрий Котов</span>
|
||
<span class="deal-phone">+7 (985) 119-87-23</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-paid"><span class="dot" aria-hidden="true"></span>Оплачено</span></td>
|
||
<td class="cell-product">Окна Москва</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">МС</span>Мария С.</span></td>
|
||
<td class="num">2 200 ₽</td>
|
||
<td class="cell-time">2ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Дмитрий Котов"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Михаил Орлов"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">МО</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Михаил Орлов</span>
|
||
<span class="deal-phone">+7 (926) 781-34-22</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-wait"><span class="dot" aria-hidden="true"></span>Ждёт оплату</span></td>
|
||
<td class="cell-product">Натяжные потолки</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">ИП</span>Иван П.</span></td>
|
||
<td class="num">1 850 ₽</td>
|
||
<td class="cell-time">3ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Михаил Орлов"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Елена Васильева"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">ЕВ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Елена Васильева</span>
|
||
<span class="deal-phone">+7 (903) 456-12-09</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-call"><span class="dot" aria-hidden="true"></span>Дозвон</span></td>
|
||
<td class="cell-product">Кухни на заказ</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">МС</span>Мария С.</span></td>
|
||
<td class="num">3 100 ₽</td>
|
||
<td class="cell-time">4ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Елена Васильева"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Сергей Новиков"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">СН</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Сергей Новиков</span>
|
||
<span class="deal-phone">+7 (962) 014-78-91</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-fail"><span class="dot" aria-hidden="true"></span>Отказ</span></td>
|
||
<td class="cell-product">Окна Москва</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">ИП</span>Иван П.</span></td>
|
||
<td class="num">2 200 ₽</td>
|
||
<td class="cell-time">5ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Сергей Новиков"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Ольга Громова"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">ОГ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Ольга Громова</span>
|
||
<span class="deal-phone">+7 (965) 552-09-71</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-quote"><span class="dot" aria-hidden="true"></span>КП отправлено</span></td>
|
||
<td class="cell-product">Кухни на заказ</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">МС</span>Мария С.</span></td>
|
||
<td class="num">3 100 ₽</td>
|
||
<td class="cell-time">7ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Ольга Громова"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Артём Лебедев"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">АЛ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Артём Лебедев</span>
|
||
<span class="deal-phone">+7 (911) 738-21-66</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-think"><span class="dot" aria-hidden="true"></span>Думает</span></td>
|
||
<td class="cell-product">Окна Москва</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">ИП</span>Иван П.</span></td>
|
||
<td class="num">2 200 ₽</td>
|
||
<td class="cell-time">9ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Артём Лебедев"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Татьяна Иванова"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">ТИ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Татьяна Иванова</span>
|
||
<span class="deal-phone">+7 (495) 184-22-19</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-nocall"><span class="dot" aria-hidden="true"></span>Не дозвон.</span></td>
|
||
<td class="cell-product">Натяжные потолки</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">ИП</span>Иван П.</span></td>
|
||
<td class="num">1 850 ₽</td>
|
||
<td class="cell-time">11ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Татьяна Иванова"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Виктор Зайцев"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">ВЗ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Виктор Зайцев</span>
|
||
<span class="deal-phone">+7 (917) 002-44-31</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-work"><span class="dot" aria-hidden="true"></span>В работе</span></td>
|
||
<td class="cell-product">Окна Москва</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">МС</span>Мария С.</span></td>
|
||
<td class="num">2 200 ₽</td>
|
||
<td class="cell-time">13ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Виктор Зайцев"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Кирилл Морозов"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">КМ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Кирилл Морозов</span>
|
||
<span class="deal-phone">+7 (495) 717-08-52</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-refund"><span class="dot" aria-hidden="true"></span>Возврат</span></td>
|
||
<td class="cell-product">Кухни на заказ</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">МС</span>Мария С.</span></td>
|
||
<td class="num">3 100 ₽</td>
|
||
<td class="cell-time">16ч</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Кирилл Морозов"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Полина Власова"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">ПВ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Полина Власова</span>
|
||
<span class="deal-phone">+7 (903) 119-44-87</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-dup"><span class="dot" aria-hidden="true"></span>Дубликат</span></td>
|
||
<td class="cell-product">Окна Москва</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">ИП</span>Иван П.</span></td>
|
||
<td class="num num-soft">—</td>
|
||
<td class="cell-time">вчера</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Полина Власова"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Степан Юдин"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">СЮ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Степан Юдин</span>
|
||
<span class="deal-phone">+7 (000) 000-00-00</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-spam"><span class="dot" aria-hidden="true"></span>Спам</span></td>
|
||
<td class="cell-product">Натяжные потолки</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">—</span>—</span></td>
|
||
<td class="num num-soft">—</td>
|
||
<td class="cell-time">вчера</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Степан Юдин"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td class="cb-col"><span class="cb" role="checkbox" aria-checked="false" tabindex="0" aria-label="Выбрать сделку Антон Беляев"></span></td>
|
||
<td>
|
||
<div class="cell-deal">
|
||
<span class="deal-avatar" aria-hidden="true">АБ</span>
|
||
<span class="deal-meta">
|
||
<span class="deal-name">Антон Беляев</span>
|
||
<span class="deal-phone">+7 (903) 802-21-15</span>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td><span class="chip chip-arch"><span class="dot" aria-hidden="true"></span>Архив</span></td>
|
||
<td class="cell-product">Окна Москва</td>
|
||
<td><span class="cell-manager"><span class="mini-ava">ИП</span>Иван П.</span></td>
|
||
<td class="num">2 200 ₽</td>
|
||
<td class="cell-time">3д</td>
|
||
<td class="cell-actions">
|
||
<button type="button" class="row-action" aria-label="Действия со сделкой Антон Беляев"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></button>
|
||
</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="tbl-foot">
|
||
<div class="lo">
|
||
<span class="num-line">Показано <strong>14</strong> из <strong>247</strong> · выбрано 1</span>
|
||
<div class="density-toggle" role="group" aria-label="Плотность таблицы">
|
||
<button type="button" class="active" aria-pressed="true">Норм.</button>
|
||
<button type="button" aria-pressed="false">Компакт</button>
|
||
</div>
|
||
</div>
|
||
<div class="pager" role="navigation" aria-label="Пагинация">
|
||
<button type="button" disabled aria-label="Предыдущая страница">←</button>
|
||
<button type="button" class="active" aria-current="page">1</button>
|
||
<button type="button">2</button>
|
||
<button type="button">3</button>
|
||
<span class="ellipsis" aria-hidden="true">…</span>
|
||
<button type="button">18</button>
|
||
<button type="button" aria-label="Следующая страница">→</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
SLIDE-OVER DRAWER
|
||
============================================================ -->
|
||
<div class="scrim" aria-hidden="true"></div>
|
||
<aside class="drawer" role="dialog" aria-labelledby="drawer-title" aria-modal="true">
|
||
|
||
<header class="drawer-head">
|
||
<div class="drawer-title-block">
|
||
<div class="drawer-eyebrow">Сделка</div>
|
||
<h2 id="drawer-title">Анна Соколова</h2>
|
||
<div class="meta">
|
||
<span class="id">#1042</span>
|
||
<span>+7 (916) 871-23-45</span>
|
||
<span>28м</span>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="drawer-close" aria-label="Закрыть">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
|
||
</button>
|
||
</header>
|
||
|
||
<div class="drawer-body">
|
||
|
||
<div class="d-section">
|
||
<span class="d-section-label">Текущий статус</span>
|
||
<div class="d-status-card">
|
||
<span class="chip chip-tinted chip-new"><span class="dot" aria-hidden="true"></span>Новая</span>
|
||
<button type="button" class="change-link">сменить
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-section">
|
||
<span class="d-section-label">Параметры</span>
|
||
<div class="d-grid">
|
||
<span class="k">Проект</span><span class="v">Натяжные потолки</span>
|
||
<span class="k">Стоимость</span><span class="v mono">1 850 ₽</span>
|
||
<span class="k">Менеджер</span><span class="v">Иван Петров</span>
|
||
<span class="k">Источник</span><span class="v">Я.Директ → landing-1</span>
|
||
<span class="k">UTM</span><span class="v mono" style="font-size:11px">utm_campaign=spring_2026</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-section">
|
||
<span class="d-section-label">История</span>
|
||
<div class="timeline">
|
||
<div class="t-item done">
|
||
<div class="t-time">14:32 · сегодня</div>
|
||
<div class="t-text">Лид принят, отправлено уведомление в Telegram-канал команды</div>
|
||
</div>
|
||
<div class="t-item done">
|
||
<div class="t-time">14:31 · сегодня</div>
|
||
<div class="t-text">Источник: Я.Директ, кампания «Натяжные потолки · Москва · март»</div>
|
||
</div>
|
||
<div class="t-item next">
|
||
<div class="t-time">→ ожидается до 15:00</div>
|
||
<div class="t-text">Первый звонок — менеджер Иван П.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<footer class="drawer-foot">
|
||
<button type="button" class="btn">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||
<span>Позвонить</span>
|
||
</button>
|
||
<button type="button" class="btn btn-primary">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
|
||
<span>Открыть карточку</span>
|
||
</button>
|
||
</footer>
|
||
|
||
</aside>
|
||
|
||
</body>
|
||
</html>
|