Hugging Face's logo

Spaces:
diamond-in
/
NEO-TRADE
Running

App Files Community
diamond-in commited on
Commit
d80cccf
·
verified ·
1 Parent(s): 726a4df

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +27 -25
index.html CHANGED
@@ -3,12 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NEO.TERM | MODULAR</title>
7
-
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
10
- <link rel="preconnect" href="https://fonts.googleapis.com">
11
- <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
12
  <link rel="stylesheet" href="./css/style.css">
13
  </head>
14
  <body class="flex flex-col p-3 gap-3 w-full h-full">
@@ -18,58 +15,64 @@
18
  <div class="neo-box flex items-center px-4 bg-black text-white min-w-[140px]">
19
  <span class="text-lg font-bold tracking-tighter">NEO.TERM</span>
20
  </div>
21
- <div class="neo-box flex items-center px-2 gap-2">
22
- <button class="neo-btn px-4 h-10 bg-[#bef264]">BTC/USDT</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </div>
 
24
  <div class="neo-box flex items-center px-2 bg-[#ffedd5]">
25
  <button id="btn-replay" class="neo-btn px-4 h-10 bg-[#fb923c] flex items-center gap-2">
26
  <span>📼</span> REPLAY
27
  </button>
28
  </div>
 
29
  <div class="neo-box ml-auto px-4 flex flex-col justify-center items-end min-w-[200px]">
30
- <span class="text-[10px] font-bold text-gray-500">BINANCE FEED</span>
31
- <div class="text-2xl font-bold" id="price-ticker">LOADING...</div>
32
  </div>
33
  </header>
34
 
35
- <!-- REPLAY CONTROLS -->
36
  <div id="replay-controls" class="hidden absolute top-20 left-1/2 transform -translate-x-1/2 z-50">
37
  <div class="neo-box p-2 flex gap-2 bg-orange-50">
38
  <button id="btn-replay-step" class="neo-btn w-10 h-10 flex items-center justify-center">⏯</button>
39
  <button id="btn-replay-play" class="neo-btn w-20 h-10">PLAY</button>
40
- <select id="replay-speed" class="neo-btn h-10 px-2">
41
- <option value="1000">1x</option>
42
- <option value="500" selected>2x</option>
43
- <option value="100">10x</option>
44
- </select>
45
  <button id="btn-replay-exit" class="neo-btn px-2 h-10 bg-red-300">EXIT</button>
46
  </div>
47
  </div>
48
 
49
  <!-- MAIN GRID -->
50
  <main class="flex-1 grid grid-cols-12 gap-3 min-h-0">
51
- <!-- CHART COL -->
52
  <div class="col-span-12 lg:col-span-9 flex flex-col gap-3 h-full">
53
  <div class="neo-box flex-1 relative" id="chart-container">
54
- <div id="loader" class="absolute inset-0 bg-white/90 z-20 flex items-center justify-center font-bold text-xl">Loading Data...</div>
55
  <div class="absolute top-2 left-2 bg-white/80 border-2 border-black px-2 py-1 text-xs font-bold z-10">
56
- STATUS: <span id="status-text" class="text-green-600">CONNECTING</span>
57
- </div>
58
- <div class="absolute bottom-8 right-16 bg-white border border-black px-2 py-1 text-[10px] z-20 opacity-80">
59
- ZONE: <span id="timezone-label">...</span>
60
  </div>
61
  </div>
62
- <!-- FOOTPRINT -->
63
  <div class="neo-box h-32 shrink-0 flex flex-col">
64
  <div class="border-b-2 border-black px-2 bg-gray-100 text-[10px] font-bold py-1">DELTA FLOW</div>
65
  <div id="footprint-box" class="flex-1 flex gap-[2px] overflow-hidden items-end p-1"></div>
66
  </div>
67
  </div>
68
-
69
- <!-- DOM/BUBBLE COL -->
70
  <div class="col-span-12 lg:col-span-3 flex flex-col gap-3 h-full">
71
  <div class="neo-box h-1/3 relative overflow-hidden bg-white" id="bubble-box">
72
- <div class="absolute top-0 left-0 bg-black text-white text-[10px] px-2 font-bold z-10">TRADE BUBBLES</div>
73
  </div>
74
  <div class="neo-box flex-1 flex flex-col min-h-0">
75
  <div class="border-b-2 border-black px-2 bg-[#67e8f9] text-sm font-bold h-8 flex items-center">ORDER BOOK</div>
@@ -78,7 +81,6 @@
78
  </div>
79
  </main>
80
 
81
- <!-- MAIN MODULE -->
82
  <script type="module" src="./js/main.js"></script>
83
  </body>
84
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>NEO.TERM | MULTI-FEED</title>
 
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
 
 
9
  <link rel="stylesheet" href="./css/style.css">
10
  </head>
11
  <body class="flex flex-col p-3 gap-3 w-full h-full">
 
15
  <div class="neo-box flex items-center px-4 bg-black text-white min-w-[140px]">
16
  <span class="text-lg font-bold tracking-tighter">NEO.TERM</span>
17
  </div>
18
+
19
+ <!-- SEARCH & SELECT AREA -->
20
+ <div class="neo-box flex items-center px-2 gap-2 bg-white flex-grow md:flex-grow-0">
21
+ <!-- SYMBOL INPUT -->
22
+ <input type="text" id="inp-symbol" value="BTC"
23
+ class="w-20 h-10 border-2 border-black px-2 font-bold uppercase outline-none focus:bg-yellow-100"
24
+ placeholder="SYM" />
25
+
26
+ <!-- EXCHANGE SELECT -->
27
+ <select id="sel-exchange" class="h-10 border-2 border-black px-2 font-bold outline-none cursor-pointer hover:bg-gray-100">
28
+ <option value="BINANCE">BINANCE (USDT)</option>
29
+ <option value="COINBASE">COINBASE (USD)</option>
30
+ </select>
31
+
32
+ <!-- LOAD BUTTON -->
33
+ <button id="btn-load" class="neo-btn h-10 px-4 bg-[#bef264] flex items-center gap-2">
34
+ <span>⚡</span> LOAD
35
+ </button>
36
  </div>
37
+
38
  <div class="neo-box flex items-center px-2 bg-[#ffedd5]">
39
  <button id="btn-replay" class="neo-btn px-4 h-10 bg-[#fb923c] flex items-center gap-2">
40
  <span>📼</span> REPLAY
41
  </button>
42
  </div>
43
+
44
  <div class="neo-box ml-auto px-4 flex flex-col justify-center items-end min-w-[200px]">
45
+ <span class="text-[10px] font-bold text-gray-500" id="feed-label">FEED</span>
46
+ <div class="text-2xl font-bold" id="price-ticker">---.--</div>
47
  </div>
48
  </header>
49
 
50
+ <!-- REPLAY CONTROLS (Hidden) -->
51
  <div id="replay-controls" class="hidden absolute top-20 left-1/2 transform -translate-x-1/2 z-50">
52
  <div class="neo-box p-2 flex gap-2 bg-orange-50">
53
  <button id="btn-replay-step" class="neo-btn w-10 h-10 flex items-center justify-center">⏯</button>
54
  <button id="btn-replay-play" class="neo-btn w-20 h-10">PLAY</button>
 
 
 
 
 
55
  <button id="btn-replay-exit" class="neo-btn px-2 h-10 bg-red-300">EXIT</button>
56
  </div>
57
  </div>
58
 
59
  <!-- MAIN GRID -->
60
  <main class="flex-1 grid grid-cols-12 gap-3 min-h-0">
 
61
  <div class="col-span-12 lg:col-span-9 flex flex-col gap-3 h-full">
62
  <div class="neo-box flex-1 relative" id="chart-container">
63
+ <div id="loader" class="absolute inset-0 bg-white/90 z-20 flex items-center justify-center font-bold text-xl">INITIALIZING...</div>
64
  <div class="absolute top-2 left-2 bg-white/80 border-2 border-black px-2 py-1 text-xs font-bold z-10">
65
+ STATUS: <span id="status-text" class="text-gray-500">WAITING</span>
 
 
 
66
  </div>
67
  </div>
 
68
  <div class="neo-box h-32 shrink-0 flex flex-col">
69
  <div class="border-b-2 border-black px-2 bg-gray-100 text-[10px] font-bold py-1">DELTA FLOW</div>
70
  <div id="footprint-box" class="flex-1 flex gap-[2px] overflow-hidden items-end p-1"></div>
71
  </div>
72
  </div>
 
 
73
  <div class="col-span-12 lg:col-span-3 flex flex-col gap-3 h-full">
74
  <div class="neo-box h-1/3 relative overflow-hidden bg-white" id="bubble-box">
75
+ <div class="absolute top-0 left-0 bg-black text-white text-[10px] px-2 font-bold z-10">TRADES</div>
76
  </div>
77
  <div class="neo-box flex-1 flex flex-col min-h-0">
78
  <div class="border-b-2 border-black px-2 bg-[#67e8f9] text-sm font-bold h-8 flex items-center">ORDER BOOK</div>
 
81
  </div>
82
  </main>
83
 
 
84
  <script type="module" src="./js/main.js"></script>
85
  </body>
86
  </html>