mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 15:04:47 +00:00
feat: stage 2 full questionnaire — 3 agent sections (Тимур/Семён/Фёдор), 12 questions
This commit is contained in:
wasrusgen
parent
869b0734b6
commit
dc66fd0106
@ -227,6 +227,47 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
|
||||
.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}
|
||||
|
||||
/* ── Questionnaire Stage 2 ──────────────────────────── */
|
||||
.qa-progress{background:var(--white);border:1.5px solid var(--border);border-radius:13px;padding:16px 18px;margin-bottom:18px;flex-shrink:0}
|
||||
.qa-prog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
|
||||
.qa-prog-title{font-size:13px;font-weight:700;color:var(--text)}
|
||||
.qa-prog-pct{font-size:13px;font-weight:700;color:var(--primary)}
|
||||
.qa-prog-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:6px}
|
||||
.qa-prog-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--mid));border-radius:3px;transition:width .4s}
|
||||
.qa-prog-sub{font-size:11px;color:var(--muted)}
|
||||
.qa-section{background:var(--white);border:1.5px solid var(--border);border-radius:13px;margin-bottom:14px;overflow:hidden;flex-shrink:0}
|
||||
.qa-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);background:var(--subtle)}
|
||||
.qa-agent-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
|
||||
.qa-agent-name{font-size:14px;font-weight:700;color:var(--text)}
|
||||
.qa-agent-role{font-size:11px;color:var(--muted);margin-top:1px}
|
||||
.qa-sect-cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--border);border-radius:10px;padding:2px 8px}
|
||||
.qa-sect-cnt.done{background:var(--light);color:var(--primary)}
|
||||
.qa-body{padding:18px}
|
||||
.qa-q{margin-bottom:20px}
|
||||
.qa-q:last-child{margin-bottom:0}
|
||||
.qa-qlbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9CA3AF;margin-bottom:5px}
|
||||
.qa-qtxt{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px;line-height:1.45}
|
||||
.qa-input{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:9px 12px;font-size:13px;font-family:'Inter',sans-serif;color:var(--text);background:var(--white);outline:none;transition:border-color .15s}
|
||||
.qa-input:focus{border-color:var(--mid);box-shadow:0 0 0 3px rgba(16,185,129,.08)}
|
||||
.qa-textarea{width:100%;min-height:72px;resize:vertical;border:1.5px solid var(--border);border-radius:9px;padding:9px 12px;font-size:13px;font-family:'Inter',sans-serif;color:var(--text);background:var(--white);outline:none;transition:border-color .15s}
|
||||
.qa-textarea:focus{border-color:var(--mid);box-shadow:0 0 0 3px rgba(16,185,129,.08)}
|
||||
.qa-textarea.filled{border-color:rgba(16,185,129,.4);background:var(--light)}
|
||||
.qa-radios{display:flex;flex-wrap:wrap;gap:8px}
|
||||
.qa-radio{display:flex;align-items:center;gap:6px;padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-weight:500;color:#374151;cursor:pointer;transition:all .12s;background:var(--white);user-select:none}
|
||||
.qa-radio:hover{border-color:var(--mid);background:var(--light)}
|
||||
.qa-radio.sel{border-color:var(--primary);background:var(--light);color:var(--primary);font-weight:600}
|
||||
.qa-radio .qr-dot{width:14px;height:14px;border-radius:50%;border:2px solid #D1D5DB;transition:all .12s;flex-shrink:0}
|
||||
.qa-radio.sel .qr-dot{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--primary)}
|
||||
.qa-scale{display:flex;gap:8px;align-items:center}
|
||||
.qa-scale-item{width:38px;height:38px;border-radius:9px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;cursor:pointer;color:#9CA3AF;transition:all .12s;background:var(--white)}
|
||||
.qa-scale-item:hover{border-color:var(--mid);color:var(--primary)}
|
||||
.qa-scale-item.sel{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 3px 8px rgba(4,120,87,.3)}
|
||||
.qa-scale-labels{display:flex;justify-content:space-between;font-size:10px;color:#9CA3AF;margin-top:4px}
|
||||
.qa-submit{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#022C22,var(--dark));border-radius:13px;padding:18px 22px;margin-bottom:14px;flex-shrink:0}
|
||||
.qa-submit-txt .qs-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
|
||||
.qa-submit-txt .qs-sub{font-size:12px;color:rgba(255,255,255,.5)}
|
||||
.qa-sep{height:1px;background:var(--border);margin:12px 0}
|
||||
|
||||
/* 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}
|
||||
@ -463,37 +504,192 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
|
||||
<div class="hero-txt">
|
||||
<div class="hero-tag">Этап 2 из 5 · В процессе</div>
|
||||
<div class="hero-h">Диагностика</div>
|
||||
<div class="hero-d">Каждый участник получает персональную ссылку в Telegram MiniApp и проходит опрос в своём кабинете. 2 из 4 ответили.</div>
|
||||
<div class="hero-d">Ответьте на вопросы от команды — это займёт около 15 минут. Каждый агент анализирует свою зону.</div>
|
||||
</div>
|
||||
<button class="btn btn-p" onclick="unlock(3)">Завершить → Этап 3</button>
|
||||
<button class="btn btn-p" onclick="unlock(3)">Отправить ответы → Этап 3</button>
|
||||
</div>
|
||||
<div class="pg">
|
||||
<div class="pc">
|
||||
<div class="pc-top"><div class="av av1">АИ</div><div><div class="pc-name">Иванов Алексей</div><div class="pc-role">Директор</div></div></div>
|
||||
<div class="ps ps-ok">✓ Ответил</div>
|
||||
<div class="pc-ts">27 мая, 14:32</div>
|
||||
|
||||
<!-- Overall progress -->
|
||||
<div class="qa-progress">
|
||||
<div class="qa-prog-head">
|
||||
<div class="qa-prog-title">Прогресс анкеты</div>
|
||||
<div class="qa-prog-pct">8 из 12 вопросов</div>
|
||||
</div>
|
||||
<div class="pc">
|
||||
<div class="pc-top"><div class="av av2">ПМ</div><div><div class="pc-name">Петрова Мария</div><div class="pc-role">Нач. производства</div></div></div>
|
||||
<div class="ps ps-ok">✓ Ответила</div>
|
||||
<div class="pc-ts">27 мая, 16:05</div>
|
||||
<div class="qa-prog-bar"><div class="qa-prog-fill" style="width:67%"></div></div>
|
||||
<div class="qa-prog-sub">Осталось: раздел Финансы (4 вопроса) · Среднее время — 4 мин</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 1: Тимур — Производство (done) -->
|
||||
<div class="qa-section">
|
||||
<div class="qa-head">
|
||||
<div class="qa-agent-ic" style="background:#DCFCE7">🏭</div>
|
||||
<div>
|
||||
<div class="qa-agent-name">Тимур · Производство</div>
|
||||
<div class="qa-agent-role">Анализ потока, выработки и узких мест</div>
|
||||
</div>
|
||||
<div class="qa-sect-cnt done">✓ 4 из 4</div>
|
||||
</div>
|
||||
<div class="pc">
|
||||
<div class="pc-top"><div class="av av3">СН</div><div><div class="pc-name">Сидоров Николай</div><div class="pc-role">Гл. бухгалтер</div></div></div>
|
||||
<div class="ps ps-wait">⏳ Ожидается</div>
|
||||
<div class="pc-link">📨 Напомнить в Telegram</div>
|
||||
</div>
|
||||
<div class="pc">
|
||||
<div class="pc-top"><div class="av av4">КН</div><div><div class="pc-name">Козлова Наталья</div><div class="pc-role">Менеджер продаж</div></div></div>
|
||||
<div class="ps ps-wait">⏳ Ожидается</div>
|
||||
<div class="pc-link">📨 Напомнить в Telegram</div>
|
||||
<div class="qa-body">
|
||||
<!-- Q1 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 1 · Объём</div>
|
||||
<div class="qa-qtxt">Сколько единиц продукции в среднем производится в месяц?</div>
|
||||
<input class="qa-input" type="number" value="1 200" placeholder="например 1500">
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q2 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 2 · Организация труда</div>
|
||||
<div class="qa-qtxt">Как организован труд швей?</div>
|
||||
<div class="qa-radios">
|
||||
<div class="qa-radio sel" onclick="qsel(this)"><span class="qr-dot"></span>Бригадный поток</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Индивидуальный (каждая шьёт целиком)</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Смешанный</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q3 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 3 · Узкое место</div>
|
||||
<div class="qa-qtxt">Где чаще всего возникает затор в производстве?</div>
|
||||
<textarea class="qa-textarea filled" placeholder="Опишите своими словами...">Раскрой — основная проблема. Один закройщик не успевает, швеи простаивают по 30–40 минут каждое утро.</textarea>
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q4 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 4 · Нормирование</div>
|
||||
<div class="qa-qtxt">Есть ли нормы времени на операции?</div>
|
||||
<div class="qa-radios">
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Да, прописаны формально</div>
|
||||
<div class="qa-radio sel" onclick="qsel(this)"><span class="qr-dot"></span>Есть в голове у мастера</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Нет вообще</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-h">Прогресс — 2 из 4 участников ответили</div>
|
||||
<div class="pb-track" style="margin-bottom:8px"><div class="pb-fill" style="width:50%"></div></div>
|
||||
<div style="font-size:12px;color:var(--muted)">Елена автоматически напомнит Сидорову и Козловой через 24 ч</div>
|
||||
|
||||
<!-- Section 2: Семён — Склад (in progress) -->
|
||||
<div class="qa-section">
|
||||
<div class="qa-head">
|
||||
<div class="qa-agent-ic" style="background:#EFF6FF">📦</div>
|
||||
<div>
|
||||
<div class="qa-agent-name">Семён · Склад и материалы</div>
|
||||
<div class="qa-agent-role">Запасы, раскрой, поставки, отходы</div>
|
||||
</div>
|
||||
<div class="qa-sect-cnt done">✓ 4 из 4</div>
|
||||
</div>
|
||||
<div class="qa-body">
|
||||
<!-- Q5 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 5 · Учёт</div>
|
||||
<div class="qa-qtxt">Как ведётся учёт ткани и фурнитуры?</div>
|
||||
<div class="qa-radios">
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>1С или ERP</div>
|
||||
<div class="qa-radio sel" onclick="qsel(this)"><span class="qr-dot"></span>Excel / таблицы</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>В голове / тетрадь</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Не ведётся</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q6 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 6 · Срывы</div>
|
||||
<div class="qa-qtxt">Бывали остановки производства из-за нехватки материала за последние 6 мес.?</div>
|
||||
<div class="qa-radios">
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Да, часто (4+ раз)</div>
|
||||
<div class="qa-radio sel" onclick="qsel(this)"><span class="qr-dot"></span>Иногда (1–3 раза)</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Не было</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q7 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 7 · Межлекальные отходы</div>
|
||||
<div class="qa-qtxt">Знаете ли вы средний процент межлекальных отходов ткани?</div>
|
||||
<div class="qa-radios">
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Да, считаем (укажу ниже)</div>
|
||||
<div class="qa-radio sel" onclick="qsel(this)"><span class="qr-dot"></span>Примерно (~12–15%)</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Не считаем</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q8 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 8 · Закупки</div>
|
||||
<div class="qa-qtxt">Кто принимает решение о закупке ткани? Как планируется?</div>
|
||||
<textarea class="qa-textarea filled" placeholder="Опишите процесс...">Я сам звоню поставщику, когда вижу что ткань заканчивается. Планирования нет — закупаем реактивно.</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 3: Фёдор — Финансы (pending) -->
|
||||
<div class="qa-section">
|
||||
<div class="qa-head">
|
||||
<div class="qa-agent-ic" style="background:#FEF3C7">💰</div>
|
||||
<div>
|
||||
<div class="qa-agent-name">Фёдор · Финансы</div>
|
||||
<div class="qa-agent-role">Себестоимость, ФОТ, маржа, cash flow</div>
|
||||
</div>
|
||||
<div class="qa-sect-cnt">0 из 4</div>
|
||||
</div>
|
||||
<div class="qa-body">
|
||||
<!-- Q9 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 9 · Оплата труда</div>
|
||||
<div class="qa-qtxt">Как начисляется зарплата швеям?</div>
|
||||
<div class="qa-radios">
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Фиксированный оклад</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Сдельная (за операцию / единицу)</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Оклад + сдельная часть</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q10 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 10 · Себестоимость</div>
|
||||
<div class="qa-qtxt">Знаете ли вы себестоимость изготовления одной единицы продукции?</div>
|
||||
<div class="qa-radios">
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Да, считаю точно</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Примерно представляю</div>
|
||||
<div class="qa-radio" onclick="qsel(this)"><span class="qr-dot"></span>Нет, не считал(а)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q11 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 11 · Маржа</div>
|
||||
<div class="qa-qtxt">Какова средняя маржинальность по заказам (оценочно)?</div>
|
||||
<div class="qa-scale">
|
||||
<span style="font-size:12px;color:var(--muted);white-space:nowrap">Ниже 15%</span>
|
||||
<div style="display:flex;gap:7px;margin:0 10px">
|
||||
<div class="qa-scale-item" onclick="qscale(this)">1</div>
|
||||
<div class="qa-scale-item" onclick="qscale(this)">2</div>
|
||||
<div class="qa-scale-item" onclick="qscale(this)">3</div>
|
||||
<div class="qa-scale-item" onclick="qscale(this)">4</div>
|
||||
<div class="qa-scale-item" onclick="qscale(this)">5</div>
|
||||
</div>
|
||||
<span style="font-size:12px;color:var(--muted);white-space:nowrap">Выше 40%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-sep"></div>
|
||||
<!-- Q12 -->
|
||||
<div class="qa-q">
|
||||
<div class="qa-qlbl">Вопрос 12 · Проблемы</div>
|
||||
<div class="qa-qtxt">Что больше всего беспокоит в финансовой стороне бизнеса?</div>
|
||||
<textarea class="qa-textarea" placeholder="Например: не понимаю куда уходят деньги, прибыль есть но денег нет..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<div class="qa-submit">
|
||||
<div class="qa-submit-txt">
|
||||
<div class="qs-title">Почти готово — остался 1 раздел</div>
|
||||
<div class="qs-sub">Ответьте на 4 вопроса Фёдора и отправьте · Елена проанализирует за 5 мин</div>
|
||||
</div>
|
||||
<button class="btn btn-p" style="background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2)" onclick="unlock(3)">Отправить ответы →</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Этап 3 -->
|
||||
@ -658,6 +854,17 @@ function go(n){
|
||||
document.getElementById('pb-hint').textContent=hints[n];
|
||||
}
|
||||
|
||||
function qsel(el){
|
||||
const grp=el.closest('.qa-radios');
|
||||
grp.querySelectorAll('.qa-radio').forEach(r=>r.classList.remove('sel'));
|
||||
el.classList.add('sel');
|
||||
}
|
||||
function qscale(el){
|
||||
const grp=el.closest('div');
|
||||
grp.querySelectorAll('.qa-scale-item').forEach(r=>r.classList.remove('sel'));
|
||||
el.classList.add('sel');
|
||||
}
|
||||
|
||||
function unlock(nextN){
|
||||
const si=document.getElementById('si'+nextN);
|
||||
const sn=document.getElementById('sn'+nextN);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user