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:
WASRUSGEN 2026-05-27 12:17:17 +03:00
parent 4f4dc6c330
commit e67ecde340

View File

@ -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 ── */
.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}
@ -1517,6 +1533,66 @@ function 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 = {
protocol: { 1:'до 12 часов', 2:'до 24 часов', 3:'до 48 часов', sub:'после получения файла договора' },
@ -1723,6 +1799,12 @@ function tab(name){
}
</script>
<!-- ── ТИКЕР СРОКОВ ── -->
<div class="ticker-bar" id="ticker-bar">
<div class="ticker-track" id="ticker-track"></div>
</div>
<!-- ── ЮKASSA ВИДЖЕТ ── -->
<div class="yk-overlay" id="yk-overlay" onclick="ykClose(event)">
<div class="yk-sheet" id="yk-sheet">