Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NEO.TERM | MULTI-FEED</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script> | |
| <link rel="stylesheet" href="./css/style.css"> | |
| </head> | |
| <body class="flex flex-col p-3 gap-3 w-full h-full"> | |
| <!-- HEADER --> | |
| <header class="h-16 shrink-0 flex gap-3 z-30"> | |
| <div class="neo-box flex items-center px-4 bg-black text-white min-w-[140px]"> | |
| <span class="text-lg font-bold tracking-tighter">NEO.TERM</span> | |
| </div> | |
| <!-- SEARCH & SELECT AREA --> | |
| <div class="neo-box flex items-center px-2 gap-2 bg-white flex-grow md:flex-grow-0"> | |
| <!-- SYMBOL INPUT --> | |
| <input type="text" id="inp-symbol" value="BTC" | |
| class="w-20 h-10 border-2 border-black px-2 font-bold uppercase outline-none focus:bg-yellow-100" | |
| placeholder="SYM" /> | |
| <!-- EXCHANGE SELECT --> | |
| <select id="sel-exchange" class="h-10 border-2 border-black px-2 font-bold outline-none cursor-pointer hover:bg-gray-100"> | |
| <option value="BINANCE">BINANCE (USDT)</option> | |
| <option value="COINBASE">COINBASE (USD)</option> | |
| </select> | |
| <!-- LOAD BUTTON --> | |
| <button id="btn-load" class="neo-btn h-10 px-4 bg-[#bef264] flex items-center gap-2"> | |
| <span>⚡</span> LOAD | |
| </button> | |
| </div> | |
| <div class="neo-box flex items-center px-2 bg-[#ffedd5]"> | |
| <button id="btn-replay" class="neo-btn px-4 h-10 bg-[#fb923c] flex items-center gap-2"> | |
| <span>📼</span> REPLAY | |
| </button> | |
| </div> | |
| <div class="neo-box ml-auto px-4 flex flex-col justify-center items-end min-w-[200px]"> | |
| <span class="text-[10px] font-bold text-gray-500" id="feed-label">FEED</span> | |
| <div class="text-2xl font-bold" id="price-ticker">---.--</div> | |
| </div> | |
| </header> | |
| <!-- REPLAY CONTROLS (Hidden) --> | |
| <div id="replay-controls" class="hidden absolute top-20 left-1/2 transform -translate-x-1/2 z-50"> | |
| <div class="neo-box p-2 flex gap-2 bg-orange-50"> | |
| <button id="btn-replay-step" class="neo-btn w-10 h-10 flex items-center justify-center">⏯</button> | |
| <button id="btn-replay-play" class="neo-btn w-20 h-10">PLAY</button> | |
| <button id="btn-replay-exit" class="neo-btn px-2 h-10 bg-red-300">EXIT</button> | |
| </div> | |
| </div> | |
| <!-- MAIN GRID --> | |
| <main class="flex-1 grid grid-cols-12 gap-3 min-h-0"> | |
| <div class="col-span-12 lg:col-span-9 flex flex-col gap-3 h-full"> | |
| <div class="neo-box flex-1 relative" id="chart-container"> | |
| <div id="loader" class="absolute inset-0 bg-white/90 z-20 flex items-center justify-center font-bold text-xl">INITIALIZING...</div> | |
| <div class="absolute top-2 left-2 bg-white/80 border-2 border-black px-2 py-1 text-xs font-bold z-10"> | |
| STATUS: <span id="status-text" class="text-gray-500">WAITING</span> | |
| </div> | |
| </div> | |
| <div class="neo-box h-32 shrink-0 flex flex-col"> | |
| <div class="border-b-2 border-black px-2 bg-gray-100 text-[10px] font-bold py-1">DELTA FLOW</div> | |
| <div id="footprint-box" class="flex-1 flex gap-[2px] overflow-hidden items-end p-1"></div> | |
| </div> | |
| </div> | |
| <div class="col-span-12 lg:col-span-3 flex flex-col gap-3 h-full"> | |
| <div class="neo-box h-1/3 relative overflow-hidden bg-white" id="bubble-box"> | |
| <div class="absolute top-0 left-0 bg-black text-white text-[10px] px-2 font-bold z-10">TRADES</div> | |
| </div> | |
| <div class="neo-box flex-1 flex flex-col min-h-0"> | |
| <div class="border-b-2 border-black px-2 bg-[#67e8f9] text-sm font-bold h-8 flex items-center">ORDER BOOK</div> | |
| <div id="dom-box" class="flex-1 overflow-y-auto bg-gray-50 text-[11px] font-mono"></div> | |
| </div> | |
| </div> | |
| </main> | |
| <script type="module" src="./js/main.js"></script> | |
| </body> | |
| </html> |