From e67ecde340fe3bd2f097a8910d90704ad86d69cc Mon Sep 17 00:00:00 2001
From: WASRUSGEN <vasrusgen@gmail.com>
Date: Wed, 27 May 2026 12:17:17 +0300
Subject: [PATCH] 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
---
 mockup.html | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/mockup.html b/mockup.html
index cd86497..53a80f7 100644
--- a/mockup.html
+++ b/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 ── */
 .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">