Hugging Face's logo

Spaces:
TDN-M
/
cryptapp
Running

App Files Community
TDN-M commited on
Commit
968d6f4
·
verified ·
1 Parent(s): 4e11a2e

Tang them so luon g cac loai tien ky thuat so duoc giao dich tai ung dungj. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +627 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cryptapp
3
- emoji: 😻
4
- colorFrom: green
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: cryptapp
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,627 @@
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>Crypto Trade Pro</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
+ <style>
10
+ /* Financial ticker animation */
11
+ @keyframes marquee {
12
+ 0% { transform: translateX(0); }
13
+ 100% { transform: translateX(-50%); }
14
+ }
15
+ .animate-marquee {
16
+ display: inline-block;
17
+ animation: marquee 20s linear infinite;
18
+ }
19
+
20
+ /* Custom scrollbar */
21
+ ::-webkit-scrollbar {
22
+ width: 6px;
23
+ }
24
+ ::-webkit-scrollbar-track {
25
+ background: #1e293b;
26
+ }
27
+ ::-webkit-scrollbar-thumb {
28
+ background: #334155;
29
+ border-radius: 3px;
30
+ }
31
+ ::-webkit-scrollbar-thumb:hover {
32
+ background: #475569;
33
+ }
34
+
35
+ /* Animation for price changes */
36
+ @keyframes pulseGreen {
37
+ 0% { background-color: rgba(74, 222, 128, 0.1); }
38
+ 50% { background-color: rgba(74, 222, 128, 0.3); }
39
+ 100% { background-color: rgba(74, 222, 128, 0.1); }
40
+ }
41
+ @keyframes pulseRed {
42
+ 0% { background-color: rgba(248, 113, 113, 0.1); }
43
+ 50% { background-color: rgba(248, 113, 113, 0.3); }
44
+ 100% { background-color: rgba(248, 113, 113, 0.1); }
45
+ }
46
+ .price-up {
47
+ animation: pulseGreen 1.5s infinite;
48
+ }
49
+ .price-down {
50
+ animation: pulseRed 1.5s infinite;
51
+ }
52
+
53
+ /* Support button animations */
54
+ @keyframes bounce {
55
+ 0%, 100% { transform: translateY(0); }
56
+ 50% { transform: translateY(-10px); }
57
+ }
58
+ .animate-bounce {
59
+ animation: bounce 2s infinite;
60
+ }
61
+
62
+ /* Custom switch */
63
+ .switch {
64
+ position: relative;
65
+ display: inline-block;
66
+ width: 60px;
67
+ height: 30px;
68
+ }
69
+ .switch input {
70
+ opacity: 0;
71
+ width: 0;
72
+ height: 0;
73
+ }
74
+ .slider {
75
+ position: absolute;
76
+ cursor: pointer;
77
+ top: 0;
78
+ left: 0;
79
+ right: 0;
80
+ bottom: 0;
81
+ background-color: #334155;
82
+ transition: .4s;
83
+ border-radius: 34px;
84
+ }
85
+ .slider:before {
86
+ position: absolute;
87
+ content: "";
88
+ height: 22px;
89
+ width: 22px;
90
+ left: 4px;
91
+ bottom: 4px;
92
+ background-color: white;
93
+ transition: .4s;
94
+ border-radius: 50%;
95
+ }
96
+ input:checked + .slider {
97
+ background-color: #3b82f6;
98
+ }
99
+ input:checked + .slider:before {
100
+ transform: translateX(30px);
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="bg-slate-900 text-gray-200 min-h-screen">
105
+ <div class="container mx-auto px-4 py-6 max-w-6xl">
106
+ <!-- Header -->
107
+ <header class="flex justify-between items-center mb-8">
108
+ <div class="flex items-center space-x-2">
109
+ <div class="bg-gradient-to-r from-blue-600 to-green-500 p-2 rounded-lg shadow-md">
110
+ <i class="fas fa-chart-line text-white text-xl"></i>
111
+ </div>
112
+ <h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-green-400 bg-clip-text text-transparent">
113
+ Crypto<span class="font-extrabold">Trade</span>Pro
114
+ </h1>
115
+ </div>
116
+
117
+ <div class="flex items-center space-x-4">
118
+ <!-- Language Selector -->
119
+ <div class="relative group">
120
+ <button class="flex items-center space-x-1 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition">
121
+ <i class="fas fa-globe"></i>
122
+ <span id="current-language">EN</span>
123
+ <i class="fas fa-chevron-down text-xs"></i>
124
+ </button>
125
+ <div class="absolute right-0 mt-2 w-32 bg-slate-800 rounded-lg shadow-lg z-10 hidden group-hover:block">
126
+ <button class="w-full text-left px-4 py-2 hover:bg-slate-700 rounded-t-lg" onclick="changeLanguage('en')">
127
+ <span class="fi fi-us mr-2"></span> English
128
+ </button>
129
+ <button class="w-full text-left px-4 py-2 hover:bg-slate-700 rounded-b-lg" onclick="changeLanguage('vi')">
130
+ <span class="fi fi-vn mr-2"></span> Vietnamese
131
+ </button>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- User Profile -->
136
+ <div class="relative group">
137
+ <button class="flex items-center space-x-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition">
138
+ <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
139
+ <i class="fas fa-user text-white"></i>
140
+ </div>
141
+ <span class="hidden md:inline">User123</span>
142
+ </button>
143
+ <div class="absolute right-0 mt-2 w-48 bg-slate-800 rounded-lg shadow-lg z-10 hidden group-hover:block">
144
+ <a href="#" class="block px-4 py-2 hover:bg-slate-700 rounded-t-lg">
145
+ <i class="fas fa-user mr-2"></i> Profile
146
+ </a>
147
+ <a href="#" class="block px-4 py-2 hover:bg-slate-700">
148
+ <i class="fas fa-cog mr-2"></i> Settings
149
+ </a>
150
+ <a href="#" class="block px-4 py-2 hover:bg-slate-700 rounded-b-lg">
151
+ <i class="fas fa-sign-out-alt mr-2"></i> Logout
152
+ </a>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </header>
157
+
158
+ <!-- Financial News Ticker -->
159
+ <div class="bg-slate-800 border-t border-b border-slate-700 py-2 mb-6 overflow-hidden">
160
+ <div class="animate-marquee whitespace-nowrap">
161
+ <span class="inline-block mx-4 text-yellow-400"><i class="fas fa-bolt mr-2"></i>BTC up 2.3% today</span>
162
+ <span class="inline-block mx-4 text-green-400"><i class="fas fa-arrow-up mr-2"></i>Market cap $1.42T</span>
163
+ <span class="inline-block mx-4 text-blue-400"><i class="fas fa-newspaper mr-2"></i>Fed rates unchanged</span>
164
+ <span class="inline-block mx-4 text-purple-400"><i class="fas fa-chart-simple mr-2"></i>Volume spike: ETH</span>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Main Content -->
169
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
170
+ <!-- Left Sidebar -->
171
+ <div class="lg:col-span-1 space-y-6">
172
+ <!-- Balance Card -->
173
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg border-l-4 border-blue-500">
174
+ <div class="flex justify-between items-center mb-4">
175
+ <h2 class="text-lg font-semibold">My Portfolio</h2>
176
+ <div class="flex space-x-2">
177
+ <i class="fas fa-wallet text-blue-400"></i>
178
+ <i class="fas fa-chart-pie text-green-400"></i>
179
+ </div>
180
+ </div>
181
+ <div class="space-y-4">
182
+ <div class="flex justify-between items-center">
183
+ <div class="flex items-center space-x-2">
184
+ <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center">
185
+ <i class="fas fa-coins text-white"></i>
186
+ </div>
187
+ <span>BTC</span>
188
+ </div>
189
+ <span class="font-medium">0.0024</span>
190
+ </div>
191
+ <div class="flex justify-between items-center">
192
+ <div class="flex items-center space-x-2">
193
+ <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
194
+ <i class="fas fa-dollar-sign text-white"></i>
195
+ </div>
196
+ <span>USDT</span>
197
+ </div>
198
+ <span class="font-medium">1,245.50</span>
199
+ </div>
200
+ <div class="flex justify-between items-center">
201
+ <div class="flex items-center space-x-2">
202
+ <div class="w-8 h-8 rounded-full bg-amber-700 flex items-center justify-center">
203
+ <i class="fas fa-gem text-white"></i>
204
+ </div>
205
+ <span>Gold</span>
206
+ </div>
207
+ <span class="font-medium">0.54</span>
208
+ </div>
209
+ </div>
210
+ <div class="mt-6 pt-4 border-t border-slate-700">
211
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg font-medium transition">
212
+ Deposit
213
+ </button>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Quick Actions -->
218
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
219
+ <h2 class="text-lg font-semibold mb-4">Quick Actions</h2>
220
+ <div class="grid grid-cols-2 gap-3">
221
+ <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition">
222
+ <i class="fas fa-exchange-alt text-blue-500 mb-1"></i>
223
+ <span class="text-sm">Trade</span>
224
+ </button>
225
+ <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition">
226
+ <i class="fas fa-wallet text-green-500 mb-1"></i>
227
+ <span class="text-sm">Wallet</span>
228
+ </button>
229
+ <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition">
230
+ <i class="fas fa-chart-line text-purple-500 mb-1"></i>
231
+ <span class="text-sm">Market</span>
232
+ </button>
233
+ <button class="bg-slate-700 hover:bg-slate-600 p-3 rounded-lg flex flex-col items-center transition">
234
+ <i class="fas fa-history text-yellow-500 mb-1"></i>
235
+ <span class="text-sm">History</span>
236
+ </button>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Promo Banner -->
241
+ <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl p-6 shadow-lg relative overflow-hidden">
242
+ <div class="relative z-10">
243
+ <h2 class="text-lg font-semibold mb-2">Special Offer!</h2>
244
+ <p class="text-sm mb-4">Get up to 1,000 USDT bonus on your first deposit</p>
245
+ <button class="bg-white text-blue-600 hover:bg-gray-100 px-4 py-2 rounded-lg font-medium text-sm transition">
246
+ Claim Now
247
+ </button>
248
+ </div>
249
+ <div class="absolute -right-4 -bottom-4 opacity-20">
250
+ <i class="fas fa-gift text-6xl"></i>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Main Trading Area - Prioritized -->
256
+ <div class="lg:col-span-3 space-y-6 border-l-2 border-blue-500 pl-6 relative">
257
+ <div class="absolute -left-1 top-0 h-full w-1 bg-gradient-to-b from-blue-500 to-purple-500"></div>
258
+ <!-- Market Overview -->
259
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
260
+ <div class="flex justify-between items-center mb-4">
261
+ <h2 class="text-lg font-semibold">Market Overview</h2>
262
+ <div class="flex space-x-2">
263
+ <button class="px-3 py-1 text-sm bg-slate-700 rounded-lg">24h</button>
264
+ <button class="px-3 py-1 text-sm bg-blue-600 rounded-lg">1h</button>
265
+ <button class="px-3 py-1 text-sm bg-slate-700 rounded-lg">15m</button>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="overflow-x-auto">
270
+ <table class="w-full">
271
+ <thead>
272
+ <tr class="text-left text-gray-400 border-b border-slate-700">
273
+ <th class="pb-3">Pair</th>
274
+ <th class="pb-3 text-right">Price</th>
275
+ <th class="pb-3 text-right">24h Change</th>
276
+ <th class="pb-3 text-right">24h Volume</th>
277
+ <th class="pb-3 text-right">Action</th>
278
+ </tr>
279
+ </thead>
280
+ <tbody>
281
+ <tr class="border-b border-slate-700 hover:bg-slate-700/50 transition group">
282
+ <td class="py-4">
283
+ <div class="flex items-center space-x-2">
284
+ <div class="w-6 h-6 rounded-full bg-gradient-to-br from-yellow-500 to-amber-600 flex items-center justify-center shadow-sm">
285
+ <i class="fas fa-bitcoin text-white text-xs"></i>
286
+ </div>
287
+ <div>
288
+ <div class="font-medium">BTC/USDT</div>
289
+ <div class="text-xs text-gray-400">Bitcoin</div>
290
+ </div>
291
+ </div>
292
+ </td>
293
+ <td class="py-4 text-right font-medium">36,245.50</td>
294
+ <td class="py-4 text-right">
295
+ <span class="inline-block px-2 py-1 rounded bg-green-900/30 text-green-400 price-up">+2.34%</span>
296
+ </td>
297
+ <td class="py-4 text-right text-gray-400">1.24B</td>
298
+ <td class="py-4 text-right">
299
+ <button class="px-3 py-1 bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 rounded-lg text-sm font-medium transition-all flex items-center">
300
+ <i class="fas fa-arrow-right-arrow-left text-xs mr-1"></i> Trade
301
+ </button>
302
+ </td>
303
+ </tr>
304
+ <tr class="border-b border-slate-700 hover:bg-slate-700/50 transition">
305
+ <td class="py-4">
306
+ <div class="flex items-center space-x-2">
307
+ <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
308
+ <i class="fas fa-dollar-sign text-white text-xs"></i>
309
+ </div>
310
+ <span>USDT</span>
311
+ </div>
312
+ </td>
313
+ <td class="py-4 text-right font-medium">1.00</td>
314
+ <td class="py-4 text-right">
315
+ <span class="inline-block px-2 py-1 rounded bg-slate-700 text-gray-400">0.00%</span>
316
+ </td>
317
+ <td class="py-4 text-right text-gray-400">4.56B</td>
318
+ <td class="py-4 text-right">
319
+ <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition">
320
+ Trade
321
+ </button>
322
+ </td>
323
+ </tr>
324
+ <tr class="hover:bg-slate-700/50 transition">
325
+ <td class="py-4">
326
+ <div class="flex items-center space-x-2">
327
+ <div class="w-6 h-6 rounded-full bg-amber-700 flex items-center justify-center">
328
+ <i class="fas fa-gem text-white text-xs"></i>
329
+ </div>
330
+ <span>Gold</span>
331
+ </div>
332
+ </td>
333
+ <td class="py-4 text-right font-medium">1,845.60</td>
334
+ <td class="py-4 text-right">
335
+ <span class="inline-block px-2 py-1 rounded bg-red-900/30 text-red-400 price-down">-1.12%</span>
336
+ </td>
337
+ <td class="py-4 text-right text-gray-400">245.7M</td>
338
+ <td class="py-4 text-right">
339
+ <button class="px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition">
340
+ Trade
341
+ </button>
342
+ </td>
343
+ </tr>
344
+ </tbody>
345
+ </table>
346
+ </div>
347
+ </div>
348
+
349
+ <!-- Trading Chart -->
350
+ <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
351
+ <div class="flex justify-between items-center mb-6">
352
+ <div>
353
+ <h3 class="text-lg font-semibold">BTC/USDT</h3>
354
+ <p class="text-gray-400 text-sm">Bitcoin / Tether</p>
355
+ </div>
356
+ <div class="flex items-center space-x-4">
357
+ <div class="flex items-center space-x-2">
358
+ <span class="text-xl font-bold">36,245.50</span>
359
+ <span class="px-2 py-1 rounded bg-green-900/30 text-green-400 text-sm">+2.34%</span>
360
+ </div>
361
+ <div class="flex space-x-2">
362
+ <button class="px-3 py-1 text-sm bg-slate-700 rounded-lg">1D</button>
363
+ <button class="px-3 py-1 text-sm bg-blue-600 rounded-lg">1W</button>
364
+ <button class="px-3 py-1 text-sm bg-slate-700 rounded-lg">1M</button>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Enhanced Chart Section -->
370
+ <div class="bg-slate-700/50 rounded-lg h-96 flex flex-col items-center justify-center border-2 border-blue-500/30 relative">
371
+ <div class="absolute top-0 left-0 right-0 bg-gradient-to-r from-blue-900/30 to-purple-900/30 py-2 px-4 flex justify-between items-center">
372
+ <span class="text-sm font-medium text-blue-300"><i class="fas fa-circle text-xs mr-2 animate-pulse text-green-400"></i> LIVE TRADING CHART</span>
373
+ <div class="flex space-x-2">
374
+ <button class="px-2 py-1 text-xs bg-blue-600 rounded">1D</button>
375
+ <button class="px-2 py-1 text-xs bg-slate-700 rounded">1W</button>
376
+ <button class="px-2 py-1 text-xs bg-slate-700 rounded">1M</button>
377
+ <button class="px-2 py-1 text-xs bg-slate-700 rounded">1Y</button>
378
+ </div>
379
+ </div>
380
+ <div class="text-center mb-4">
381
+ <i class="fas fa-chart-line text-4xl text-blue-500 mb-2 animate-pulse"></i>
382
+ <p class="text-lg font-medium">Biểu đồ giao dịch trực tiếp</p>
383
+ <p class="text-sm text-gray-400 mt-1">Chuyên nghiệp & Hiện đại - Luôn sẵn sàng hoạt động</p>
384
+ </div>
385
+ <div class="flex space-x-2">
386
+ <span class="px-2 py-1 bg-blue-900/30 text-blue-400 rounded text-xs">BTC/USDT</span>
387
+ <span class="px-2 py-1 bg-slate-800 text-gray-400 rounded text-xs">1D</span>
388
+ <span class="px-2 py-1 bg-slate-800 text-gray-400 rounded text-xs">1W</span>
389
+ <span class="px-2 py-1 bg-slate-800 text-gray-400 rounded text-xs">1M</span>
390
+ </div>
391
+ </div>
392
+
393
+ <!-- Chart Tools Quick Access -->
394
+ <div class="flex space-x-2 mt-4 overflow-x-auto py-2">
395
+ <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap">
396
+ <i class="fas fa-ruler mr-1"></i> Drawing Tools
397
+ </button>
398
+ <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap">
399
+ <i class="fas fa-indicator mr-1"></i> Indicators
400
+ </button>
401
+ <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap">
402
+ <i class="fas fa-chart-candlestick mr-1"></i> Candlestick
403
+ </button>
404
+ <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap">
405
+ <i class="fas fa-chart-line mr-1"></i> Line
406
+ </button>
407
+ <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-full text-sm flex items-center whitespace-nowrap">
408
+ <i class="fas fa-cog mr-1"></i> Settings
409
+ </button>
410
+ </div>
411
+
412
+ <!-- Trading Controls -->
413
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
414
+ <div class="bg-slate-700/50 rounded-lg p-4">
415
+ <div class="flex justify-between items-center mb-3">
416
+ <h4 class="font-medium">Buy BTC</h4>
417
+ <span class="text-sm text-gray-400">Balance: 1,245.50 USDT</span>
418
+ </div>
419
+ <div class="space-y-3">
420
+ <div class="bg-slate-800 rounded-lg p-3">
421
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
422
+ <span>Price</span>
423
+ <span>USDT</span>
424
+ </div>
425
+ <div class="flex items-center">
426
+ <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00" value="36245.50">
427
+ </div>
428
+ </div>
429
+ <div class="bg-slate-800 rounded-lg p-3">
430
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
431
+ <span>Amount</span>
432
+ <span>BTC</span>
433
+ </div>
434
+ <div class="flex items-center">
435
+ <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00">
436
+ </div>
437
+ </div>
438
+ <div class="bg-slate-800 rounded-lg p-3">
439
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
440
+ <span>Total</span>
441
+ <span>USDT</span>
442
+ </div>
443
+ <div class="flex items-center">
444
+ <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00">
445
+ </div>
446
+ </div>
447
+ <button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium transition">
448
+ Buy BTC
449
+ </button>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="bg-slate-700/50 rounded-lg p-4">
454
+ <div class="flex justify-between items-center mb-3">
455
+ <h4 class="font-medium">Sell BTC</h4>
456
+ <span class="text-sm text-gray-400">Balance: 0.0024 BTC</span>
457
+ </div>
458
+ <div class="space-y-3">
459
+ <div class="bg-slate-800 rounded-lg p-3">
460
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
461
+ <span>Price</span>
462
+ <span>USDT</span>
463
+ </div>
464
+ <div class="flex items-center">
465
+ <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00" value="36245.50">
466
+ </div>
467
+ </div>
468
+ <div class="bg-slate-800 rounded-lg p-3">
469
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
470
+ <span>Amount</span>
471
+ <span>BTC</span>
472
+ </div>
473
+ <div class="flex items-center">
474
+ <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00">
475
+ </div>
476
+ </div>
477
+ <div class="bg-slate-800 rounded-lg p-3">
478
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
479
+ <span>Total</span>
480
+ <span>USDT</span>
481
+ </div>
482
+ <div class="flex items-center">
483
+ <input type="number" class="w-full bg-transparent outline-none" placeholder="0.00">
484
+ </div>
485
+ </div>
486
+ <button class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-medium transition">
487
+ Sell BTC
488
+ </button>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <!-- Bottom Navigation (Mobile) -->
497
+ <div class="fixed bottom-0 left-0 right-0 bg-slate-800 shadow-lg lg:hidden">
498
+ <div class="flex justify-around items-center p-3">
499
+ <button class="flex flex-col items-center text-blue-500">
500
+ <i class="fas fa-home text-xl"></i>
501
+ <span class="text-xs mt-1">Home</span>
502
+ </button>
503
+ <button class="flex flex-col items-center text-gray-400">
504
+ <i class="fas fa-chart-line text-xl"></i>
505
+ <span class="text-xs mt-1">Markets</span>
506
+ </button>
507
+ <button class="flex flex-col items-center text-gray-400">
508
+ <i class="fas fa-wallet text-xl"></i>
509
+ <span class="text-xs mt-1">Wallet</span>
510
+ </button>
511
+ <button class="flex flex-col items-center text-gray-400">
512
+ <i class="fas fa-user text-xl"></i>
513
+ <span class="text-xs mt-1">Profile</span>
514
+ </button>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <!-- Floating Action Buttons -->
520
+ <div class="fixed bottom-24 right-6 z-50 flex flex-col space-y-3">
521
+ <button class="p-3 bg-gradient-to-r from-blue-600 to-blue-500 rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 group">
522
+ <i class="fas fa-bolt text-xl text-white"></i>
523
+ <div class="absolute right-16 bottom-0 bg-slate-800 px-4 py-2 rounded-lg shadow-lg hidden group-hover:block whitespace-nowrap">
524
+ Quick Trade
525
+ </div>
526
+ </button>
527
+ <button class="p-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 group">
528
+ <i class="fas fa-headset text-xl text-white"></i>
529
+ <div class="absolute right-16 bottom-0 bg-slate-800 px-4 py-2 rounded-lg shadow-lg hidden group-hover:block whitespace-nowrap">
530
+ Support
531
+ </div>
532
+ </button>
533
+ </div>
534
+
535
+ <!-- Original Floating Support Button -->
536
+ <div class="fixed bottom-6 right-6 z-50 animate-bounce">
537
+ <button class="relative p-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full shadow-xl hover:shadow-2xl transition-all duration-300 group">
538
+ <i class="fas fa-headset text-2xl text-white"></i>
539
+ <span class="absolute -top-2 -right-2 flex items-center justify-center w-6 h-6 bg-red-500 rounded-full text-xs font-bold text-white animate-ping opacity-75 group-hover:animate-none">!</span>
540
+ </button>
541
+ <div class="absolute right-16 bottom-0 bg-slate-800 px-4 py-2 rounded-lg shadow-lg hidden group-hover:block">
542
+ <p class="text-sm whitespace-nowrap">Need help? Contact us!</p>
543
+ </div>
544
+ </div>
545
+
546
+ <script>
547
+ // Language switching functionality
548
+ function changeLanguage(lang) {
549
+ const languageDisplay = document.getElementById('current-language');
550
+ if (lang === 'en') {
551
+ languageDisplay.textContent = 'EN';
552
+ // In a real app, you would load English translations here
553
+ console.log('Switched to English');
554
+ } else if (lang === 'vi') {
555
+ languageDisplay.textContent = 'VN';
556
+ // In a real app, you would load Vietnamese translations here
557
+ console.log('Switched to Vietnamese');
558
+ }
559
+ }
560
+
561
+ // Simulate price updates
562
+ function simulatePriceUpdates() {
563
+ const priceElements = document.querySelectorAll('.price-up, .price-down');
564
+
565
+ priceElements.forEach(el => {
566
+ // Randomly change between up and down
567
+ if (Math.random() > 0.7) {
568
+ if (el.classList.contains('price-up')) {
569
+ el.classList.remove('price-up');
570
+ el.classList.add('price-down');
571
+ el.textContent = `-${(Math.random() * 3).toFixed(2)}%`;
572
+ } else {
573
+ el.classList.remove('price-down');
574
+ el.classList.add('price-up');
575
+ el.textContent = `+${(Math.random() * 3).toFixed(2)}%`;
576
+ }
577
+ } else {
578
+ // Just update the percentage slightly
579
+ const currentValue = parseFloat(el.textContent.replace(/[+-]/g, ''));
580
+ const change = (Math.random() * 0.5).toFixed(2);
581
+ if (el.classList.contains('price-up')) {
582
+ el.textContent = `+${(parseFloat(currentValue) + parseFloat(change)).toFixed(2)}%`;
583
+ } else {
584
+ el.textContent = `-${(parseFloat(currentValue) + parseFloat(change)).toFixed(2)}%`;
585
+ }
586
+ }
587
+ });
588
+
589
+ // Update BTC price
590
+ const btcPrice = document.querySelector('tr:first-child td:nth-child(2)');
591
+ const currentBtcPrice = parseFloat(btcPrice.textContent.replace(/,/g, ''));
592
+ const btcChange = (Math.random() * 200 - 100).toFixed(2);
593
+ const newBtcPrice = (currentBtcPrice + parseFloat(btcChange)).toFixed(2);
594
+ btcPrice.textContent = newBtcPrice.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
595
+ }
596
+
597
+ // Update prices every 5 seconds
598
+ setInterval(simulatePriceUpdates, 5000);
599
+
600
+ // Calculate totals when amount changes
601
+ document.querySelectorAll('input[type="number"]').forEach(input => {
602
+ input.addEventListener('input', function() {
603
+ const parentDiv = this.closest('div.bg-slate-800');
604
+ if (parentDiv) {
605
+ const container = parentDiv.closest('.space-y-3');
606
+ if (container) {
607
+ const priceInput = container.querySelector('div:nth-child(1) input');
608
+ const amountInput = container.querySelector('div:nth-child(2) input');
609
+ const totalInput = container.querySelector('div:nth-child(3) input');
610
+
611
+ if (priceInput && amountInput && totalInput) {
612
+ const price = parseFloat(priceInput.value) || 0;
613
+ const amount = parseFloat(amountInput.value) || 0;
614
+ totalInput.value = (price * amount).toFixed(2);
615
+ }
616
+ }
617
+ }
618
+ });
619
+ });
620
+
621
+ // Support button functionality
622
+ document.querySelector('.fa-headset').closest('button').addEventListener('click', function() {
623
+ alert('Our support team will contact you shortly!\nEmail: [email protected]\nPhone: +1 (800) 123-4567');
624
+ });
625
+ </script>
626
+ <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=TDN-M/cryptapp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
627
+ </html>