Hugging Face's logo

Spaces:
FriedsU
/
wif-wif-2
Running

App Files Community
FriedsU commited on
Commit
eead7cb
·
verified ·
1 Parent(s): d824811

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1239 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Wif Wif 2
3
- emoji: 🦀
4
- colorFrom: pink
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
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
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1239 @@
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
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial@latest"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
13
+
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ background-color: #0f172a;
17
+ color: #e2e8f0;
18
+ }
19
+
20
+ .doge-bg {
21
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
22
+ }
23
+
24
+ .doge-accent {
25
+ background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
26
+ }
27
+
28
+ .doge-text {
29
+ color: #f59e0b;
30
+ }
31
+
32
+ .terminal-bg {
33
+ background-color: #1e293b;
34
+ border: 1px solid #334155;
35
+ }
36
+
37
+ .chart-container {
38
+ background-color: #1e293b;
39
+ border-radius: 0.5rem;
40
+ border: 1px solid #334155;
41
+ }
42
+
43
+ .tab-active {
44
+ border-bottom: 2px solid #f59e0b;
45
+ color: #f59e0b;
46
+ }
47
+
48
+ .orderbook-bid {
49
+ background: linear-gradient(90deg, rgba(16, 185, 129, 0.1) 0%, transparent 100%);
50
+ }
51
+
52
+ .orderbook-ask {
53
+ background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
54
+ }
55
+
56
+ .message-self {
57
+ background-color: #334155;
58
+ border-radius: 1rem 1rem 0 1rem;
59
+ }
60
+
61
+ .message-other {
62
+ background-color: #1e293b;
63
+ border-radius: 1rem 1rem 1rem 0;
64
+ }
65
+
66
+ .indicator-active {
67
+ color: #f59e0b;
68
+ border-bottom: 2px solid #f59e0b;
69
+ }
70
+
71
+ .blink {
72
+ animation: blink 1s infinite;
73
+ }
74
+
75
+ @keyframes blink {
76
+ 0% { opacity: 1; }
77
+ 50% { opacity: 0.5; }
78
+ 100% { opacity: 1; }
79
+ }
80
+
81
+ .coin-spin {
82
+ animation: spin 4s linear infinite;
83
+ }
84
+
85
+ @keyframes spin {
86
+ 0% { transform: rotateY(0deg); }
87
+ 100% { transform: rotateY(360deg); }
88
+ }
89
+
90
+ .floating-doge {
91
+ position: fixed;
92
+ bottom: 20px;
93
+ right: 20px;
94
+ animation: float 6s ease-in-out infinite;
95
+ cursor: pointer;
96
+ z-index: 100;
97
+ }
98
+
99
+ @keyframes float {
100
+ 0% { transform: translateY(0px); }
101
+ 50% { transform: translateY(-20px); }
102
+ 100% { transform: translateY(0px); }
103
+ }
104
+
105
+ .video-chat {
106
+ display: grid;
107
+ grid-template-columns: repeat(2, 1fr);
108
+ gap: 8px;
109
+ height: 200px;
110
+ }
111
+
112
+ .video-box {
113
+ background-color: #334155;
114
+ border-radius: 8px;
115
+ overflow: hidden;
116
+ position: relative;
117
+ }
118
+
119
+ .video-box::before {
120
+ content: "";
121
+ display: block;
122
+ padding-top: 100%;
123
+ }
124
+
125
+ .video-content {
126
+ position: absolute;
127
+ top: 0;
128
+ left: 0;
129
+ width: 100%;
130
+ height: 100%;
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ color: #94a3b8;
135
+ }
136
+
137
+ .video-user {
138
+ position: absolute;
139
+ bottom: 0;
140
+ left: 0;
141
+ right: 0;
142
+ background: rgba(0,0,0,0.5);
143
+ padding: 4px;
144
+ font-size: 10px;
145
+ text-align: center;
146
+ }
147
+
148
+ .video-active {
149
+ border: 2px solid #f59e0b;
150
+ }
151
+
152
+ .video-controls {
153
+ position: absolute;
154
+ bottom: 8px;
155
+ left: 0;
156
+ right: 0;
157
+ display: flex;
158
+ justify-content: center;
159
+ gap: 8px;
160
+ }
161
+
162
+ .video-control-btn {
163
+ background: rgba(0,0,0,0.7);
164
+ border-radius: 50%;
165
+ width: 24px;
166
+ height: 24px;
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ font-size: 10px;
171
+ }
172
+
173
+ .feed-switch {
174
+ display: flex;
175
+ border-radius: 0.5rem;
176
+ overflow: hidden;
177
+ background-color: #1e293b;
178
+ margin-bottom: 1rem;
179
+ }
180
+
181
+ .feed-switch-btn {
182
+ flex: 1;
183
+ padding: 0.5rem;
184
+ text-align: center;
185
+ cursor: pointer;
186
+ font-size: 0.875rem;
187
+ }
188
+
189
+ .feed-switch-btn.active {
190
+ background-color: #334155;
191
+ color: #f59e0b;
192
+ }
193
+
194
+ .hidden-feed {
195
+ display: none;
196
+ }
197
+
198
+ .candle-up {
199
+ background-color: #10b981;
200
+ border-color: #10b981;
201
+ }
202
+
203
+ .candle-down {
204
+ background-color: #ef4444;
205
+ border-color: #ef4444;
206
+ }
207
+
208
+ .order-form {
209
+ background-color: #1e293b;
210
+ border-radius: 0.5rem;
211
+ padding: 1rem;
212
+ margin-bottom: 1rem;
213
+ }
214
+
215
+ /* Candle styles */
216
+ .candlestick-up {
217
+ color: #10b981;
218
+ }
219
+
220
+ .candlestick-down {
221
+ color: #ef4444;
222
+ }
223
+
224
+ /* Large chart container */
225
+ .main-chart-container {
226
+ height: 500px;
227
+ width: 100%;
228
+ margin-bottom: 1rem;
229
+ }
230
+ </style>
231
+ </head>
232
+ <body class="doge-bg">
233
+ <!-- Floating Doge Button -->
234
+ <div class="floating-doge">
235
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="Doge" class="w-16 h-16 rounded-full border-2 border-yellow-500 shadow-lg">
236
+ </div>
237
+
238
+ <!-- Main Layout -->
239
+ <div class="min-h-screen flex flex-col">
240
+ <!-- Header -->
241
+ <header class="border-b border-gray-800">
242
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
243
+ <div class="flex items-center space-x-3">
244
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="Doge" class="w-10 h-10 rounded-full border-2 border-yellow-500">
245
+ <h1 class="text-2xl font-bold doge-text">WifJoint.dog</h1>
246
+ </div>
247
+
248
+ <div class="hidden md:flex items-center space-x-4">
249
+ <div class="relative">
250
+ <select class="bg-gray-800 text-white px-4 py-2 rounded-lg appearance-none pr-8">
251
+ <option>BTC/USDT</option>
252
+ <option>ETH/USDT</option>
253
+ <option>SOL/USDT</option>
254
+ <option>WIF/USDT</option>
255
+ <option>DOGE/USDT</option>
256
+ </select>
257
+ <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
258
+ <i class="fas fa-chevron-down text-gray-400"></i>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="flex items-center space-x-2 bg-gray-800 px-3 py-1 rounded-lg">
263
+ <span class="text-green-400 font-mono">$69,420.42</span>
264
+ <span class="text-xs text-green-400">+4.20%</span>
265
+ </div>
266
+
267
+ <div class="flex space-x-2">
268
+ <button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg">
269
+ <i class="fas fa-bell"></i>
270
+ </button>
271
+ <button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg">
272
+ <i class="fas fa-envelope"></i>
273
+ </button>
274
+ <button class="bg-gray-800 text-gray-400 hover:text-yellow-500 p-2 rounded-lg">
275
+ <i class="fas fa-cog"></i>
276
+ </button>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="flex items-center">
281
+ <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg font-medium">
282
+ <i class="fas fa-wallet mr-2"></i> Connect
283
+ </button>
284
+ <button class="md:hidden text-gray-400 ml-2">
285
+ <i class="fas fa-bars text-xl"></i>
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </header>
290
+
291
+ <!-- Main Content -->
292
+ <div class="flex flex-1 overflow-hidden">
293
+ <!-- Left Sidebar - Watchlist & Portfolio -->
294
+ <div class="hidden lg:block w-64 border-r border-gray-800 overflow-y-auto">
295
+ <!-- Portfolio -->
296
+ <div class="p-4">
297
+ <div class="flex justify-between items-center mb-3">
298
+ <h2 class="font-medium">Portfolio</h2>
299
+ <div class="text-xs text-gray-400">$42,690.42</div>
300
+ </div>
301
+
302
+ <div class="bg-gray-800 rounded-lg p-4 mb-4">
303
+ <div class="flex justify-between mb-3">
304
+ <div class="text-sm">Total Balance</div>
305
+ <div class="font-mono">$42,690.42</div>
306
+ </div>
307
+ <div class="flex justify-between text-xs text-gray-400 mb-1">
308
+ <div>Available</div>
309
+ <div>$12,345.67</div>
310
+ </div>
311
+ <div class="flex justify-between text-xs text-gray-400">
312
+ <div>In Orders</div>
313
+ <div>$30,344.75</div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Order Form -->
318
+ <div class="order-form">
319
+ <div class="flex mb-4">
320
+ <button id="buy-btn" class="flex-1 py-2 bg-green-900 bg-opacity-30 text-green-400 font-medium rounded-l-lg">
321
+ Buy
322
+ </button>
323
+ <button id="sell-btn" class="flex-1 py-2 bg-red-900 bg-opacity-30 text-red-400 font-medium rounded-r-lg">
324
+ Sell
325
+ </button>
326
+ </div>
327
+
328
+ <div class="space-y-3">
329
+ <div>
330
+ <label class="block text-xs text-gray-400 mb-1">Order Type</label>
331
+ <select class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm">
332
+ <option>Limit</option>
333
+ <option>Market</option>
334
+ <option>Stop Limit</option>
335
+ </select>
336
+ </div>
337
+
338
+ <div>
339
+ <label class="block text-xs text-gray-400 mb-1">Price (USDT)</label>
340
+ <input type="text" class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm" value="69,420.42">
341
+ </div>
342
+
343
+ <div>
344
+ <label class="block text-xs text-gray-400 mb-1">Amount (BTC)</label>
345
+ <input type="text" class="w-full bg-gray-800 text-white p-2 rounded-lg text-sm" value="0.1">
346
+ </div>
347
+
348
+ <div class="grid grid-cols-4 gap-2">
349
+ <button class="bg-gray-800 text-xs p-1 rounded">25%</button>
350
+ <button class="bg-gray-800 text-xs p-1 rounded">50%</button>
351
+ <button class="bg-gray-800 text-xs p-1 rounded">75%</button>
352
+ <button class="bg-gray-800 text-xs p-1 rounded">100%</button>
353
+ </div>
354
+
355
+ <div class="pt-2">
356
+ <button id="place-order-btn" class="w-full bg-green-600 text-white py-2 rounded-lg font-medium">
357
+ Buy BTC
358
+ </button>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Watchlist -->
364
+ <div class="mb-6">
365
+ <div class="flex justify-between items-center mb-3">
366
+ <h2 class="font-medium">Watchlist</h2>
367
+ <button class="text-gray-400 hover:text-yellow-500">
368
+ <i class="fas fa-plus"></i>
369
+ </button>
370
+ </div>
371
+
372
+ <div class="space-y-2">
373
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
374
+ <div class="flex items-center">
375
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-3">
376
+ <div>
377
+ <div class="font-medium">BTC/USDT</div>
378
+ <div class="text-xs text-gray-400">Bitcoin</div>
379
+ </div>
380
+ </div>
381
+ <div class="text-right">
382
+ <div class="font-mono">$69,420</div>
383
+ <div class="text-xs text-green-400">+4.2%</div>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
388
+ <div class="flex items-center">
389
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="ETH" class="w-6 h-6 mr-3">
390
+ <div>
391
+ <div class="font-medium">ETH/USDT</div>
392
+ <div class="text-xs text-gray-400">Ethereum</div>
393
+ </div>
394
+ </div>
395
+ <div class="text-right">
396
+ <div class="font-mono">$3,690</div>
397
+ <div class="text-xs text-green-400">+2.3%</div>
398
+ </div>
399
+ </div>
400
+
401
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
402
+ <div class="flex items-center">
403
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="SOL" class="w-6 h-6 mr-3">
404
+ <div>
405
+ <div class="font-medium">SOL/USDT</div>
406
+ <div class="text-xs text-gray-400">Solana</div>
407
+ </div>
408
+ </div>
409
+ <div class="text-right">
410
+ <div class="font-mono">$142.42</div>
411
+ <div class="text-xs text-red-400">-1.5%</div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
416
+ <div class="flex items-center">
417
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-3">
418
+ <div>
419
+ <div class="font-medium">WIF/USDT</div>
420
+ <div class="text-xs text-gray-400">dogwifhat</div>
421
+ </div>
422
+ </div>
423
+ <div class="text-right">
424
+ <div class="font-mono">$2.34</div>
425
+ <div class="text-xs text-green-400">+8.9%</div>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="flex items-center justify-between p-2 hover:bg-gray-800 rounded-lg cursor-pointer">
430
+ <div class="flex items-center">
431
+ <img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" alt="DOGE" class="w-6 h-6 mr-3">
432
+ <div>
433
+ <div class="font-medium">DOGE/USDT</div>
434
+ <div class="text-xs text-gray-400">Dogecoin</div>
435
+ </div>
436
+ </div>
437
+ <div class="text-right">
438
+ <div class="font-mono">$0.16</div>
439
+ <div class="text-xs text-red-400">-1.2%</div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Main Terminal Area -->
448
+ <div class="flex-1 flex flex-col overflow-hidden">
449
+ <!-- Chart Area -->
450
+ <div class="flex-1 p-4 overflow-hidden">
451
+ <div class="h-full flex flex-col">
452
+ <!-- Chart Controls -->
453
+ <div class="flex justify-between items-center mb-4">
454
+ <div class="flex space-x-2">
455
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
456
+ 1m
457
+ </button>
458
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
459
+ 5m
460
+ </button>
461
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
462
+ 15m
463
+ </button>
464
+ <button class="px-3 py-1 bg-yellow-600 rounded-lg text-sm">
465
+ 1h
466
+ </button>
467
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
468
+ 4h
469
+ </button>
470
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
471
+ 1d
472
+ </button>
473
+ </div>
474
+
475
+ <div class="flex space-x-2">
476
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
477
+ <i class="fas fa-ruler-combined"></i>
478
+ </button>
479
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
480
+ <i class="fas fa-sliders-h"></i>
481
+ </button>
482
+ <button class="px-3 py-1 bg-gray-800 rounded-lg text-sm hover:bg-gray-700">
483
+ <i class="fas fa-cog"></i>
484
+ </button>
485
+ </div>
486
+ </div>
487
+
488
+ <!-- Indicators -->
489
+ <div class="flex space-x-4 mb-4 overflow-x-auto pb-2">
490
+ <button id="sma-btn" class="px-3 py-1 text-sm whitespace-nowrap indicator-active" onclick="updateChart('sma')">
491
+ SMA
492
+ </button>
493
+ <button id="ema-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('ema')">
494
+ EMA
495
+ </button>
496
+ <button id="rsi-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('rsi')">
497
+ RSI
498
+ </button>
499
+ <button id="macd-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('macd')">
500
+ MACD
501
+ </button>
502
+ <button id="bollinger-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('bollinger')">
503
+ Bollinger
504
+ </button>
505
+ <button id="volume-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('volume')">
506
+ Volume
507
+ </button>
508
+ <button id="fibonacci-btn" class="px-3 py-1 text-sm whitespace-nowrap hover:text-yellow-500" onclick="updateChart('fibonacci')">
509
+ Fibonacci
510
+ </button>
511
+ </div>
512
+
513
+ <!-- Main Chart - Large Candlestick Chart -->
514
+ <div class="main-chart-container chart-container">
515
+ <canvas id="candleChart"></canvas>
516
+ </div>
517
+
518
+ <!-- Orderbook -->
519
+ <div class="h-32 mt-4 chart-container overflow-y-auto">
520
+ <div class="divide-y divide-gray-800">
521
+ <!-- Header -->
522
+ <div class="grid grid-cols-3 text-xs text-gray-400 p-2 sticky top-0 bg-gray-800">
523
+ <div>Price (USDT)</div>
524
+ <div class="text-right">Size (BTC)</div>
525
+ <div class="text-right">Total</div>
526
+ </div>
527
+
528
+ <!-- Asks -->
529
+ <div class="divide-y divide-gray-800">
530
+ <div class="grid grid-cols-3 text-xs p-1 orderbook-ask">
531
+ <div class="text-red-400">69,500.12</div>
532
+ <div class="text-right">0.42</div>
533
+ <div class="text-right">29,190.05</div>
534
+ </div>
535
+ <div class="grid grid-cols-3 text-xs p-1 orderbook-ask">
536
+ <div class="text-red-400">69,480.34</div>
537
+ <div class="text-right">0.84</div>
538
+ <div class="text-right">58,363.49</div>
539
+ </div>
540
+ <div class="grid grid-cols-3 text-xs p-1 orderbook-ask">
541
+ <div class="text-red-400">69,450.78</div>
542
+ <div class="text-right">1.26</div>
543
+ <div class="text-right">87,507.98</div>
544
+ </div>
545
+ </div>
546
+
547
+ <!-- Market Price -->
548
+ <div class="p-2 text-center sticky top-8 bg-gray-800">
549
+ <div class="text-lg font-mono text-yellow-500">69,420.42</div>
550
+ <div class="text-xs text-green-400">+4.20%</div>
551
+ </div>
552
+
553
+ <!-- Bids -->
554
+ <div class="divide-y divide-gray-800">
555
+ <div class="grid grid-cols-3 text-xs p-1 orderbook-bid">
556
+ <div class="text-green-400">69,420.42</div>
557
+ <div class="text-right">0.69</div>
558
+ <div class="text-right">47,900.09</div>
559
+ </div>
560
+ <div class="grid grid-cols-3 text-xs p-1 orderbook-bid">
561
+ <div class="text-green-400">69,400.15</div>
562
+ <div class="text-right">1.23</div>
563
+ <div class="text-right">85,362.18</div>
564
+ </div>
565
+ <div class="grid grid-cols-3 text-xs p-1 orderbook-bid">
566
+ <div class="text-green-400">69,380.76</div>
567
+ <div class="text-right">2.10</div>
568
+ <div class="text-right">145,699.60</div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+
576
+ <!-- Bottom Panel -->
577
+ <div class="border-t border-gray-800">
578
+ <div class="flex">
579
+ <button class="px-4 py-2 text-sm font-medium tab-active">
580
+ Trades
581
+ </button>
582
+ <button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-yellow-500">
583
+ Positions
584
+ </button>
585
+ <button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-yellow-500">
586
+ Orders
587
+ </button>
588
+ </div>
589
+
590
+ <div class="h-48 overflow-y-auto">
591
+ <div class="divide-y divide-gray-800">
592
+ <!-- Trade 1 -->
593
+ <div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800">
594
+ <div class="text-green-400">Buy</div>
595
+ <div>69,420.42</div>
596
+ <div>0.1 BTC</div>
597
+ <div class="text-right">2 min ago</div>
598
+ </div>
599
+
600
+ <!-- Trade 2 -->
601
+ <div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800">
602
+ <div class="text-red-400">Sell</div>
603
+ <div>69,425.15</div>
604
+ <div>0.05 BTC</div>
605
+ <div class="text-right">5 min ago</div>
606
+ </div>
607
+
608
+ <!-- Trade 3 -->
609
+ <div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800">
610
+ <div class="text-green-400">Buy</div>
611
+ <div>69,415.78</div>
612
+ <div>0.2 BTC</div>
613
+ <div class="text-right">12 min ago</div>
614
+ </div>
615
+
616
+ <!-- Trade 4 -->
617
+ <div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800">
618
+ <div class="text-red-400">Sell</div>
619
+ <div>69,430.10</div>
620
+ <div>0.15 BTC</div>
621
+ <div class="text-right">25 min ago</div>
622
+ </div>
623
+
624
+ <!-- Trade 5 -->
625
+ <div class="grid grid-cols-4 text-xs p-2 hover:bg-gray-800">
626
+ <div class="text-green-400">Buy</div>
627
+ <div>69,410.50</div>
628
+ <div>0.3 BTC</div>
629
+ <div class="text-right">42 min ago</div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+
636
+ <!-- Right Sidebar - Social Feed -->
637
+ <div class="hidden lg:block w-1/3 border-l border-gray-800 overflow-y-auto">
638
+ <div class="p-4">
639
+ <div class="flex justify-between items-center mb-4">
640
+ <h2 class="text-lg font-semibold">Social Feed</h2>
641
+ <button class="text-yellow-500 hover:text-yellow-400">
642
+ <i class="fas fa-plus"></i>
643
+ </button>
644
+ </div>
645
+
646
+ <!-- Feed Switch -->
647
+ <div class="feed-switch">
648
+ <button class="feed-switch-btn active" onclick="switchFeed('posts')">Posts</button>
649
+ <button class="feed-switch-btn" onclick="switchFeed('chat')">Chat</button>
650
+ <button class="feed-switch-btn" onclick="switchFeed('video')">Video</button>
651
+ </div>
652
+
653
+ <!-- Posts Feed -->
654
+ <div id="posts-feed">
655
+ <!-- Create Post -->
656
+ <div class="mb-6">
657
+ <div class="flex items-start space-x-3">
658
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-10 h-10 rounded-full">
659
+ <div class="flex-1">
660
+ <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>
661
+ <div class="flex justify-between items-center mt-2">
662
+ <div class="flex space-x-2">
663
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
664
+ <i class="fas fa-chart-line"></i>
665
+ </button>
666
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
667
+ <i class="fas fa-image"></i>
668
+ </button>
669
+ <button class="text-gray-400 hover:text-yellow-500 p-1">
670
+ <i class="fas fa-gift"></i>
671
+ </button>
672
+ </div>
673
+ <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded-lg text-sm">
674
+ Post
675
+ </button>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ </div>
680
+
681
+ <!-- Feed Items -->
682
+ <div class="space-y-4">
683
+ <!-- Feed Item 1 -->
684
+ <div class="terminal-bg p-4 rounded-lg">
685
+ <div class="flex justify-between items-start mb-3">
686
+ <div class="flex items-center space-x-2">
687
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
688
+ <div>
689
+ <span class="font-medium">DiamondPaws</span>
690
+ <span class="text-xs text-gray-400 ml-1">@DiamondPaws · 2h</span>
691
+ </div>
692
+ </div>
693
+ <button class="text-gray-400 hover:text-yellow-500">
694
+ <i class="fas fa-ellipsis-h"></i>
695
+ </button>
696
+ </div>
697
+
698
+ <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>
699
+
700
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
701
+ <div class="flex justify-between items-center mb-2">
702
+ <div class="flex items-center">
703
+ <img src="https://cryptologos.cc/logos/wif-dogwifhat-logo.png" alt="WIF" class="w-6 h-6 mr-2">
704
+ <span class="font-medium">WIF/USDT</span>
705
+ </div>
706
+ <div class="text-green-400 font-mono text-sm">$2.34 (+8.9%)</div>
707
+ </div>
708
+ <div class="h-24 bg-gray-900 rounded mb-2"></div>
709
+ <div class="flex justify-between text-xs text-gray-400">
710
+ <span>Entry: $2.30</span>
711
+ <span>Target: $3.50</span>
712
+ <span>Stop: $2.00</span>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="flex justify-between text-sm text-gray-400">
717
+ <button class="flex items-center hover:text-yellow-500">
718
+ <i class="far fa-comment mr-1"></i> 12
719
+ </button>
720
+ <button class="flex items-center hover:text-green-500">
721
+ <i class="fas fa-retweet mr-1"></i> 24
722
+ </button>
723
+ <button class="flex items-center hover:text-red-500">
724
+ <i class="far fa-heart mr-1"></i> 89
725
+ </button>
726
+ <button class="flex items-center hover:text-blue-400">
727
+ <i class="fas fa-share-alt mr-1"></i>
728
+ </button>
729
+ </div>
730
+ </div>
731
+
732
+ <!-- Feed Item 2 -->
733
+ <div class="terminal-bg p-4 rounded-lg">
734
+ <div class="flex justify-between items-start mb-3">
735
+ <div class="flex items-center space-x-2">
736
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
737
+ <div>
738
+ <span class="font-medium">WhaleHunter</span>
739
+ <span class="text-xs text-gray-400 ml-1">@WhaleHunter · 4h</span>
740
+ </div>
741
+ </div>
742
+ <button class="text-gray-400 hover:text-yellow-500">
743
+ <i class="fas fa-ellipsis-h"></i>
744
+ </button>
745
+ </div>
746
+
747
+ <p class="mb-3">Shorting $BTC at $69,500. RSI showing divergence on 4H chart. Target $65,000 with stop at $71,000.</p>
748
+
749
+ <div class="bg-gray-800 rounded-lg p-3 mb-3">
750
+ <div class="flex justify-between items-center mb-2">
751
+ <div class="flex items-center">
752
+ <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="BTC" class="w-6 h-6 mr-2">
753
+ <span class="font-medium">BTC/USDT</span>
754
+ </div>
755
+ <div class="text-red-400 font-mono text-sm">$69,420 (-1.2%)</div>
756
+ </div>
757
+ <div class="h-24 bg-gray-900 rounded mb-2"></div>
758
+ <div class="flex justify-between text-xs text-gray-400">
759
+ <span>Entry: $69,500</span>
760
+ <span>Target: $65,000</span>
761
+ <span>Stop: $71,000</span>
762
+ </div>
763
+ </div>
764
+
765
+ <div class="flex justify-between text-sm text-gray-400">
766
+ <button class="flex items-center hover:text-yellow-500">
767
+ <i class="far fa-comment mr-1"></i> 8
768
+ </button>
769
+ <button class="flex items-center hover:text-green-500">
770
+ <i class="fas fa-retweet mr-1"></i> 15
771
+ </button>
772
+ <button class="flex items-center hover:text-red-500">
773
+ <i class="far fa-heart mr-1"></i> 42
774
+ </button>
775
+ <button class="flex items-center hover:text-blue-400">
776
+ <i class="fas fa-share-alt mr-1"></i>
777
+ </button>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </div>
782
+
783
+ <!-- Chat Feed -->
784
+ <div id="chat-feed" class="hidden-feed">
785
+ <div class="flex flex-col h-full">
786
+ <div class="flex-1 overflow-y-auto p-3 space-y-3">
787
+ <!-- Message 1 -->
788
+ <div class="flex items-start space-x-2">
789
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
790
+ <div class="message-other p-2 max-w-xs">
791
+ <div class="text-xs font-medium">DogeTrader</div>
792
+ <p class="text-sm">Just went long at $69,200. Bullish divergence on RSI</p>
793
+ </div>
794
+ </div>
795
+
796
+ <!-- Message 2 -->
797
+ <div class="flex items-start space-x-2 justify-end">
798
+ <div class="message-self p-2 max-w-xs">
799
+ <div class="text-xs font-medium text-right">You</div>
800
+ <p class="text-sm">I'm waiting for a retest of $69,000 support</p>
801
+ </div>
802
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
803
+ </div>
804
+
805
+ <!-- Message 3 -->
806
+ <div class="flex items-start space-x-2">
807
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
808
+ <div class="message-other p-2 max-w-xs">
809
+ <div class="text-xs font-medium">CryptoWolf</div>
810
+ <p class="text-sm">Volume picking up, breakout incoming</p>
811
+ </div>
812
+ </div>
813
+
814
+ <!-- Message 4 -->
815
+ <div class="flex items-start space-x-2">
816
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-8 h-8 rounded-full">
817
+ <div class="message-other p-2 max-w-xs">
818
+ <div class="text-xs font-medium">MoonLambo</div>
819
+ <p class="text-sm">Just added to my position at $69,300 🚀</p>
820
+ </div>
821
+ </div>
822
+ </div>
823
+
824
+ <div class="p-3 border-t border-gray-800">
825
+ <div class="flex items-center space-x-2">
826
+ <input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message...">
827
+ <button class="text-yellow-500 hover:text-yellow-400 p-2">
828
+ <i class="fas fa-paper-plane"></i>
829
+ </button>
830
+ </div>
831
+ </div>
832
+ </div>
833
+ </div>
834
+
835
+ <!-- Video Chat Feed -->
836
+ <div id="video-feed" class="hidden-feed">
837
+ <div class="mb-6">
838
+ <div class="video-chat mb-3">
839
+ <div class="video-box video-active">
840
+ <div class="video-content">
841
+ <i class="fas fa-user fa-2x"></i>
842
+ <div class="video-user">You</div>
843
+ </div>
844
+ </div>
845
+ <div class="video-box">
846
+ <div class="video-content">
847
+ <i class="fas fa-user fa-2x"></i>
848
+ <div class="video-user">DogeTrader</div>
849
+ </div>
850
+ </div>
851
+ <div class="video-box">
852
+ <div class="video-content">
853
+ <i class="fas fa-user fa-2x"></i>
854
+ <div class="video-user">CryptoWolf</div>
855
+ </div>
856
+ </div>
857
+ <div class="video-box">
858
+ <div class="video-content">
859
+ <i class="fas fa-user fa-2x"></i>
860
+ <div class="video-user">MoonLambo</div>
861
+ </div>
862
+ </div>
863
+ </div>
864
+
865
+ <div class="flex justify-center space-x-4">
866
+ <button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700">
867
+ <i class="fas fa-microphone"></i>
868
+ </button>
869
+ <button class="bg-red-500 text-white p-2 rounded-full hover:bg-red-600">
870
+ <i class="fas fa-phone"></i>
871
+ </button>
872
+ <button class="bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700">
873
+ <i class="fas fa-video"></i>
874
+ </button>
875
+ </div>
876
+ </div>
877
+
878
+ <!-- Chat integrated with video -->
879
+ <div class="terminal-bg rounded-lg">
880
+ <div class="flex-1 overflow-y-auto p-3 space-y-3 max-h-64">
881
+ <!-- Message 1 -->
882
+ <div class="flex items-start space-x-2">
883
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
884
+ <div class="message-other p-2 max-w-xs">
885
+ <div class="text-xs font-medium">DogeTrader</div>
886
+ <p class="text-sm">Just went long at $69,200. Bullish divergence on RSI</p>
887
+ </div>
888
+ </div>
889
+
890
+ <!-- Message 2 -->
891
+ <div class="flex items-start space-x-2 justify-end">
892
+ <div class="message-self p-2 max-w-xs">
893
+ <div class="text-xs font-medium text-right">You</div>
894
+ <p class="text-sm">I'm waiting for a retest of $69,000 support</p>
895
+ </div>
896
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
897
+ </div>
898
+
899
+ <!-- Message 3 -->
900
+ <div class="flex items-start space-x-2">
901
+ <img src="https://i.imgur.com/9eeDlQY.png" alt="User" class="w-6 h-6 rounded-full">
902
+ <div class="message-other p-2 max-w-xs">
903
+ <div class="text-xs font-medium">CryptoWolf</div>
904
+ <p class="text-sm">Volume picking up, breakout incoming</p>
905
+ </div>
906
+ </div>
907
+ </div>
908
+
909
+ <div class="p-3 border-t border-gray-800">
910
+ <div class="flex items-center space-x-2">
911
+ <input type="text" class="flex-1 bg-gray-800 text-white p-2 rounded-lg text-sm" placeholder="Type a message...">
912
+ <button class="text-yellow-500 hover:text-yellow-400 p-2">
913
+ <i class="fas fa-paper-plane"></i>
914
+ </button>
915
+ </div>
916
+ </div>
917
+ </div>
918
+ </div>
919
+ </div>
920
+ </div>
921
+ </div>
922
+ </div>
923
+
924
+ <script>
925
+ // Initialize charts
926
+ let priceChart;
927
+ let candleChart;
928
+
929
+ document.addEventListener('DOMContentLoaded', function() {
930
+ // Create candlestick chart
931
+ const candleCtx = document.getElementById('candleChart').getContext('2d');
932
+
933
+ // Generate sample candlestick data
934
+ function generateCandleData(count) {
935
+ const data = [];
936
+ let date = new Date(2023, 0, 1);
937
+ let open = 69000;
938
+
939
+ for (let i = 0; i < count; i++) {
940
+ const time = date.getTime();
941
+ const close = open + (Math.random() - 0.5) * 500;
942
+ const high = Math.max(open, close) + Math.random() * 200;
943
+ const low = Math.min(open, close) - Math.random() * 200;
944
+
945
+ data.push({
946
+ x: time,
947
+ o: open,
948
+ h: high,
949
+ l: low,
950
+ c: close
951
+ });
952
+
953
+ date.setDate(date.getDate() + 1);
954
+ open = close;
955
+ }
956
+
957
+ return data;
958
+ }
959
+
960
+ const candleData = generateCandleData(30);
961
+
962
+ candleChart = new Chart(candleCtx, {
963
+ type: 'candlestick',
964
+ data: {
965
+ datasets: [{
966
+ label: 'BTC/USDT',
967
+ data: candleData,
968
+ color: {
969
+ up: '#10b981',
970
+ down: '#ef4444',
971
+ unchanged: '#94a3b8',
972
+ },
973
+ borderColor: {
974
+ up: '#10b981',
975
+ down: '#ef4444',
976
+ unchanged: '#94a3b8',
977
+ },
978
+ borderWidth: 1
979
+ }]
980
+ },
981
+ options: {
982
+ responsive: true,
983
+ maintainAspectRatio: false,
984
+ plugins: {
985
+ legend: {
986
+ display: false
987
+ }
988
+ },
989
+ scales: {
990
+ x: {
991
+ type: 'time',
992
+ time: {
993
+ unit: 'day',
994
+ displayFormats: {
995
+ day: 'MMM d'
996
+ }
997
+ },
998
+ grid: {
999
+ color: 'rgba(255, 255, 255, 0.05)'
1000
+ },
1001
+ ticks: {
1002
+ color: '#94a3b8'
1003
+ }
1004
+ },
1005
+ y: {
1006
+ grid: {
1007
+ color: 'rgba(255, 255, 255, 0.05)'
1008
+ },
1009
+ ticks: {
1010
+ color: '#94a3b8'
1011
+ }
1012
+ }
1013
+ }
1014
+ }
1015
+ });
1016
+
1017
+ // Buy/Sell button functionality
1018
+ const buyBtn = document.getElementById('buy-btn');
1019
+ const sellBtn = document.getElementById('sell-btn');
1020
+ const placeOrderBtn = document.getElementById('place-order-btn');
1021
+
1022
+ buyBtn.addEventListener('click', function() {
1023
+ buyBtn.classList.add('bg-green-600', 'text-white');
1024
+ buyBtn.classList.remove('bg-green-900', 'bg-opacity-30', 'text-green-400');
1025
+ sellBtn.classList.add('bg-red-900', 'bg-opacity-30', 'text-red-400');
1026
+ sellBtn.classList.remove('bg-red-600', 'text-white');
1027
+ placeOrderBtn.classList.add('bg-green-600');
1028
+ placeOrderBtn.classList.remove('bg-red-600');
1029
+ placeOrderBtn.textContent = 'Buy BTC';
1030
+ });
1031
+
1032
+ sellBtn.addEventListener('click', function() {
1033
+ sellBtn.classList.add('bg-red-600', 'text-white');
1034
+ sellBtn.classList.remove('bg-red-900', 'bg-opacity-30', 'text-red-400');
1035
+ buyBtn.classList.add('bg-green-900', 'bg-opacity-30', 'text-green-400');
1036
+ buyBtn.classList.remove('bg-green-600', 'text-white');
1037
+ placeOrderBtn.classList.add('bg-red-600');
1038
+ placeOrderBtn.classList.remove('bg-green-600');
1039
+ placeOrderBtn.textContent = 'Sell BTC';
1040
+ });
1041
+ });
1042
+
1043
+ // Make DOGE logo spin on hover
1044
+ document.addEventListener('DOMContentLoaded', () => {
1045
+ const dogeLogo = document.querySelector('header img');
1046
+ if (dogeLogo) {
1047
+ dogeLogo.addEventListener('mouseenter', () => {
1048
+ dogeLogo.classList.add('coin-spin');
1049
+ });
1050
+ dogeLogo.addEventListener('mouseleave', () => {
1051
+ dogeLogo.classList.remove('coin-spin');
1052
+ });
1053
+ }
1054
+ });
1055
+
1056
+ // Feed switching functionality
1057
+ function switchFeed(feedType) {
1058
+ // Hide all feeds
1059
+ document.getElementById('posts-feed').classList.add('hidden-feed');
1060
+ document.getElementById('chat-feed').classList.add('hidden-feed');
1061
+ document.getElementById('video-feed').classList.add('hidden-feed');
1062
+
1063
+ // Show selected feed
1064
+ document.getElementById(feedType + '-feed').classList.remove('hidden-feed');
1065
+
1066
+ // Update active button
1067
+ const buttons = document.querySelectorAll('.feed-switch-btn');
1068
+ buttons.forEach(btn => {
1069
+ btn.classList.remove('active');
1070
+ if (btn.textContent.toLowerCase() === feedType) {
1071
+ btn.classList.add('active');
1072
+ }
1073
+ });
1074
+ }
1075
+
1076
+ // Update chart based on indicator selection
1077
+ function updateChart(indicator) {
1078
+ const candleCtx = document.getElementById('candleChart').getContext('2d');
1079
+
1080
+ // Reset all indicator buttons
1081
+ document.querySelectorAll('.indicator-active').forEach(btn => {
1082
+ btn.classList.remove('indicator-active');
1083
+ });
1084
+
1085
+ // Set active indicator
1086
+ document.getElementById(indicator + '-btn').classList.add('indicator-active');
1087
+
1088
+ // Destroy existing chart
1089
+ if (candleChart) {
1090
+ candleChart.destroy();
1091
+ }
1092
+
1093
+ // Generate new candle data
1094
+ function generateCandleData(count) {
1095
+ const data = [];
1096
+ let date = new Date(2023, 0, 1);
1097
+ let open = 69000;
1098
+
1099
+ for (let i = 0; i < count; i++) {
1100
+ const time = date.getTime();
1101
+ const close = open + (Math.random() - 0.5) * 500;
1102
+ const high = Math.max(open, close) + Math.random() * 200;
1103
+ const low = Math.min(open, close) - Math.random() * 200;
1104
+
1105
+ data.push({
1106
+ x: time,
1107
+ o: open,
1108
+ h: high,
1109
+ l: low,
1110
+ c: close
1111
+ });
1112
+
1113
+ date.setDate(date.getDate() + 1);
1114
+ open = close;
1115
+ }
1116
+
1117
+ return data;
1118
+ }
1119
+
1120
+ const candleData = generateCandleData(30);
1121
+
1122
+ // Create new chart based on indicator
1123
+ if (indicator === 'bollinger') {
1124
+ // Create candle chart with Bollinger Bands
1125
+ candleChart = new Chart(candleCtx, {
1126
+ type: 'candlestick',
1127
+ data: {
1128
+ datasets: [{
1129
+ label: 'BTC/USDT',
1130
+ data: candleData,
1131
+ color: {
1132
+ up: '#10b981',
1133
+ down: '#ef4444',
1134
+ unchanged: '#94a3b8',
1135
+ },
1136
+ borderColor: {
1137
+ up: '#10b981',
1138
+ down: '#ef4444',
1139
+ unchanged: '#94a3b8',
1140
+ },
1141
+ borderWidth: 1
1142
+ }]
1143
+ },
1144
+ options: {
1145
+ responsive: true,
1146
+ maintainAspectRatio: false,
1147
+ plugins: {
1148
+ legend: {
1149
+ display: false
1150
+ }
1151
+ },
1152
+ scales: {
1153
+ x: {
1154
+ type: 'time',
1155
+ time: {
1156
+ unit: 'day',
1157
+ displayFormats: {
1158
+ day: 'MMM d'
1159
+ }
1160
+ },
1161
+ grid: {
1162
+ color: 'rgba(255, 255, 255, 0.05)'
1163
+ },
1164
+ ticks: {
1165
+ color: '#94a3b8'
1166
+ }
1167
+ },
1168
+ y: {
1169
+ grid: {
1170
+ color: 'rgba(255, 255, 255, 0.05)'
1171
+ },
1172
+ ticks: {
1173
+ color: '#94a3b8'
1174
+ }
1175
+ }
1176
+ }
1177
+ }
1178
+ });
1179
+ } else {
1180
+ // Default candle chart
1181
+ candleChart = new Chart(candleCtx, {
1182
+ type: 'candlestick',
1183
+ data: {
1184
+ datasets: [{
1185
+ label: 'BTC/USDT',
1186
+ data: candleData,
1187
+ color: {
1188
+ up: '#10b981',
1189
+ down: '#ef4444',
1190
+ unchanged: '#94a3b8',
1191
+ },
1192
+ borderColor: {
1193
+ up: '#10b981',
1194
+ down: '#ef4444',
1195
+ unchanged: '#94a3b8',
1196
+ },
1197
+ borderWidth: 1
1198
+ }]
1199
+ },
1200
+ options: {
1201
+ responsive: true,
1202
+ maintainAspectRatio: false,
1203
+ plugins: {
1204
+ legend: {
1205
+ display: false
1206
+ }
1207
+ },
1208
+ scales: {
1209
+ x: {
1210
+ type: 'time',
1211
+ time: {
1212
+ unit: 'day',
1213
+ displayFormats: {
1214
+ day: 'MMM d'
1215
+ }
1216
+ },
1217
+ grid: {
1218
+ color: 'rgba(255, 255, 255, 0.05)'
1219
+ },
1220
+ ticks: {
1221
+ color: '#94a3b8'
1222
+ }
1223
+ },
1224
+ y: {
1225
+ grid: {
1226
+ color: 'rgba(255, 255, 255, 0.05)'
1227
+ },
1228
+ ticks: {
1229
+ color: '#94a3b8'
1230
+ }
1231
+ }
1232
+ }
1233
+ }
1234
+ });
1235
+ }
1236
+ }
1237
+ </script>
1238
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=FriedsU/wif-wif-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1239
+ </html>