Hugging Face's logo

Spaces:
FriedsU
/
wif-wif-2
Running

App Files Community
FriedsU commited on
Commit
b594c53
·
verified ·
1 Parent(s): 44de58d

Upload 6 files

Browse files
Files changed (6) hide show
  1. wif/.gitattributes +35 -0
  2. wif/README.md +13 -0
  3. wif/favicon.ico +0 -0
  4. wif/index.html +651 -0
  5. wif/main.js +212 -0
  6. wif/styles.css +215 -0
wif/.gitattributes ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *.7z filter=lfs diff=lfs merge=lfs -text
2
+ *.arrow filter=lfs diff=lfs merge=lfs -text
3
+ *.bin filter=lfs diff=lfs merge=lfs -text
4
+ *.bz2 filter=lfs diff=lfs merge=lfs -text
5
+ *.ckpt filter=lfs diff=lfs merge=lfs -text
6
+ *.ftz filter=lfs diff=lfs merge=lfs -text
7
+ *.gz filter=lfs diff=lfs merge=lfs -text
8
+ *.h5 filter=lfs diff=lfs merge=lfs -text
9
+ *.joblib filter=lfs diff=lfs merge=lfs -text
10
+ *.lfs.* filter=lfs diff=lfs merge=lfs -text
11
+ *.mlmodel filter=lfs diff=lfs merge=lfs -text
12
+ *.model filter=lfs diff=lfs merge=lfs -text
13
+ *.msgpack filter=lfs diff=lfs merge=lfs -text
14
+ *.npy filter=lfs diff=lfs merge=lfs -text
15
+ *.npz filter=lfs diff=lfs merge=lfs -text
16
+ *.onnx filter=lfs diff=lfs merge=lfs -text
17
+ *.ot filter=lfs diff=lfs merge=lfs -text
18
+ *.parquet filter=lfs diff=lfs merge=lfs -text
19
+ *.pb filter=lfs diff=lfs merge=lfs -text
20
+ *.pickle filter=lfs diff=lfs merge=lfs -text
21
+ *.pkl filter=lfs diff=lfs merge=lfs -text
22
+ *.pt filter=lfs diff=lfs merge=lfs -text
23
+ *.pth filter=lfs diff=lfs merge=lfs -text
24
+ *.rar filter=lfs diff=lfs merge=lfs -text
25
+ *.safetensors filter=lfs diff=lfs merge=lfs -text
26
+ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
27
+ *.tar.* filter=lfs diff=lfs merge=lfs -text
28
+ *.tar filter=lfs diff=lfs merge=lfs -text
29
+ *.tflite filter=lfs diff=lfs merge=lfs -text
30
+ *.tgz filter=lfs diff=lfs merge=lfs -text
31
+ *.wasm filter=lfs diff=lfs merge=lfs -text
32
+ *.xz filter=lfs diff=lfs merge=lfs -text
33
+ *.zip filter=lfs diff=lfs merge=lfs -text
34
+ *.zst filter=lfs diff=lfs merge=lfs -text
35
+ *tfevents* filter=lfs diff=lfs merge=lfs -text
wif/README.md ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: wif-wif-2
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
+ sdk: static
7
+ pinned: false
8
+ tags:
9
+ - deepsite
10
+ ---
11
+ add to: "WifJoint.dog" in the top a smaller text: "Social Trading Terminal". delete "Floating Doge Button". leave social feed code intact.
12
+
13
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
wif/favicon.ico ADDED
wif/index.html ADDED
@@ -0,0 +1,651 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WifJoint.dog - Social Trading Terminal</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link rel="stylesheet" href="styles.css">
10
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-chart-financial.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
14
+ <script src="main.js"></script>
15
+ <link rel="icon" href="favicon.ico" type="image/x-icon">
16
+ </head>
17
+ <body class="doge-bg">
18
+
19
+ <!-- Main Layout -->
20
+ <div class="min-h-screen flex flex-col">
21
+ <!-- Header -->
22
+ <header class="border-b border-gray-800">
23
+ <div class="px-4 py-3 flex justify-between items-center">
24
+ <!-- Left Block: Logo -->
25
+ <div class="flex items-center space-x-3">
26
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="Doge" class="w-10 h-10 rounded-full border-2 border-yellow-500 rounded-image">
27
+ <div>
28
+ <h1 class="text-2xl font-bold doge-text">WifJoint.dog</h1>
29
+ <div class="text-xs text-muted">Social Trading Terminal</div>
30
+ </div>
31
+ </div>
32
+
33
+ <!-- Center Block: Coin, Price, Balance -->
34
+ <div class="flex items-center space-x-6 bg-gray-800 rounded-lg p-2">
35
+ <!-- Select Dropdown -->
36
+ <div class="relative">
37
+ <select class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8 text-base">
38
+ <option>BTC/USDT</option>
39
+ <option>ETH/USDT</option>
40
+ <option>SOL/USDT</option>
41
+ <option>WIF/USDT</option>
42
+ <option>DOGE/USDT</option>
43
+ </select>
44
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
45
+ <i class="fas fa-chevron-down text-muted"></i>
46
+ </div>
47
+ </div>
48
+ <!-- Price Info -->
49
+ <div class="flex items-baseline space-x-2">
50
+ <span class="text-green-mono font-mono text-lg">$69,420.42</span>
51
+ <span class="text-xs text-green-mono">+4.20%</span>
52
+ </div>
53
+ <!-- Balance Info (Moved from Sidebar) -->
54
+ <div class="flex items-center space-x-3 border-l border-gray-700 pl-3 ml-3">
55
+ <div class="text-sm text-muted">
56
+ <div>Available</div>
57
+ <div>In Orders</div>
58
+ </div>
59
+ <div class="text-sm text-right font-mono">
60
+ <div>$12,345.67</div>
61
+ <div>$30,344.75</div>
62
+ </div>
63
+ <div class="text-sm text-muted pl-3">Total Balance</div>
64
+ <div class="font-mono text-base">$42,690.42</div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Right Block: Icons and Connect Button -->
69
+ <div class="flex items-center space-x-2">
70
+ <!-- Icons (Moved from Center Block) -->
71
+ <div class="flex space-x-2">
72
+ <button class="btn p-2">
73
+ <i class="fas fa-bell"></i>
74
+ </button>
75
+ <button class="btn p-2">
76
+ <i class="fas fa-envelope"></i>
77
+ </button>
78
+ <button class="btn p-2">
79
+ <i class="fas fa-cog"></i>
80
+ </button>
81
+ </div>
82
+ <!-- Connect button -->
83
+ <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-medium">
84
+ <i class="fas fa-wallet mr-2"></i> Connect
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </header>
89
+
90
+ <!-- Main Content -->
91
+ <div class="flex flex-1 overflow-hidden">
92
+ <!-- Left Sidebar - Watchlist & Portfolio -->
93
+ <div class="hidden lg:block w-64 border-r border-gray-800 overflow-y-auto">
94
+ <!-- Portfolio -->
95
+ <div class="p-4">
96
+ <div class="flex justify-between items-center mb-3">
97
+ <h2 class="font-medium">Portfolio</h2>
98
+ <div class="text-xs text-muted">$42,690.42</div>
99
+ </div>
100
+
101
+ <!-- Order Form -->
102
+ <div class="order-form">
103
+ <div id="order-form-toggle" class="flex mb-4">
104
+ <button id="buy-btn" class="flex-1 py-2 bg-green-900 bg-opacity-30 text-green-400 font-medium rounded-l-lg">
105
+ Buy
106
+ </button>
107
+ <button id="sell-btn" class="flex-1 py-2 bg-red-900 bg-opacity-30 text-red-400 font-medium rounded-r-lg">
108
+ Sell
109
+ </button>
110
+ </div>
111
+
112
+ <div class="space-y-3">
113
+ <div>
114
+ <label class="block text-xs text-gray-400 mb-1">Order Type</label>
115
+ <select class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm">
116
+ <option>Limit</option>
117
+ <option>Market</option>
118
+ <option>Stop Limit</option>
119
+ </select>
120
+ </div>
121
+
122
+ <div>
123
+ <label class="block text-xs text-gray-400 mb-1">Price (USDT)</label>
124
+ <input type="text" class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm" value="69,420.42">
125
+ </div>
126
+
127
+ <div>
128
+ <label class="block text-xs text-gray-400 mb-1">Amount (BTC)</label>
129
+ <input type="text" class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm" value="0.1">
130
+ </div>
131
+
132
+ <div class="grid grid-cols-4 gap-2">
133
+ <button class="bg-gray-800 text-xs p-1 rounded">25%</button>
134
+ <button class="bg-gray-800 text-xs p-1 rounded">50%</button>
135
+ <button class="bg-gray-800 text-xs p-1 rounded">75%</button>
136
+ <button class="bg-gray-800 text-xs p-1 rounded">100%</button>
137
+ </div>
138
+
139
+ <div class="pt-2">
140
+ <button id="place-order-btn" class="w-full bg-green-600 text-white py-2 rounded-lg font-medium">
141
+ Buy BTC
142
+ </button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Watchlist -->
148
+ <div class="mb-6">
149
+ <div id="watchlist-header" class="flex justify-between items-center mb-3">
150
+ <h2 class="font-medium">Watchlist</h2>
151
+ <button class="text-gray-400 hover:text-yellow-500">
152
+ <i class="fas fa-plus"></i>
153
+ </button>
154
+ </div>
155
+
156
+ <div class="space-y-2">
157
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
158
+ <div class="flex items-center">
159
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-3">
160
+ <div>
161
+ <div class="font-medium">BTC/USDT</div>
162
+ <div class="text-xs text-gray-400">Bitcoin</div>
163
+ </div>
164
+ </div>
165
+ <div class="text-right">
166
+ <div class="font-mono">$69,420</div>
167
+ <div class="text-xs text-green-400">+4.2%</div>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
172
+ <div class="flex items-center">
173
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-3">
174
+ <div>
175
+ <div class="font-medium">ETH/USDT</div>
176
+ <div class="text-xs text-gray-400">Ethereum</div>
177
+ </div>
178
+ </div>
179
+ <div class="text-right">
180
+ <div class="font-mono">$3,690</div>
181
+ <div class="text-xs text-green-400">+2.3%</div>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
186
+ <div class="flex items-center">
187
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-3">
188
+ <div>
189
+ <div class="font-medium">SOL/USDT</div>
190
+ <div class="text-xs text-gray-400">Solana</div>
191
+ </div>
192
+ </div>
193
+ <div class="text-right">
194
+ <div class="font-mono">$142.42</div>
195
+ <div class="text-xs text-red-400">-1.5%</div>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
200
+ <div class="flex items-center">
201
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-3">
202
+ <div>
203
+ <div class="font-medium">WIF/USDT</div>
204
+ <div class="text-xs text-gray-400">dogwifhat</div>
205
+ </div>
206
+ </div>
207
+ <div class="text-right">
208
+ <div class="font-mono">$2.34</div>
209
+ <div class="text-xs text-green-400">+8.9%</div>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
214
+ <div class="flex items-center">
215
+ <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="DOGE" class="w-6 h-6 mr-3">
216
+ <div>
217
+ <div class="font-medium">DOGE/USDT</div>
218
+ <div class="text-xs text-gray-400">Dogecoin</div>
219
+ </div>
220
+ </div>
221
+ <div class="text-right">
222
+ <div class="font-mono">$0.16</div>
223
+ <div class="text-xs text-red-400">-1.2%</div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Main Terminal Area -->
232
+ <div class="flex-1 flex flex-col overflow-hidden">
233
+ <!-- Chart Area -->
234
+ <div class="flex-1 p-4 overflow-hidden">
235
+ <div class="h-full flex flex-col">
236
+ <!-- Chart Controls -->
237
+ <div class="flex justify-between items-center mb-4">
238
+ <!-- Left Side: Timeframes & New Indicators Dropdown -->
239
+ <div class="flex items-center space-x-2">
240
+ <!-- Timeframe Buttons -->
241
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
242
+ 1m
243
+ </button>
244
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
245
+ 5m
246
+ </button>
247
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
248
+ 15m
249
+ </button>
250
+ <button class="px-3 py-1 bg-yellow-600 rounded-lg text-sm"> <!-- Example active button, styling needs check -->
251
+ 1h
252
+ </button>
253
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
254
+ 4h
255
+ </button>
256
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
257
+ 1d
258
+ </button>
259
+
260
+ <!-- Indicators Dropdown -->
261
+ <div class="relative inline-block text-left" id="indicators-dropdown">
262
+ <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-700 shadow-sm px-3 py-1 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700 focus:outline-none" id="indicators-menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown('indicators-menu')">
263
+ Indicators
264
+ <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
265
+ <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
266
+ </svg>
267
+ </button>
268
+ <!-- Dropdown menu -->
269
+ <div id="indicators-menu" class="origin-top-left absolute left-0 mt-2 w-40 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none hidden z-10" role="menu" aria-orientation="vertical" aria-labelledby="indicators-menu-button" tabindex="-1">
270
+ <div class="py-1" role="none">
271
+ <button id="sma-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white indicator-active" role="menuitem" tabindex="-1" onclick="updateChart('sma'); closeDropdown('indicators-menu');">SMA</button>
272
+ <button id="ema-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('ema'); closeDropdown('indicators-menu');">EMA</button>
273
+ <button id="rsi-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('rsi'); closeDropdown('indicators-menu');">RSI</button>
274
+ <button id="macd-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('macd'); closeDropdown('indicators-menu');">MACD</button>
275
+ <button id="bollinger-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('bollinger'); closeDropdown('indicators-menu');">Bollinger</button>
276
+ <button id="volume-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('volume'); closeDropdown('indicators-menu');">Volume</button>
277
+ <button id="fibonacci-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-white" role="menuitem" tabindex="-1" onclick="updateChart('fibonacci'); closeDropdown('indicators-menu');">Fibonacci</button>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- Right Side: Other Controls -->
284
+ <div class="flex space-x-2">
285
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
286
+ <i class="fas fa-ruler-combined"></i>
287
+ </button>
288
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
289
+ <i class="fas fa-sliders-h"></i>
290
+ </button>
291
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
292
+ <i class="fas fa-cog"></i>
293
+ </button>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Main Chart - Large Candlestick Chart -->
298
+ <div class="main-chart-container chart-container">
299
+ <canvas id="candleChart"></canvas>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Bottom Panel -->
305
+ <div class="border-t border-gray-800 bottom-panel-container flex flex-col flex-1">
306
+ <div id="bottom-panel-tabs" class="flex flex-shrink-0">
307
+ <button class="px-4 py-2 text-sm font-medium tab-active">
308
+ Trades
309
+ </button>
310
+ <button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-yellow-500">
311
+ Positions
312
+ </button>
313
+ <button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-yellow-500">
314
+ Orders
315
+ </button>
316
+ </div>
317
+
318
+ <div id="trade-history-list" class="overflow-y-auto flex-1">
319
+ <div>
320
+ <!-- Trade 1 -->
321
+ <div class="grid grid-cols-4 text-xs p-2 trade-history-row">
322
+ <div class="text-green-mono">Buy</div>
323
+ <div class="text-xs">69,420.42</div>
324
+ <div class="text-xs">0.1 BTC</div>
325
+ <div class="text-right text-xs text-muted">2 min ago</div>
326
+ </div>
327
+
328
+ <!-- Trade 2 -->
329
+ <div class="grid grid-cols-4 text-xs p-2 trade-history-row">
330
+ <div class="text-red-mono">Sell</div>
331
+ <div class="text-xs">69,425.15</div>
332
+ <div class="text-xs">0.05 BTC</div>
333
+ <div class="text-right text-xs text-muted">5 min ago</div>
334
+ </div>
335
+
336
+ <!-- Trade 3 -->
337
+ <div class="grid grid-cols-4 text-xs p-2 trade-history-row">
338
+ <div class="text-green-mono">Buy</div>
339
+ <div class="text-xs">69,415.78</div>
340
+ <div class="text-xs">0.2 BTC</div>
341
+ <div class="text-right text-xs text-muted">12 min ago</div>
342
+ </div>
343
+
344
+ <!-- Trade 4 -->
345
+ <div class="grid grid-cols-4 text-xs p-2 trade-history-row">
346
+ <div class="text-red-mono">Sell</div>
347
+ <div class="text-xs">69,430.10</div>
348
+ <div class="text-xs">0.15 BTC</div>
349
+ <div class="text-right text-xs text-muted">25 min ago</div>
350
+ </div>
351
+
352
+ <!-- Trade 5 -->
353
+ <div class="grid grid-cols-4 text-xs p-2 trade-history-row">
354
+ <div class="text-green-mono">Buy</div>
355
+ <div class="text-xs">69,410.50</div>
356
+ <div class="text-xs">0.3 BTC</div>
357
+ <div class="text-right text-xs text-muted">42 min ago</div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Right Sidebar - Social Feed -->
365
+ <div class="hidden lg:block w-1/3 border-l border-gray-800 overflow-y-auto">
366
+ <div class="p-4">
367
+ <div class="flex justify-between items-center mb-4">
368
+ <h2 class="text-lg font-semibold">Social Feed</h2>
369
+ <button class="text-yellow-500 hover:text-yellow-400">
370
+ <i class="fas fa-plus"></i>
371
+ </button>
372
+ </div>
373
+
374
+ <!-- Feed Switch -->
375
+ <div class="feed-switch">
376
+ <button class="feed-switch-btn active" onclick="switchFeed('posts')">Posts</button>
377
+ <button class="feed-switch-btn" onclick="switchFeed('chat')">Chat</button>
378
+ <button class="feed-switch-btn" onclick="switchFeed('video')">Video</button>
379
+ </div>
380
+
381
+ <!-- Posts Feed -->
382
+ <div id="posts-feed">
383
+ <!-- Create Post -->
384
+ <div class="mb-6">
385
+ <div class="flex items-start space-x-3">
386
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full">
387
+ <div class="flex-1">
388
+ <textarea class="w-full bg-gray-800 text-white p-3 rounded-lg border border-gray-700 focus:outline-none focus:border-yellow-500" rows="2" placeholder="Share your trade idea..."></textarea>
389
+ <div class="flex justify-between items-center mt-2">
390
+ <div class="flex space-x-2">
391
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
392
+ <i class="fas fa-chart-line"></i>
393
+ </button>
394
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
395
+ <i class="fas fa-image"></i>
396
+ </button>
397
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
398
+ <i class="fas fa-gift"></i>
399
+ </button>
400
+ </div>
401
+ <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded-lg text-sm">
402
+ Post
403
+ </button>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Feed Items -->
410
+ <div class="space-y-4">
411
+ <!-- Feed Item 1 -->
412
+ <div class="terminal-bg p-4 rounded-lg social-feed-post">
413
+ <div class="flex justify-between items-start mb-3">
414
+ <div class="flex items-center space-x-2">
415
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
416
+ <div>
417
+ <span class="font-medium">DiamondPaws</span>
418
+ <span class="text-xs text-gray-400 ml-1">@DiamondPaws · 2h</span>
419
+ </div>
420
+ </div>
421
+ <button class="text-gray-400 hover:text-yellow-500">
422
+ <i class="fas fa-ellipsis-h"></i>
423
+ </button>
424
+ </div>
425
+
426
+ <p class="mb-3">Just entered a long position on $WIF at $2.30. Chart looks bullish with strong support at $2.00. Target $3.50 🚀</p>
427
+
428
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
429
+ <div class="flex justify-between items-center mb-2">
430
+ <div class="flex items-center">
431
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-2">
432
+ <span class="font-medium">WIF/USDT</span>
433
+ </div>
434
+ <div class="text-green-400 font-mono text-sm">$2.34 (+8.9%)</div>
435
+ </div>
436
+ <div class="h-24 bg-gray-900 rounded mb-2"></div>
437
+ <div class="flex justify-between text-xs text-gray-400">
438
+ <span>Entry: $2.30</span>
439
+ <span>Target: $3.50</span>
440
+ <span>Stop: $2.00</span>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="flex justify-between text-sm text-gray-400">
445
+ <button class="flex items-center hover:text-yellow-500">
446
+ <i class="far fa-comment mr-1"></i> 12
447
+ </button>
448
+ <button class="flex items-center hover:text-green-500">
449
+ <i class="fas fa-retweet mr-1"></i> 24
450
+ </button>
451
+ <button class="flex items-center hover:text-red-500">
452
+ <i class="far fa-heart mr-1"></i> 89
453
+ </button>
454
+ <button class="flex items-center hover:text-blue-400">
455
+ <i class="fas fa-share-alt mr-1"></i>
456
+ </button>
457
+ </div>
458
+ </div>
459
+
460
+ <!-- Feed Item 2 -->
461
+ <div class="terminal-bg p-4 rounded-lg social-feed-post">
462
+ <div class="flex justify-between items-start mb-3">
463
+ <div class="flex items-center space-x-2">
464
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
465
+ <div>
466
+ <span class="font-medium">WhaleHunter</span>
467
+ <span class="text-xs text-gray-400 ml-1">@WhaleHunter · 4h</span>
468
+ </div>
469
+ </div>
470
+ <button class="text-gray-400 hover:text-yellow-500">
471
+ <i class="fas fa-ellipsis-h"></i>
472
+ </button>
473
+ </div>
474
+
475
+ <p class="mb-3">Shorting $BTC at $69,500. RSI showing divergence on 4H chart. Target $65,000 with stop at $71,000.</p>
476
+
477
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
478
+ <div class="flex justify-between items-center mb-2">
479
+ <div class="flex items-center">
480
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
481
+ <span class="font-medium">BTC/USDT</span>
482
+ </div>
483
+ <div class="text-red-400 font-mono text-sm">$69,420 (-1.2%)</div>
484
+ </div>
485
+ <div class="h-24 bg-gray-900 rounded mb-2"></div>
486
+ <div class="flex justify-between text-xs text-gray-400">
487
+ <span>Entry: $69,500</span>
488
+ <span>Target: $65,000</span>
489
+ <span>Stop: $71,000</span>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="flex justify-between text-sm text-gray-400">
494
+ <button class="flex items-center hover:text-yellow-500">
495
+ <i class="far fa-comment mr-1"></i> 8
496
+ </button>
497
+ <button class="flex items-center hover:text-green-500">
498
+ <i class="fas fa-retweet mr-1"></i> 15
499
+ </button>
500
+ <button class="flex items-center hover:text-red-500">
501
+ <i class="far fa-heart mr-1"></i> 42
502
+ </button>
503
+ <button class="flex items-center hover:text-blue-400">
504
+ <i class="fas fa-share-alt mr-1"></i>
505
+ </button>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Chat Feed -->
512
+ <div id="chat-feed" class="hidden-feed">
513
+ <div class="flex flex-col h-full">
514
+ <div class="flex-1 overflow-y-auto p-3 space-y-3">
515
+ <!-- Message 1 -->
516
+ <div class="flex items-start space-x-2">
517
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
518
+ <div class="message-other p-2 max-w-xs">
519
+ <div class="text-xs font-medium">DogeTrader</div>
520
+ <p class="text-sm">Just went long at $69,200. Bullish divergence on RSI</p>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Message 2 -->
525
+ <div class="flex items-start space-x-2 justify-end">
526
+ <div class="message-self p-2 max-w-xs">
527
+ <div class="text-xs font-medium text-right">You</div>
528
+ <p class="text-sm">I'm waiting for a retest of $69,000 support</p>
529
+ </div>
530
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
531
+ </div>
532
+
533
+ <!-- Message 3 -->
534
+ <div class="flex items-start space-x-2">
535
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
536
+ <div class="message-other p-2 max-w-xs">
537
+ <div class="text-xs font-medium">CryptoWolf</div>
538
+ <p class="text-sm">Volume picking up, breakout incoming</p>
539
+ </div>
540
+ </div>
541
+
542
+ <!-- Message 4 -->
543
+ <div class="flex items-start space-x-2">
544
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
545
+ <div class="message-other p-2 max-w-xs">
546
+ <div class="text-xs font-medium">MoonLambo</div>
547
+ <p class="text-sm">Just added to my position at $69,300 🚀</p>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="p-3 border-t border-gray-800">
553
+ <div class="flex items-center space-x-2">
554
+ <input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message...">
555
+ <button class="text-yellow-500 hover:text-yellow-400 p-2">
556
+ <i class="fas fa-paper-plane"></i>
557
+ </button>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Video Chat Feed -->
564
+ <div id="video-feed" class="hidden-feed">
565
+ <div class="mb-6">
566
+ <div class="video-chat mb-3">
567
+ <div class="video-box video-active">
568
+ <div class="video-content">
569
+ <i class="fas fa-user fa-2x"></i>
570
+ <div class="video-user">You</div>
571
+ </div>
572
+ </div>
573
+ <div class="video-box">
574
+ <div class="video-content">
575
+ <i class="fas fa-user fa-2x"></i>
576
+ <div class="video-user">DogeTrader</div>
577
+ </div>
578
+ </div>
579
+ <div class="video-box">
580
+ <div class="video-content">
581
+ <i class="fas fa-user fa-2x"></i>
582
+ <div class="video-user">CryptoWolf</div>
583
+ </div>
584
+ </div>
585
+ <div class="video-box">
586
+ <div class="video-content">
587
+ <i class="fas fa-user fa-2x"></i>
588
+ <div class="video-user">MoonLambo</div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
+ <div class="flex justify-center space-x-4">
594
+ <button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700">
595
+ <i class="fas fa-microphone"></i>
596
+ </button>
597
+ <button class="bg-red-500 text-white p-2 rounded-full hover:bg-red-600">
598
+ <i class="fas fa-phone"></i>
599
+ </button>
600
+ <button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700">
601
+ <i class="fas fa-video"></i>
602
+ </button>
603
+ </div>
604
+ </div>
605
+
606
+ <!-- Chat integrated with video -->
607
+ <div class="terminal-bg rounded-lg">
608
+ <div class="flex-1 overflow-y-auto p-3 space-y-3 max-h-64">
609
+ <!-- Message 1 -->
610
+ <div class="flex items-start space-x-2">
611
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
612
+ <div class="message-other p-2 max-w-xs">
613
+ <div class="text-xs font-medium">DogeTrader</div>
614
+ <p class="text-sm">Just went long at $69,200. Bullish divergence on RSI</p>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Message 2 -->
619
+ <div class="flex items-start space-x-2 justify-end">
620
+ <div class="message-self p-2 max-w-xs">
621
+ <div class="text-xs font-medium text-right">You</div>
622
+ <p class="text-sm">I'm waiting for a retest of $69,000 support</p>
623
+ </div>
624
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
625
+ </div>
626
+
627
+ <!-- Message 3 -->
628
+ <div class="flex items-start space-x-2">
629
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
630
+ <div class="message-other p-2 max-w-xs">
631
+ <div class="text-xs font-medium">CryptoWolf</div>
632
+ <p class="text-sm">Volume picking up, breakout incoming</p>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <div class="p-3 border-t border-gray-800">
638
+ <div class="flex items-center space-x-2">
639
+ <input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message...">
640
+ <button class="text-yellow-500 hover:text-yellow-400 p-2">
641
+ <i class="fas fa-paper-plane"></i>
642
+ </button>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </html>
wif/main.js ADDED
@@ -0,0 +1,212 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Initialize charts
2
+ let priceChart;
3
+ let candleChart;
4
+
5
+ document.addEventListener('DOMContentLoaded', function () {
6
+ // Create candlestick chart
7
+ const candleCtx = document.getElementById('candleChart');
8
+ if (!candleCtx) {
9
+ console.error("Canvas element with ID 'candleChart' not found!");
10
+ return;
11
+ }
12
+ const context = candleCtx.getContext('2d');
13
+ if (!context) {
14
+ console.error("Could not get 2D context from canvas element.");
15
+ return;
16
+ }
17
+
18
+ // Generates simple random walk candle data
19
+ function generateCandleData(count) {
20
+ const data = [];
21
+ let date = new Date();
22
+ date.setHours(date.getHours() - count, 0, 0, 0);
23
+ let open = 80000; // Arbitrary starting point
24
+
25
+ for (let i = 0; i < count; i++) {
26
+ const time = date.getTime();
27
+ // Simple random change for close price
28
+ const change = (Math.random() - 0.5) * 500;
29
+ const close = open + change;
30
+
31
+ // High and Low based on random volatility around open/close
32
+ const high = Math.max(open, close) + Math.random() * 250;
33
+ const low = Math.min(open, close) - Math.random() * 250;
34
+
35
+ data.push({ x: time, o: open, h: high, l: low, c: close });
36
+
37
+ date.setHours(date.getHours() + 1);
38
+ open = close;
39
+ }
40
+ return data;
41
+ }
42
+
43
+ const candleData = generateCandleData(60);
44
+
45
+ try {
46
+ candleChart = new Chart(context, {
47
+ type: 'candlestick',
48
+ data: {
49
+ datasets: [{
50
+ label: 'BTC/USDT',
51
+ data: candleData,
52
+ color: { up: '#10b981', down: '#ef4444', unchanged: '#94a3b8' },
53
+ borderColor: { up: '#10b981', down: '#ef4444', unchanged: '#94a3b8' },
54
+ borderWidth: 1
55
+ }]
56
+ },
57
+ options: {
58
+ responsive: true,
59
+ maintainAspectRatio: false,
60
+ plugins: { legend: { display: false } },
61
+ scales: {
62
+ x: {
63
+ type: 'time',
64
+ time: {
65
+ unit: 'hour', // Changed from day
66
+ displayFormats: { hour: 'HH:mm' } // Changed format
67
+ },
68
+ grid: { color: 'rgba(255, 255, 255, 0.05)' },
69
+ ticks: { color: '#94a3b8' }
70
+ },
71
+ y: {
72
+ position: 'right',
73
+ grid: {
74
+ color: 'rgba(255, 255, 255, 0.1)', // Slightly more visible grid
75
+ borderDash: [5, 5] // Added dashed lines
76
+ },
77
+ ticks: { color: '#94a3b8' }
78
+ }
79
+ }
80
+ }
81
+ });
82
+
83
+ // ResizeObserver to handle chart resizing when container changes
84
+ const chartContainer = document.querySelector('.main-chart-container');
85
+ if (chartContainer && candleChart) {
86
+ const resizeObserver = new ResizeObserver(entries => {
87
+ // Removed requestAnimationFrame for potentially faster reaction
88
+ if (!Array.isArray(entries) || !entries.length) {
89
+ return;
90
+ }
91
+ // Call resize directly on the chart instance
92
+ candleChart.resize();
93
+ });
94
+ resizeObserver.observe(chartContainer);
95
+ } else {
96
+ console.error("Could not find chart container or chart instance for ResizeObserver.");
97
+ }
98
+
99
+ } catch (error) {
100
+ console.error("Error creating chart:", error);
101
+ }
102
+
103
+ // Buy/Sell button functionality
104
+ const buyBtn = document.getElementById('buy-btn');
105
+ const sellBtn = document.getElementById('sell-btn');
106
+ const placeOrderBtn = document.getElementById('place-order-btn');
107
+
108
+ buyBtn.addEventListener('click', function () {
109
+ buyBtn.classList.add('bg-green-600', 'text-white');
110
+ buyBtn.classList.remove('bg-green-900', 'bg-opacity-30', 'text-green-400');
111
+ sellBtn.classList.add('bg-red-900', 'bg-opacity-30', 'text-red-400');
112
+ sellBtn.classList.remove('bg-red-600', 'text-white');
113
+ placeOrderBtn.classList.add('bg-green-600');
114
+ placeOrderBtn.classList.remove('bg-red-600');
115
+ placeOrderBtn.textContent = 'Buy BTC';
116
+ });
117
+
118
+ sellBtn.addEventListener('click', function () {
119
+ sellBtn.classList.add('bg-red-600', 'text-white');
120
+ sellBtn.classList.remove('bg-red-900', 'bg-opacity-30', 'text-red-400');
121
+ buyBtn.classList.add('bg-green-900', 'bg-opacity-30', 'text-green-400');
122
+ buyBtn.classList.remove('bg-green-600', 'text-white');
123
+ placeOrderBtn.classList.add('bg-red-600');
124
+ placeOrderBtn.classList.remove('bg-green-600');
125
+ placeOrderBtn.textContent = 'Sell BTC';
126
+ });
127
+ });
128
+
129
+ // Feed switching functionality
130
+ function switchFeed(feedType) {
131
+ document.getElementById('posts-feed').classList.add('hidden-feed');
132
+ document.getElementById('chat-feed').classList.add('hidden-feed');
133
+ document.getElementById('video-feed').classList.add('hidden-feed');
134
+ document.getElementById(feedType + '-feed').classList.remove('hidden-feed');
135
+
136
+ const buttons = document.querySelectorAll('.feed-switch-btn');
137
+ buttons.forEach(btn => {
138
+ btn.classList.remove('active');
139
+ // Match based on the onclick attribute content for reliability
140
+ if (btn.getAttribute('onclick') === `switchFeed('${feedType}')`) {
141
+ btn.classList.add('active');
142
+ }
143
+ });
144
+
145
+ // Removed the explicit resize call from here
146
+ /*
147
+ if (candleChart) {
148
+ setTimeout(() => {
149
+ candleChart.resize();
150
+ }, 0);
151
+ }
152
+ */
153
+ }
154
+
155
+ // Placeholder function for indicator buttons
156
+ function updateChart(indicatorType) {
157
+ // In a real implementation, you would update the chart data or options here
158
+ // based on the selected indicator.
159
+ // For now, we can just highlight the button.
160
+
161
+ // Remove active class from all indicator buttons inside the dropdown
162
+ const indicatorButtons = document.querySelectorAll('#indicators-menu button'); // Updated selector
163
+ indicatorButtons.forEach(btn => btn.classList.remove('indicator-active'));
164
+
165
+ // Add active class to the clicked button
166
+ const clickedButton = document.getElementById(`${indicatorType}-btn`);
167
+ if (clickedButton) {
168
+ clickedButton.classList.add('indicator-active');
169
+ }
170
+
171
+ // Example: Add/remove datasets based on indicatorType (requires more complex logic)
172
+ // if (indicatorType === 'sma') { ... }
173
+ }
174
+
175
+ // Dropdown Toggle Function
176
+ function toggleDropdown(menuId) {
177
+ const menu = document.getElementById(menuId);
178
+ if (menu) {
179
+ menu.classList.toggle('hidden');
180
+ // Update aria-expanded attribute for accessibility
181
+ const button = document.querySelector(`[onclick*="toggleDropdown('${menuId}')"]`);
182
+ if (button) {
183
+ const isExpanded = !menu.classList.contains('hidden');
184
+ button.setAttribute('aria-expanded', isExpanded.toString());
185
+ }
186
+ }
187
+ }
188
+
189
+ // Close Dropdown Function
190
+ function closeDropdown(menuId) {
191
+ const menu = document.getElementById(menuId);
192
+ if (menu && !menu.classList.contains('hidden')) {
193
+ menu.classList.add('hidden');
194
+ const button = document.querySelector(`[onclick*="toggleDropdown('${menuId}')"]`);
195
+ if (button) {
196
+ button.setAttribute('aria-expanded', 'false');
197
+ }
198
+ }
199
+ }
200
+
201
+ // Close dropdown if clicked outside
202
+ document.addEventListener('click', function(event) {
203
+ const dropdownContainer = document.getElementById('indicators-dropdown'); // ID of the main dropdown container div
204
+ const menu = document.getElementById('indicators-menu');
205
+
206
+ // Check if the click is outside the dropdown container
207
+ if (dropdownContainer && menu && !dropdownContainer.contains(event.target)) {
208
+ closeDropdown('indicators-menu');
209
+ }
210
+ });
211
+
212
+ //
wif/styles.css ADDED
@@ -0,0 +1,215 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
+
4
+ body {
5
+ font-family: 'Fira Code', monospace;
6
+ background-color: #20232A;
7
+ color: #ABB2BF;
8
+ }
9
+
10
+ .doge-bg {
11
+ background: #20232A;
12
+ }
13
+
14
+ .doge-text {
15
+ color: #61AFEF;
16
+ }
17
+
18
+ .terminal-bg {
19
+ background-color: #282C34;
20
+ border: 1px solid #3E4451;
21
+ }
22
+
23
+ .chart-container {
24
+ background-color: #282C34;
25
+ border-radius: 0.5rem;
26
+ border: 1px solid #3E4451;
27
+ }
28
+
29
+ .tab-active {
30
+ border-bottom: 2px solid #61AFEF;
31
+ color: #61AFEF;
32
+ }
33
+
34
+ .orderbook-bid {
35
+ /* background: linear-gradient(90deg, rgba(152, 195, 121, 0.1) 0%, transparent 100%); */
36
+ border-bottom: 1px solid #3E4451; /* Add subtle border */
37
+ }
38
+
39
+ .orderbook-ask {
40
+ /* background: linear-gradient(90deg, rgba(224, 108, 117, 0.1) 0%, transparent 100%); */
41
+ border-bottom: 1px solid #3E4451; /* Add subtle border */
42
+ }
43
+
44
+ .message-self {
45
+ background-color: #3E4451;
46
+ border-radius: 1rem 1rem 0 1rem;
47
+ }
48
+
49
+ .message-other {
50
+ background-color: #282C34;
51
+ border-radius: 1rem 1rem 1rem 0;
52
+ border: 1px solid #3E4451;
53
+ }
54
+
55
+ .indicator-active {
56
+ color: #61AFEF;
57
+ border-bottom: 2px solid #61AFEF;
58
+ }
59
+
60
+ .video-chat {
61
+ display: grid;
62
+ grid-template-columns: repeat(2, 1fr);
63
+ gap: 8px;
64
+ height: 200px;
65
+ }
66
+
67
+ .video-box {
68
+ background-color: #282C34;
69
+ border-radius: 8px;
70
+ overflow: hidden;
71
+ position: relative;
72
+ border: 1px solid #3E4451;
73
+ }
74
+
75
+ .video-box::before {
76
+ content: "";
77
+ display: block;
78
+ padding-top: 100%;
79
+ }
80
+
81
+ .video-content {
82
+ position: absolute;
83
+ top: 0;
84
+ left: 0;
85
+ width: 100%;
86
+ height: 100%;
87
+ display: flex;
88
+ align-items: center;
89
+ justify-content: center;
90
+ color: #ABB2BF;
91
+ }
92
+
93
+ .video-user {
94
+ position: absolute;
95
+ bottom: 0;
96
+ left: 0;
97
+ right: 0;
98
+ background: rgba(0,0,0,0.6);
99
+ padding: 4px;
100
+ font-size: 10px;
101
+ text-align: center;
102
+ }
103
+
104
+ .video-active {
105
+ border: 2px solid #61AFEF;
106
+ }
107
+
108
+ .feed-switch {
109
+ display: flex;
110
+ border-radius: 0.5rem;
111
+ overflow: hidden;
112
+ background-color: #282C34;
113
+ margin-bottom: 1rem;
114
+ border: 1px solid #3E4451;
115
+ }
116
+
117
+ .feed-switch-btn {
118
+ flex: 1;
119
+ padding: 0.5rem;
120
+ text-align: center;
121
+ cursor: pointer;
122
+ font-size: 0.875rem;
123
+ }
124
+
125
+ .feed-switch-btn.active {
126
+ background-color: #3E4451;
127
+ color: #61AFEF;
128
+ }
129
+
130
+ .hidden-feed {
131
+ display: none;
132
+ }
133
+
134
+ .order-form {
135
+ background-color: #282C34;
136
+ border-radius: 0.5rem;
137
+ padding: 1rem;
138
+ margin-bottom: 1rem;
139
+ border: 1px solid #3E4451;
140
+ }
141
+
142
+ /* Large chart container */
143
+ .main-chart-container {
144
+ height: 500px;
145
+ width: 100%;
146
+ margin-bottom: 1rem;
147
+ }
148
+
149
+ /* Custom class for button styling */
150
+ .btn {
151
+ background-color: #282C34;
152
+ color: #ABB2BF;
153
+ border: 1px solid #3E4451;
154
+ &:hover {
155
+ background-color: #3E4451;
156
+ color: #61AFEF;
157
+ }
158
+ }
159
+
160
+ /* Custom class for flex container with space between items */
161
+ .flex-space-between {
162
+ @apply flex justify-between items-center;
163
+ }
164
+
165
+ /* Custom class for rounded image with border */
166
+ .rounded-image {
167
+ @apply w-10 h-10 rounded-full border-2 border-yellow-500;
168
+ }
169
+
170
+ /* Custom class for text with specific color and font */
171
+ .text-green-mono {
172
+ color: #98C379;
173
+ font-family: 'Fira Code', monospace;
174
+ }
175
+
176
+ /* Custom class for grid layout in orderbook */
177
+ .orderbook-grid {
178
+ @apply grid grid-cols-3 text-xs p-1;
179
+ }
180
+
181
+ /* Add style for red text */
182
+ .text-red-mono {
183
+ color: #E06C75;
184
+ font-family: 'Fira Code', monospace;
185
+ }
186
+
187
+ /* Adjust gray text color */
188
+ .text-muted {
189
+ color: #5C6370; /* Darker gray for less important text */
190
+ }
191
+
192
+ /* Style for the orderbook header row */
193
+ .orderbook-header {
194
+ color: #5C6370; /* Muted text color */
195
+ border-bottom: 1px solid #3E4451; /* Add border */
196
+ background-color: #282C34; /* Match container bg */
197
+ position: sticky;
198
+ top: 0;
199
+ z-index: 1; /* Ensure header stays above scrolling content */
200
+ }
201
+
202
+ /* Style for the market price row */
203
+ .orderbook-market-price {
204
+ position: sticky;
205
+ top: 1.75rem; /* Approximate height of the header row */
206
+ z-index: 1;
207
+ background-color: #282C34;
208
+ border-top: 1px solid #3E4451;
209
+ border-bottom: 1px solid #3E4451;
210
+ }
211
+
212
+ /* Add border-bottom to trade history rows */
213
+ .trade-history-row {
214
+ border-bottom: 1px solid #3E4451; /* Match other borders */
215
+ }