mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 18:04:45 +00:00
677 lines
39 KiB
HTML
677 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Кабинет администратора — @wasrusgen1 | КОНСАЛТИНГ</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{
|
||
--primary:#047857;
|
||
--dark:#064E3B;
|
||
--mid:#10B981;
|
||
--light:#ECFDF5;
|
||
--sb-bg:#0F0F1A;
|
||
--body-bg:#F5F6F8;
|
||
--white:#ffffff;
|
||
--border:#E5E7EB;
|
||
--text:#1A1A2E;
|
||
--muted:#6B7280;
|
||
--subtle:#F9FAFB;
|
||
}
|
||
html,body{height:100%;overflow:hidden}
|
||
body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);display:flex;flex-direction:column}
|
||
|
||
/* ── Header ─────────────────────────────────────────── */
|
||
.hdr{height:54px;background:var(--dark);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;z-index:10}
|
||
.hdr-icon{width:30px;height:30px;background:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;color:#fff}
|
||
.hdr-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:#fff}
|
||
.hdr-title em{color:rgba(255,255,255,.35);font-style:normal;margin:0 5px;font-weight:400}
|
||
.hdr-badge{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.25);color:var(--mid);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:2px 8px}
|
||
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
|
||
.hdr-notif{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
|
||
.hdr-notif::after{content:'2';position:absolute;top:-3px;right:-3px;width:14px;height:14px;background:#EF4444;border-radius:50%;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;line-height:14px;text-align:center}
|
||
.admin-chip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:4px 12px 4px 4px;cursor:pointer}
|
||
.admin-av{width:26px;height:26px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;color:#fff;flex-shrink:0}
|
||
.admin-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}
|
||
.admin-role{font-size:10px;color:rgba(255,255,255,.35);margin-left:2px}
|
||
|
||
/* ── Layout ──────────────────────────────────────────── */
|
||
.layout{flex:1;display:flex;overflow:hidden}
|
||
|
||
/* ── Sidebar ─────────────────────────────────────────── */
|
||
.sb{width:228px;flex-shrink:0;background:var(--sb-bg);display:flex;flex-direction:column;overflow-y:auto}
|
||
.sb-nav{flex:1;padding:14px 0}
|
||
.sb-cap{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.2);padding:10px 18px 6px}
|
||
.si{display:flex;align-items:center;gap:10px;padding:9px 18px;cursor:pointer;border-left:2px solid transparent;transition:background .12s,border-color .12s;text-decoration:none}
|
||
.si:hover{background:rgba(255,255,255,.04)}
|
||
.si.active{background:rgba(4,120,87,.14);border-left-color:var(--primary)}
|
||
.si-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
|
||
.si.active .si-icon{background:rgba(4,120,87,.2)}
|
||
.si-body{flex:1;min-width:0}
|
||
.si-name{font-size:13px;font-weight:500;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.si.active .si-name{color:#fff;font-weight:600}
|
||
.si-cnt{font-size:11px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.4);border-radius:10px;padding:1px 7px;font-weight:600}
|
||
.si.active .si-cnt{background:rgba(4,120,87,.25);color:var(--mid)}
|
||
.sb-sep{height:1px;background:rgba(255,255,255,.06);margin:8px 18px}
|
||
|
||
/* Projects mini-list in sidebar */
|
||
.sb-projects{padding:0 10px 8px}
|
||
.sb-proj{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background .12s}
|
||
.sb-proj:hover{background:rgba(255,255,255,.04)}
|
||
.sb-proj-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
|
||
.sb-proj-dot.green{background:var(--mid)}
|
||
.sb-proj-dot.yellow{background:#F59E0B}
|
||
.sb-proj-dot.blue{background:#6366F1}
|
||
.sb-proj-info{flex:1;min-width:0}
|
||
.sb-proj-name{font-size:12px;font-weight:500;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.sb-proj-meta{font-size:10px;color:rgba(255,255,255,.25);margin-top:1px}
|
||
.sb-proj-stage{font-size:10px;font-weight:600;color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:1px 5px;flex-shrink:0}
|
||
|
||
.sb-bottom{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07)}
|
||
.sb-elena{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:rgba(4,120,87,.1);border:1px solid rgba(4,120,87,.2);cursor:pointer}
|
||
.sb-elena-av{width:28px;height:28px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;flex-shrink:0}
|
||
.sb-elena-body{flex:1;min-width:0}
|
||
.sb-elena-name{font-size:12px;font-weight:600;color:#fff}
|
||
.sb-elena-status{font-size:10px;color:var(--mid);display:flex;align-items:center;gap:4px}
|
||
.sb-elena-dot{width:5px;height:5px;background:var(--mid);border-radius:50%}
|
||
|
||
/* ── Main content ────────────────────────────────────── */
|
||
.main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
|
||
|
||
.topbar{height:52px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:12px;flex-shrink:0}
|
||
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
|
||
.breadcrumb a{color:var(--primary);font-weight:500;text-decoration:none}
|
||
.breadcrumb span{color:#D1D5DB}
|
||
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
|
||
.btn-ghost{padding:7px 14px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif}
|
||
.btn-ghost:hover{background:var(--subtle);color:var(--text)}
|
||
.btn-primary{padding:7px 16px;border-radius:8px;background:var(--primary);color:#fff;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:'Inter',sans-serif;display:flex;align-items:center;gap:6px}
|
||
.btn-primary:hover{background:var(--dark)}
|
||
|
||
.scroll-area{flex:1;overflow-y:auto;padding:28px}
|
||
|
||
/* ── Step indicator ──────────────────────────────────── */
|
||
.steps-bar{display:flex;align-items:center;gap:0;margin-bottom:28px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:0;overflow:hidden}
|
||
.step{flex:1;display:flex;align-items:center;gap:10px;padding:14px 20px;position:relative;cursor:default}
|
||
.step::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:0;height:0;border-left:10px solid transparent;z-index:1}
|
||
.step+.step{border-left:1px solid var(--border)}
|
||
.step-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
|
||
.step.done .step-num{background:var(--light);color:var(--primary);font-size:16px}
|
||
.step.active .step-num{background:var(--primary);color:#fff;box-shadow:0 3px 8px rgba(4,120,87,.35)}
|
||
.step.pending .step-num{background:var(--subtle);color:#9CA3AF}
|
||
.step-body{}
|
||
.step-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9CA3AF;margin-bottom:1px}
|
||
.step.done .step-label{color:var(--primary)}
|
||
.step.active .step-label{color:var(--primary)}
|
||
.step-name{font-size:13px;font-weight:600;color:var(--text)}
|
||
.step.pending .step-name{color:#9CA3AF}
|
||
|
||
/* ── Step 1 — Done summary ──────────────────────────── */
|
||
.card{background:var(--white);border:1px solid var(--border);border-radius:14px;margin-bottom:20px;overflow:hidden}
|
||
.card-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
|
||
.card-head-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px}
|
||
.card-head-icon.green{background:var(--light)}
|
||
.card-head-title{font-size:14px;font-weight:700;color:var(--text)}
|
||
.card-head-sub{font-size:12px;color:var(--muted);margin-top:1px}
|
||
.card-head-right{margin-left:auto}
|
||
.badge-done{display:flex;align-items:center;gap:5px;background:var(--light);color:var(--primary);font-size:11px;font-weight:700;border-radius:20px;padding:4px 10px}
|
||
.badge-active{display:flex;align-items:center;gap:5px;background:#EFF6FF;color:#3B82F6;font-size:11px;font-weight:700;border-radius:20px;padding:4px 10px}
|
||
.card-body{padding:18px 20px}
|
||
.client-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
|
||
.cs-item{padding:12px 14px;background:var(--subtle);border-radius:10px;border:1px solid var(--border)}
|
||
.cs-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9CA3AF;margin-bottom:4px}
|
||
.cs-value{font-size:14px;font-weight:600;color:var(--text)}
|
||
.cs-sub{font-size:11px;color:var(--muted);margin-top:2px}
|
||
.niche-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.18);color:#6366F1;font-size:12px;font-weight:600;border-radius:20px;padding:4px 10px;margin-top:4px}
|
||
|
||
/* ── Step 2 — Elena bref chat ───────────────────────── */
|
||
.bref-wrap{display:flex;flex-direction:column;height:420px}
|
||
.chat-area{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
|
||
.chat-date{text-align:center;font-size:11px;color:#9CA3AF;font-weight:500;margin:4px 0}
|
||
.msg{display:flex;align-items:flex-end;gap:8px}
|
||
.msg.out{flex-direction:row-reverse}
|
||
.av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;color:#fff}
|
||
.av.elena{background:var(--primary)}
|
||
.av.rusl{background:#6366F1}
|
||
.bubble{padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.5;max-width:72%;position:relative}
|
||
.bubble.in{background:var(--white);border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--text)}
|
||
.bubble.out{background:var(--primary);color:#fff;border-bottom-right-radius:4px}
|
||
.bubble-time{font-size:10px;color:rgba(255,255,255,.55);margin-top:4px;text-align:right}
|
||
.bubble.in .bubble-time{color:#9CA3AF;text-align:left}
|
||
/* Voice bubble */
|
||
.voice-bub{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;max-width:280px;position:relative}
|
||
.voice-bub.in{background:var(--white);border:1px solid var(--border);border-bottom-left-radius:4px}
|
||
.voice-bub.out{background:var(--primary);border-bottom-right-radius:4px}
|
||
.vplay{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
|
||
.voice-bub.in .vplay{background:var(--light);color:var(--primary)}
|
||
.voice-bub.out .vplay{background:rgba(255,255,255,.2);color:#fff}
|
||
.vwave{flex:1;height:24px;display:flex;align-items:center;gap:2px}
|
||
.vwave span{width:3px;background:currentColor;border-radius:2px;flex-shrink:0;opacity:.7}
|
||
.voice-bub.in .vwave{color:var(--primary)}
|
||
.voice-bub.out .vwave{color:rgba(255,255,255,.7)}
|
||
.vdur{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);flex-shrink:0}
|
||
.voice-bub.in .vdur{color:var(--muted)}
|
||
.vtime{font-size:10px;margin-top:6px}
|
||
.voice-bub.in .vtime{color:#9CA3AF}
|
||
.voice-bub.out .vtime{color:rgba(255,255,255,.55);text-align:right}
|
||
|
||
/* Elena typing indicator */
|
||
.typing{display:flex;align-items:flex-end;gap:8px}
|
||
.typing-bubble{background:var(--white);border:1px solid var(--border);border-radius:16px;border-bottom-left-radius:4px;padding:12px 16px;display:flex;align-items:center;gap:4px}
|
||
.typing-dot{width:7px;height:7px;border-radius:50%;background:#9CA3AF;animation:typingBounce 1.2s infinite ease-in-out}
|
||
.typing-dot:nth-child(2){animation-delay:.2s}
|
||
.typing-dot:nth-child(3){animation-delay:.4s}
|
||
@keyframes typingBounce{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1}}
|
||
.typing-label{font-size:11px;color:#9CA3AF;margin-left:4px}
|
||
|
||
/* Elena insight bar */
|
||
.elena-insight{background:linear-gradient(135deg,rgba(4,120,87,.06),rgba(16,185,129,.04));border:1px solid rgba(4,120,87,.15);border-radius:10px;padding:10px 14px;margin:0 20px 14px;display:flex;align-items:flex-start;gap:10px}
|
||
.insight-icon{width:28px;height:28px;border-radius:8px;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;margin-top:1px}
|
||
.insight-body{flex:1}
|
||
.insight-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);margin-bottom:3px}
|
||
.insight-text{font-size:12px;color:#374151;line-height:1.5}
|
||
|
||
/* Chat input bar */
|
||
.chat-input-bar{padding:14px 20px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--white)}
|
||
.input-field{flex:1;background:var(--subtle);border:1px solid var(--border);border-radius:10px;padding:9px 14px;font-size:13px;font-family:'Inter',sans-serif;color:var(--text);outline:none;resize:none}
|
||
.input-field::placeholder{color:#9CA3AF}
|
||
.input-btn{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;flex-shrink:0}
|
||
.input-btn.voice{background:var(--light);color:var(--primary)}
|
||
.input-btn.send{background:var(--primary);color:#fff}
|
||
.input-btn:hover.voice{background:#D1FAE5}
|
||
.input-btn:hover.send{background:var(--dark)}
|
||
|
||
/* ── Step 3 — Team proposal ──────────────────────────── */
|
||
.team-proposal{padding:18px 20px}
|
||
.elena-says{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px}
|
||
.elena-says .av{flex-shrink:0;margin-top:2px}
|
||
.elena-speech{flex:1}
|
||
.elena-speech-text{background:var(--light);border:1px solid rgba(4,120,87,.15);border-radius:12px;border-top-left-radius:4px;padding:12px 16px;font-size:13px;color:var(--dark);line-height:1.55}
|
||
.elena-speech-time{font-size:10px;color:#9CA3AF;margin-top:4px;margin-left:4px}
|
||
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
|
||
.agent-card{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--white);cursor:pointer;transition:border-color .15s,box-shadow .15s;position:relative;overflow:hidden}
|
||
.agent-card:hover{border-color:var(--mid);box-shadow:0 4px 12px rgba(4,120,87,.1)}
|
||
.agent-card.selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(4,120,87,.12)}
|
||
.agent-card .ac-check{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
|
||
.agent-card.selected .ac-check{opacity:1}
|
||
.ac-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
|
||
.ac-av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
|
||
.ac-name{font-size:13px;font-weight:700;color:var(--text)}
|
||
.ac-role{font-size:11px;color:var(--primary);font-weight:600;margin-top:1px}
|
||
.ac-desc{font-size:12px;color:var(--muted);line-height:1.45}
|
||
.ac-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
|
||
.ac-tag{font-size:10px;font-weight:600;color:#6366F1;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.15);border-radius:6px;padding:2px 7px}
|
||
|
||
.team-confirm-bar{background:var(--subtle);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px}
|
||
.tcb-text{flex:1}
|
||
.tcb-title{font-size:13px;font-weight:600;color:var(--text)}
|
||
.tcb-sub{font-size:11px;color:var(--muted);margin-top:2px}
|
||
.btn-confirm{padding:9px 20px;border-radius:9px;background:var(--primary);color:#fff;font-size:13px;font-weight:700;cursor:pointer;border:none;font-family:'Inter',sans-serif;white-space:nowrap}
|
||
.btn-confirm:hover{background:var(--dark)}
|
||
|
||
/* Project list in sidebar - active project highlight */
|
||
.sb-new-btn{display:flex;align-items:center;gap:7px;margin:6px 12px;padding:8px 10px;border-radius:8px;background:rgba(4,120,87,.12);border:1px solid rgba(4,120,87,.2);cursor:pointer;color:var(--mid);font-size:12px;font-weight:600}
|
||
.sb-new-btn svg{flex-shrink:0}
|
||
|
||
/* Scrollbar */
|
||
::-webkit-scrollbar{width:5px;height:5px}
|
||
::-webkit-scrollbar-track{background:transparent}
|
||
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══ HEADER ══════════════════════════════════════════ -->
|
||
<header class="hdr">
|
||
<div class="hdr-icon">@</div>
|
||
<div class="hdr-title">wasrusgen1 <em>/</em> КОНСАЛТИНГ</div>
|
||
<div class="hdr-badge">ADMIN</div>
|
||
<div class="hdr-right">
|
||
<!-- Notification bell -->
|
||
<div class="hdr-notif">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.55)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||
</div>
|
||
<!-- Admin chip -->
|
||
<div class="admin-chip">
|
||
<div class="admin-av">Р</div>
|
||
<div class="admin-name">Руслан В. <span class="admin-role">· admin</span></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ══ LAYOUT ═══════════════════════════════════════════ -->
|
||
<div class="layout">
|
||
|
||
<!-- ── SIDEBAR ─────────────────────────────────────── -->
|
||
<aside class="sb">
|
||
<div class="sb-nav">
|
||
|
||
<div class="sb-cap">Проекты</div>
|
||
|
||
<div class="si active">
|
||
<div class="si-icon">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--mid)"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
|
||
</div>
|
||
<div class="si-body">
|
||
<div class="si-name">Все проекты</div>
|
||
</div>
|
||
<div class="si-cnt">3</div>
|
||
</div>
|
||
|
||
<!-- Projects mini-list -->
|
||
<div class="sb-projects">
|
||
<div class="sb-proj">
|
||
<div class="sb-proj-dot green"></div>
|
||
<div class="sb-proj-info">
|
||
<div class="sb-proj-name">Иванова С.П.</div>
|
||
<div class="sb-proj-meta">Нутрициология · сейчас</div>
|
||
</div>
|
||
<div class="sb-proj-stage">Э1</div>
|
||
</div>
|
||
<div class="sb-proj">
|
||
<div class="sb-proj-dot yellow"></div>
|
||
<div class="sb-proj-info">
|
||
<div class="sb-proj-name">ООО «Элит Швей»</div>
|
||
<div class="sb-proj-meta">Производство · этап 3</div>
|
||
</div>
|
||
<div class="sb-proj-stage">Э3</div>
|
||
</div>
|
||
<div class="sb-proj">
|
||
<div class="sb-proj-dot blue"></div>
|
||
<div class="sb-proj-info">
|
||
<div class="sb-proj-name">Клиника «Медика»</div>
|
||
<div class="sb-proj-meta">Медицина · завершён</div>
|
||
</div>
|
||
<div class="sb-proj-stage">✓</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sb-new-btn">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
Новый проект
|
||
</div>
|
||
|
||
<div class="sb-sep"></div>
|
||
<div class="sb-cap">Инструменты</div>
|
||
|
||
<div class="si">
|
||
<div class="si-icon">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="rgba(156,163,175,.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||
</div>
|
||
<div class="si-body"><div class="si-name">Команда агентов</div></div>
|
||
</div>
|
||
|
||
<div class="si">
|
||
<div class="si-icon">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="rgba(156,163,175,.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
||
</div>
|
||
<div class="si-body"><div class="si-name">Шаблоны анкет</div></div>
|
||
</div>
|
||
|
||
<div class="si">
|
||
<div class="si-icon">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="rgba(156,163,175,.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
|
||
</div>
|
||
<div class="si-body"><div class="si-name">Настройки</div></div>
|
||
</div>
|
||
|
||
</div><!-- /sb-nav -->
|
||
|
||
<!-- Elena bottom chip -->
|
||
<div class="sb-bottom">
|
||
<div class="sb-elena">
|
||
<div class="sb-elena-av">Е</div>
|
||
<div class="sb-elena-body">
|
||
<div class="sb-elena-name">Елена</div>
|
||
<div class="sb-elena-status">
|
||
<div class="sb-elena-dot"></div>
|
||
Онлайн · ваш ассистент
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</aside><!-- /sb -->
|
||
|
||
<!-- ── MAIN ────────────────────────────────────────── -->
|
||
<main class="main">
|
||
|
||
<!-- Topbar -->
|
||
<div class="topbar">
|
||
<div class="breadcrumb">
|
||
<a href="#">Проекты</a>
|
||
<span>›</span>
|
||
<span>Новый проект</span>
|
||
</div>
|
||
<div class="topbar-right">
|
||
<button class="btn-ghost">Сохранить черновик</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scrollable content -->
|
||
<div class="scroll-area">
|
||
|
||
<!-- Step indicator -->
|
||
<div class="steps-bar">
|
||
<div class="step done">
|
||
<div class="step-num">✓</div>
|
||
<div class="step-body">
|
||
<div class="step-label">Шаг 1</div>
|
||
<div class="step-name">Клиент</div>
|
||
</div>
|
||
</div>
|
||
<div class="step active">
|
||
<div class="step-num">2</div>
|
||
<div class="step-body">
|
||
<div class="step-label">Шаг 2</div>
|
||
<div class="step-name">Брифинг с Еленой</div>
|
||
</div>
|
||
</div>
|
||
<div class="step pending">
|
||
<div class="step-num">3</div>
|
||
<div class="step-body">
|
||
<div class="step-label">Шаг 3</div>
|
||
<div class="step-name">Команда</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── CARD 1: Client summary (done) ────────────── -->
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<div class="card-head-icon green">👤</div>
|
||
<div>
|
||
<div class="card-head-title">Данные клиента</div>
|
||
<div class="card-head-sub">Заполнено 29 мая · 10:48</div>
|
||
</div>
|
||
<div class="card-head-right">
|
||
<div class="badge-done">
|
||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Завершено
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="client-summary">
|
||
<div class="cs-item">
|
||
<div class="cs-label">Клиент</div>
|
||
<div class="cs-value">Иванова Светлана</div>
|
||
<div class="cs-sub">Петровна · ИП</div>
|
||
</div>
|
||
<div class="cs-item">
|
||
<div class="cs-label">Первый контакт</div>
|
||
<div class="cs-value">29 мая 2026</div>
|
||
<div class="cs-sub">11:00–11:32 · Zoom</div>
|
||
</div>
|
||
<div class="cs-item">
|
||
<div class="cs-label">Направление</div>
|
||
<div class="cs-value">Нутрициология</div>
|
||
<div class="niche-pill">
|
||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/></svg>
|
||
Онлайн-практика
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── CARD 2: Elena briefing chat (active) ──────── -->
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<div class="card-head-icon green">💬</div>
|
||
<div>
|
||
<div class="card-head-title">Брифинг с Еленой</div>
|
||
<div class="card-head-sub">Расскажи Елене о клиенте — она сформирует команду</div>
|
||
</div>
|
||
<div class="card-head-right">
|
||
<div class="badge-active">
|
||
<span style="width:6px;height:6px;border-radius:50%;background:#3B82F6;display:inline-block"></span>
|
||
В процессе
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bref-wrap">
|
||
<div class="chat-area">
|
||
<div class="chat-date">29 мая 2026 · 11:38</div>
|
||
|
||
<!-- Elena: first question -->
|
||
<div class="msg">
|
||
<div class="av elena">Е</div>
|
||
<div>
|
||
<div class="bubble in">Руслан, отлично! Звонок с Светланой прошёл. Расскажи мне — чем конкретно занимается её практика? Сколько клиентов, как работает, основные болевые точки?</div>
|
||
<div class="bubble-time" style="color:#9CA3AF;font-size:10px;margin-top:4px;margin-left:4px">11:38</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ruslán: voice 2:14 -->
|
||
<div class="msg out">
|
||
<div class="av rusl">Р</div>
|
||
<div>
|
||
<div class="voice-bub out">
|
||
<div class="vplay">
|
||
<svg width="12" height="14" viewBox="0 0 12 14" fill="white"><polygon points="1,1 11,7 1,13"/></svg>
|
||
</div>
|
||
<div class="vwave">
|
||
<span style="height:5px"></span><span style="height:10px"></span><span style="height:16px"></span><span style="height:8px"></span><span style="height:18px"></span><span style="height:12px"></span><span style="height:7px"></span><span style="height:20px"></span><span style="height:10px"></span><span style="height:14px"></span><span style="height:6px"></span><span style="height:18px"></span><span style="height:9px"></span><span style="height:13px"></span><span style="height:5px"></span><span style="height:16px"></span><span style="height:11px"></span><span style="height:8px"></span><span style="height:20px"></span><span style="height:7px"></span>
|
||
</div>
|
||
<div class="vdur">2:14</div>
|
||
</div>
|
||
<div class="bubble-time" style="color:rgba(255,255,255,.0);font-size:10px;margin-top:4px;text-align:right;color:#9CA3AF">11:39</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Elena: summarizes + next question -->
|
||
<div class="msg">
|
||
<div class="av elena">Е</div>
|
||
<div>
|
||
<div class="bubble in">Понял. Нутрициолог, работает онлайн из дома, блогер Instagram, примерно 40–60 активных клиентов. Основная боль — хаос в ведении: всё в телефоне и в голове. Есть ещё боли? И — работает одна или есть помощник?</div>
|
||
<div class="bubble-time" style="color:#9CA3AF;font-size:10px;margin-top:4px;margin-left:4px">11:40</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ruslán: text -->
|
||
<div class="msg out">
|
||
<div class="av rusl">Р</div>
|
||
<div>
|
||
<div class="bubble out">Ещё боль — нет понимания какой клиент прибыльный. Говорит что работает много, а денег мало. Одна работает, хочет нанять ассистента но не знает как.</div>
|
||
<div class="bubble-time">11:41</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ruslán: voice 0:47 -->
|
||
<div class="msg out">
|
||
<div class="av rusl">Р</div>
|
||
<div>
|
||
<div class="voice-bub out">
|
||
<div class="vplay">
|
||
<svg width="12" height="14" viewBox="0 0 12 14" fill="white"><polygon points="1,1 11,7 1,13"/></svg>
|
||
</div>
|
||
<div class="vwave">
|
||
<span style="height:8px"></span><span style="height:14px"></span><span style="height:18px"></span><span style="height:10px"></span><span style="height:7px"></span><span style="height:20px"></span><span style="height:12px"></span><span style="height:16px"></span><span style="height:6px"></span><span style="height:18px"></span><span style="height:9px"></span><span style="height:13px"></span><span style="height:20px"></span><span style="height:5px"></span><span style="height:15px"></span><span style="height:10px"></span><span style="height:18px"></span><span style="height:8px"></span><span style="height:12px"></span><span style="height:16px"></span>
|
||
</div>
|
||
<div class="vdur">0:47</div>
|
||
</div>
|
||
<div class="bubble-time" style="color:#9CA3AF;font-size:10px;margin-top:4px;text-align:right">11:42</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Elena: insight detected + typing -->
|
||
<div class="msg">
|
||
<div class="av elena">Е</div>
|
||
<div>
|
||
<div class="bubble in">Хорошо, вижу паттерн. Сейчас подбираю команду под её профиль...</div>
|
||
<div class="bubble-time" style="color:#9CA3AF;font-size:10px;margin-top:4px;margin-left:4px">11:42</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Typing indicator -->
|
||
<div class="typing">
|
||
<div class="av elena">Е</div>
|
||
<div class="typing-bubble">
|
||
<div class="typing-dot"></div>
|
||
<div class="typing-dot"></div>
|
||
<div class="typing-dot"></div>
|
||
<span class="typing-label">Анализирует брифинг</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /chat-area -->
|
||
|
||
<!-- Elena insight bar -->
|
||
<div class="elena-insight">
|
||
<div class="insight-icon">💡</div>
|
||
<div class="insight-body">
|
||
<div class="insight-label">Елена распознала паттерн</div>
|
||
<div class="insight-text">Онлайн-практика · хаос в CRM · непонятная экономика · потребность в делегировании. Команда из 4 специалистов готова.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Chat input -->
|
||
<div class="chat-input-bar">
|
||
<button class="input-btn voice">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
||
</button>
|
||
<input class="input-field" placeholder="Добавь комментарий или уточнение..." type="text">
|
||
<button class="input-btn send">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
</div><!-- /bref-wrap -->
|
||
</div>
|
||
|
||
<!-- ── CARD 3: Team proposal ─────────────────────── -->
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<div class="card-head-icon green">🤝</div>
|
||
<div>
|
||
<div class="card-head-title">Команда для Светланы</div>
|
||
<div class="card-head-sub">Предложение Елены · на основе брифинга</div>
|
||
</div>
|
||
<div class="card-head-right">
|
||
<div class="badge-active" style="background:#F0FDF4;color:var(--primary)">
|
||
<span style="width:6px;height:6px;border-radius:50%;background:var(--mid);display:inline-block"></span>
|
||
Готово к подтверждению
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="team-proposal">
|
||
|
||
<!-- Elena says -->
|
||
<div class="elena-says">
|
||
<div class="av elena">Е</div>
|
||
<div class="elena-speech">
|
||
<div class="elena-speech-text">
|
||
По итогам брифинга вижу 4 ключевых зоны. Предлагаю такой состав команды — можешь добавить или убрать любого:
|
||
</div>
|
||
<div class="elena-speech-time">11:43</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Agent cards -->
|
||
<div class="team-grid">
|
||
|
||
<div class="agent-card selected">
|
||
<div class="ac-check">
|
||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<div class="ac-top">
|
||
<div class="ac-av" style="background:#FEF3C7;font-size:20px">🥗</div>
|
||
<div>
|
||
<div class="ac-name">Методолог практики</div>
|
||
<div class="ac-role">Стандарты работы с клиентами</div>
|
||
</div>
|
||
</div>
|
||
<div class="ac-desc">Структурирует услуги, помогает выстроить продуктовую линейку и систему ведения клиента от первой консультации до результата.</div>
|
||
<div class="ac-tags">
|
||
<span class="ac-tag">онбординг</span>
|
||
<span class="ac-tag">продукты</span>
|
||
<span class="ac-tag">регламенты</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent-card selected">
|
||
<div class="ac-check">
|
||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<div class="ac-top">
|
||
<div class="ac-av" style="background:#EFF6FF;font-size:20px">📊</div>
|
||
<div>
|
||
<div class="ac-name">CRM-аналитик</div>
|
||
<div class="ac-role">Финансы и учёт практики</div>
|
||
</div>
|
||
</div>
|
||
<div class="ac-desc">Разбирает экономику: какой клиент прибыльный, как посчитать свой час, система учёта платежей и задолженностей.</div>
|
||
<div class="ac-tags">
|
||
<span class="ac-tag">учёт</span>
|
||
<span class="ac-tag">прибыльность</span>
|
||
<span class="ac-tag">тарифы</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent-card selected">
|
||
<div class="ac-check">
|
||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<div class="ac-top">
|
||
<div class="ac-av" style="background:#F5F3FF;font-size:20px">📱</div>
|
||
<div>
|
||
<div class="ac-name">SMM-стратег</div>
|
||
<div class="ac-role">Instagram · контент · трафик</div>
|
||
</div>
|
||
</div>
|
||
<div class="ac-desc">Аудит текущего контента, контент-план под её нишу, воронка из блога в заявку. Без хаоса и без выгорания.</div>
|
||
<div class="ac-tags">
|
||
<span class="ac-tag">контент</span>
|
||
<span class="ac-tag">рилс</span>
|
||
<span class="ac-tag">воронка</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="agent-card selected">
|
||
<div class="ac-check">
|
||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
|
||
</div>
|
||
<div class="ac-top">
|
||
<div class="ac-av" style="background:#FFF1F2;font-size:20px">🤝</div>
|
||
<div>
|
||
<div class="ac-name">HR-консультант</div>
|
||
<div class="ac-role">Первый найм · делегирование</div>
|
||
</div>
|
||
</div>
|
||
<div class="ac-desc">Поможет описать задачи ассистента, найти подходящего человека и выстроить передачу операционки без потери качества.</div>
|
||
<div class="ac-tags">
|
||
<span class="ac-tag">найм</span>
|
||
<span class="ac-tag">делегирование</span>
|
||
<span class="ac-tag">SOP</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /team-grid -->
|
||
|
||
<!-- Confirm bar -->
|
||
<div class="team-confirm-bar">
|
||
<div class="tcb-text">
|
||
<div class="tcb-title">4 специалиста выбраны</div>
|
||
<div class="tcb-sub">Клиенту придёт приглашение в кабинет · Этап 2 запустится автоматически</div>
|
||
</div>
|
||
<button class="btn-confirm">Подтвердить и запустить →</button>
|
||
</div>
|
||
|
||
</div><!-- /team-proposal -->
|
||
</div>
|
||
|
||
<div style="height:20px"></div>
|
||
</div><!-- /scroll-area -->
|
||
|
||
</main><!-- /main -->
|
||
</div><!-- /layout -->
|
||
|
||
</body>
|
||
</html>
|