OptionsChart

Sleeping

App Files Files Community

topsecrettraders commited on Jan 8

Commit

307ecae

verified ·

1 Parent(s): b2e6cdd

Update app.py

Browse files

Files changed (1) hide show

app.py +136 -119

app.py CHANGED Viewed

@@ -48,12 +48,9 @@ INDEX_MAP = {
 def get_root_symbol(desc: str, symbol: str) -> str:
     """Extracts root symbol (e.g. 'RELIANCE', 'CRUDEOIL') from description."""
     try:
-        # MCX often has description "CRUDEOIL 19 JAN 6000 CE"
-        # NSE often has "RELIANCE 24 JAN..."
         parts = desc.strip().split(' ')
         return parts[0].upper()
     except:
-        # Fallback to symbol parsing
         if ':' in symbol:
             return symbol.split(':')[1]
         return symbol
@@ -78,7 +75,7 @@ def update_master_db():
             header=0, on_bad_lines='skip', storage_options=headers
         )
-        # 2. Download MCX F&O (Correct URL is MCX_COM.csv)
         url_mcx = "https://public.fyers.in/sym_details/MCX_COM.csv"
         df_mcx = pd.read_csv(
             url_mcx, usecols=[0, 1, 8, 9, 13],
@@ -108,7 +105,6 @@ def update_master_db():
                 if root in INDEX_MAP:
                     spot_sym = INDEX_MAP[root]
                 elif sym.startswith("MCX"):
-                    # MCX has no "Index Spot", usually we track the Future
                     spot_sym = "MCX"
                 else:
                     spot_sym = f"NSE:{root}-EQ"
@@ -123,14 +119,11 @@ def update_master_db():
             strike = 0.0
             opt_type = "FUT"
-            # Parse Strike & Option Type
             if "CE" in sym or "PE" in sym:
                 parts = desc.strip().split(' ')
                 if len(parts) >= 2:
                     try:
-                        # Logic: "NIFTY 23 JAN 21500 CE" -> 21500 is 2nd last
                         val = parts[-2]
-                        # Remove one decimal point to check isdigit
                         val_clean = val.replace('.', '', 1)
                         if val_clean.isdigit():
                             strike = float(val)
@@ -145,14 +138,12 @@ def update_master_db():
         # Final Sort
         final_db = {}
         for root, data in temp_db.items():
-            # Sort by Expiry (asc) then Strike (asc)
             sorted_items = sorted(data["items"], key=lambda x: (x['e'], x['k']))
             final_db[root] = { "spot": data["spot"], "items": sorted_items }
         MASTER_DB = final_db
         SEARCH_INDEX = sorted(list(MASTER_DB.keys()))
-        # Save cache
         with open(CACHE_FILE, "w") as f:
             json.dump(final_db, f)
@@ -205,8 +196,6 @@ def home(access_token: Optional[str] = Cookie(None)):
             </div>
         </div>
         """)
-    # Inject token
     return HTMLResponse(HTML_TEMPLATE.replace("{{USER_TOKEN}}", access_token))
 @app.get("/callback")
@@ -236,7 +225,7 @@ def logout():
 @app.get("/favicon.ico")
 def favicon():
-    return Response(status_code=204) # No content, stops 404 errors
 # --- API ---
@@ -244,7 +233,6 @@ def favicon():
 def get_status():
     return JSONResponse(SYSTEM_STATUS)
-# COMPATIBILITY ROUTE: Returns empty list to stop 404s on old clients
 @app.get("/api/init")
 def legacy_init():
     return JSONResponse([])
@@ -253,14 +241,10 @@ def legacy_init():
 def search_symbol(q: str = Query(..., min_length=1)):
     if not SYSTEM_STATUS["ready"]:
         return JSONResponse([])
     query = q.upper()
-    # 1. Starts with
     results = [x for x in SEARCH_INDEX if x.startswith(query)]
-    # 2. Contains (if few results)
     if len(results) < 10:
         results += [x for x in SEARCH_INDEX if query in x and x not in results]
     return JSONResponse(results[:20])
 @app.get("/api/chain")
@@ -278,7 +262,7 @@ def force_refresh(background_tasks: BackgroundTasks):
     return JSONResponse({"s": "ok"})
 # ==========================================
-# 4. FRONTEND
 # ==========================================
 HTML_TEMPLATE = """
@@ -286,8 +270,8 @@ HTML_TEMPLATE = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>PRO CHAIN (V2)</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
         :root {
@@ -300,110 +284,130 @@ HTML_TEMPLATE = """
         * { box-sizing: border-box; }
         body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
-        .top-nav { padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 60px; z-index: 10; }
-        .btn { background: #fff; border: 1px solid var(--border); padding: 8px 16px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; transition:0.2s; white-space:nowrap; }
         .btn:hover { border-color: var(--accent); color: var(--accent); background:#f0f7ff; }
-        .search-box { position: relative; width: 300px; margin-right: 20px; }
-        .search-input { width: 100%; padding: 10px 15px; border: 2px solid var(--border); border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-weight: bold; font-size: 14px; outline: none; transition: 0.3s; }
-        .search-input:focus { border-color: var(--accent); }
-        .search-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid var(--border); border-top: none; max-height: 300px; overflow-y: auto; display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-radius: 0 0 6px 6px; }
-        .search-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 13px; font-weight: 600; }
-        .search-item:hover { background: #f0f7ff; color: var(--accent); }
-        .grid-layout { display: flex; height: calc(100vh - 60px); }
-        .chain-panel { flex: 1; display: flex; flex-direction: column; position: relative; }
-        .chain-header { display: grid; grid-template-columns: 1fr 180px 1fr; padding: 10px 0; background: #f8f9fa; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-align: center; color: var(--text-sub); }
-        .chain-body { flex: 1; overflow-y: auto; background: #fff; }
-        .row { display: grid; grid-template-columns: 1fr 180px 1fr; border-bottom: 1px solid #f0f0f0; height: 40px; align-items: center; font-family: 'JetBrains Mono'; font-size: 12px; }
         .row.atm { background: var(--atm-bg); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
-        .mid-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid var(--border); border-right: 1px solid var(--border); cursor: crosshair; }
-        .visual-bar { position: absolute; top: 6px; bottom: 6px; z-index: 0; border-radius: 4px; transition: 0.3s; opacity: 0.8; }
-        .strike-txt { z-index: 2; font-weight: 800; font-size: 13px; }
-        .delta-txt { z-index: 2; font-size: 10px; font-weight: 600; background: rgba(255,255,255,0.7); padding: 0 4px; border-radius: 3px; }
-        .side-col { padding: 0 15px; display: flex; justify-content: space-between; color: #666; font-size: 11px; }
-        .fut-panel { width: 280px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; }
-        .fut-card { padding: 12px; background: #fff; border-bottom: 1px solid var(--border); }
-        .meter-bg { height: 6px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 5px; }
-        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.4); z-index: 1000; display: none; justify-content: center; align-items: center; }
-        .modal-box { background: #fff; width: 400px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 20px; max-height: 80vh; display:flex; flex-direction:column;}
-        .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; overflow-y: auto; }
-        .exp-btn { padding: 10px; text-align: center; border: 1px solid #eee; border-radius: 4px; cursor: pointer; font-weight:600; font-size:12px; }
-        .exp-btn:hover { background: #f0f7ff; border-color: var(--accent); }
-        .exp-btn.active { background: var(--accent); color: white; }
         .loader-ov { position: fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index: 9999; }
-        .spinner { width: 30px; height: 30px; border: 4px solid #f3f3f3; border-top: 4px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         @keyframes blink { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
         .live { animation: blink 1s infinite; background: var(--green) !important; }
-        .spin-icon { animation: spin 1s linear infinite; }
     </style>
 </head>
 <body>
 <div class="loader-ov" id="loader">
     <div class="spinner"></div>
-    <div id="loaderMsg" style="font-weight:700; color:var(--text-main); font-size:14px;">CONNECTING...</div>
 </div>
 <div class="modal" id="expModal">
     <div class="modal-box">
         <div style="display:flex; justify-content:space-between; font-weight:700; border-bottom:1px solid #eee; padding-bottom:10px;">
-            <span id="expTitle">SELECT EXPIRY</span>
-            <span style="cursor:pointer" onclick="closeModal()">✕</span>
         </div>
         <div class="modal-grid" id="expGrid"></div>
     </div>
 </div>
 <div class="top-nav">
-    <div style="display:flex; align-items:center;">
         <div class="search-box">
-            <input type="text" class="search-input" id="searchInp" placeholder="SEARCH (e.g., NIFTY, CRUDE)..." autocomplete="off">
             <div class="search-dropdown" id="searchRes"></div>
         </div>
-        <button class="btn" onclick="refreshDB()" id="refreshBtn">
-            <svg id="refIcon" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
-            RELOAD DB
-        </button>
     </div>
-    <div style="display:flex; gap:20px; align-items:center;">
-        <div style="text-align:right;">
-            <div style="font-size:10px; font-weight:700; color:#888;" id="spotLabel">SPOT</div>
-            <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:16px;">0.00</div>
         </div>
         <button class="btn" onclick="document.getElementById('expModal').style.display='flex'">
-            <span style="color:#888">EXP:</span> <span id="selExpTxt">SELECT</span>
         </button>
-        <button class="btn" onclick="location.href='/logout'" style="border-color:var(--red); color:var(--red);">LOGOUT</button>
-        <div id="statusDot" style="width:10px; height:10px; background:#ccc; border-radius:50%;"></div>
     </div>
 </div>
 <div class="grid-layout">
     <div class="chain-panel">
         <div class="chain-header">
-            <div>CALL SELLERS (OI)</div>
-            <div>NET FLOW (PUT-CALL)</div>
-            <div>PUT SELLERS (OI)</div>
         </div>
         <div class="chain-body" id="chainBody">
-            <div style="padding:40px; text-align:center; color:#999; font-weight:600;">USE SEARCH TO LOAD A SYMBOL</div>
         </div>
     </div>
-    <div class="fut-panel">
-        <div style="padding:15px; font-weight:700; border-bottom:1px solid var(--border); background:#fff;">FUTURES</div>
-        <div id="futBody"></div>
     </div>
 </div>
@@ -450,7 +454,7 @@ HTML_TEMPLATE = """
     }
     async function refreshDB() {
-        if(!confirm("Download fresh Master Data? This takes ~10s.")) return;
         document.getElementById('loader').style.display = 'flex';
         await fetch('/api/refresh');
         checkStatus();
@@ -472,7 +476,7 @@ HTML_TEMPLATE = """
     async function loadSymbol(root) {
         document.getElementById('searchInp').value = root;
         document.getElementById('searchRes').style.display = 'none';
-        document.getElementById('loaderMsg').innerText = "LOADING CHAIN...";
         document.getElementById('loader').style.display = 'flex';
         try {
@@ -483,12 +487,13 @@ HTML_TEMPLATE = """
             CURRENT_ROOT = root;
             CHAIN_DATA = data.items;
             SPOT_SYM = data.spot;
-            // Sort futures: Filter items with type 'FUT'
             FUT_SYMS = CHAIN_DATA.filter(x => x.t === 'FUT').sort((a,b) => a.e - b.e).slice(0, 3);
             if(SPOT_SYM === "MCX" && FUT_SYMS.length > 0) {
-                SPOT_SYM = FUT_SYMS[0].s; // Use Near Future as Spot for MCX
             }
             document.getElementById('spotLabel').innerText = (SPOT_SYM.includes('INDEX') || SPOT_SYM.includes('-EQ')) ? "SPOT" : "FUT REF";
@@ -516,7 +521,7 @@ HTML_TEMPLATE = """
         const grid = document.getElementById('expGrid');
         grid.innerHTML = validExps.map(ts => {
             const dStr = new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
-            return `<div class="exp-btn" onclick="selectExp(${ts})">${dStr}</div>`;
         }).join('');
         buildChain();
@@ -545,24 +550,23 @@ HTML_TEMPLATE = """
         body.innerHTML = strikes.map(k => `
             <div class="row" id="row-${k}" data-k="${k}">
-                <div class="side-col" id="ce-${k}"><span>-</span><span>-</span></div>
                 <div class="mid-col">
                     <div class="visual-bar" id="bar-${k}"></div>
                     <span class="strike-txt">${k}</span>
-                    <span class="delta-txt" id="val-${k}">-</span>
                 </div>
-                <div class="side-col" id="pe-${k}"><span>-</span><span>-</span></div>
             </div>
         `).join('');
-        window.scrolled = false;
         restartPoller();
     }
     function restartPoller() {
         if(POLLER) clearInterval(POLLER);
         POLLER = setInterval(pollData, 1500);
-        pollData();
     }
     async function pollData() {
@@ -570,38 +574,46 @@ HTML_TEMPLATE = """
         IS_POLLING = true;
         try {
             let symbolsToFetch = [SPOT_SYM, ...FUT_SYMS.map(x => x.s)];
             if(SPOT_PRICE > 0) {
-                const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
-                let closestK = kList[0], minDiff = 999999;
-                kList.forEach(k => {
-                   const diff = Math.abs(SPOT_PRICE - k);
-                   if(diff < minDiff) { minDiff = diff; closestK = k; }
-                });
-                document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
-                const atmRow = document.getElementById(`row-${closestK}`);
-                if(atmRow) {
-                    atmRow.classList.add('atm');
-                    if(!window.scrolled) { atmRow.scrollIntoView({block:'center'}); window.scrolled = true; }
-                }
-                const centerIdx = kList.indexOf(closestK);
-                const start = Math.max(0, centerIdx - 12);
-                const end = Math.min(kList.length, centerIdx + 12);
-                const viewKs = kList.slice(start, end);
-                OPT_SYMS.forEach(o => {
-                    if(viewKs.includes(o.k)) symbolsToFetch.push(o.s);
-                });
-            } else {
-                 const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
-                 const mid = Math.floor(kList.length/2);
-                 const viewKs = kList.slice(Math.max(0, mid-10), mid+10);
-                 OPT_SYMS.forEach(o => { if(viewKs.includes(o.k)) symbolsToFetch.push(o.s); });
             }
             const uniqueSyms = [...new Set(symbolsToFetch)].filter(s => s && s.length > 2);
             if(uniqueSyms.length === 0) return;
@@ -628,6 +640,7 @@ HTML_TEMPLATE = """
             document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
         }
         const futHTML = FUT_SYMS.map(f => {
             const d = data[f.s];
             if(!d) return '';
@@ -636,20 +649,21 @@ HTML_TEMPLATE = """
             const bPct = (d.totalbuyqty/tot)*100;
             return `
             <div class="fut-card">
-                <div style="display:flex; justify-content:space-between; font-weight:700;">
-                    <span>${dt} FUT</span> <span style="color:${d.ch>=0?'var(--green)':'var(--red)'}">${d.ltp}</span>
                 </div>
                 <div class="meter-bg">
                     <div style="width:${bPct}%; background:var(--green)"></div>
                     <div style="width:${100-bPct}%; background:var(--red)"></div>
                 </div>
-                <div style="display:flex; justify-content:space-between; font-size:10px; color:#666; margin-top:2px;">
-                    <span>B: ${fmt(d.totalbuyqty)}</span> <span>S: ${fmt(d.totalsellqty)}</span>
                 </div>
             </div>`;
         }).join('');
         if(futHTML) document.getElementById('futBody').innerHTML = futHTML;
         const rowData = {};
         for(const [sym, d] of Object.entries(data)) {
             const meta = OPT_SYMS.find(x => x.s === sym);
@@ -667,11 +681,14 @@ HTML_TEMPLATE = """
             const delta = r.pe - r.ce;
             const ceEl = document.getElementById(`ce-${k}`);
             const peEl = document.getElementById(`pe-${k}`);
-            if(ceEl) ceEl.innerHTML = `<span>S: <strong>${fmt(r.ce)}</strong></span>`;
-            if(peEl) peEl.innerHTML = `<span>S: <strong>${fmt(r.pe)}</strong></span>`;
             const bar = document.getElementById(`bar-${k}`);
             const val = document.getElementById(`val-${k}`);
             if(bar && maxDiff > 0) {
                 const pct = (Math.abs(delta) / maxDiff) * 100;
                 if(delta >= 0) {
@@ -696,7 +713,7 @@ HTML_TEMPLATE = """
         let abs = Math.abs(n);
         if(abs>=10000000) return (n/10000000).toFixed(2)+'Cr';
         if(abs>=100000) return (n/100000).toFixed(2)+'L';
-        if(abs>=1000) return (n/1000).toFixed(1)+'k';
         return n;
     }
 </script>

 def get_root_symbol(desc: str, symbol: str) -> str:
     """Extracts root symbol (e.g. 'RELIANCE', 'CRUDEOIL') from description."""
     try:
         parts = desc.strip().split(' ')
         return parts[0].upper()
     except:
         if ':' in symbol:
             return symbol.split(':')[1]
         return symbol
             header=0, on_bad_lines='skip', storage_options=headers
         )
+        # 2. Download MCX F&O
         url_mcx = "https://public.fyers.in/sym_details/MCX_COM.csv"
         df_mcx = pd.read_csv(
             url_mcx, usecols=[0, 1, 8, 9, 13],
                 if root in INDEX_MAP:
                     spot_sym = INDEX_MAP[root]
                 elif sym.startswith("MCX"):
                     spot_sym = "MCX"
                 else:
                     spot_sym = f"NSE:{root}-EQ"
             strike = 0.0
             opt_type = "FUT"
             if "CE" in sym or "PE" in sym:
                 parts = desc.strip().split(' ')
                 if len(parts) >= 2:
                     try:
                         val = parts[-2]
                         val_clean = val.replace('.', '', 1)
                         if val_clean.isdigit():
                             strike = float(val)
         # Final Sort
         final_db = {}
         for root, data in temp_db.items():
             sorted_items = sorted(data["items"], key=lambda x: (x['e'], x['k']))
             final_db[root] = { "spot": data["spot"], "items": sorted_items }
         MASTER_DB = final_db
         SEARCH_INDEX = sorted(list(MASTER_DB.keys()))
         with open(CACHE_FILE, "w") as f:
             json.dump(final_db, f)
             </div>
         </div>
         """)
     return HTMLResponse(HTML_TEMPLATE.replace("{{USER_TOKEN}}", access_token))
 @app.get("/callback")
 @app.get("/favicon.ico")
 def favicon():
+    return Response(status_code=204)
 # --- API ---
 def get_status():
     return JSONResponse(SYSTEM_STATUS)
 @app.get("/api/init")
 def legacy_init():
     return JSONResponse([])
 def search_symbol(q: str = Query(..., min_length=1)):
     if not SYSTEM_STATUS["ready"]:
         return JSONResponse([])
     query = q.upper()
     results = [x for x in SEARCH_INDEX if x.startswith(query)]
     if len(results) < 10:
         results += [x for x in SEARCH_INDEX if query in x and x not in results]
     return JSONResponse(results[:20])
 @app.get("/api/chain")
     return JSONResponse({"s": "ok"})
 # ==========================================
+# 4. FRONTEND (MOBILE OPTIMIZED)
 # ==========================================
 HTML_TEMPLATE = """
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>PRO CHAIN MOBILE</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
         :root {
         * { box-sizing: border-box; }
         body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
+        /* NAV BAR */
+        .top-nav { padding: 0 10px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; height: 55px; z-index: 10; flex-shrink: 0; }
+        .nav-left { display: flex; align-items: center; flex: 1; min-width: 0; gap: 8px; }
+        .nav-right { display: flex; gap: 8px; align-items: center; }
+        .btn { background: #fff; border: 1px solid var(--border); padding: 6px 12px; font-size: 11px; border-radius: 4px; cursor: pointer; font-weight: 700; display: flex; gap: 5px; align-items: center; white-space:nowrap; height: 32px; }
         .btn:hover { border-color: var(--accent); color: var(--accent); background:#f0f7ff; }
+        .btn-red { color: var(--red); border-color: rgba(213,0,0,0.3); }
+        /* SEARCH */
+        .search-box { position: relative; flex: 1; max-width: 180px; }
+        .search-input { width: 100%; padding: 0 10px; height: 32px; border: 1px solid #ccc; border-radius: 4px; font-family: 'JetBrains Mono'; font-weight: bold; font-size: 13px; outline: none; background: #f9f9f9; }
+        .search-input:focus { border-color: var(--accent); background: #fff; }
+        .search-dropdown { position: absolute; top: 35px; left: 0; width: 220px; background: white; border: 1px solid var(--border); max-height: 250px; overflow-y: auto; display: none; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 4px; z-index: 100; }
+        .search-item { padding: 10px; border-bottom: 1px solid #f0f0f0; font-size: 13px; font-weight: 600; }
+        /* LAYOUT */
+        .grid-layout { display: flex; flex: 1; overflow: hidden; position: relative; }
+        /* OPTION CHAIN PANEL */
+        .chain-panel { flex: 1; display: flex; flex-direction: column; height: 100%; }
+        .chain-header { display: grid; grid-template-columns: 1fr 1.3fr 1fr; padding: 8px 0; background: #f8f9fa; border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 700; text-align: center; color: var(--text-sub); }
+        .chain-body { flex: 1; overflow-y: auto; background: #fff; -webkit-overflow-scrolling: touch; }
+        .row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; border-bottom: 1px solid #f0f0f0; height: 42px; align-items: center; font-family: 'JetBrains Mono'; font-size: 11px; }
         .row.atm { background: var(--atm-bg); border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
+        .mid-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-left: 1px solid #eee; border-right: 1px solid #eee; overflow: hidden; }
+        .visual-bar { position: absolute; top: 8px; bottom: 8px; z-index: 0; border-radius: 2px; opacity: 0.6; }
+        .strike-txt { z-index: 2; font-weight: 800; font-size: 13px; color: #000; }
+        .delta-txt { z-index: 2; font-size: 9px; font-weight: 600; background: rgba(255,255,255,0.8); padding: 0 3px; border-radius: 2px; margin-top: -2px; }
+        .side-col { padding: 0 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #444; font-size: 10px; font-weight: 600; text-align: center; line-height: 1.2; }
+        /* FUTURES PANEL */
+        .fut-panel { width: 260px; background: var(--panel); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
+        .fut-card { padding: 10px; background: #fff; border-bottom: 1px solid var(--border); }
+        .meter-bg { height: 5px; background: #eee; border-radius: 3px; display: flex; overflow: hidden; margin-top: 4px; }
+        /* RESPONSIVE (MOBILE) */
+        @media (max-width: 768px) {
+            .grid-layout { flex-direction: column; }
+            /* Futures move to bottom */
+            .fut-panel { width: 100%; height: auto; min-height: 80px; max-height: 130px; border-left: none; border-top: 1px solid var(--border); flex-direction: row; overflow-x: auto; order: 2; }
+            .fut-card { min-width: 140px; border-right: 1px solid var(--border); border-bottom: none; }
+            .chain-panel { order: 1; }
+            /* Hide non-essential buttons on super small screens */
+            .hide-mobile { display: none; }
+            .search-box { max-width: 120px; }
+            .row, .chain-header { grid-template-columns: 0.8fr 1.2fr 0.8fr; }
+            .side-col span { font-size: 10px; }
+        }
+        /* MODALS & LOADERS */
+        .modal { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index: 2000; display: none; justify-content: center; align-items: center; }
+        .modal-box { background: #fff; width: 90%; max-width: 350px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); padding: 15px; max-height: 70vh; display:flex; flex-direction:column;}
+        .modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; overflow-y: auto; }
+        .exp-btn { padding: 10px 5px; text-align: center; border: 1px solid #eee; border-radius: 4px; cursor: pointer; font-weight:600; font-size:12px; }
+        .exp-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
         .loader-ov { position: fixed; top:0; left:0; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index: 9999; }
+        .spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 10px; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         @keyframes blink { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
         .live { animation: blink 1s infinite; background: var(--green) !important; }
     </style>
 </head>
 <body>
 <div class="loader-ov" id="loader">
     <div class="spinner"></div>
+    <div id="loaderMsg" style="font-weight:700; font-size:12px;">CONNECTING...</div>
 </div>
 <div class="modal" id="expModal">
     <div class="modal-box">
         <div style="display:flex; justify-content:space-between; font-weight:700; border-bottom:1px solid #eee; padding-bottom:10px;">
+            <span>SELECT EXPIRY</span>
+            <span style="cursor:pointer; padding:0 5px;" onclick="closeModal()">✕</span>
         </div>
         <div class="modal-grid" id="expGrid"></div>
     </div>
 </div>
 <div class="top-nav">
+    <div class="nav-left">
         <div class="search-box">
+            <input type="text" class="search-input" id="searchInp" placeholder="SEARCH..." autocomplete="off">
             <div class="search-dropdown" id="searchRes"></div>
         </div>
+        <button class="btn hide-mobile" onclick="refreshDB()">RELOAD DB</button>
     </div>
+    <div class="nav-right">
+        <div style="text-align:right; line-height:1;">
+            <div style="font-size:9px; font-weight:700; color:#888;" id="spotLabel">SPOT</div>
+            <div id="spotPrice" style="font-family:'JetBrains Mono'; font-weight:800; font-size:14px;">0.00</div>
         </div>
         <button class="btn" onclick="document.getElementById('expModal').style.display='flex'">
+            <span id="selExpTxt">EXPIRY</span>
         </button>
+        <button class="btn btn-red" onclick="location.href='/logout'">EXIT</button>
+        <div id="statusDot" style="width:8px; height:8px; background:#ccc; border-radius:50%;"></div>
     </div>
 </div>
 <div class="grid-layout">
     <div class="chain-panel">
         <div class="chain-header">
+            <div>CALL OI</div>
+            <div>NET FLOW (P-C)</div>
+            <div>PUT OI</div>
         </div>
         <div class="chain-body" id="chainBody">
+            <div style="padding:40px; text-align:center; color:#999; font-weight:600; font-size:12px;">SEARCH SYMBOL TO LOAD</div>
         </div>
     </div>
+    <div class="fut-panel" id="futBody">
+        <!-- Futures Cards go here -->
     </div>
 </div>
     }
     async function refreshDB() {
+        if(!confirm("Force refresh? Takes ~10s.")) return;
         document.getElementById('loader').style.display = 'flex';
         await fetch('/api/refresh');
         checkStatus();
     async function loadSymbol(root) {
         document.getElementById('searchInp').value = root;
         document.getElementById('searchRes').style.display = 'none';
+        document.getElementById('loaderMsg').innerText = "LOADING...";
         document.getElementById('loader').style.display = 'flex';
         try {
             CURRENT_ROOT = root;
             CHAIN_DATA = data.items;
             SPOT_SYM = data.spot;
+            SPOT_PRICE = 0; // Reset spot price so next poll triggers centering
+            window.scrolled = false; // Reset scroll lock
             FUT_SYMS = CHAIN_DATA.filter(x => x.t === 'FUT').sort((a,b) => a.e - b.e).slice(0, 3);
             if(SPOT_SYM === "MCX" && FUT_SYMS.length > 0) {
+                SPOT_SYM = FUT_SYMS[0].s;
             }
             document.getElementById('spotLabel').innerText = (SPOT_SYM.includes('INDEX') || SPOT_SYM.includes('-EQ')) ? "SPOT" : "FUT REF";
         const grid = document.getElementById('expGrid');
         grid.innerHTML = validExps.map(ts => {
             const dStr = new Date(ts*1000).toLocaleDateString('en-GB', {day:'2-digit', month:'short'});
+            return `<div class="exp-btn ${ts===ACTIVE_EXP?'active':''}" onclick="selectExp(${ts})">${dStr}</div>`;
         }).join('');
         buildChain();
         body.innerHTML = strikes.map(k => `
             <div class="row" id="row-${k}" data-k="${k}">
+                <div class="side-col" id="ce-${k}"><span>-</span></div>
                 <div class="mid-col">
                     <div class="visual-bar" id="bar-${k}"></div>
                     <span class="strike-txt">${k}</span>
+                    <span class="delta-txt" id="val-${k}"></span>
                 </div>
+                <div class="side-col" id="pe-${k}"><span>-</span></div>
             </div>
         `).join('');
         restartPoller();
     }
     function restartPoller() {
         if(POLLER) clearInterval(POLLER);
         POLLER = setInterval(pollData, 1500);
+        pollData(); // Immediate call
     }
     async function pollData() {
         IS_POLLING = true;
         try {
+            // Determine range to fetch
             let symbolsToFetch = [SPOT_SYM, ...FUT_SYMS.map(x => x.s)];
+            const kList = Array.from(document.querySelectorAll('.row')).map(r => parseFloat(r.dataset.k));
+            // Logic to determine fetching range
+            let targetK = kList[Math.floor(kList.length/2)]; // Default middle
             if(SPOT_PRICE > 0) {
+                 // Find closest strike to spot
+                 let minDiff = 999999;
+                 kList.forEach(k => {
+                    const diff = Math.abs(SPOT_PRICE - k);
+                    if(diff < minDiff) { minDiff = diff; targetK = k; }
+                 });
+                 // Center the view ONCE per symbol load
+                 if(!window.scrolled) {
+                     const atmRow = document.getElementById(`row-${targetK}`);
+                     if(atmRow) {
+                         atmRow.scrollIntoView({block:'center', behavior:'auto'});
+                         atmRow.classList.add('atm');
+                         window.scrolled = true;
+                     }
+                 }
+                 // Highlight ATM
+                 document.querySelectorAll('.atm').forEach(e => e.classList.remove('atm'));
+                 const currAtm = document.getElementById(`row-${targetK}`);
+                 if(currAtm) currAtm.classList.add('atm');
             }
+            // Fetch range around targetK (Atm or Middle)
+            const centerIdx = kList.indexOf(targetK);
+            const range = 12; // 12 above, 12 below
+            const start = Math.max(0, centerIdx - range);
+            const end = Math.min(kList.length, centerIdx + range);
+            const viewKs = kList.slice(start, end);
+            OPT_SYMS.forEach(o => { if(viewKs.includes(o.k)) symbolsToFetch.push(o.s); });
             const uniqueSyms = [...new Set(symbolsToFetch)].filter(s => s && s.length > 2);
             if(uniqueSyms.length === 0) return;
             document.getElementById('spotPrice').innerText = SPOT_PRICE.toFixed(2);
         }
+        // Update Futures (Horizontal scroll on mobile)
         const futHTML = FUT_SYMS.map(f => {
             const d = data[f.s];
             if(!d) return '';
             const bPct = (d.totalbuyqty/tot)*100;
             return `
             <div class="fut-card">
+                <div style="display:flex; justify-content:space-between; font-weight:700; font-size:11px;">
+                    <span>${dt}</span> <span style="color:${d.ch>=0?'var(--green)':'var(--red)'}">${d.ltp}</span>
                 </div>
                 <div class="meter-bg">
                     <div style="width:${bPct}%; background:var(--green)"></div>
                     <div style="width:${100-bPct}%; background:var(--red)"></div>
                 </div>
+                <div style="display:flex; justify-content:space-between; font-size:9px; color:#666; margin-top:2px;">
+                    <span>B:${fmt(d.totalbuyqty)}</span> <span>S:${fmt(d.totalsellqty)}</span>
                 </div>
             </div>`;
         }).join('');
         if(futHTML) document.getElementById('futBody').innerHTML = futHTML;
+        // Process Chain Data
         const rowData = {};
         for(const [sym, d] of Object.entries(data)) {
             const meta = OPT_SYMS.find(x => x.s === sym);
             const delta = r.pe - r.ce;
             const ceEl = document.getElementById(`ce-${k}`);
             const peEl = document.getElementById(`pe-${k}`);
+            // Simplified Mobile Text
+            if(ceEl) ceEl.innerHTML = `<span><strong>${fmt(r.ce)}</strong></span>`;
+            if(peEl) peEl.innerHTML = `<span><strong>${fmt(r.pe)}</strong></span>`;
             const bar = document.getElementById(`bar-${k}`);
             const val = document.getElementById(`val-${k}`);
             if(bar && maxDiff > 0) {
                 const pct = (Math.abs(delta) / maxDiff) * 100;
                 if(delta >= 0) {
         let abs = Math.abs(n);
         if(abs>=10000000) return (n/10000000).toFixed(2)+'Cr';
         if(abs>=100000) return (n/100000).toFixed(2)+'L';
+        if(abs>=1000) return (n/1000).toFixed(0)+'k';
         return n;
     }
 </script>