mirror of
https://github.com/wasrusgen/zashita-brandbook.git
synced 2026-06-03 19:44:48 +00:00
order-status screen: post-pay confirmation with stepper, Elena msg, dynamic content
This commit is contained in:
WASRUSGEN
parent
222ab40fcb
commit
7b7dd67d1d
178
mockup.html
178
mockup.html
@ -184,6 +184,35 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
|
||||
.stats-pill b{color:#FECDD3}
|
||||
|
||||
|
||||
|
||||
/* ── ЭКРАН СТАТУСА ЗАКАЗА ── */
|
||||
.os-wrap{max-width:560px;margin:0 auto;padding:24px 20px 60px}
|
||||
.os-ok{text-align:center;margin:8px 0 20px}
|
||||
.os-ok-icon{font-size:44px;margin-bottom:8px}
|
||||
.os-ok-ttl{font-size:20px;font-weight:800;color:var(--bg)}
|
||||
.os-ok-sub{font-size:13px;color:var(--mut);margin-top:4px}
|
||||
.os-card{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:20px}
|
||||
.os-card .oc-ttl{font-size:16px;font-weight:800;margin-bottom:4px}
|
||||
.os-card .oc-plan{font-size:13px;color:var(--mut);margin-bottom:10px}
|
||||
.os-card .oc-price{font-size:22px;font-weight:800;color:var(--bg)}
|
||||
.os-card .oc-id{font-size:11px;color:var(--mut);margin-top:4px;letter-spacing:.3px}
|
||||
.os-steps{display:flex;align-items:flex-start;gap:0;margin:0 0 20px;position:relative}
|
||||
.os-steps::before{content:'';position:absolute;top:13px;left:13px;right:13px;height:2px;background:var(--line);z-index:0}
|
||||
.os-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1}
|
||||
.os-dot{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);background:var(--surf);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--mut);flex-shrink:0}
|
||||
.os-step.done .os-dot{background:var(--ok);border-color:var(--ok);color:#fff;font-size:13px}
|
||||
.os-step.active .os-dot{background:var(--bg);border-color:var(--bg);color:#fff;font-size:13px}
|
||||
.os-step-lbl{font-size:11px;color:var(--mut);text-align:center;line-height:1.35;max-width:80px}
|
||||
.os-step.done .os-step-lbl{color:var(--ok);font-weight:600}
|
||||
.os-step.active .os-step-lbl{color:var(--bg);font-weight:700}
|
||||
.os-deadline{background:var(--tint);border:1.5px solid rgba(159,18,57,.2);border-radius:10px;padding:10px 14px;font-size:13px;margin:0 0 16px;display:flex;align-items:center;gap:8px}
|
||||
.os-deadline .od-icon{font-size:16px}
|
||||
.os-deadline .od-text strong{display:block;font-weight:700;color:var(--bg);font-size:13px}
|
||||
.os-deadline .od-text span{font-size:12px;color:var(--mut)}
|
||||
.os-actions{display:flex;gap:10px;flex-wrap:wrap}
|
||||
.os-tg{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);text-decoration:none;font-family:inherit}
|
||||
.os-tg:hover{border-color:var(--bg);color:var(--bg)}
|
||||
|
||||
/* ── АНАЛИТИКА CUSTOM-ЗАПРОСОВ ── */
|
||||
#custom-admin{background:var(--surf)}
|
||||
.ca-wrap{max-width:780px;margin:0 auto;padding:28px 20px 60px}
|
||||
@ -544,6 +573,69 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- ═ СТАТУС ЗАКАЗА ═ -->
|
||||
<section class="screen" id="order-status">
|
||||
<div class="topbar">
|
||||
<img class="topbar-wm" src="logos/logo-zashita-word.svg" alt="ЗАЩИТА">
|
||||
<span class="ttl">Заказ принят</span>
|
||||
<span class="back-link" onclick="go('cabinet')" style="font-size:13px;color:var(--bg);font-weight:600;cursor:pointer">Мои дела →</span>
|
||||
</div>
|
||||
<div class="os-wrap">
|
||||
|
||||
<div class="os-ok">
|
||||
<div class="os-ok-icon">✅</div>
|
||||
<div class="os-ok-ttl">Оплата подтверждена</div>
|
||||
<div class="os-ok-sub" id="os-ok-sub">Заказ передан в работу</div>
|
||||
</div>
|
||||
|
||||
<div class="os-card">
|
||||
<div class="oc-ttl" id="os-svc">Экспертиза договора</div>
|
||||
<div class="oc-plan" id="os-plan-name">Стандарт</div>
|
||||
<div class="oc-price" id="os-price">2 480 ₽</div>
|
||||
<div class="oc-id" id="os-orderid">Заказ #—</div>
|
||||
</div>
|
||||
|
||||
<div class="os-steps">
|
||||
<div class="os-step done">
|
||||
<div class="os-dot">✓</div>
|
||||
<div class="os-step-lbl">Оплата<br>получена</div>
|
||||
</div>
|
||||
<div class="os-step active" id="os-step2">
|
||||
<div class="os-dot">▶</div>
|
||||
<div class="os-step-lbl" id="os-step2-lbl">Юрист<br>работает</div>
|
||||
</div>
|
||||
<div class="os-step pending">
|
||||
<div class="os-dot">3</div>
|
||||
<div class="os-step-lbl" id="os-step3-lbl">Готово</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="os-deadline">
|
||||
<div class="od-icon">⏱</div>
|
||||
<div class="od-text">
|
||||
<strong id="os-deadline-ttl">Срок: до 24 часов</strong>
|
||||
<span id="os-deadline-sub">после получения файла договора</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="enote" style="margin-bottom:20px">
|
||||
<img src="logos/elena-photo.jpg">
|
||||
<div class="et" id="os-elena-msg">
|
||||
Заказ получен — уже передала юристу. <b>Пришлите договор</b> в Telegram
|
||||
<a href="https://t.me/wasrusgen1" target="_blank">@wasrusgen1</a> —
|
||||
без него начать не получится. Как только файл придёт — сразу приступаем 💛
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="os-actions">
|
||||
<a class="os-tg" href="https://t.me/wasrusgen1" target="_blank">💬 Написать в Telegram</a>
|
||||
<button class="btn btn-o" onclick="go('cabinet')">📂 Мои дела</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ═ АНАЛИТИКА CUSTOM-ЗАПРОСОВ ═ -->
|
||||
<section class="screen" id="custom-admin">
|
||||
<div class="topbar">
|
||||
@ -1266,6 +1358,81 @@ function selectPlan(n) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ── ЭКРАН СТАТУСА ЗАКАЗА ── */
|
||||
.os-wrap{max-width:560px;margin:0 auto;padding:24px 20px 60px}
|
||||
.os-ok{text-align:center;margin:8px 0 20px}
|
||||
.os-ok-icon{font-size:44px;margin-bottom:8px}
|
||||
.os-ok-ttl{font-size:20px;font-weight:800;color:var(--bg)}
|
||||
.os-ok-sub{font-size:13px;color:var(--mut);margin-top:4px}
|
||||
.os-card{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:20px}
|
||||
.os-card .oc-ttl{font-size:16px;font-weight:800;margin-bottom:4px}
|
||||
.os-card .oc-plan{font-size:13px;color:var(--mut);margin-bottom:10px}
|
||||
.os-card .oc-price{font-size:22px;font-weight:800;color:var(--bg)}
|
||||
.os-card .oc-id{font-size:11px;color:var(--mut);margin-top:4px;letter-spacing:.3px}
|
||||
.os-steps{display:flex;align-items:flex-start;gap:0;margin:0 0 20px;position:relative}
|
||||
.os-steps::before{content:'';position:absolute;top:13px;left:13px;right:13px;height:2px;background:var(--line);z-index:0}
|
||||
.os-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:1}
|
||||
.os-dot{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line);background:var(--surf);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--mut);flex-shrink:0}
|
||||
.os-step.done .os-dot{background:var(--ok);border-color:var(--ok);color:#fff;font-size:13px}
|
||||
.os-step.active .os-dot{background:var(--bg);border-color:var(--bg);color:#fff;font-size:13px}
|
||||
.os-step-lbl{font-size:11px;color:var(--mut);text-align:center;line-height:1.35;max-width:80px}
|
||||
.os-step.done .os-step-lbl{color:var(--ok);font-weight:600}
|
||||
.os-step.active .os-step-lbl{color:var(--bg);font-weight:700}
|
||||
.os-deadline{background:var(--tint);border:1.5px solid rgba(159,18,57,.2);border-radius:10px;padding:10px 14px;font-size:13px;margin:0 0 16px;display:flex;align-items:center;gap:8px}
|
||||
.os-deadline .od-icon{font-size:16px}
|
||||
.os-deadline .od-text strong{display:block;font-weight:700;color:var(--bg);font-size:13px}
|
||||
.os-deadline .od-text span{font-size:12px;color:var(--mut)}
|
||||
.os-actions{display:flex;gap:10px;flex-wrap:wrap}
|
||||
.os-tg{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);text-decoration:none;font-family:inherit}
|
||||
.os-tg:hover{border-color:var(--bg);color:var(--bg)}
|
||||
|
||||
|
||||
/* ── СТАТУС ЗАКАЗА ── */
|
||||
const OS_DEADLINES = {
|
||||
protocol: { 1:'до 12 часов', 2:'до 24 часов', 3:'до 48 часов', sub:'после получения файла договора' },
|
||||
redact: { 1:'до 12 часов', 2:'до 24 часов', 3:'до 48 часов', sub:'после получения файла договора' },
|
||||
clean: { 1:'до 24 часов', 2:'до 48 часов', 3:'до 72 часов', sub:'после получения файла договора' },
|
||||
partner: { 1:'до 24 часов', 2:'до 48 часов', 3:'до 72 часов', sub:'после получения файла договора' },
|
||||
consult: { 1:'2 часа', 2:'сегодня', 3:'24 часа', sub:'отвечаем после получения оплаты' },
|
||||
reply: { 1:'до 12 часов', 2:'до 12 часов', 3:'до результата', sub:'после получения переписки с контрагентом' }
|
||||
};
|
||||
const OS_STEP2 = {
|
||||
protocol:'Юрист изучает договор',
|
||||
redact:'Юрист готовит редакцию',
|
||||
clean:'Юрист чистит текст',
|
||||
partner:'Юрист пишет партнёрскую версию',
|
||||
consult:'Юрист готовится к консультации',
|
||||
reply:'Юрист составляет ответ'
|
||||
};
|
||||
const OS_ELENA = {
|
||||
protocol:'Заказ получен — уже передала юристу. <b>Пришлите договор</b> в Telegram <a href="https://t.me/wasrusgen1" target="_blank">@wasrusgen1</a> — без него начать не получится. Как только файл придёт — сразу приступаем 💛',
|
||||
redact:'Заказ получен. <b>Пришлите договор</b> в Telegram <a href="https://t.me/wasrusgen1" target="_blank">@wasrusgen1</a> — и обозначьте что хотите изменить, если есть конкретные пункты. Начнём сразу 💛',
|
||||
clean:'Заказ получен. <b>Пришлите договор</b> в Telegram <a href="https://t.me/wasrusgen1" target="_blank">@wasrusgen1</a> — юрист сделает его читаемым и структурированным. Жду файл 💛',
|
||||
partner:'Заказ получен. <b>Пришлите договор</b> в Telegram <a href="https://t.me/wasrusgen1" target="_blank">@wasrusgen1</a> — и кратко опишите вашу позицию в переговорах. Это поможет сделать текст работающим 💛',
|
||||
consult:'Заказ получен. <b>Пришлите договор + вопросы</b> в Telegram <a href="https://t.me/wasrusgen1" target="_blank">@wasrusgen1</a> — или просто напишите «разберите сами», и юрист найдёт риски. Отвечаем быстро 💛',
|
||||
reply:'Заказ получен. <b>Пришлите переписку с контрагентом и текст возражения</b> в Telegram <a href="https://t.me/wasrusgen1" target="_blank">@wasrusgen1</a> — юрист составит ответ с вашей правовой позицией 💛'
|
||||
};
|
||||
|
||||
function showOrderStatus() {
|
||||
const d = DELIVS[_selDeliv] || {};
|
||||
const pKey = 'p' + _selPlan;
|
||||
const pArr = d[pKey] || [];
|
||||
const dl = (OS_DEADLINES[_selDeliv] || {})[_selPlan] || 'уточним';
|
||||
const dlSub = (OS_DEADLINES[_selDeliv] || {}).sub || '';
|
||||
|
||||
const set = (id, val) => { const el = document.getElementById(id); if (el) el.innerHTML = val; };
|
||||
set('os-svc', d.ttl || 'Юридическая услуга');
|
||||
set('os-plan-name', pArr[1] || ('Тариф ' + _selPlan));
|
||||
set('os-price', pArr[0] || '');
|
||||
set('os-orderid', 'Заказ #' + Math.floor(1000 + Math.random() * 8999));
|
||||
set('os-step2-lbl', (OS_STEP2[_selDeliv] || 'Юрист работает').replace(' ', '<br>'));
|
||||
set('os-deadline-ttl', 'Срок: ' + dl);
|
||||
set('os-deadline-sub', dlSub);
|
||||
set('os-elena-msg', OS_ELENA[_selDeliv] || OS_ELENA.protocol);
|
||||
set('os-ok-sub', 'Заказ №' + Math.floor(1000 + Math.random() * 8999) + ' передан в работу');
|
||||
}
|
||||
|
||||
/* ── АНАЛИТИКА CUSTOM-ЗАПРОСОВ ── */
|
||||
const CA_STOPWORDS = new Set(['и','в','на','с','по','для','что','это','как','не','а','но','из','к','о','от','за','до','при','без','под','над','со','об','же','бы','ли','ещё','уже','когда','если','мне','мы','я','вы','он','она','они','то','так','ну','ладно','просто','только','очень','нет','да','быть','есть','это','свой','мой','ваш','наш','его','её','их','все','всё','один','одна','других','другой','которые','который','можно','нужно','надо','хочу','хочется','нужна','нужен','нужно','получить','сделать','чтобы','также']);
|
||||
|
||||
@ -1407,6 +1574,17 @@ function showToast(msg) {
|
||||
window.addEventListener('DOMContentLoaded', renderStats);
|
||||
window.addEventListener('DOMContentLoaded', renderCustomStats);
|
||||
window.addEventListener('DOMContentLoaded', renderCustomAdmin);
|
||||
function handleHash() {
|
||||
const h = window.location.hash.slice(1);
|
||||
if (!h) return;
|
||||
const [screen, deliv, plan] = h.split(':');
|
||||
if (deliv) _selDeliv = deliv;
|
||||
if (plan) _selPlan = parseInt(plan) || 2;
|
||||
if (screen === 'order-status') { showOrderStatus(); go('order-status'); }
|
||||
else if (screen) go(screen);
|
||||
}
|
||||
window.addEventListener('DOMContentLoaded', handleHash);
|
||||
window.addEventListener('hashchange', handleHash);
|
||||
function tab(name){
|
||||
document.querySelectorAll('.tabpane').forEach(p=>p.classList.toggle('on',p.id==='p-'+name));
|
||||
document.querySelectorAll('.side a').forEach(a=>a.classList.remove('on'));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user