mirror of
https://github.com/wasrusgen/zashita-brandbook.git
synced 2026-06-03 17:24:48 +00:00
feat: deadline ticker strip on start screen
- Fixed bottom bar with scrolling contract statuses - Demo items + real last_order from localStorage - Pauses on hover, syncs visibility with screen transitions
This commit is contained in:
parent
4f4dc6c330
commit
e67ecde340
82
mockup.html
82
mockup.html
@ -185,6 +185,22 @@ body{font-family:var(--font-ui);background:var(--surf);color:var(--ink);line-hei
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ── ТИКЕР СРОКОВ ── */
|
||||||
|
.ticker-bar{position:fixed;bottom:0;left:0;right:0;z-index:900;background:rgba(20,2,8,.82);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1);padding:0;height:36px;overflow:hidden;display:none}
|
||||||
|
#start.on ~ .ticker-bar, .ticker-bar.tk-on{display:block}
|
||||||
|
.ticker-track{display:flex;align-items:center;height:36px;white-space:nowrap;animation:tkScroll 32s linear infinite}
|
||||||
|
.ticker-track:hover{animation-play-state:paused}
|
||||||
|
@keyframes tkScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
|
||||||
|
.tk-item{display:inline-flex;align-items:center;gap:7px;padding:0 28px;font-size:12px;color:rgba(255,255,255,.75);font-family:var(--font-ui)}
|
||||||
|
.tk-item .tk-ico{font-size:13px}
|
||||||
|
.tk-item .tk-name{font-weight:600;color:#fff}
|
||||||
|
.tk-item .tk-sep{width:1px;height:14px;background:rgba(255,255,255,.18);margin:0 4px}
|
||||||
|
.tk-item .tk-status{font-size:11px;padding:2px 7px;border-radius:10px;font-weight:600}
|
||||||
|
.tk-status.done{background:rgba(34,197,94,.2);color:#4ade80}
|
||||||
|
.tk-status.soon{background:rgba(251,191,36,.18);color:#fbbf24}
|
||||||
|
.tk-status.active{background:rgba(96,165,250,.18);color:#93c5fd}
|
||||||
|
.tk-dot{color:rgba(255,255,255,.2);padding:0 8px;font-size:16px}
|
||||||
|
|
||||||
/* ── RETURNING CLIENT ── */
|
/* ── RETURNING CLIENT ── */
|
||||||
.ret-greet{font-size:30px;font-weight:800;line-height:1.2;margin-bottom:24px;letter-spacing:-.5px}
|
.ret-greet{font-size:30px;font-weight:800;line-height:1.2;margin-bottom:24px;letter-spacing:-.5px}
|
||||||
.ret-sub{font-size:16px;color:rgba(255,255,255,.7);margin-bottom:22px}
|
.ret-sub{font-size:16px;color:rgba(255,255,255,.7);margin-bottom:22px}
|
||||||
@ -1517,6 +1533,66 @@ function checkReturning() {
|
|||||||
}
|
}
|
||||||
window.addEventListener('DOMContentLoaded', checkReturning);
|
window.addEventListener('DOMContentLoaded', checkReturning);
|
||||||
|
|
||||||
|
/* ── ТИКЕР СРОКОВ ── */
|
||||||
|
(function() {
|
||||||
|
const DEMO = [
|
||||||
|
{ ico:'📋', name:'Редактура договора', plan:'Стандарт', status:'done', label:'✅ Завершён' },
|
||||||
|
{ ico:'💬', name:'Консультация', plan:'Полный разбор', status:'soon', label:'⏱ Сегодня' },
|
||||||
|
{ ico:'⚖️', name:'Протокол разногласий',plan:'Экспресс', status:'active', label:'🔵 В работе' },
|
||||||
|
{ ico:'📝', name:'Чистовик договора', plan:'Стандарт', status:'done', label:'✅ Завершён' },
|
||||||
|
];
|
||||||
|
|
||||||
|
function buildItems() {
|
||||||
|
const items = [...DEMO];
|
||||||
|
// Добавляем реальные из localStorage
|
||||||
|
try {
|
||||||
|
const last = JSON.parse(localStorage.getItem('zashita_last_order') || 'null');
|
||||||
|
if (last && last.ttl) {
|
||||||
|
items.unshift({ ico:'🆕', name: last.ttl, plan: last.plan, status:'active', label:'🔵 Новый' });
|
||||||
|
}
|
||||||
|
} catch(e) {}
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTicker() {
|
||||||
|
const track = document.getElementById('ticker-track');
|
||||||
|
if (!track) return;
|
||||||
|
const items = buildItems();
|
||||||
|
// Дублируем для бесшовного скролла
|
||||||
|
const all = [...items, ...items];
|
||||||
|
track.innerHTML = all.map(it =>
|
||||||
|
'<span class="tk-item">' +
|
||||||
|
'<span class="tk-ico">' + it.ico + '</span>' +
|
||||||
|
'<span class="tk-name">' + it.name + '</span>' +
|
||||||
|
'<span class="tk-sep"></span>' +
|
||||||
|
'<span style="color:rgba(255,255,255,.5);font-size:11px">' + it.plan + '</span>' +
|
||||||
|
'<span class="tk-status ' + it.status + '">' + it.label + '</span>' +
|
||||||
|
'</span>' +
|
||||||
|
'<span class="tk-dot">·</span>'
|
||||||
|
).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function tickerSync() {
|
||||||
|
const bar = document.getElementById('ticker-bar');
|
||||||
|
if (!bar) return;
|
||||||
|
const startOn = document.getElementById('start')?.classList.contains('on');
|
||||||
|
if (startOn) { bar.classList.add('tk-on'); }
|
||||||
|
else { bar.classList.remove('tk-on'); }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Патчим go() чтобы тикер синхронизировался с переходами экранов
|
||||||
|
const _origGo = window.go;
|
||||||
|
window.go = function(id) {
|
||||||
|
if (_origGo) _origGo(id);
|
||||||
|
setTimeout(tickerSync, 50);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', function() {
|
||||||
|
renderTicker();
|
||||||
|
tickerSync();
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
/* ── СТАТУС ЗАКАЗА ── */
|
/* ── СТАТУС ЗАКАЗА ── */
|
||||||
const OS_DEADLINES = {
|
const OS_DEADLINES = {
|
||||||
protocol: { 1:'до 12 часов', 2:'до 24 часов', 3:'до 48 часов', sub:'после получения файла договора' },
|
protocol: { 1:'до 12 часов', 2:'до 24 часов', 3:'до 48 часов', sub:'после получения файла договора' },
|
||||||
@ -1723,6 +1799,12 @@ function tab(name){
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ── ТИКЕР СРОКОВ ── -->
|
||||||
|
<div class="ticker-bar" id="ticker-bar">
|
||||||
|
<div class="ticker-track" id="ticker-track"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ── ЮKASSA ВИДЖЕТ ── -->
|
<!-- ── ЮKASSA ВИДЖЕТ ── -->
|
||||||
<div class="yk-overlay" id="yk-overlay" onclick="ykClose(event)">
|
<div class="yk-overlay" id="yk-overlay" onclick="ykClose(event)">
|
||||||
<div class="yk-sheet" id="yk-sheet">
|
<div class="yk-sheet" id="yk-sheet">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user