Hugging Face's logo

Spaces:
FriedsU
/
wif3
Running

App Files Community
FriedsU commited on
Commit
d9ad547
·
verified ·
1 Parent(s): e282600

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +620 -19
index.html CHANGED
@@ -1,19 +1,620 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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/chart.js@3.9.1/dist/chart.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial@0.1.0/dist/chartjs-chart-financial.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/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 id="top-header" class="bg-gray-900 border-b border-pink-500">
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="lawl.webp" alt="Doge" class="w-10 h-10 rounded-full border-2 border-yellow-500 rounded-image logo-hover-effect">
27
+ <div>
28
+ <h1 class="text-2xl font-bold doge-text">WifJoint.dog</h1>
29
+ <div class="text-xs text-white">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 id="latest-price-header" class="text-green-mono font-mono text-lg">$69,420.42</span>
51
+ <span id="latest-price-change-header" 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-solana-secondary p-2">
73
+ <i class="fas fa-bell"></i>
74
+ </button>
75
+ <button class="btn-solana-secondary p-2">
76
+ <i class="fas fa-envelope"></i>
77
+ </button>
78
+ <button class="btn-solana-secondary p-2">
79
+ <i class="fas fa-cog"></i>
80
+ </button>
81
+ </div>
82
+ <!-- Connect button -->
83
+ <button class="btn-solana px-4 py-2 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 id="main-content-container" class="flex flex-1 overflow-hidden">
92
+ <!-- Left Sidebar - Watchlist & Portfolio -->
93
+ <div id="left-sidebar" class="hidden lg:block w-64 border-r border-pink-500 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-gray-400">$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
+ </div>
132
+ </div>
133
+
134
+ <!-- Percentage buttons -->
135
+ <div class="grid grid-cols-4 gap-2">
136
+ <button class="bg-gray-800 text-xs p-1 rounded">25%</button>
137
+ <button class="bg-gray-800 text-xs p-1 rounded">50%</button>
138
+ <button class="bg-gray-800 text-xs p-1 rounded">75%</button>
139
+ <button class="bg-gray-800 text-xs p-1 rounded">100%</button>
140
+ </div>
141
+
142
+ <div class="pt-2">
143
+ <button id="place-order-btn" class="w-full bg-green-600 text-white py-2 rounded-lg font-medium">
144
+ Buy BTC
145
+ </button>
146
+ </div>
147
+
148
+ <!-- Watchlist -->
149
+ <div class="mt-6">
150
+ <div id="watchlist-header" class="flex justify-between items-center mb-3">
151
+ <h2 class="font-medium">Watchlist</h2>
152
+ <button class="text-gray-400 hover:text-yellow-500">
153
+ <i class="fas fa-plus"></i>
154
+ </button>
155
+ </div>
156
+
157
+ <!-- Watchlist items -->
158
+ <div class="space-y-2">
159
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
160
+ <div class="flex items-center">
161
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-3">
162
+ <div>
163
+ <div class="font-medium">BTC/USDT</div>
164
+ <div class="text-xs text-gray-400">Bitcoin</div>
165
+ </div>
166
+ </div>
167
+ <div class="text-right">
168
+ <div id="watchlist-btc-price" class="font-mono">$69,420</div>
169
+ <div class="text-xs text-green-400">+4.2%</div>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
174
+ <div class="flex items-center">
175
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-3">
176
+ <div>
177
+ <div class="font-medium">ETH/USDT</div>
178
+ <div class="text-xs text-gray-400">Ethereum</div>
179
+ </div>
180
+ </div>
181
+ <div class="text-right">
182
+ <div class="font-mono">$3,690</div>
183
+ <div class="text-xs text-green-400">+2.3%</div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
188
+ <div class="flex items-center">
189
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-3">
190
+ <div>
191
+ <div class="font-medium">SOL/USDT</div>
192
+ <div class="text-xs text-gray-400">Solana</div>
193
+ </div>
194
+ </div>
195
+ <div class="text-right">
196
+ <div class="font-mono">$142.42</div>
197
+ <div class="text-xs text-red-400">-1.5%</div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
202
+ <div class="flex items-center">
203
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-3">
204
+ <div>
205
+ <div class="font-medium">WIF/USDT</div>
206
+ <div class="text-xs text-gray-400">dogwifhat</div>
207
+ </div>
208
+ </div>
209
+ <div class="text-right">
210
+ <div class="font-mono">$2.34</div>
211
+ <div class="text-xs text-green-400">+8.9%</div>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
216
+ <div class="flex items-center">
217
+ <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="DOGE" class="w-6 h-6 mr-3">
218
+ <div>
219
+ <div class="font-medium">DOGE/USDT</div>
220
+ <div class="text-xs text-gray-400">Dogecoin</div>
221
+ </div>
222
+ </div>
223
+ <div class="text-right">
224
+ <div class="font-mono">$0.16</div>
225
+ <div class="text-xs text-red-400">-1.2%</div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Main Terminal Area -->
234
+ <div id="main-terminal" class="flex-1 flex flex-col overflow-hidden min-w-0 border-r border-pink-500">
235
+ <!-- Chart Area -->
236
+ <div id="chart-area" class="pt-4 px-4 overflow-hidden">
237
+ <div class="h-full flex flex-col">
238
+ <!-- Chart Controls -->
239
+ <div class="flex justify-between items-center mb-4">
240
+ <!-- Left Side: Timeframes & New Indicators Dropdown -->
241
+ <div class="flex items-center space-x-2">
242
+ <!-- Timeframe Buttons -->
243
+ <button class="px-3 py-1 btn-solana-secondary text-sm">1m</button>
244
+ <button class="px-3 py-1 btn-solana-secondary text-sm">5m</button>
245
+ <button class="px-3 py-1 btn-solana-secondary text-sm">15m</button>
246
+ <button class="px-3 py-1 text-sm btn-solana-secondary" style="background-color: #DC1FFF; color: white;">1h</button>
247
+ <button class="px-3 py-1 btn-solana-secondary text-sm">4h</button>
248
+ <button class="px-3 py-1 btn-solana-secondary text-sm">1d</button>
249
+
250
+ <!-- Indicators Dropdown -->
251
+ <div class="relative inline-block text-left" id="indicators-dropdown">
252
+ <button type="button" class="inline-flex justify-center w-full shadow-sm px-3 py-1 text-sm font-medium focus:outline-none btn-solana-secondary" id="indicators-menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown('indicators-menu')">
253
+ Indicators
254
+ <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">
255
+ <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" />
256
+ </svg>
257
+ </button>
258
+ <!-- Dropdown menu -->
259
+ <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">
260
+ <div class="py-1" role="none">
261
+ <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>
262
+ <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>
263
+ <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>
264
+ <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>
265
+ <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>
266
+ <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>
267
+ <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>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Right Side: Other Controls -->
274
+ <div class="flex space-x-2">
275
+ <button class="px-3 py-1 btn-solana-secondary text-sm">
276
+ <i class="fas fa-ruler-combined"></i>
277
+ </button>
278
+ <button class="px-3 py-1 btn-solana-secondary text-sm">
279
+ <i class="fas fa-sliders-h"></i>
280
+ </button>
281
+ <button class="px-3 py-1 btn-solana-secondary text-sm">
282
+ <i class="fas fa-cog"></i>
283
+ </button>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Main Chart - Large Candlestick Chart -->
288
+ <div class="main-chart-container chart-container">
289
+ <canvas id="candleChart"></canvas>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Bottom Panel -->
295
+ <div id="bottom-panel" class="border-t border-pink-500 bottom-panel-container">
296
+ <div id="bottom-panel-tabs" class="h-full flex items-center px-4 space-x-4">
297
+ <button class="text-sm font-medium py-2 tab-active">
298
+ Trades
299
+ </button>
300
+ <button class="text-sm font-medium py-2">
301
+ Positions
302
+ </button>
303
+ <button class="text-sm font-medium py-2">
304
+ Orders
305
+ </button>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Dynamic Content Area for Trades/Positions/Orders -->
310
+ <!-- This new div wraps the content below the tabs and adds padding (p-4) -->
311
+ <div id="tab-content" class="p-4 overflow-y-auto">
312
+ <!-- Content (like the trades list) will be loaded here by JavaScript -->
313
+ <!-- Added placeholder example based on screenshot -->
314
+ <div class="space-y-1 text-sm">
315
+ <div class="grid grid-cols-4 gap-4 font-mono">
316
+ <span class="text-green-400">Buy</span>
317
+ <span>69,420.42</span>
318
+ <span>0.1 BTC</span>
319
+ <span class="text-gray-400 text-right">2 min ago</span>
320
+ </div>
321
+ <div class="grid grid-cols-4 gap-4 font-mono">
322
+ <span class="text-red-400">Sell</span>
323
+ <span>69,425.15</span>
324
+ <span>0.05 BTC</span>
325
+ <span class="text-gray-400 text-right">5 min ago</span>
326
+ </div>
327
+ <div class="grid grid-cols-4 gap-4 font-mono">
328
+ <span class="text-green-400">Buy</span>
329
+ <span>69,415.78</span>
330
+ <span>0.2 BTC</span>
331
+ <span class="text-gray-400 text-right">12 min ago</span>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- Right Sidebar - Social Feed -->
338
+ <div id="right-sidebar" class="hidden lg:block w-1/3 overflow-y-auto">
339
+ <div class="p-4">
340
+ <div class="flex justify-between items-center mb-4">
341
+ <h2 class="text-lg font-semibold">Social Feed</h2>
342
+ </div>
343
+
344
+ <!-- Feed Switch -->
345
+ <div class="feed-switch">
346
+ <button class="feed-switch-btn active" onclick="switchFeed('posts')">Posts</button>
347
+ <button class="feed-switch-btn" onclick="switchFeed('chat')">Chat</button>
348
+ <button class="feed-switch-btn" onclick="switchFeed('video')">Video</button>
349
+ </div>
350
+
351
+ <!-- Feed Container - Will hold all feeds with consistent structure -->
352
+ <div class="feed-container flex-1 relative">
353
+ <!-- Posts Feed -->
354
+ <div id="posts-feed" class="absolute inset-0 overflow-y-auto">
355
+ <!-- Create Post -->
356
+ <div class="mb-6">
357
+ <div class="flex items-start space-x-3">
358
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full">
359
+ <div class="flex-1">
360
+ <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>
361
+ <div class="flex justify-between items-center mt-2">
362
+ <div class="flex space-x-2">
363
+ <button class="text-gray-400 hover:text-yellow-500 p-1 btn-solana-secondary">
364
+ <i class="fas fa-chart-line"></i>
365
+ </button>
366
+ <button class="text-gray-400 hover:text-yellow-500 p-1 btn-solana-secondary">
367
+ <i class="fas fa-image"></i>
368
+ </button>
369
+ <button class="text-gray-400 hover:text-yellow-500 p-1 btn-solana-secondary">
370
+ <i class="fas fa-gift"></i>
371
+ </button>
372
+ </div>
373
+ <button class="btn-solana px-3 py-1 text-sm">
374
+ Post
375
+ </button>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Feed Items -->
382
+ <div class="space-y-4">
383
+ <!-- Feed Item 1 -->
384
+ <div class="terminal-bg p-4 rounded-lg social-feed-post">
385
+ <div class="flex justify-between items-start mb-3">
386
+ <div class="flex items-center space-x-2">
387
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
388
+ <div>
389
+ <span class="font-medium">DiamondPaws</span>
390
+ <span class="text-xs text-gray-400 ml-1">@DiamondPaws · 2h</span>
391
+ </div>
392
+ </div>
393
+ <button class="text-gray-400 hover:text-yellow-500">
394
+ <i class="fas fa-ellipsis-h"></i>
395
+ </button>
396
+ </div>
397
+
398
+ <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>
399
+
400
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
401
+ <div class="flex justify-between items-center mb-2">
402
+ <div class="flex items-center">
403
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-2">
404
+ <span class="font-medium">WIF/USDT</span>
405
+ </div>
406
+ <div class="text-green-400 font-mono text-sm">$2.34 (+8.9%)</div>
407
+ </div>
408
+ <div class="h-24 bg-gray-900 rounded mb-2"></div>
409
+ <div class="flex justify-between text-xs text-gray-400">
410
+ <span>Entry: $2.30</span>
411
+ <span>Target: $3.50</span>
412
+ <span>Stop: $2.00</span>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="flex justify-between text-sm text-gray-400">
417
+ <button class="flex items-center btn-solana-secondary">
418
+ <i class="far fa-comment mr-1"></i> 12
419
+ </button>
420
+ <button class="flex items-center btn-solana-secondary">
421
+ <i class="fas fa-retweet mr-1"></i> 24
422
+ </button>
423
+ <button class="flex items-center btn-solana-secondary">
424
+ <i class="far fa-heart mr-1"></i> 89
425
+ </button>
426
+ <button class="flex items-center btn-solana-secondary">
427
+ <i class="fas fa-share-alt mr-1"></i>
428
+ </button>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Feed Item 2 -->
433
+ <div class="terminal-bg p-4 rounded-lg social-feed-post">
434
+ <div class="flex justify-between items-start mb-3">
435
+ <div class="flex items-center space-x-2">
436
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
437
+ <div>
438
+ <span class="font-medium">WhaleHunter</span>
439
+ <span class="text-xs text-gray-400 ml-1">@WhaleHunter · 4h</span>
440
+ </div>
441
+ </div>
442
+ <button class="text-gray-400 hover:text-yellow-500">
443
+ <i class="fas fa-ellipsis-h"></i>
444
+ </button>
445
+ </div>
446
+
447
+ <p class="mb-3">Shorting $BTC at $69,500. RSI showing divergence on 4H chart. Target $65,000 with stop at $71,000.</p>
448
+
449
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
450
+ <div class="flex justify-between items-center mb-2">
451
+ <div class="flex items-center">
452
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
453
+ <span class="font-medium">BTC/USDT</span>
454
+ </div>
455
+ <div class="text-red-400 font-mono text-sm">$69,420 (-1.2%)</div>
456
+ </div>
457
+ <div class="h-24 bg-gray-900 rounded mb-2"></div>
458
+ <div class="flex justify-between text-xs text-gray-400">
459
+ <span>Entry: $69,500</span>
460
+ <span>Target: $65,000</span>
461
+ <span>Stop: $71,000</span>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="flex justify-between text-sm text-gray-400">
466
+ <button class="flex items-center btn-solana-secondary">
467
+ <i class="far fa-comment mr-1"></i> 8
468
+ </button>
469
+ <button class="flex items-center btn-solana-secondary">
470
+ <i class="fas fa-retweet mr-1"></i> 15
471
+ </button>
472
+ <button class="flex items-center btn-solana-secondary">
473
+ <i class="far fa-heart mr-1"></i> 42
474
+ </button>
475
+ <button class="flex items-center btn-solana-secondary">
476
+ <i class="fas fa-share-alt mr-1"></i>
477
+ </button>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Chat Feed -->
484
+ <div id="chat-feed" class="absolute inset-0 overflow-y-auto" style="visibility: hidden; z-index: 0;">
485
+ <div class="flex flex-col h-full">
486
+ <div class="flex-1 overflow-y-auto p-3 space-y-3">
487
+ <!-- Message 1 -->
488
+ <div class="flex items-start space-x-2">
489
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
490
+ <div class="message-other p-2 max-w-xs">
491
+ <div class="text-xs font-medium">DogeTrader</div>
492
+ <p class="text-sm">Just went long at $69,200. Bullish divergence on RSI</p>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Message 2 -->
497
+ <div class="flex items-start space-x-2 justify-end">
498
+ <div class="message-self p-2 max-w-xs">
499
+ <div class="text-xs font-medium text-right">You</div>
500
+ <p class="text-sm">I'm waiting for a retest of $69,000 support</p>
501
+ </div>
502
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
503
+ </div>
504
+
505
+ <!-- Message 3 -->
506
+ <div class="flex items-start space-x-2">
507
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
508
+ <div class="message-other p-2 max-w-xs">
509
+ <div class="text-xs font-medium">CryptoWolf</div>
510
+ <p class="text-sm">Volume picking up, breakout incoming</p>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Message 4 -->
515
+ <div class="flex items-start space-x-2">
516
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
517
+ <div class="message-other p-2 max-w-xs">
518
+ <div class="text-xs font-medium">MoonLambo</div>
519
+ <p class="text-sm">Just added to my position at $69,300 🚀</p>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="p-3 border-t border-gray-800">
525
+ <div class="flex items-center space-x-2">
526
+ <input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message...">
527
+ <button class="btn-solana p-2">
528
+ <i class="fas fa-paper-plane"></i>
529
+ </button>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </div>
534
+
535
+ <!-- Video Chat Feed -->
536
+ <div id="video-feed" class="absolute inset-0 overflow-y-auto" style="visibility: hidden; z-index: 0;">
537
+ <div class="video-chat mb-3">
538
+ <div class="video-box video-active">
539
+ <div class="video-content">
540
+ <i class="fas fa-user fa-2x"></i>
541
+ <div class="video-user">You</div>
542
+ </div>
543
+ </div>
544
+ <div class="video-box">
545
+ <div class="video-content">
546
+ <i class="fas fa-user fa-2x"></i>
547
+ <div class="video-user">DogeTrader</div>
548
+ </div>
549
+ </div>
550
+ <div class="video-box">
551
+ <div class="video-content">
552
+ <i class="fas fa-user fa-2x"></i>
553
+ <div class="video-user">CryptoWolf</div>
554
+ </div>
555
+ </div>
556
+ <div class="video-box">
557
+ <div class="video-content">
558
+ <i class="fas fa-user fa-2x"></i>
559
+ <div class="video-user">MoonLambo</div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <div class="flex justify-center space-x-4 mb-4">
565
+ <button class="btn-solana-secondary p-2 rounded-full">
566
+ <i class="fas fa-microphone"></i>
567
+ </button>
568
+ <button class="bg-red-500 text-white p-2 rounded-full hover:bg-red-600">
569
+ <i class="fas fa-phone"></i>
570
+ </button>
571
+ <button class="btn-solana-secondary p-2 rounded-full">
572
+ <i class="fas fa-video"></i>
573
+ </button>
574
+ </div>
575
+
576
+ <!-- Chat integrated with video -->
577
+ <div class="terminal-bg rounded-lg p-3">
578
+ <div class="flex-1 space-y-3 max-h-48 overflow-y-auto mb-3">
579
+ <!-- Message 1 -->
580
+ <div class="flex items-start space-x-2">
581
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
582
+ <div class="message-other p-2 max-w-xs">
583
+ <div class="text-xs font-medium">DogeTrader</div>
584
+ <p class="text-sm">Just went long at $69,200. Bullish divergence on RSI</p>
585
+ </div>
586
+ </div>
587
+
588
+ <!-- Message 2 -->
589
+ <div class="flex items-start space-x-2 justify-end">
590
+ <div class="message-self p-2 max-w-xs">
591
+ <div class="text-xs font-medium text-right">You</div>
592
+ <p class="text-sm">I'm waiting for a retest of $69,000 support</p>
593
+ </div>
594
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
595
+ </div>
596
+
597
+ <!-- Message 3 -->
598
+ <div class="flex items-start space-x-2">
599
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
600
+ <div class="message-other p-2 max-w-xs">
601
+ <div class="text-xs font-medium">CryptoWolf</div>
602
+ <p class="text-sm">Volume picking up, breakout incoming</p>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <div class="flex items-center space-x-2 border-t border-gray-800 pt-3">
608
+ <input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message...">
609
+ <button class="btn-solana p-2">
610
+ <i class="fas fa-paper-plane"></i>
611
+ </button>
612
+ </div>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </html>