Дмитрий
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>
1181 lines
45 KiB
HTML
1181 lines
45 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 {
|
||
--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-text: #B1C2BD;
|
||
--side-text-2: #7A8C87;
|
||
--side-active: #13382F;
|
||
--side-icon: #5C7A72;
|
||
--side-icon-act: #32C8A9;
|
||
--side-hover: #0A2A22;
|
||
--side-border: #1A3A30;
|
||
|
||
/* 14 status palette — same as v8_deals */
|
||
--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;
|
||
}
|
||
|
||
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; }
|
||
|
||
a:focus-visible, button:focus-visible, input:focus-visible,
|
||
select:focus-visible, textarea: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 SHELL — same as v8_dashboard / v8_deals
|
||
============================================================ */
|
||
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
|
||
|
||
.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: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 { 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 a { color: var(--ink-3); transition: color 80ms ease; }
|
||
.crumb a:hover { color: var(--ink); }
|
||
.crumb strong { color: var(--ink); font-weight: 500; }
|
||
.crumb svg { width: 11px; height: 11px; color: var(--ink-3); opacity: 0.5; }
|
||
.crumb .deal-id { font-family: var(--font-mono); font-feature-settings: 'tnum'; color: var(--accent); font-weight: 500; }
|
||
.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: 240px;
|
||
}
|
||
.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; }
|
||
|
||
/* ============================================================
|
||
DEAL CARD CONTENT
|
||
============================================================ */
|
||
.content {
|
||
padding: 24px 28px 80px;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 380px;
|
||
gap: 22px;
|
||
align-items: start;
|
||
max-width: 1500px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ===== LEFT — main column ===== */
|
||
.col-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
|
||
|
||
/* Hero — name + status + meta */
|
||
.hero {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
padding: 22px 24px 20px;
|
||
}
|
||
.hero-eyebrow {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--ink-3);
|
||
letter-spacing: 0.005em;
|
||
margin-bottom: 6px;
|
||
}
|
||
.hero-row {
|
||
display: flex; align-items: flex-start; gap: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.hero-name {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
font-variation-settings: 'opsz' 28;
|
||
letter-spacing: -0.022em;
|
||
line-height: 1.05;
|
||
margin: 0;
|
||
flex: 1; min-width: 0;
|
||
}
|
||
.hero-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
||
.btn-icon {
|
||
width: 30px; height: 30px;
|
||
border: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
border-radius: var(--r-sm);
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
color: var(--ink-2); cursor: pointer;
|
||
}
|
||
.btn-icon:hover { background: var(--sunken); color: var(--ink); border-color: #BFB9AB; }
|
||
.btn-icon svg { width: 13px; height: 13px; stroke-width: 1.7; }
|
||
|
||
.hero-meta {
|
||
display: flex; align-items: center; gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 16px;
|
||
font-size: 12.5px;
|
||
}
|
||
.hero-meta .id {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
color: var(--accent);
|
||
font-weight: 600;
|
||
}
|
||
.hero-meta .phone {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
color: var(--ink);
|
||
font-weight: 500;
|
||
}
|
||
.hero-meta .phone a { color: inherit; }
|
||
.hero-meta .phone a:hover { color: var(--accent); }
|
||
.hero-meta .meta-item { color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
|
||
.hero-meta .meta-item svg { width: 11px; height: 11px; color: var(--ink-3); }
|
||
.hero-meta .sep { color: var(--ink-disabled); }
|
||
|
||
/* status row with selector + tags */
|
||
.status-row {
|
||
display: flex; align-items: center; gap: 10px;
|
||
flex-wrap: wrap;
|
||
padding-top: 14px;
|
||
border-top: 1px solid var(--hairline-soft);
|
||
}
|
||
.status-trigger {
|
||
display: inline-flex; align-items: center; gap: 9px;
|
||
padding: 6px 8px 6px 10px;
|
||
border: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
border-radius: 100px;
|
||
cursor: pointer;
|
||
transition: border-color 100ms ease;
|
||
font-family: inherit;
|
||
}
|
||
.status-trigger:hover { border-color: var(--ink-disabled); }
|
||
.status-trigger .chip {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
font-size: 12.5px; font-weight: 500;
|
||
color: var(--ink);
|
||
}
|
||
.status-trigger .dot {
|
||
width: 7px; height: 7px;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
background: var(--st-call-solid);
|
||
}
|
||
.status-trigger .dot::after {
|
||
content: ''; position: absolute; inset: -1px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(10,19,25,0.10);
|
||
}
|
||
.status-trigger .chev { width: 11px; height: 11px; color: var(--ink-3); margin-left: 4px; }
|
||
|
||
.tag {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 4px 4px 4px 10px;
|
||
background: var(--sunken);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: 100px;
|
||
font-size: 11.5px;
|
||
color: var(--ink-2);
|
||
font-weight: 500;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.tag button {
|
||
width: 16px; height: 16px;
|
||
border: none; background: transparent;
|
||
color: var(--ink-3);
|
||
border-radius: 50%; cursor: pointer; padding: 0;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
}
|
||
.tag button:hover { background: rgba(10,19,25,0.08); color: var(--ink); }
|
||
.tag button svg { width: 8px; height: 8px; stroke-width: 2.5; }
|
||
|
||
.add-tag {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
padding: 4px 10px;
|
||
background: transparent;
|
||
border: 1px dashed var(--hairline);
|
||
border-radius: 100px;
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
}
|
||
.add-tag:hover { border-color: var(--ink-disabled); color: var(--ink); }
|
||
.add-tag svg { width: 9px; height: 9px; }
|
||
|
||
/* sections */
|
||
.section {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
padding: 20px 24px;
|
||
}
|
||
.section-h {
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
margin-bottom: 14px;
|
||
gap: 12px;
|
||
}
|
||
.section-h h2 {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--ink-3);
|
||
letter-spacing: 0.005em;
|
||
text-transform: uppercase;
|
||
margin: 0;
|
||
}
|
||
.section-h .h-action {
|
||
font-size: 11.5px;
|
||
color: var(--accent);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
background: none; border: none; padding: 0;
|
||
font-family: inherit;
|
||
display: inline-flex; align-items: center; gap: 3px;
|
||
}
|
||
.section-h .h-action:hover { text-decoration: underline; text-underline-offset: 3px; }
|
||
.section-h .h-action svg { width: 11px; height: 11px; }
|
||
|
||
/* parameters grid */
|
||
.params {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 14px 24px;
|
||
font-size: 13px;
|
||
}
|
||
.param-k {
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
margin-bottom: 4px;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.param-v {
|
||
font-size: 13px;
|
||
color: var(--ink);
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.param-v.mono {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 12.5px;
|
||
}
|
||
.param-v.link {
|
||
color: var(--accent);
|
||
cursor: pointer;
|
||
}
|
||
.param-v.link:hover { text-decoration: underline; text-underline-offset: 3px; }
|
||
.param-v.muted { color: var(--ink-disabled); }
|
||
|
||
/* comment */
|
||
.comment-area {
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm);
|
||
background: var(--surface);
|
||
padding: 0;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.comment-area textarea {
|
||
border: none; outline: none; resize: vertical;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: var(--ink);
|
||
padding: 12px 14px;
|
||
background: transparent;
|
||
min-height: 80px;
|
||
max-height: 240px;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.comment-area textarea::placeholder { color: var(--ink-3); }
|
||
.comment-area:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
|
||
.comment-toolbar {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 8px 10px 8px 14px;
|
||
border-top: 1px solid var(--hairline-soft);
|
||
background: var(--sunken);
|
||
}
|
||
.tpl-btn {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
height: 26px; padding: 0 10px;
|
||
border: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
border-radius: var(--r-sm);
|
||
font-family: inherit;
|
||
font-size: 11.5px; font-weight: 500;
|
||
color: var(--ink-2);
|
||
cursor: pointer;
|
||
}
|
||
.tpl-btn:hover { border-color: #BFB9AB; color: var(--ink); }
|
||
.tpl-btn svg { width: 11px; height: 11px; color: var(--accent); }
|
||
.comment-toolbar .right { margin-left: auto; }
|
||
.comment-counter {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 10.5px;
|
||
color: var(--ink-3);
|
||
letter-spacing: -0.005em;
|
||
}
|
||
|
||
/* templates flyout — open by default for demo */
|
||
.tpl-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 6px;
|
||
margin-top: 12px;
|
||
}
|
||
.tpl-card {
|
||
background: var(--bg);
|
||
border: 1px solid var(--hairline-soft);
|
||
border-radius: var(--r-sm);
|
||
padding: 10px 12px;
|
||
cursor: pointer;
|
||
transition: border-color 100ms ease;
|
||
}
|
||
.tpl-card:hover { border-color: var(--ink-disabled); }
|
||
.tpl-card .tpl-tag {
|
||
font-family: var(--font-mono);
|
||
font-size: 9.5px; font-weight: 600;
|
||
color: var(--ink-3);
|
||
letter-spacing: 0.06em;
|
||
margin-bottom: 4px;
|
||
}
|
||
.tpl-card.personal .tpl-tag { color: var(--accent); }
|
||
.tpl-card .tpl-text {
|
||
font-size: 12px;
|
||
color: var(--ink-2);
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* reminder */
|
||
.reminder-form {
|
||
display: grid;
|
||
grid-template-columns: 130px 90px 1fr auto;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
.input {
|
||
height: 34px;
|
||
padding: 0 10px;
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm);
|
||
background: var(--surface);
|
||
font-family: inherit;
|
||
font-size: 12.5px;
|
||
color: var(--ink);
|
||
outline: none;
|
||
}
|
||
.input.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }
|
||
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
|
||
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
height: 34px; padding: 0 14px;
|
||
border-radius: var(--r-sm);
|
||
border: 1px solid var(--hairline);
|
||
background: var(--surface);
|
||
font-size: 12.5px; font-weight: 500;
|
||
color: var(--ink);
|
||
cursor: pointer;
|
||
transition: border-color 120ms ease, background 120ms ease;
|
||
font-family: inherit;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.btn:hover { border-color: var(--ink-disabled); 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-danger {
|
||
color: var(--st-new-solid);
|
||
}
|
||
.btn-danger:hover { background: #FFE7E2; border-color: var(--st-new-solid); color: #8E2516; }
|
||
.btn svg { width: 13px; height: 13px; stroke-width: 1.7; }
|
||
|
||
/* existing reminders list */
|
||
.rem-list { display: flex; flex-direction: column; gap: 1px; margin-top: 14px; }
|
||
.rem-row {
|
||
display: grid;
|
||
grid-template-columns: 110px 1fr auto;
|
||
gap: 12px;
|
||
padding: 10px 12px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--hairline-soft);
|
||
border-radius: var(--r-sm);
|
||
align-items: center;
|
||
font-size: 12.5px;
|
||
}
|
||
.rem-when {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 11.5px;
|
||
color: var(--accent);
|
||
font-weight: 500;
|
||
}
|
||
.rem-text { color: var(--ink); letter-spacing: -0.005em; }
|
||
.rem-row .rem-action {
|
||
width: 22px; height: 22px;
|
||
border: none; background: none;
|
||
color: var(--ink-3);
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
}
|
||
.rem-row .rem-action:hover { background: rgba(10,19,25,0.06); color: var(--ink); }
|
||
.rem-row .rem-action svg { width: 11px; height: 11px; }
|
||
|
||
/* footer actions */
|
||
.footer-actions {
|
||
display: flex; gap: 8px; padding-top: 6px;
|
||
}
|
||
.footer-actions .btn { height: 38px; padding: 0 16px; }
|
||
.footer-actions .spacer { flex: 1; }
|
||
|
||
/* ===== RIGHT — sidebar column ===== */
|
||
.col-aside { display: flex; flex-direction: column; gap: 14px; }
|
||
|
||
.aside-section {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
padding: 18px 20px;
|
||
}
|
||
|
||
/* manager picker */
|
||
.manager-row {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 10px 12px;
|
||
background: var(--bg);
|
||
border: 1px solid var(--hairline-soft);
|
||
border-radius: var(--r-sm);
|
||
cursor: pointer;
|
||
}
|
||
.manager-row:hover { border-color: var(--ink-disabled); }
|
||
.manager-ava {
|
||
width: 30px; height: 30px;
|
||
border-radius: 50%;
|
||
background: var(--ink); color: #fff;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 10.5px; font-weight: 600;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
}
|
||
.manager-ava::after {
|
||
content: ''; position: absolute; inset: 0;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(10,19,25,0.12);
|
||
}
|
||
.manager-info { flex: 1; min-width: 0; }
|
||
.manager-name { font-size: 13px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
|
||
.manager-role { font-size: 11px; color: var(--ink-3); margin-top: 1px; }
|
||
.manager-row .chev { width: 12px; height: 12px; color: var(--ink-3); }
|
||
|
||
/* metrics mini-grid */
|
||
.metrics {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1px;
|
||
background: var(--hairline-soft);
|
||
border: 1px solid var(--hairline-soft);
|
||
border-radius: var(--r-sm);
|
||
overflow: hidden;
|
||
}
|
||
.metric {
|
||
background: var(--surface);
|
||
padding: 12px 14px;
|
||
display: flex; flex-direction: column; gap: 4px;
|
||
}
|
||
.metric-k { font-size: 10.5px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.005em; }
|
||
.metric-v {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
letter-spacing: -0.022em;
|
||
line-height: 1;
|
||
margin-top: 2px;
|
||
}
|
||
.metric-sub {
|
||
font-size: 10px;
|
||
color: var(--ink-3);
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
letter-spacing: -0.005em;
|
||
}
|
||
|
||
/* activity log */
|
||
.activity { display: flex; flex-direction: column; gap: 16px; position: relative; padding-left: 18px; }
|
||
.activity::before {
|
||
content: ''; position: absolute;
|
||
left: 5px; top: 8px; bottom: 8px;
|
||
width: 1px;
|
||
background: var(--hairline);
|
||
}
|
||
.act { position: relative; }
|
||
.act::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);
|
||
}
|
||
.act.create::before { background: var(--accent); border-color: var(--accent); }
|
||
.act.status-change::before { background: var(--st-call-solid); border-color: var(--st-call-solid); }
|
||
.act.comment::before { background: var(--ink); border-color: var(--ink); }
|
||
.act.call::before { background: var(--st-quote-solid); border-color: var(--st-quote-solid); }
|
||
.act.tag::before { background: var(--st-think-solid); border-color: var(--st-think-solid); }
|
||
.act.assign::before { background: var(--st-paid-solid); border-color: var(--st-paid-solid); }
|
||
|
||
.act-time {
|
||
font-family: var(--font-mono);
|
||
font-feature-settings: 'tnum';
|
||
font-size: 10.5px;
|
||
color: var(--ink-3);
|
||
letter-spacing: -0.005em;
|
||
margin-bottom: 3px;
|
||
}
|
||
.act-text { font-size: 12.5px; color: var(--ink); line-height: 1.5; letter-spacing: -0.005em; }
|
||
.act-text strong { color: var(--ink); font-weight: 500; }
|
||
.act-text .who { color: var(--accent); font-weight: 500; }
|
||
.act-text .from { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(10,19,25,0.3); margin: 0 4px; font-family: var(--font-mono); font-size: 11.5px; }
|
||
.act-text .to { color: var(--ink); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; }
|
||
.act-text .arrow { color: var(--ink-3); margin: 0 3px; }
|
||
.act-text .quote {
|
||
display: block;
|
||
margin-top: 6px;
|
||
padding: 8px 10px;
|
||
background: var(--bg);
|
||
border-left: 2px solid var(--hairline);
|
||
border-radius: 0 var(--r-xs) var(--r-xs) 0;
|
||
font-size: 12px;
|
||
color: var(--ink-2);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ============================================================
|
||
RESPONSIVE
|
||
============================================================ */
|
||
@media (max-width: 1280px) {
|
||
.content { grid-template-columns: 1fr; }
|
||
.col-aside { order: 2; }
|
||
}
|
||
@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; }
|
||
.topbar { padding: 0 16px; }
|
||
.content { padding: 18px 18px 60px; }
|
||
.searchbar { min-width: 200px; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.app { grid-template-columns: 1fr; }
|
||
.side { display: none; }
|
||
.topbar .crumb span:first-child { display: none; }
|
||
.hero { padding: 18px 16px 16px; }
|
||
.hero-name { font-size: 24px; }
|
||
.params { grid-template-columns: 1fr; }
|
||
.reminder-form { grid-template-columns: 1fr; }
|
||
.reminder-form .btn { justify-self: flex-start; }
|
||
.footer-actions { flex-wrap: wrap; }
|
||
.footer-actions .spacer { display: none; }
|
||
.tpl-list { grid-template-columns: 1fr; }
|
||
}
|
||
</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>
|
||
<a href="#">Сделки</a>
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
|
||
<strong>Анна Соколова</strong>
|
||
<span class="deal-id">#1042</span>
|
||
</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">
|
||
|
||
<!-- ===== LEFT COLUMN ===== -->
|
||
<div class="col-main">
|
||
|
||
<!-- HERO — name + status + tags -->
|
||
<header class="hero">
|
||
<div class="hero-eyebrow">Сделка</div>
|
||
<div class="hero-row">
|
||
<h1 class="hero-name">Анна Соколова</h1>
|
||
<div class="hero-actions">
|
||
<button type="button" class="btn-icon" aria-label="Позвонить">
|
||
<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>
|
||
</button>
|
||
<button type="button" class="btn-icon" aria-label="Отправить сообщение">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||
</button>
|
||
<button type="button" class="btn-icon" 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>
|
||
</div>
|
||
</div>
|
||
<div class="hero-meta">
|
||
<span class="id">#1042</span>
|
||
<span class="phone"><a href="tel:+79168712345">+7 (916) 871-23-45</a></span>
|
||
<span class="sep">·</span>
|
||
<span class="meta-item">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 6v6l4 2"/></svg>
|
||
28 минут назад
|
||
</span>
|
||
<span class="sep">·</span>
|
||
<span class="meta-item">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||
Москва
|
||
</span>
|
||
</div>
|
||
<div class="status-row">
|
||
<button type="button" class="status-trigger" aria-haspopup="listbox">
|
||
<span class="chip">
|
||
<span class="dot" aria-hidden="true"></span>
|
||
Дозвон
|
||
</span>
|
||
<svg class="chev" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
|
||
</button>
|
||
<span class="tag">
|
||
горячий
|
||
<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="tag">
|
||
Я.Директ
|
||
<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="add-tag">
|
||
<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>
|
||
добавить тег
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- PARAMETERS -->
|
||
<section class="section" aria-labelledby="params-title">
|
||
<div class="section-h">
|
||
<h2 id="params-title">Параметры</h2>
|
||
<button type="button" class="h-action">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
|
||
редактировать
|
||
</button>
|
||
</div>
|
||
<div class="params">
|
||
<div>
|
||
<div class="param-k">Проект</div>
|
||
<div class="param-v">Натяжные потолки</div>
|
||
</div>
|
||
<div>
|
||
<div class="param-k">Стоимость лида</div>
|
||
<div class="param-v mono">1 850 ₽</div>
|
||
</div>
|
||
<div>
|
||
<div class="param-k">Источник</div>
|
||
<div class="param-v link">Я.Директ → landing-1</div>
|
||
</div>
|
||
<div>
|
||
<div class="param-k">UTM-кампания</div>
|
||
<div class="param-v mono">spring_2026_potolki_msk</div>
|
||
</div>
|
||
<div>
|
||
<div class="param-k">Контакт</div>
|
||
<div class="param-v">Анна Соколова, 32 года</div>
|
||
</div>
|
||
<div>
|
||
<div class="param-k">Email</div>
|
||
<div class="param-v link">anna.sokolova@email.ru</div>
|
||
</div>
|
||
<div>
|
||
<div class="param-k">Адрес объекта</div>
|
||
<div class="param-v">Москва, ул. Тверская, 12</div>
|
||
</div>
|
||
<div>
|
||
<div class="param-k">Площадь, м²</div>
|
||
<div class="param-v mono">42</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- COMMENT + TEMPLATES -->
|
||
<section class="section" aria-labelledby="comment-title">
|
||
<div class="section-h">
|
||
<h2 id="comment-title">Комментарий</h2>
|
||
</div>
|
||
<label class="comment-area">
|
||
<textarea placeholder="Запишите детали разговора, договорённости, предпочтения клиента…">Звонила в 14:38, не дозвонилась — занято. Перезвонить после 15:00. Интересует матовый потолок 42 м², хочет уточнить варианты оплаты в рассрочку.</textarea>
|
||
<div class="comment-toolbar">
|
||
<button type="button" class="tpl-btn" aria-expanded="true">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 L3 14h9l-1 8 10-12h-9z"/></svg>
|
||
Шаблоны · 8
|
||
</button>
|
||
<div class="right">
|
||
<span class="comment-counter">186 / 2000</span>
|
||
</div>
|
||
</div>
|
||
</label>
|
||
<div class="tpl-list">
|
||
<button type="button" class="tpl-card">
|
||
<div class="tpl-tag">БАЗОВЫЕ · 1</div>
|
||
<div class="tpl-text">Здравствуйте, {имя}! Меня зовут {менеджер}, я звоню от компании {проект}. Удобно сейчас разговаривать?</div>
|
||
</button>
|
||
<button type="button" class="tpl-card">
|
||
<div class="tpl-tag">БАЗОВЫЕ · 2</div>
|
||
<div class="tpl-text">Не дозвонились — попробуем ещё раз через 30 минут. Если удобно перезвоните на {телефон_тенанта}.</div>
|
||
</button>
|
||
<button type="button" class="tpl-card">
|
||
<div class="tpl-tag">БАЗОВЫЕ · 3</div>
|
||
<div class="tpl-text">Отправляю КП на email. Жду подтверждения / возврат с правками до конца дня.</div>
|
||
</button>
|
||
<button type="button" class="tpl-card">
|
||
<div class="tpl-tag">БАЗОВЫЕ · 4</div>
|
||
<div class="tpl-text">Уточняю удобное время для замера. Пришлите, пожалуйста, два-три варианта.</div>
|
||
</button>
|
||
<button type="button" class="tpl-card">
|
||
<div class="tpl-tag">БАЗОВЫЕ · 5</div>
|
||
<div class="tpl-text">Сделка закрыта оплатой. Спасибо за выбор {проект} — будем рады видеть снова.</div>
|
||
</button>
|
||
<button type="button" class="tpl-card personal">
|
||
<div class="tpl-tag">МОЁ · 6</div>
|
||
<div class="tpl-text">Расчёт по площади 42 м² матовый: от 41 580 ₽ под ключ. Замер бесплатный, выезд по Москве 0–24, удобно?</div>
|
||
</button>
|
||
<button type="button" class="tpl-card personal">
|
||
<div class="tpl-tag">МОЁ · 7</div>
|
||
<div class="tpl-text">Рассрочка: 0% на 6 мес или 12 мес под 4% годовых. Оформление за 5 минут на месте, паспорт и СНИЛС.</div>
|
||
</button>
|
||
<button type="button" class="tpl-card personal">
|
||
<div class="tpl-tag">МОЁ · 8</div>
|
||
<div class="tpl-text">Перенёс встречу на {дата}, {время}. Если не подходит — пришлите 2 варианта в течение дня.</div>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- REMINDER -->
|
||
<section class="section" aria-labelledby="reminder-title">
|
||
<div class="section-h">
|
||
<h2 id="reminder-title">Напоминание</h2>
|
||
</div>
|
||
<div class="reminder-form">
|
||
<input type="date" class="input mono" value="2026-05-08" aria-label="Дата напоминания">
|
||
<input type="time" class="input mono" value="09:30" aria-label="Время напоминания">
|
||
<input type="text" class="input" placeholder="Что напомнить?" value="Перезвонить, обсудить рассрочку 6 мес" aria-label="Текст напоминания">
|
||
<button type="button" class="btn">
|
||
<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>
|
||
Добавить
|
||
</button>
|
||
</div>
|
||
<div class="rem-list">
|
||
<div class="rem-row">
|
||
<span class="rem-when">сегодня · 15:00</span>
|
||
<span class="rem-text">Перезвонить — занято было</span>
|
||
<button type="button" class="rem-action" 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>
|
||
</div>
|
||
<div class="rem-row">
|
||
<span class="rem-when">завтра · 09:30</span>
|
||
<span class="rem-text">Перезвонить, обсудить рассрочку 6 мес</span>
|
||
<button type="button" class="rem-action" 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>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER ACTIONS -->
|
||
<div class="footer-actions">
|
||
<button type="button" class="btn btn-primary">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
|
||
Сохранить
|
||
</button>
|
||
<button type="button" class="btn">
|
||
<svg 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>
|
||
Перевести в Канбан
|
||
</button>
|
||
<span class="spacer"></span>
|
||
<button type="button" class="btn btn-danger">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
|
||
Удалить
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ===== RIGHT COLUMN — aside ===== -->
|
||
<aside class="col-aside" aria-label="Дополнительная информация по сделке">
|
||
|
||
<!-- Manager -->
|
||
<section class="aside-section" aria-labelledby="manager-title">
|
||
<div class="section-h">
|
||
<h2 id="manager-title">Менеджер</h2>
|
||
</div>
|
||
<button type="button" class="manager-row">
|
||
<span class="manager-ava" aria-hidden="true">ИП</span>
|
||
<span class="manager-info">
|
||
<span class="manager-name">Иван Петров</span>
|
||
<span class="manager-role">Старший менеджер · 7 активных</span>
|
||
</span>
|
||
<svg class="chev" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18l6-6-6-6"/></svg>
|
||
</button>
|
||
</section>
|
||
|
||
<!-- Mini metrics -->
|
||
<section class="aside-section" aria-labelledby="metrics-title">
|
||
<div class="section-h">
|
||
<h2 id="metrics-title">Метрики сделки</h2>
|
||
</div>
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<span class="metric-k">В воронке</span>
|
||
<span class="metric-v">28<span style="font-size:11px;color:var(--ink-3);margin-left:3px">мин</span></span>
|
||
<span class="metric-sub">с 14:32</span>
|
||
</div>
|
||
<div class="metric">
|
||
<span class="metric-k">Касаний</span>
|
||
<span class="metric-v">3</span>
|
||
<span class="metric-sub">2 звонка · 1 SMS</span>
|
||
</div>
|
||
<div class="metric">
|
||
<span class="metric-k">Стоимость</span>
|
||
<span class="metric-v">1 850<span style="font-size:11px;color:var(--ink-3);margin-left:3px">₽</span></span>
|
||
<span class="metric-sub">тариф «Команда»</span>
|
||
</div>
|
||
<div class="metric">
|
||
<span class="metric-k">Конверсия</span>
|
||
<span class="metric-v">22<span style="font-size:11px;color:var(--ink-3);margin-left:3px">%</span></span>
|
||
<span class="metric-sub">проект · 30 дней</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Activity log -->
|
||
<section class="aside-section" aria-labelledby="activity-title">
|
||
<div class="section-h">
|
||
<h2 id="activity-title">История</h2>
|
||
<button type="button" class="h-action">
|
||
<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>
|
||
экспорт
|
||
</button>
|
||
</div>
|
||
<div class="activity">
|
||
|
||
<div class="act status-change">
|
||
<div class="act-time">14:58 · сегодня</div>
|
||
<div class="act-text">
|
||
<span class="who">Иван П.</span> сменил статус
|
||
<span class="from">Новая</span>
|
||
<span class="arrow">→</span>
|
||
<span class="to">Дозвон</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="act call">
|
||
<div class="act-time">14:55 · сегодня</div>
|
||
<div class="act-text">
|
||
<span class="who">Иван П.</span> позвонил — <strong>занято</strong>, 0:08
|
||
</div>
|
||
</div>
|
||
|
||
<div class="act tag">
|
||
<div class="act-time">14:42 · сегодня</div>
|
||
<div class="act-text">
|
||
<span class="who">Иван П.</span> добавил тег <strong>«горячий»</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="act comment">
|
||
<div class="act-time">14:38 · сегодня</div>
|
||
<div class="act-text">
|
||
<span class="who">Иван П.</span> добавил комментарий
|
||
<span class="quote">Звонила в 14:38, не дозвонилась — занято. Перезвонить после 15:00. Интересует матовый потолок 42 м²…</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="act assign">
|
||
<div class="act-time">14:33 · сегодня</div>
|
||
<div class="act-text">
|
||
Назначен менеджер <span class="to">Иван Петров</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="act create">
|
||
<div class="act-time">14:32 · сегодня</div>
|
||
<div class="act-text">
|
||
Лид <strong>принят</strong> · источник <span class="to">Я.Директ</span>, кампания spring_2026_potolki_msk
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</aside>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|