wasrusgen/wasrusgen1-crm
1
0
Fork 0
mirror of https://github.com/wasrusgen/wasrusgen1-crm.git synced 2026-06-03 15:04:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: stage 1 interview chat with voice/file/text messages

Browse Source
This commit is contained in:
wasrusgen 2026-05-29 00:49:58 +03:00
parent 662d815e45
commit f87b026498
1 changed files with 159 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
docs/mockup_cabinet.html
View File

@ -191,6 +191,42 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
.chat-send{width:32px;height:32px;background:var(--primary);border:none;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.chat-send:hover{background:#065f46}
/* Interview Chat */
.iv-wrap{display:flex;flex-direction:column;gap:0;flex:1;overflow-y:auto;padding:6px 0 8px}
.iv-date{text-align:center;font-size:11px;color:#94a3b8;font-weight:600;padding:12px 0 8px;letter-spacing:.03em}
.msg{display:flex;align-items:flex-end;gap:9px;margin-bottom:10px}
.msg.out{flex-direction:row-reverse}
.msg-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.msg-av-cons{background:var(--dark);color:#fff}
.msg-av img{width:100%;height:100%;object-fit:cover}
.bubble{max-width:72%;border-radius:16px;padding:10px 13px;font-size:13px;line-height:1.5;position:relative}
.bubble.in{background:#fff;border:1.5px solid var(--border);border-bottom-left-radius:4px;color:var(--text)}
.bubble.out{background:var(--primary);border-bottom-right-radius:4px;color:#fff}
.msg-ts{font-size:10px;margin-top:5px;opacity:.5;display:block;text-align:right}
.msg-name{font-size:10px;font-weight:700;color:var(--primary);margin-bottom:3px}
/* Voice bubble */
.voice{display:flex;align-items:center;gap:9px;min-width:180px}
.voice-btn{width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px}
.bubble.in .voice-btn{background:var(--light);color:var(--primary)}
.bubble.out .voice-btn{background:rgba(255,255,255,.2);color:#fff}
.voice-wave{flex:1;height:28px}
.voice-wave line{stroke-linecap:round}
.bubble.in .voice-wave line{stroke:#10B981}
.bubble.out .voice-wave line{stroke:rgba(255,255,255,.7)}
.voice-dur{font-size:11px;opacity:.6;white-space:nowrap;flex-shrink:0}
/* File bubble */
.file-bub{display:flex;align-items:center;gap:10px;min-width:180px}
.file-ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.bubble.in .file-ic{background:var(--light)}
.bubble.out .file-ic{background:rgba(255,255,255,.15)}
.file-info{flex:1}
.file-name{font-size:12px;font-weight:600;margin-bottom:1px}
.file-size{font-size:11px;opacity:.55}
/* Confirm strip */
.iv-confirm{background:#F0FDF4;border:1.5px solid rgba(16,185,129,.25);border-radius:13px;padding:14px 18px;display:flex;align-items:center;gap:14px;margin-top:6px;flex-shrink:0}
.iv-confirm-txt{flex:1;font-size:13px;color:#065f46;font-weight:500}
.iv-confirm-sub{font-size:11px;color:#059669;margin-top:1px;font-weight:400}
/* Demo */
.demo{background:#0F0F1A;border-top:1px solid rgba(255,255,255,.06);padding:7px 18px;display:flex;align-items:center;gap:7px;flex-shrink:0}
.demo-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.25);margin-right:2px}
@ -290,27 +326,134 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
<div class="hero-txt">
<div class="hero-tag done-tag">Этап 1 из 5 · Завершён</div>
<div class="hero-h">Знакомство</div>
<div class="hero-d">Елена выявила ключевые боли бизнеса и составила список участников диагностики</div>
<div class="hero-d">Интервью с руководителем. Здесь зафиксировано всё, что обсудили — голосом, текстом и файлами.</div>
</div>
<button class="btn btn-done">✓ Выполнено</button>
</div>
<div class="two-col">
<div class="card">
<div class="card-h">Собранная информация</div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t done">Сфера: производство и монтаж</div></div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t done">Команда: 12 сотрудников</div></div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t done">Боль 1: потери клиентов при первом звонке</div></div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t done">Боль 2: долгое согласование смет</div></div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t done">Боль 3: нет контроля над выездами</div></div>
<!-- Interview chat -->
<div class="card" style="flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0">
<div style="padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0">
<div style="font-size:13px;font-weight:700;color:var(--text)">Протокол интервью</div>
<div style="margin-left:auto;font-size:11px;color:var(--muted)">26 мая · 14:00–14:47</div>
</div>
<div class="card">
<div class="card-h">Участники для Этапа 2</div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t">Иванов Алексей — Директор</div></div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t">Петрова Мария — Нач. производства</div></div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t">Сидоров Николай — Гл. бухгалтер</div></div>
<div class="chk"><div class="chk-ic ic-done">✓</div><div class="chk-t">Козлова Наталья — Менеджер продаж</div></div>
<div class="iv-wrap" style="padding:12px 18px">
<div class="iv-date">26 мая 2026</div>
<!-- Консультант: вопрос 1 -->
<div class="msg out">
<div class="msg-av msg-av-cons">В</div>
<div>
<div class="bubble out">Добрый день, Алексей! Расскажите — чем занимается компания, сколько человек в команде?<span class="msg-ts">14:02</span></div>
</div>
</div>
<!-- Клиент: голосовое -->
<div class="msg">
<div class="msg-av"><img src="ЕЛЕНА/Q-0zu_qjXpiiPlppUi5Gxg@2k.webp" alt=""></div>
<div>
<div style="font-size:10px;font-weight:700;color:var(--primary);margin-bottom:3px;padding-left:2px">Иванов Алексей</div>
<div class="bubble in">
<div class="voice">
<button class="voice-btn">▶</button>
<svg class="voice-wave" viewBox="0 0 120 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="4" y1="14" x2="4" y2="14" stroke-width="2.5"/><line x1="10" y1="10" x2="10" y2="18" stroke-width="2.5"/><line x1="16" y1="7" x2="16" y2="21" stroke-width="2.5"/><line x1="22" y1="5" x2="22" y2="23" stroke-width="2.5"/><line x1="28" y1="9" x2="28" y2="19" stroke-width="2.5"/><line x1="34" y1="12" x2="34" y2="16" stroke-width="2.5"/><line x1="40" y1="6" x2="40" y2="22" stroke-width="2.5"/><line x1="46" y1="4" x2="46" y2="24" stroke-width="2.5"/><line x1="52" y1="8" x2="52" y2="20" stroke-width="2.5"/><line x1="58" y1="11" x2="58" y2="17" stroke-width="2.5"/><line x1="64" y1="5" x2="64" y2="23" stroke-width="2.5"/><line x1="70" y1="9" x2="70" y2="19" stroke-width="2.5"/><line x1="76" y1="13" x2="76" y2="15" stroke-width="2.5"/><line x1="82" y1="7" x2="82" y2="21" stroke-width="2.5"/><line x1="88" y1="10" x2="88" y2="18" stroke-width="2.5"/><line x1="94" y1="4" x2="94" y2="24" stroke-width="2.5"/><line x1="100" y1="8" x2="100" y2="20" stroke-width="2.5"/><line x1="106" y1="12" x2="106" y2="16" stroke-width="2.5"/><line x1="112" y1="9" x2="112" y2="19" stroke-width="2.5"/><line x1="118" y1="13" x2="118" y2="15" stroke-width="2.5"/>
</svg>
<span class="voice-dur">1:24</span>
</div>
<span class="msg-ts">14:03</span>
</div>
</div>
</div>
<!-- Консультант: вопрос 2 -->
<div class="msg out">
<div class="msg-av msg-av-cons">В</div>
<div>
<div class="bubble out">Какие главные проблемы мешают расти? Что забирает больше всего вашего времени?<span class="msg-ts">14:09</span></div>
</div>
</div>
<!-- Клиент: текст -->
<div class="msg">
<div class="msg-av"><img src="ЕЛЕНА/Q-0zu_qjXpiiPlppUi5Gxg@2k.webp" alt=""></div>
<div>
<div style="font-size:10px;font-weight:700;color:var(--primary);margin-bottom:3px;padding-left:2px">Иванов Алексей</div>
<div class="bubble in">Теряем клиентов на первом звонке — менеджер не успевает ответить. Сметы согласуем по 3–5 дней, пока всё не потеряется в почте. И не знаю где мои выездные бригады в реальном времени.<span class="msg-ts">14:11</span></div>
</div>
</div>
<!-- Клиент: голосовое 2 -->
<div class="msg">
<div class="msg-av"><img src="ЕЛЕНА/Q-0zu_qjXpiiPlppUi5Gxg@2k.webp" alt=""></div>
<div>
<div class="bubble in">
<div class="voice">
<button class="voice-btn">▶</button>
<svg class="voice-wave" viewBox="0 0 120 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="4" y1="12" x2="4" y2="16" stroke-width="2.5"/><line x1="10" y1="8" x2="10" y2="20" stroke-width="2.5"/><line x1="16" y1="5" x2="16" y2="23" stroke-width="2.5"/><line x1="22" y1="9" x2="22" y2="19" stroke-width="2.5"/><line x1="28" y1="6" x2="28" y2="22" stroke-width="2.5"/><line x1="34" y1="11" x2="34" y2="17" stroke-width="2.5"/><line x1="40" y1="4" x2="40" y2="24" stroke-width="2.5"/><line x1="46" y1="7" x2="46" y2="21" stroke-width="2.5"/><line x1="52" y1="10" x2="52" y2="18" stroke-width="2.5"/><line x1="58" y1="13" x2="58" y2="15" stroke-width="2.5"/><line x1="64" y1="7" x2="64" y2="21" stroke-width="2.5"/><line x1="70" y1="5" x2="70" y2="23" stroke-width="2.5"/><line x1="76" y1="9" x2="76" y2="19" stroke-width="2.5"/><line x1="82" y1="12" x2="82" y2="16" stroke-width="2.5"/><line x1="88" y1="6" x2="88" y2="22" stroke-width="2.5"/><line x1="94" y1="10" x2="94" y2="18" stroke-width="2.5"/><line x1="100" y1="4" x2="100" y2="24" stroke-width="2.5"/><line x1="106" y1="8" x2="106" y2="20" stroke-width="2.5"/><line x1="112" y1="11" x2="112" y2="17" stroke-width="2.5"/><line x1="118" y1="13" x2="118" y2="15" stroke-width="2.5"/>
</svg>
<span class="voice-dur">0:47</span>
</div>
<span class="msg-ts">14:12</span>
</div>
</div>
</div>
<!-- Консультант: вопрос 3 -->
<div class="msg out">
<div class="msg-av msg-av-cons">В</div>
<div>
<div class="bubble out">Кто у вас ключевые люди в процессах? Кого нужно подключить к диагностике?<span class="msg-ts">14:18</span></div>
</div>
</div>
<!-- Клиент: файл -->
<div class="msg">
<div class="msg-av"><img src="ЕЛЕНА/Q-0zu_qjXpiiPlppUi5Gxg@2k.webp" alt=""></div>
<div>
<div style="font-size:10px;font-weight:700;color:var(--primary);margin-bottom:3px;padding-left:2px">Иванов Алексей</div>
<div class="bubble in">
<div class="file-bub">
<div class="file-ic">📋</div>
<div class="file-info">
<div class="file-name">Оргструктура_2026.pdf</div>
<div class="file-size">148 КБ · PDF</div>
</div>
</div>
<span class="msg-ts">14:19</span>
</div>
</div>
</div>
<div class="msg">
<div class="msg-av"><img src="ЕЛЕНА/Q-0zu_qjXpiiPlppUi5Gxg@2k.webp" alt=""></div>
<div>
<div class="bubble in">Нач. производства — Петрова Мария, бухгалтер — Сидоров Николай, продажи — Козлова Наталья. Они лучше всего знают процессы изнутри.<span class="msg-ts">14:20</span></div>
</div>
</div>
<!-- Консультант: итог -->
<div class="msg out">
<div class="msg-av msg-av-cons">В</div>
<div>
<div class="bubble out">Отлично. Зафиксировал 3 болевые точки, участников диагностики. Елена разошлёт персональные ссылки сегодня до 18:00.<span class="msg-ts">14:44</span></div>
</div>
</div>
</div><!-- /iv-wrap -->
<!-- Confirm strip -->
<div class="iv-confirm" style="margin:0 14px 14px">
<div>
<div class="iv-confirm-txt">✓ Протокол подтверждён</div>
<div class="iv-confirm-sub">Иванов А. · 26 мая, 15:02</div>
</div>
<button class="btn btn-done btn-sm" style="margin-left:auto;cursor:default">Подписано</button>
</div>
</div>
</div><!-- /card -->
</div>
<!-- Этап 2 -->