Live price ticker every 5s + configurable 1/2/5min full rescan

main.py

@@ -134,6 +134,30 @@ def scan(top: int = 8, min_volume: float = None, account: float = 100000,
         raise HTTPException(503, str(e))
 
 
+@app.get("/api/prices")
+def prices(symbols: str = ""):
+    """Lightweight price ticker — returns current price + 24h change for a
+    comma-separated list of symbols. Used for real-time card price updates."""
+    try:
+        src = get_source()
+        requested = {s.strip() for s in symbols.split(",") if s.strip()}
+        tickers = src.tickers()
+        result = {}
+        for t in tickers:
+            sym = t.get("symbol", "")
+            if not requested or sym in requested:
+                result[sym] = {
+                    "price": t.get("last_price"),
+                    "change_24h_pct": t.get("change_24h_pct"),
+                    "high": t.get("high"),
+                    "low": t.get("low"),
+                    "quote_volume_usd": t.get("quote_volume_usd"),
+                }
+        return {"ts": datetime.now(timezone.utc).isoformat(), "prices": result}
+    except Exception as e:
+        raise HTTPException(503, str(e))
+
+
 @app.get("/api/card/{symbol}")
 def card(symbol: str, account: float = 100000, risk_pct: float = 1.0):
     try:

static/index.html

@@ -639,25 +639,19 @@ h1.hero-title .accent {
   backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
 }
 
-/* ── Auto-refresh button ─────────────────────────────────────────────── */
-#auto-btn {
-  display: inline-flex; align-items: center; gap: 6px;
-  background: rgba(255,255,255,0.7);
-  border: 1px solid rgba(0,0,0,0.08);
-  border-radius: 10px; padding: 9px 14px;
-  font-size: 13px; font-weight: 700; font-family: var(--font);
-  color: var(--t2); cursor: pointer;
-  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
-  transition: all 0.2s var(--ease);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
-}
-#auto-btn:hover { border-color: rgba(13,148,136,0.3); color: var(--teal); }
-#auto-btn.on {
-  background: rgba(209,250,229,0.7);
-  border-color: rgba(13,148,136,0.3);
-  color: var(--teal);
+/* ── Auto-refresh select ─────────────────────────────────────────────── */
+#auto-wrap { transition: border-color 0.2s, background 0.2s; }
+#auto-wrap.active {
+  border-color: rgba(13,148,136,0.35) !important;
+  background: rgba(209,250,229,0.7) !important;
+}
+#auto-wrap.active label { color: var(--teal); }
+#auto-interval {
+  background: none; border: none; outline: none;
+  color: var(--t1); font-family: var(--font);
+  font-size: 13px; font-weight: 700; cursor: pointer;
+  padding-right: 2px;
 }
-#auto-btn.on #auto-icon { animation: spin 2s linear infinite; }
 
 #refresh-countdown {
   font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
@@ -750,10 +744,15 @@ h1.hero-title .accent {
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
       Scan
     </button>
-    <button id="auto-btn" title="Toggle auto-refresh">
-      <svg id="auto-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>
-      <span id="auto-label">Auto</span>
-    </button>
+    <div class="input-chip" id="auto-wrap">
+      <label for="auto-interval">Auto</label>
+      <select id="auto-interval">
+        <option value="0">Off</option>
+        <option value="60">1 min</option>
+        <option value="120">2 min</option>
+        <option value="300" selected>5 min</option>
+      </select>
+    </div>
     <span id="refresh-countdown" style="display:none"></span>
   </div>
 </nav>
@@ -829,41 +828,30 @@ const fu = n => {
 };
 const pc = n => n == null ? null : (n>=0?'+':'')+( +n).toFixed(2)+'%';
 
-/* ── Auto-refresh ──────────────────────────────────────────────────── */
-const AUTO_INTERVAL = 5 * 60; // 5 minutes in seconds
-let autoOn = false;
+/* ── Auto-refresh (full scan) ──────────────────────────────────────── */
 let autoCountdown = 0;
-let autoTimer = null;
 let countdownTimer = null;
+let liveTickerTimer = null;
+// track which symbols are currently on screen + their card elements
+const liveCards = new Map(); // symbol → {el, account, risk}
 
-function setAutoRefresh(on) {
-  autoOn = on;
-  const btn = $('auto-btn'), lbl = $('auto-label'), cd = $('refresh-countdown');
-  if (on) {
-    btn.classList.add('on');
-    lbl.textContent = '5 min';
-    cd.style.display = 'inline-flex';
-    startCountdown();
-  } else {
-    btn.classList.remove('on');
-    lbl.textContent = 'Auto';
-    cd.style.display = 'none';
-    clearInterval(autoTimer);
-    clearInterval(countdownTimer);
-  }
-}
+function getAutoInterval() { return parseInt($('auto-interval').value) || 0; }
 
 function startCountdown() {
-  autoCountdown = AUTO_INTERVAL;
   clearInterval(countdownTimer);
-  clearInterval(autoTimer);
+  const secs = getAutoInterval();
+  const cd = $('refresh-countdown');
+  if (!secs) { cd.style.display = 'none'; $('auto-wrap').classList.remove('active'); return; }
+  $('auto-wrap').classList.add('active');
+  cd.style.display = 'inline-flex';
+  autoCountdown = secs;
   updateCountdownDisplay();
   countdownTimer = setInterval(() => {
     autoCountdown--;
     updateCountdownDisplay();
     if (autoCountdown <= 0) {
       clearInterval(countdownTimer);
-      if (autoOn) { runScan(); startCountdown(); }
+      runScan().then(() => startCountdown());
     }
   }, 1000);
 }
@@ -873,10 +861,62 @@ function updateCountdownDisplay() {
   const m = Math.floor(autoCountdown / 60);
   const s = autoCountdown % 60;
   cd.textContent = `↻ ${m}:${String(s).padStart(2,'0')}`;
-  cd.className = autoCountdown <= 30 ? 'urgent' : '';
+  cd.className = autoCountdown <= 15 ? 'urgent' : '';
 }
 
-$('auto-btn').addEventListener('click', () => setAutoRefresh(!autoOn));
+$('auto-interval').addEventListener('change', () => startCountdown());
+
+/* ── Live price ticker (every 5 seconds) ──────────────────────────── */
+async function tickPrices() {
+  if (liveCards.size === 0) return;
+  const syms = [...liveCards.keys()].join(',');
+  try {
+    const data = await fetch(`/api/prices?symbols=${encodeURIComponent(syms)}`).then(r => r.json());
+    const now = new Date(data.ts).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit'});
+    for (const [sym, {el}] of liveCards) {
+      const p = data.prices[sym];
+      if (!p) continue;
+      // update price
+      const priceEl = el.querySelector('.lv.entry .lv-val');
+      if (priceEl) {
+        const oldPrice = parseFloat(priceEl.dataset.raw || priceEl.textContent.replace(/[^0-9.]/g,''));
+        const newPrice = p.price;
+        priceEl.textContent = sf(newPrice);
+        priceEl.dataset.raw = newPrice;
+        // flash green/red on price change
+        if (oldPrice && newPrice !== oldPrice) {
+          priceEl.style.transition = 'color 0.3s';
+          priceEl.style.color = newPrice > oldPrice ? 'var(--green)' : 'var(--red)';
+          setTimeout(() => { priceEl.style.color = ''; }, 1200);
+        }
+      }
+      // update 24h change
+      const chgEl = el.querySelector('.chg');
+      if (chgEl && p.change_24h_pct != null) {
+        const chg = +p.change_24h_pct;
+        chgEl.textContent = (chg >= 0 ? '+' : '') + chg.toFixed(2) + '%';
+        chgEl.className = 'chg ' + (chg >= 0 ? 'pos' : 'neg');
+      }
+      // update volume
+      const volEl = el.querySelector('.vol');
+      if (volEl && p.quote_volume_usd) volEl.textContent = fu(p.quote_volume_usd);
+      // update live timestamp on meta
+      const meta = $('meta');
+      if (meta && meta.textContent) {
+        meta.textContent = meta.textContent.replace(/· \d{1,2}:\d{2}.*$/, `· ${now} · live`);
+      }
+    }
+  } catch { /* silent fail — next tick will retry */ }
+}
+
+function startLiveTicker() {
+  clearInterval(liveTickerTimer);
+  liveTickerTimer = setInterval(tickPrices, 5000);
+}
+function stopLiveTicker() {
+  clearInterval(liveTickerTimer);
+  liveCards.clear();
+}
 
 /* Status */
 async function checkStatus() {
@@ -932,13 +972,14 @@ async function runScan() {
     const sm = $('stat-market'); if (sm) sm.textContent = data.market.includes('BingX') ? 'USDT Perps' : data.market.split('(')[0].trim();
 
     if (!data.cards.length) { empty.style.display = 'flex'; return; }
-    // Reset countdown after successful scan
-    if (autoOn) startCountdown();
+    stopLiveTicker();
     data.cards.forEach((c, i) => {
       const el = buildCard(c, account, risk);
       el.style.animationDelay = (i * 55) + 'ms';
       grid.appendChild(el);
+      if (c.symbol) liveCards.set(c.symbol, {el, account, risk});
     });
+    startLiveTicker();
   } catch(e) {
     loader.style.display = 'none';
     empty.style.display = 'flex';
@@ -1101,7 +1142,9 @@ function buildCard(c, account, risk) {
 }
 
 checkStatus();
-setInterval(checkStatus, 60000);
+setInterval(checkStatus, 30000);
+// start countdown if a non-Off interval is pre-selected
+if (getAutoInterval()) startCountdown();
 </script>
 </body>
 </html>