From 7b7dd67d1da5dfbeea275f4f69a118ee0bb34451 Mon Sep 17 00:00:00 2001 From: WASRUSGEN Date: Tue, 26 May 2026 22:57:24 +0300 Subject: [PATCH] order-status screen: post-pay confirmation with stepper, Elena msg, dynamic content --- mockup.html | 178 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) diff --git a/mockup.html b/mockup.html index 55c25e7..2df61cf 100644 --- a/mockup.html +++ b/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 + + +
+
+ ЗАЩИТА + Заказ принят + Мои дела → +
+
+ +
+
✅
+
Оплата подтверждена
+
Заказ передан в работу
+
+ +
+
Экспертиза договора
+
Стандарт
+
2 480 ₽
+
Заказ #—
+
+ +
+
+
✓
+
Оплата
получена
+
+
+
▶
+
Юрист
работает
+
+
+
3
+
Готово
+
+
+ +
+
⏱
+
+ Срок: до 24 часов + после получения файла договора +
+
+ +
+ +
+ Заказ получен — уже передала юристу. Пришлите договор в Telegram + @wasrusgen1 — + без него начать не получится. Как только файл придёт — сразу приступаем 💛 +
+
+ +
+ 💬 Написать в Telegram + +
+ +
+
+
@@ -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:'Заказ получен — уже передала юристу. Пришлите договор в Telegram @wasrusgen1 — без него начать не получится. Как только файл придёт — сразу приступаем 💛', + redact:'Заказ получен. Пришлите договор в Telegram @wasrusgen1 — и обозначьте что хотите изменить, если есть конкретные пункты. Начнём сразу 💛', + clean:'Заказ получен. Пришлите договор в Telegram @wasrusgen1 — юрист сделает его читаемым и структурированным. Жду файл 💛', + partner:'Заказ получен. Пришлите договор в Telegram @wasrusgen1 — и кратко опишите вашу позицию в переговорах. Это поможет сделать текст работающим 💛', + consult:'Заказ получен. Пришлите договор + вопросы в Telegram @wasrusgen1 — или просто напишите «разберите сами», и юрист найдёт риски. Отвечаем быстро 💛', + reply:'Заказ получен. Пришлите переписку с контрагентом и текст возражения в Telegram @wasrusgen1 — юрист составит ответ с вашей правовой позицией 💛' +}; + +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(' ', '
')); + 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'));