mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 18:24:47 +00:00
feat: stage 4 full redesign — Opus 4.8 banner, context pack, pain matrix (7 points)
This commit is contained in:
wasrusgen
parent
ad6662b5ea
commit
25c668644d
@ -201,6 +201,41 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
|
|||||||
.af-off{background:var(--border);width:18%}
|
.af-off{background:var(--border);width:18%}
|
||||||
@keyframes run{0%{width:30%}50%{width:70%}100%{width:30%}}
|
@keyframes run{0%{width:30%}50%{width:70%}100%{width:30%}}
|
||||||
|
|
||||||
|
/* Stage 4 — Opus analysis */
|
||||||
|
.opus-banner{background:linear-gradient(135deg,#0F0F1A 0%,#1a1a3e 50%,#0d2818 100%);border-radius:14px;padding:18px 22px;display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-shrink:0;position:relative;overflow:hidden}
|
||||||
|
.opus-banner::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(16,185,129,.15) 0%,transparent 70%);pointer-events:none}
|
||||||
|
.opus-badge{display:flex;align-items:center;gap:8px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.25);border-radius:10px;padding:8px 14px;flex-shrink:0}
|
||||||
|
.opus-badge-ic{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--dark),var(--primary));display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:900;font-size:11px;color:#fff;flex-shrink:0}
|
||||||
|
.opus-badge-name{font-size:13px;font-weight:800;color:#fff;font-family:'Montserrat',sans-serif}
|
||||||
|
.opus-badge-ver{font-size:10px;color:rgba(255,255,255,.4);display:block;margin-top:1px}
|
||||||
|
.opus-status{flex:1}
|
||||||
|
.opus-status-t{font-size:14px;font-weight:700;color:#fff;margin-bottom:3px}
|
||||||
|
.opus-status-d{font-size:12px;color:rgba(255,255,255,.45);line-height:1.4}
|
||||||
|
.opus-pulse{width:10px;height:10px;border-radius:50%;background:var(--mid);box-shadow:0 0 8px var(--mid);animation:blink 1.4s ease-in-out infinite;flex-shrink:0}
|
||||||
|
|
||||||
|
.ctx-pack{background:var(--white);border:1.5px solid var(--border);border-radius:13px;padding:16px 18px;margin-bottom:14px;flex-shrink:0}
|
||||||
|
.ctx-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9CA3AF;margin-bottom:10px}
|
||||||
|
.ctx-items{display:flex;flex-direction:column;gap:7px}
|
||||||
|
.ctx-item{display:flex;align-items:center;gap:10px;font-size:13px;color:#374151}
|
||||||
|
.ctx-ic{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
|
||||||
|
.ctx-ic.done{background:var(--light)}
|
||||||
|
.ctx-name{flex:1;font-weight:500}
|
||||||
|
.ctx-meta{font-size:11px;color:#9CA3AF}
|
||||||
|
.ctx-check{color:var(--primary);font-weight:700;font-size:13px;flex-shrink:0}
|
||||||
|
|
||||||
|
.pain-matrix{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
|
||||||
|
.pain-item{display:flex;align-items:flex-start;gap:10px;background:var(--white);border:1.5px solid var(--border);border-radius:11px;padding:12px 14px;flex-shrink:0}
|
||||||
|
.pain-sev{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px;flex-shrink:0;margin-top:1px;white-space:nowrap}
|
||||||
|
.sev-crit{background:#FEF2F2;color:#DC2626;border:1px solid #FECACA}
|
||||||
|
.sev-high{background:#FEF3C7;color:#92400E;border:1px solid #FDE68A}
|
||||||
|
.sev-med{background:#EFF6FF;color:#1E40AF;border:1px solid #BFDBFE}
|
||||||
|
.pain-body{flex:1}
|
||||||
|
.pain-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
|
||||||
|
.pain-desc{font-size:12px;color:var(--muted);line-height:1.4}
|
||||||
|
.pain-src{font-size:10px;color:#9CA3AF;margin-top:4px;display:flex;align-items:center;gap:4px}
|
||||||
|
.pain-src-tag{background:var(--subtle);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-weight:600}
|
||||||
|
.pain-impact{font-size:11px;font-weight:700;color:#DC2626;flex-shrink:0;white-space:nowrap;margin-top:1px}
|
||||||
|
|
||||||
/* Discussion */
|
/* Discussion */
|
||||||
.discuss{background:linear-gradient(135deg,#022C22,var(--dark));border-radius:13px;padding:18px;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-shrink:0}
|
.discuss{background:linear-gradient(135deg,#022C22,var(--dark));border-radius:13px;padding:18px;color:#fff;margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-shrink:0}
|
||||||
.discuss-ic{font-size:26px;flex-shrink:0}
|
.discuss-ic{font-size:26px;flex-shrink:0}
|
||||||
@ -969,24 +1004,137 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
|
|||||||
<div class="hero-ic">🧠</div>
|
<div class="hero-ic">🧠</div>
|
||||||
<div class="hero-txt">
|
<div class="hero-txt">
|
||||||
<div class="hero-tag">Этап 4 из 5 · Анализ</div>
|
<div class="hero-tag">Этап 4 из 5 · Анализ</div>
|
||||||
<div class="hero-h">AI строит AS-IS модель</div>
|
<div class="hero-h">AS-IS модель готова</div>
|
||||||
<div class="hero-d">На основе интервью и документов формируется полная картина бизнеса. После — обсудите подход с командой в Claude Chat и утвердите.</div>
|
<div class="hero-d">Opus 4.8 обработал данные трёх этапов. Выявлено 7 болей, 3 критических. Ознакомьтесь и утвердите подход.</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn-p" onclick="unlock(5)">Утвердить подход →</button>
|
<button class="btn btn-p" onclick="unlock(5)">Утвердить → TO-BE план</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Opus 4.8 banner -->
|
||||||
|
<div class="opus-banner">
|
||||||
|
<div class="opus-badge">
|
||||||
|
<div class="opus-badge-ic">Op</div>
|
||||||
|
<div>
|
||||||
|
<div class="opus-badge-name">Opus 4.8</div>
|
||||||
|
<div class="opus-badge-ver">claude-opus-4.8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="opus-status">
|
||||||
|
<div class="opus-status-t">Анализ завершён · 29 мая · 12:14</div>
|
||||||
|
<div class="opus-status-d">Обработано: 1 интервью · 12 ответов анкеты · 3 документа · ~18 400 токенов</div>
|
||||||
|
</div>
|
||||||
|
<div class="opus-pulse" style="background:#059669;box-shadow:0 0 8px #059669;animation:none"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Context package -->
|
||||||
|
<div class="ctx-pack">
|
||||||
|
<div class="ctx-head">Входные данные для Opus 4.8</div>
|
||||||
|
<div class="ctx-items">
|
||||||
|
<div class="ctx-item">
|
||||||
|
<div class="ctx-ic done">💬</div>
|
||||||
|
<div class="ctx-name">Протокол интервью</div>
|
||||||
|
<div class="ctx-meta">Stage 1 · 26 мая · 47 мин · подтверждён клиентом</div>
|
||||||
|
<div class="ctx-check">✓</div>
|
||||||
|
</div>
|
||||||
|
<div class="ctx-item">
|
||||||
|
<div class="ctx-ic done">🔍</div>
|
||||||
|
<div class="ctx-name">Анкета диагностики</div>
|
||||||
|
<div class="ctx-meta">Stage 2 · 12 вопросов · Тимур + Семён + Фёдор</div>
|
||||||
|
<div class="ctx-check">✓</div>
|
||||||
|
</div>
|
||||||
|
<div class="ctx-item">
|
||||||
|
<div class="ctx-ic done">📁</div>
|
||||||
|
<div class="ctx-name">Документы (3 из 6)</div>
|
||||||
|
<div class="ctx-meta">Stage 3 · устав · оргструктура · регламенты</div>
|
||||||
|
<div class="ctx-check">✓</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Analysis modules grid -->
|
||||||
<div class="an-grid">
|
<div class="an-grid">
|
||||||
<div class="an-c"><div class="an-ic">🏢</div><div class="an-t">Орг. структура</div><div class="an-s"><div class="dot dot-ok"></div>Построена</div><div class="an-bar"><div class="af af-ok"></div></div></div>
|
<div class="an-c"><div class="an-ic">🏢</div><div class="an-t">Орг. структура</div><div class="an-s"><div class="dot dot-ok"></div>Построена · 22 чел.</div><div class="an-bar"><div class="af af-ok"></div></div></div>
|
||||||
<div class="an-c"><div class="an-ic">🔄</div><div class="an-t">Карта процессов</div><div class="an-s"><div class="dot dot-run"></div>В процессе...</div><div class="an-bar"><div class="af af-run"></div></div></div>
|
<div class="an-c"><div class="an-ic">🔄</div><div class="an-t">Карта процессов</div><div class="an-s"><div class="dot dot-ok"></div>9 процессов описано</div><div class="an-bar"><div class="af af-ok"></div></div></div>
|
||||||
<div class="an-c"><div class="an-ic">🩺</div><div class="an-t">Матрица болей</div><div class="an-s"><div class="dot dot-ok"></div>7 точек выявлено</div><div class="an-bar"><div class="af af-ok"></div></div></div>
|
<div class="an-c"><div class="an-ic">🩺</div><div class="an-t">Матрица болей</div><div class="an-s"><div class="dot dot-ok"></div>7 точек · 3 критичных</div><div class="an-bar"><div class="af af-ok"></div></div></div>
|
||||||
<div class="an-c"><div class="an-ic">👥</div><div class="an-t">Анализ команды</div><div class="an-s"><div class="dot dot-ok"></div>Завершён</div><div class="an-bar"><div class="af af-ok"></div></div></div>
|
<div class="an-c"><div class="an-ic">👥</div><div class="an-t">Анализ команды</div><div class="an-s"><div class="dot dot-ok"></div>Профили 22 сотрудников</div><div class="an-bar"><div class="af af-ok"></div></div></div>
|
||||||
<div class="an-c"><div class="an-ic">💰</div><div class="an-t">Финанс. диагностика</div><div class="an-s"><div class="dot dot-off"></div>Ждёт документов</div><div class="an-bar"><div class="af af-off"></div></div></div>
|
<div class="an-c"><div class="an-ic">💰</div><div class="an-t">Финанс. диагностика</div><div class="an-s"><div class="dot dot-run"></div>Частично (нет фин. отчёта)</div><div class="an-bar"><div class="af af-run"></div></div></div>
|
||||||
<div class="an-c"><div class="an-ic">🖥</div><div class="an-t">IT-ландшафт</div><div class="an-s"><div class="dot dot-run"></div>Анализируется...</div><div class="an-bar"><div class="af af-run"></div></div></div>
|
<div class="an-c"><div class="an-ic">🖥</div><div class="an-t">IT-ландшафт</div><span class="an-s"><div class="dot dot-ok"></div>Excel + 1C фрагментарно</span><div class="an-bar"><div class="af af-ok"></div></div></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Pain matrix -->
|
||||||
|
<div class="card-h" style="font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;padding:0 2px">Выявленные боли · 7 точек</div>
|
||||||
|
<div class="pain-matrix">
|
||||||
|
<div class="pain-item">
|
||||||
|
<div class="pain-sev sev-crit">КРИТИЧНО</div>
|
||||||
|
<div class="pain-body">
|
||||||
|
<div class="pain-title">Закройщик — единственная точка отказа</div>
|
||||||
|
<div class="pain-desc">1 закройщик на 14 швей. Ежедневный простой 30–40 мин в начале смены. При болезни/отпуске производство останавливается.</div>
|
||||||
|
<div class="pain-src"><span class="pain-src-tag">Интервью</span><span class="pain-src-tag">Анкета Q3</span><span class="pain-src-tag">Оргструктура</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-impact">−18% выработки</div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-item">
|
||||||
|
<div class="pain-sev sev-crit">КРИТИЧНО</div>
|
||||||
|
<div class="pain-body">
|
||||||
|
<div class="pain-title">Нет нормирования операций</div>
|
||||||
|
<div class="pain-desc">Нормы времени существуют только в голове мастера. Сдельная зарплата не может быть справедливой без норм — создаёт конфликты.</div>
|
||||||
|
<div class="pain-src"><span class="pain-src-tag">Анкета Q4</span><span class="pain-src-tag">Регламенты</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-impact">Риск ФОТ</div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-item">
|
||||||
|
<div class="pain-sev sev-crit">КРИТИЧНО</div>
|
||||||
|
<div class="pain-body">
|
||||||
|
<div class="pain-title">Реактивные закупки без планирования</div>
|
||||||
|
<div class="pain-desc">Ткань закупается «когда заканчивается». 1–3 производственных срыва за полгода из-за нехватки материала. Замораживает деньги в неплановых закупках.</div>
|
||||||
|
<div class="pain-src"><span class="pain-src-tag">Анкета Q6</span><span class="pain-src-tag">Анкета Q8 (голос)</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-impact">−25% cash flow</div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-item">
|
||||||
|
<div class="pain-sev sev-high">ВЫСОКИЙ</div>
|
||||||
|
<div class="pain-body">
|
||||||
|
<div class="pain-title">Матричное подчинение мастера</div>
|
||||||
|
<div class="pain-desc">Мастер получает команды от директора и менеджеров продаж одновременно. Срочные заказы рушат производственный план.</div>
|
||||||
|
<div class="pain-src"><span class="pain-src-tag">Оргструктура</span><span class="pain-src-tag">Интервью</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-impact">Хаос в плане</div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-item">
|
||||||
|
<div class="pain-sev sev-high">ВЫСОКИЙ</div>
|
||||||
|
<div class="pain-body">
|
||||||
|
<div class="pain-title">Учёт ткани в Excel — нет контроля остатков</div>
|
||||||
|
<div class="pain-desc">Кладовщик ведёт Excel-таблицу, но без автоматической связи с производственным планом. Межлекальные отходы ~12–15% не считаются точно.</div>
|
||||||
|
<div class="pain-src"><span class="pain-src-tag">Анкета Q5</span><span class="pain-src-tag">Анкета Q7</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-impact">~8% потери</div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-item">
|
||||||
|
<div class="pain-sev sev-med">СРЕДНИЙ</div>
|
||||||
|
<div class="pain-body">
|
||||||
|
<div class="pain-title">Себестоимость считается приблизительно</div>
|
||||||
|
<div class="pain-desc">Нет точной себестоимости единицы. Ценообразование — «на глаз». Невозможно понять прибыльность отдельного заказа или SKU.</div>
|
||||||
|
<div class="pain-src"><span class="pain-src-tag">Анкета Q10</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-impact">Риск демпинга</div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-item">
|
||||||
|
<div class="pain-sev sev-med">СРЕДНИЙ</div>
|
||||||
|
<div class="pain-body">
|
||||||
|
<div class="pain-title">Регламенты не обновлялись с 2022 года</div>
|
||||||
|
<div class="pain-desc">Должностные инструкции устарели. Новые роли и процессы не задокументированы. Онбординг новых сотрудников затруднён.</div>
|
||||||
|
<div class="pain-src"><span class="pain-src-tag">Регламенты</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="pain-impact">Риск качества</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Discuss -->
|
||||||
<div class="discuss">
|
<div class="discuss">
|
||||||
<div class="discuss-ic">💬</div>
|
<div class="discuss-ic">💬</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="discuss-t">Обсуждение с командой агентов</div>
|
<div class="discuss-t">Обсудите результаты с командой агентов</div>
|
||||||
<div class="discuss-d">После завершения анализа — обсудите наилучший подход с командой в Claude Chat. Когда решение согласовано, нажмите «Утвердить подход» выше — это запустит генерацию TO-BE плана.</div>
|
<div class="discuss-d">Тимур, Семён и Фёдор готовы ответить на вопросы по своим зонам. Когда картина ясна — нажмите «Утвердить → TO-BE план» выше. Opus 4.8 запустит генерацию решений.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user