Spaces:
Running
Running
File size: 4,345 Bytes
6228954 d80cccf 6228954 b549217 6228954 d80cccf 6228954 d80cccf 6228954 b549217 6228954 d80cccf 6228954 d80cccf 6228954 d80cccf 6228954 b549217 6228954 d80cccf b549217 d80cccf 6228954 b549217 6228954 b549217 d80cccf 6228954 b549217 6228954 b549217 6228954 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html>
<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> |