Hugging Face's logo

Spaces:
mealpome
/
anycoder-e266effe
Running

App Files Community
mealpome commited on
Commit
2ecb122
·
verified ·
1 Parent(s): 35a784c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1361 -19
index.html CHANGED
@@ -1,19 +1,1361 @@
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="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ربات تحلیل رمز ارز | Crypto Analysis Bot</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ <style>
13
+ :root {
14
+ --primary: #00d4ff;
15
+ --secondary: #7b2cbf;
16
+ --success: #00ff88;
17
+ --danger: #ff4757;
18
+ --warning: #ffa502;
19
+ --dark-bg: #0a0a1a;
20
+ --darker-bg: #050510;
21
+ --card-bg: #12122a;
22
+ --card-border: #1e1e3f;
23
+ --text-primary: #ffffff;
24
+ --text-secondary: #8b8ba7;
25
+ --gradient-1: linear-gradient(135deg, #00d4ff 0%, #7b2cbf 100%);
26
+ --gradient-2: linear-gradient(135deg, #7b2cbf 0%, #ff0080 100%);
27
+ --glow-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
28
+ }
29
+
30
+ * {
31
+ margin: 0;
32
+ padding: 0;
33
+ box-sizing: border-box;
34
+ font-family: 'Vazirmatn', sans-serif;
35
+ }
36
+
37
+ body {
38
+ background: var(--dark-bg);
39
+ color: var(--text-primary);
40
+ min-height: 100vh;
41
+ overflow-x: hidden;
42
+ }
43
+
44
+ /* Scrollbar Styling */
45
+ ::-webkit-scrollbar {
46
+ width: 8px;
47
+ height: 8px;
48
+ }
49
+
50
+ ::-webkit-scrollbar-track {
51
+ background: var(--darker-bg);
52
+ }
53
+
54
+ ::-webkit-scrollbar-thumb {
55
+ background: var(--primary);
56
+ border-radius: 4px;
57
+ }
58
+
59
+ /* Header */
60
+ .header {
61
+ background: linear-gradient(180deg, var(--darker-bg) 0%, transparent 100%);
62
+ padding: 1rem 2rem;
63
+ position: fixed;
64
+ top: 0;
65
+ left: 0;
66
+ right: 0;
67
+ z-index: 1000;
68
+ display: flex;
69
+ justify-content: space-between;
70
+ align-items: center;
71
+ backdrop-filter: blur(10px);
72
+ border-bottom: 1px solid var(--card-border);
73
+ }
74
+
75
+ .logo {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 12px;
79
+ }
80
+
81
+ .logo-icon {
82
+ width: 45px;
83
+ height: 45px;
84
+ background: var(--gradient-1);
85
+ border-radius: 12px;
86
+ display: flex;
87
+ align-items: center;
88
+ justify-content: center;
89
+ font-size: 1.5rem;
90
+ box-shadow: var(--glow-shadow);
91
+ animation: pulse 2s infinite;
92
+ }
93
+
94
+ @keyframes pulse {
95
+ 0%, 100% { transform: scale(1); }
96
+ 50% { transform: scale(1.05); }
97
+ }
98
+
99
+ .logo-text {
100
+ font-size: 1.4rem;
101
+ font-weight: 700;
102
+ background: var(--gradient-1);
103
+ -webkit-background-clip: text;
104
+ -webkit-text-fill-color: transparent;
105
+ background-clip: text;
106
+ }
107
+
108
+ .logo-text span {
109
+ font-size: 0.8rem;
110
+ color: var(--text-secondary);
111
+ display: block;
112
+ font-weight: 300;
113
+ }
114
+
115
+ .header-actions {
116
+ display: flex;
117
+ align-items: center;
118
+ gap: 1rem;
119
+ }
120
+
121
+ .search-box {
122
+ position: relative;
123
+ display: flex;
124
+ align-items: center;
125
+ }
126
+
127
+ .search-box input {
128
+ background: var(--card-bg);
129
+ border: 1px solid var(--card-border);
130
+ padding: 0.75rem 1rem 0.75rem 2.5rem;
131
+ border-radius: 25px;
132
+ color: var(--text-primary);
133
+ width: 250px;
134
+ transition: all 0.3s ease;
135
+ }
136
+
137
+ .search-box input:focus {
138
+ outline: none;
139
+ border-color: var(--primary);
140
+ box-shadow: var(--glow-shadow);
141
+ }
142
+
143
+ .search-box i {
144
+ position: absolute;
145
+ right: 12px;
146
+ color: var(--text-secondary);
147
+ }
148
+
149
+ .btn {
150
+ padding: 0.75rem 1.5rem;
151
+ border-radius: 25px;
152
+ border: none;
153
+ cursor: pointer;
154
+ font-weight: 500;
155
+ transition: all 0.3s ease;
156
+ display: flex;
157
+ align-items: center;
158
+ gap: 8px;
159
+ }
160
+
161
+ .btn-primary {
162
+ background: var(--gradient-1);
163
+ color: white;
164
+ }
165
+
166
+ .btn-primary:hover {
167
+ transform: translateY(-2px);
168
+ box-shadow: var(--glow-shadow);
169
+ }
170
+
171
+ .btn-outline {
172
+ background: transparent;
173
+ border: 2px solid var(--primary);
174
+ color: var(--primary);
175
+ }
176
+
177
+ .btn-outline:hover {
178
+ background: var(--primary);
179
+ color: var(--dark-bg);
180
+ }
181
+
182
+ /* Main Layout */
183
+ .main-container {
184
+ display: flex;
185
+ margin-top: 80px;
186
+ min-height: calc(100vh - 80px);
187
+ }
188
+
189
+ /* Sidebar */
190
+ .sidebar {
191
+ width: 280px;
192
+ background: var(--darker-bg);
193
+ border-left: 1px solid var(--card-border);
194
+ padding: 1.5rem;
195
+ position: fixed;
196
+ right: 0;
197
+ top: 80px;
198
+ bottom: 0;
199
+ overflow-y: auto;
200
+ transition: all 0.3s ease;
201
+ }
202
+
203
+ .nav-menu {
204
+ list-style: none;
205
+ }
206
+
207
+ .nav-item {
208
+ margin-bottom: 0.5rem;
209
+ }
210
+
211
+ .nav-link {
212
+ display: flex;
213
+ align-items: center;
214
+ gap: 12px;
215
+ padding: 1rem 1.25rem;
216
+ color: var(--text-secondary);
217
+ text-decoration: none;
218
+ border-radius: 12px;
219
+ transition: all 0.3s ease;
220
+ cursor: pointer;
221
+ }
222
+
223
+ .nav-link:hover, .nav-link.active {
224
+ background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 100%);
225
+ color: var(--primary);
226
+ }
227
+
228
+ .nav-link.active {
229
+ border-right: 3px solid var(--primary);
230
+ }
231
+
232
+ .nav-link i {
233
+ width: 24px;
234
+ text-align: center;
235
+ }
236
+
237
+ /* Main Content */
238
+ .main-content {
239
+ flex: 1;
240
+ margin-right: 280px;
241
+ padding: 2rem;
242
+ }
243
+
244
+ /* Stats Grid */
245
+ .stats-grid {
246
+ display: grid;
247
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
248
+ gap: 1.5rem;
249
+ margin-bottom: 2rem;
250
+ }
251
+
252
+ .stat-card {
253
+ background: var(--card-bg);
254
+ border: 1px solid var(--card-border);
255
+ border-radius: 20px;
256
+ padding: 1.5rem;
257
+ position: relative;
258
+ overflow: hidden;
259
+ transition: all 0.3s ease;
260
+ }
261
+
262
+ .stat-card::before {
263
+ content: '';
264
+ position: absolute;
265
+ top: 0;
266
+ left: 0;
267
+ right: 0;
268
+ height: 3px;
269
+ background: var(--gradient-1);
270
+ }
271
+
272
+ .stat-card:hover {
273
+ transform: translateY(-5px);
274
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
275
+ border-color: var(--primary);
276
+ }
277
+
278
+ .stat-icon {
279
+ width: 50px;
280
+ height: 50px;
281
+ border-radius: 15px;
282
+ display: flex;
283
+ align-items: center;
284
+ justify-content: center;
285
+ font-size: 1.5rem;
286
+ margin-bottom: 1rem;
287
+ }
288
+
289
+ .stat-icon.blue { background: rgba(0, 212, 255, 0.2); color: var(--primary); }
290
+ .stat-icon.purple { background: rgba(123, 44, 191, 0.2); color: var(--secondary); }
291
+ .stat-icon.green { background: rgba(0, 255, 136, 0.2); color: var(--success); }
292
+ .stat-icon.orange { background: rgba(255, 165, 2, 0.2); color: var(--warning); }
293
+
294
+ .stat-value {
295
+ font-size: 1.8rem;
296
+ font-weight: 700;
297
+ margin-bottom: 0.5rem;
298
+ }
299
+
300
+ .stat-label {
301
+ color: var(--text-secondary);
302
+ font-size: 0.9rem;
303
+ }
304
+
305
+ .stat-change {
306
+ display: inline-flex;
307
+ align-items: center;
308
+ gap: 5px;
309
+ padding: 0.25rem 0.75rem;
310
+ border-radius: 20px;
311
+ font-size: 0.85rem;
312
+ margin-top: 0.5rem;
313
+ }
314
+
315
+ .stat-change.positive {
316
+ background: rgba(0, 255, 136, 0.2);
317
+ color: var(--success);
318
+ }
319
+
320
+ .stat-change.negative {
321
+ background: rgba(255, 71, 87, 0.2);
322
+ color: var(--danger);
323
+ }
324
+
325
+ /* Dashboard Grid */
326
+ .dashboard-grid {
327
+ display: grid;
328
+ grid-template-columns: 2fr 1fr;
329
+ gap: 1.5rem;
330
+ margin-bottom: 2rem;
331
+ }
332
+
333
+ .card {
334
+ background: var(--card-bg);
335
+ border: 1px solid var(--card-border);
336
+ border-radius: 20px;
337
+ padding: 1.5rem;
338
+ transition: all 0.3s ease;
339
+ }
340
+
341
+ .card:hover {
342
+ border-color: var(--primary);
343
+ }
344
+
345
+ .card-header {
346
+ display: flex;
347
+ justify-content: space-between;
348
+ align-items: center;
349
+ margin-bottom: 1.5rem;
350
+ }
351
+
352
+ .card-title {
353
+ font-size: 1.2rem;
354
+ font-weight: 600;
355
+ }
356
+
357
+ .card-actions {
358
+ display: flex;
359
+ gap: 0.5rem;
360
+ }
361
+
362
+ .time-btn {
363
+ padding: 0.5rem 1rem;
364
+ border-radius: 20px;
365
+ background: transparent;
366
+ border: 1px solid var(--card-border);
367
+ color: var(--text-secondary);
368
+ cursor: pointer;
369
+ transition: all 0.3s ease;
370
+ }
371
+
372
+ .time-btn.active, .time-btn:hover {
373
+ background: var(--primary);
374
+ border-color: var(--primary);
375
+ color: var(--dark-bg);
376
+ }
377
+
378
+ /* Chart Container */
379
+ .chart-container {
380
+ position: relative;
381
+ height: 350px;
382
+ }
383
+
384
+ /* Crypto List */
385
+ .crypto-list {
386
+ max-height: 350px;
387
+ overflow-y: auto;
388
+ }
389
+
390
+ .crypto-item {
391
+ display: flex;
392
+ align-items: center;
393
+ justify-content: space-between;
394
+ padding: 1rem;
395
+ border-radius: 12px;
396
+ margin-bottom: 0.5rem;
397
+ transition: all 0.3s ease;
398
+ cursor: pointer;
399
+ }
400
+
401
+ .crypto-item:hover {
402
+ background: rgba(0, 212, 255, 0.05);
403
+ }
404
+
405
+ .crypto-info {
406
+ display: flex;
407
+ align-items: center;
408
+ gap: 12px;
409
+ }
410
+
411
+ .crypto-icon {
412
+ width: 40px;
413
+ height: 40px;
414
+ border-radius: 50%;
415
+ display: flex;
416
+ align-items: center;
417
+ justify-content: center;
418
+ font-size: 1.2rem;
419
+ background: var(--gradient-1);
420
+ }
421
+
422
+ .crypto-name {
423
+ font-weight: 600;
424
+ }
425
+
426
+ .crypto-symbol {
427
+ color: var(--text-secondary);
428
+ font-size: 0.85rem;
429
+ }
430
+
431
+ .crypto-price {
432
+ text-align: left;
433
+ }
434
+
435
+ .price-value {
436
+ font-weight: 600;
437
+ }
438
+
439
+ .price-change {
440
+ font-size: 0.85rem;
441
+ }
442
+
443
+ /* Signals Panel */
444
+ .signals-grid {
445
+ display: grid;
446
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
447
+ gap: 1rem;
448
+ margin-bottom: 2rem;
449
+ }
450
+
451
+ .signal-card {
452
+ background: var(--card-bg);
453
+ border: 1px solid var(--card-border);
454
+ border-radius: 16px;
455
+ padding: 1.25rem;
456
+ text-align: center;
457
+ transition: all 0.3s ease;
458
+ }
459
+
460
+ .signal-card:hover {
461
+ transform: scale(1.02);
462
+ border-color: var(--primary);
463
+ }
464
+
465
+ .signal-icon {
466
+ width: 60px;
467
+ height: 60px;
468
+ border-radius: 50%;
469
+ display: flex;
470
+ align-items: center;
471
+ justify-content: center;
472
+ font-size: 1.5rem;
473
+ margin: 0 auto 1rem;
474
+ }
475
+
476
+ .signal-icon.buy {
477
+ background: rgba(0, 255, 136, 0.2);
478
+ color: var(--success);
479
+ box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
480
+ }
481
+
482
+ .signal-icon.sell {
483
+ background: rgba(255, 71, 87, 0.2);
484
+ color: var(--danger);
485
+ box-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
486
+ }
487
+
488
+ .signal-icon.hold {
489
+ background: rgba(255, 165, 2, 0.2);
490
+ color: var(--warning);
491
+ box-shadow: 0 0 20px rgba(255, 165, 2, 0.3);
492
+ }
493
+
494
+ .signal-title {
495
+ font-weight: 600;
496
+ margin-bottom: 0.5rem;
497
+ }
498
+
499
+ .signal-desc {
500
+ color: var(--text-secondary);
501
+ font-size: 0.85rem;
502
+ }
503
+
504
+ /* Configuration Panel */
505
+ .config-grid {
506
+ display: grid;
507
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
508
+ gap: 1.5rem;
509
+ }
510
+
511
+ .form-group {
512
+ margin-bottom: 1.5rem;
513
+ }
514
+
515
+ .form-label {
516
+ display: block;
517
+ margin-bottom: 0.5rem;
518
+ color: var(--text-secondary);
519
+ font-size: 0.9rem;
520
+ }
521
+
522
+ .form-input, .form-select {
523
+ width: 100%;
524
+ padding: 0.75rem 1rem;
525
+ background: var(--dark-bg);
526
+ border: 1px solid var(--card-border);
527
+ border-radius: 10px;
528
+ color: var(--text-primary);
529
+ font-size: 1rem;
530
+ transition: all 0.3s ease;
531
+ }
532
+
533
+ .form-input:focus, .form-select:focus {
534
+ outline: none;
535
+ border-color: var(--primary);
536
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
537
+ }
538
+
539
+ .form-select {
540
+ cursor: pointer;
541
+ }
542
+
543
+ .range-container {
544
+ display: flex;
545
+ align-items: center;
546
+ gap: 1rem;
547
+ }
548
+
549
+ .range-slider {
550
+ flex: 1;
551
+ -webkit-appearance: none;
552
+ height: 6px;
553
+ background: var(--card-border);
554
+ border-radius: 3px;
555
+ outline: none;
556
+ }
557
+
558
+ .range-slider::-webkit-slider-thumb {
559
+ -webkit-appearance: none;
560
+ width: 20px;
561
+ height: 20px;
562
+ background: var(--primary);
563
+ border-radius: 50%;
564
+ cursor: pointer;
565
+ box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
566
+ }
567
+
568
+ .range-value {
569
+ min-width: 50px;
570
+ text-align: center;
571
+ font-weight: 600;
572
+ color: var(--primary);
573
+ }
574
+
575
+ /* Indicator Tags */
576
+ .indicator-tags {
577
+ display: flex;
578
+ flex-wrap: wrap;
579
+ gap: 0.5rem;
580
+ margin-top: 0.5rem;
581
+ }
582
+
583
+ .indicator-tag {
584
+ padding: 0.5rem 1rem;
585
+ background: var(--dark-bg);
586
+ border: 1px solid var(--card-border);
587
+ border-radius: 20px;
588
+ font-size: 0.85rem;
589
+ cursor: pointer;
590
+ transition: all 0.3s ease;
591
+ }
592
+
593
+ .indicator-tag.active {
594
+ background: var(--primary);
595
+ border-color: var(--primary);
596
+ color: var(--dark-bg);
597
+ }
598
+
599
+ .indicator-tag:hover:not(.active) {
600
+ border-color: var(--primary);
601
+ }
602
+
603
+ /* News Section */
604
+ .news-list {
605
+ max-height: 400px;
606
+ overflow-y: auto;
607
+ }
608
+
609
+ .news-item {
610
+ display: flex;
611
+ gap: 1rem;
612
+ padding: 1rem;
613
+ border-bottom: 1px solid var(--card-border);
614
+ transition: all 0.3s ease;
615
+ }
616
+
617
+ .news-item:hover {
618
+ background: rgba(0, 212, 255, 0.05);
619
+ }
620
+
621
+ .news-image {
622
+ width: 80px;
623
+ height: 60px;
624
+ border-radius: 10px;
625
+ background: var(--gradient-1);
626
+ display: flex;
627
+ align-items: center;
628
+ justify-content: center;
629
+ flex-shrink: 0;
630
+ }
631
+
632
+ .news-content h4 {
633
+ font-size: 0.95rem;
634
+ margin-bottom: 0.5rem;
635
+ line-height: 1.4;
636
+ }
637
+
638
+ .news-meta {
639
+ display: flex;
640
+ gap: 1rem;
641
+ color: var(--text-secondary);
642
+ font-size: 0.8rem;
643
+ }
644
+
645
+ /* Portfolio Section */
646
+ .portfolio-chart {
647
+ height: 250px;
648
+ }
649
+
650
+ .holdings-list {
651
+ margin-top: 1rem;
652
+ }
653
+
654
+ .holding-item {
655
+ display: flex;
656
+ align-items: center;
657
+ justify-content: space-between;
658
+ padding: 1rem;
659
+ background: var(--dark-bg);
660
+ border-radius: 12px;
661
+ margin-bottom: 0.75rem;
662
+ }
663
+
664
+ .holding-info {
665
+ display: flex;
666
+ align-items: center;
667
+ gap: 12px;
668
+ }
669
+
670
+ .holding-icon {
671
+ width: 35px;
672
+ height: 35px;
673
+ border-radius: 50%;
674
+ display: flex;
675
+ align-items: center;
676
+ justify-content: center;
677
+ font-size: 1rem;
678
+ }
679
+
680
+ .holding-details h4 {
681
+ font-size: 0.95rem;
682
+ }
683
+
684
+ .holding-details span {
685
+ color: var(--text-secondary);
686
+ font-size: 0.85rem;
687
+ }
688
+
689
+ .holding-value {
690
+ text-align: left;
691
+ }
692
+
693
+ .holding-usd {
694
+ font-weight: 600;
695
+ }
696
+
697
+ .holding-amount {
698
+ color: var(--text-secondary);
699
+ font-size: 0.85rem;
700
+ }
701
+
702
+ /* Bot Status */
703
+ .bot-status {
704
+ display: flex;
705
+ align-items: center;
706
+ gap: 1rem;
707
+ padding: 1rem;
708
+ background: var(--dark-bg);
709
+ border-radius: 12px;
710
+ margin-bottom: 1.5rem;
711
+ }
712
+
713
+ .status-indicator {
714
+ width: 12px;
715
+ height: 12px;
716
+ border-radius: 50%;
717
+ animation: blink 1.5s infinite;
718
+ }
719
+
720
+ .status-indicator.active {
721
+ background: var(--success);
722
+ box-shadow: 0 0 10px var(--success);
723
+ }
724
+
725
+ .status-indicator.inactive {
726
+ background: var(--danger);
727
+ animation: none;
728
+ }
729
+
730
+ @keyframes blink {
731
+ 0%, 100% { opacity: 1; }
732
+ 50% { opacity: 0.5; }
733
+ }
734
+
735
+ /* Toggle Switch */
736
+ .toggle-container {
737
+ display: flex;
738
+ align-items: center;
739
+ justify-content: space-between;
740
+ padding: 1rem;
741
+ background: var(--dark-bg);
742
+ border-radius: 12px;
743
+ margin-bottom: 0.75rem;
744
+ }
745
+
746
+ .toggle-label {
747
+ display: flex;
748
+ align-items: center;
749
+ gap: 10px;
750
+ }
751
+
752
+ .toggle-switch {
753
+ position: relative;
754
+ width: 50px;
755
+ height: 26px;
756
+ }
757
+
758
+ .toggle-switch input {
759
+ opacity: 0;
760
+ width: 0;
761
+ height: 0;
762
+ }
763
+
764
+ .toggle-slider {
765
+ position: absolute;
766
+ cursor: pointer;
767
+ top: 0;
768
+ left: 0;
769
+ right: 0;
770
+ bottom: 0;
771
+ background: var(--card-border);
772
+ border-radius: 26px;
773
+ transition: 0.3s;
774
+ }
775
+
776
+ .toggle-slider::before {
777
+ position: absolute;
778
+ content: '';
779
+ height: 20px;
780
+ width: 20px;
781
+ right: 3px;
782
+ bottom: 3px;
783
+ background: white;
784
+ border-radius: 50%;
785
+ transition: 0.3s;
786
+ }
787
+
788
+ .toggle-switch input:checked + .toggle-slider {
789
+ background: var(--primary);
790
+ }
791
+
792
+ .toggle-switch input:checked + .toggle-slider::before {
793
+ transform: translateX(-24px);
794
+ }
795
+
796
+ /* Mobile Menu */
797
+ .mobile-menu-btn {
798
+ display: none;
799
+ background: none;
800
+ border: none;
801
+ color: var(--text-primary);
802
+ font-size: 1.5rem;
803
+ cursor: pointer;
804
+ }
805
+
806
+ /* Footer */
807
+ .footer {
808
+ text-align: center;
809
+ padding: 2rem;
810
+ color: var(--text-secondary);
811
+ font-size: 0.9rem;
812
+ border-top: 1px solid var(--card-border);
813
+ margin-top: 2rem;
814
+ }
815
+
816
+ .footer a {
817
+ color: var(--primary);
818
+ text-decoration: none;
819
+ }
820
+
821
+ /* Responsive */
822
+ @media (max-width: 1200px) {
823
+ .dashboard-grid {
824
+ grid-template-columns: 1fr;
825
+ }
826
+ }
827
+
828
+ @media (max-width: 992px) {
829
+ .sidebar {
830
+ transform: translateX(100%);
831
+ z-index: 999;
832
+ }
833
+
834
+ .sidebar.active {
835
+ transform: translateX(0);
836
+ }
837
+
838
+ .main-content {
839
+ margin-right: 0;
840
+ }
841
+
842
+ .mobile-menu-btn {
843
+ display: block;
844
+ }
845
+
846
+ .search-box {
847
+ display: none;
848
+ }
849
+ }
850
+
851
+ @media (max-width: 768px) {
852
+ .stats-grid {
853
+ grid-template-columns: repeat(2, 1fr);
854
+ }
855
+
856
+ .header {
857
+ padding: 1rem;
858
+ }
859
+
860
+ .logo-text span {
861
+ display: none;
862
+ }
863
+
864
+ .btn span {
865
+ display: none;
866
+ }
867
+ }
868
+
869
+ @media (max-width: 480px) {
870
+ .stats-grid {
871
+ grid-template-columns: 1fr;
872
+ }
873
+ }
874
+
875
+ /* Animations */
876
+ @keyframes fadeIn {
877
+ from { opacity: 0; transform: translateY(20px); }
878
+ to { opacity: 1; transform: translateY(0); }
879
+ }
880
+
881
+ .animate-in {
882
+ animation: fadeIn 0.5s ease forwards;
883
+ }
884
+
885
+ .delay-1 { animation-delay: 0.1s; }
886
+ .delay-2 { animation-delay: 0.2s; }
887
+ .delay-3 { animation-delay: 0.3s; }
888
+ .delay-4 { animation-delay: 0.4s; }
889
+ </style>
890
+ </head>
891
+ <body>
892
+ <!-- Header -->
893
+ <header class="header">
894
+ <div class="logo">
895
+ <div class="logo-icon">
896
+ <i class="fas fa-robot"></i>
897
+ </div>
898
+ <div class="logo-text">
899
+ CryptoBot Pro
900
+ <span>ربات تحلیل هوشمند</span>
901
+ </div>
902
+ </div>
903
+
904
+ <div class="search-box">
905
+ <i class="fas fa-search"></i>
906
+ <input type="text" placeholder="جستجوی ارز دیجیتال...">
907
+ </div>
908
+
909
+ <div class="header-actions">
910
+ <button class="btn btn-outline">
911
+ <i class="fas fa-cog"></i>
912
+ <span>تنظیمات</span>
913
+ </button>
914
+ <button class="btn btn-primary">
915
+ <i class="fas fa-rocket"></i>
916
+ <span>اجرای ربات</span>
917
+ </button>
918
+ <button class="mobile-menu-btn" onclick="toggleSidebar()">
919
+ <i class="fas fa-bars"></i>
920
+ </button>
921
+ </div>
922
+ </header>
923
+
924
+ <!-- Main Container -->
925
+ <div class="main-container">
926
+ <!-- Sidebar -->
927
+ <aside class="sidebar" id="sidebar">
928
+ <ul class="nav-menu">
929
+ <li class="nav-item">
930
+ <a class="nav-link active" onclick="switchTab('dashboard')">
931
+ <i class="fas fa-chart-line"></i>
932
+ <span>داشبورد</span>
933
+ </a>
934
+ </li>
935
+ <li class="nav-item">
936
+ <a class="nav-link" onclick="switchTab('signals')">
937
+ <i class="fas fa-signal"></i>
938
+ <span>سیگنال‌ها</span>
939
+ </a>
940
+ </li>
941
+ <li class="nav-item">
942
+ <a class="nav-link" onclick="switchTab('config')">
943
+ <i class="fas fa-cogs"></i>
944
+ <span>پیکربندی ربات</span>
945
+ </a>
946
+ </li>
947
+ <li class="nav-item">
948
+ <a class="nav-link" onclick="switchTab('portfolio')">
949
+ <i class="fas fa-wallet"></i>
950
+ <span>سبد سرمایه</span>
951
+ </a>
952
+ </li>
953
+ <li class="nav-item">
954
+ <a class="nav-link" onclick="switchTab('news')">
955
+ <i class="fas fa-newspaper"></i>
956
+ <span>اخبار بازار</span>
957
+ </a>
958
+ </li>
959
+ <li class="nav-item">
960
+ <a class="nav-link" onclick="switchTab('backtest')">
961
+ <i class="fas fa-history"></i>
962
+ <span>بک‌تست</span>
963
+ </a>
964
+ </li>
965
+ <li class="nav-item">
966
+ <a class="nav-link" onclick="switchTab('logs')">
967
+ <i class="fas fa-list-alt"></i>
968
+ <span>لاگ‌ها</span>
969
+ </a>
970
+ </li>
971
+ </ul>
972
+ </aside>
973
+
974
+ <!-- Main Content -->
975
+ <main class="main-content">
976
+ <!-- Stats Section -->
977
+ <section class="stats-grid animate-in">
978
+ <div class="stat-card delay-1">
979
+ <div class="stat-icon blue">
980
+ <i class="fas fa-dollar-sign"></i>
981
+ </div>
982
+ <div class="stat-value">$47,892.34</div>
983
+ <div class="stat-label">کل سرمایه</div>
984
+ <span class="stat-change positive">
985
+ <i class="fas fa-arrow-up"></i> +5.24%
986
+ </span>
987
+ </div>
988
+ <div class="stat-card delay-2">
989
+ <div class="stat-icon green">
990
+ <i class="fas fa-chart-pie"></i>
991
+ </div>
992
+ <div class="stat-value">$12,456.78</div>
993
+ <div class="stat-label">سود/زیان</div>
994
+ <span class="stat-change positive">
995
+ <i class="fas fa-arrow-up"></i> +18.3%
996
+ </span>
997
+ </div>
998
+ <div class="stat-card delay-3">
999
+ <div class="stat-icon purple">
1000
+ <i class="fas fa-sync-alt"></i>
1001
+ </div>
1002
+ <div class="stat-value">156</div>
1003
+ <div class="stat-label">معاملات موفق</div>
1004
+ <span class="stat-change positive">
1005
+ <i class="fas fa-arrow-up"></i> 72%
1006
+ </span>
1007
+ </div>
1008
+ <div class="stat-card delay-4">
1009
+ <div class="stat-icon orange">
1010
+ <i class="fas fa-bolt"></i>
1011
+ </div>
1012
+ <div class="stat-value">23</div>
1013
+ <div class="stat-label">سیگنال فعال</div>
1014
+ <span class="stat-change negative">
1015
+ <i class="fas fa-arrow-down"></i> -2
1016
+ </span>
1017
+ </div>
1018
+ </section>
1019
+
1020
+ <!-- Dashboard Grid -->
1021
+ <section class="dashboard-grid animate-in">
1022
+ <div class="card">
1023
+ <div class="card-header">
1024
+ <h3 class="card-title">نمودار قیمت بیت‌کوین</h3>
1025
+ <div class="card-actions">
1026
+ <button class="time-btn">1س</button>
1027
+ <button class="time-btn">5د</button>
1028
+ <button class="time-btn active">1س</button>
1029
+ <button class="time-btn">4س</button>
1030
+ <button class="time-btn">1روز</button>
1031
+ </div>
1032
+ </div>
1033
+ <div class="chart-container">
1034
+ <canvas id="mainChart"></canvas>
1035
+ </div>
1036
+ </div>
1037
+
1038
+ <div class="card">
1039
+ <div class="card-header">
1040
+ <h3 class="card-title">ارزهای برتر</h3>
1041
+ </div>
1042
+ <div class="crypto-list">
1043
+ <div class="crypto-item">
1044
+ <div class="crypto-info">
1045
+ <div class="crypto-icon">₿</div>
1046
+ <div>
1047
+ <div class="crypto-name">بیت‌کوین</div>
1048
+ <div class="crypto-symbol">BTC/USDT</div>
1049
+ </div>
1050
+ </div>
1051
+ <div class="crypto-price">
1052
+ <div class="price-value">$47,892.34</div>
1053
+ <div class="price-change" style="color: var(--success);">+2.45%</div>
1054
+ </div>
1055
+ </div>
1056
+ <div class="crypto-item">
1057
+ <div class="crypto-info">
1058
+ <div class="crypto-icon" style="background: linear-gradient(135deg, #627eea 0%, #3c4f9e 100%);">Ξ</div>
1059
+ <div>
1060
+ <div class="crypto-name">اتریوم</div>
1061
+ <div class="crypto-symbol">ETH/USDT</div>
1062
+ </div>
1063
+ </div>
1064
+ <div class="crypto-price">
1065
+ <div class="price-value">$2,567.89</div>
1066
+ <div class="price-change" style="color: var(--success);">+3.12%</div>
1067
+ </div>
1068
+ </div>
1069
+ <div class="crypto-item">
1070
+ <div class="crypto-info">
1071
+ <div class="crypto-icon" style="background: linear-gradient(135deg, #f7931a 0%, #e07a1a 100%);">⁽ᵇ⁾</div>
1072
+ <div>
1073
+ <div class="crypto-name">بایننس کوین</div>
1074
+ <div class="crypto-symbol">BNB/USDT</div>
1075
+ </div>
1076
+ </div>
1077
+ <div class="crypto-price">
1078
+ <div class="price-value">$312.45</div>
1079
+ <div class="price-change" style="color: var(--danger);">-1.23%</div>
1080
+ </div>
1081
+ </div>
1082
+ <div class="crypto-item">
1083
+ <div class="crypto-info">
1084
+ <div class="crypto-icon" style="background: linear-gradient(135deg, #26a17b 0%, #1d8a6a 100%);">X</div>
1085
+ <div>
1086
+ <div class="crypto-name">سولانا</div>
1087
+ <div class="crypto-symbol">SOL/USDT</div>
1088
+ </div>
1089
+ </div>
1090
+ <div class="crypto-price">
1091
+ <div class="price-value">$98.76</div>
1092
+ <div class="price-change" style="color: var(--success);">+5.67%</div>
1093
+ </div>
1094
+ </div>
1095
+ <div class="crypto-item">
1096
+ <div class="crypto-info">
1097
+ <div class="crypto-icon" style="background: linear-gradient(135deg, #0085c5 0%, #006699 100%);">$</div>
1098
+ <div>
1099
+ <div class="crypto-name">ریپل</div>
1100
+ <div class="crypto-symbol">XRP/USDT</div>
1101
+ </div>
1102
+ </div>
1103
+ <div class="crypto-price">
1104
+ <div class="price-value">$0.6234</div>
1105
+ <div class="price-change" style="color: var(--success);">+0.89%</div>
1106
+ </div>
1107
+ </div>
1108
+ </div>
1109
+ </div>
1110
+ </section>
1111
+
1112
+ <!-- Signals Section -->
1113
+ <section class="signals-grid animate-in">
1114
+ <div class="signal-card">
1115
+ <div class="signal-icon buy">
1116
+ <i class="fas fa-arrow-up"></i>
1117
+ </div>
1118
+ <div class="signal-title">خرید قوی</div>
1119
+ <div class="signal-desc">RSI و MACD هر دو مثبت</div>
1120
+ </div>
1121
+ <div class="signal-card">
1122
+ <div class="signal-icon hold">
1123
+ <i class="fas fa-pause"></i>
1124
+ </div>
1125
+ <div class="signal-title">نگه‌داری</div>
1126
+ <div class="signal-desc">در انتظار تایید</div>
1127
+ </div>
1128
+ <div class="signal-card">
1129
+ <div class="signal-icon sell">
1130
+ <i class="fas fa-arrow-down"></i>
1131
+ </div>
1132
+ <div class="signal-title">فروش</div>
1133
+ <div class="signal-desc">خروج از معامله</div>
1134
+ </div>
1135
+ <div class="signal-card">
1136
+ <div class="signal-icon buy">
1137
+ <i class="fas fa-bell"></i>
1138
+ </div>
1139
+ <div class="signal-title">هشدار</div>
1140
+ <div class="signal-desc">نوسان بالا</div>
1141
+ </div>
1142
+ </section>
1143
+
1144
+ <!-- Configuration Section -->
1145
+ <section class="card animate-in">
1146
+ <div class="card-header">
1147
+ <h3 class="card-title">پیکربندی ربات معاملاتی</h3>
1148
+ </div>
1149
+
1150
+ <div class="bot-status">
1151
+ <div class="status-indicator active" id="botStatus"></div>
1152
+ <div>
1153
+ <strong>ربات معاملاتی</strong>
1154
+ <p style="color: var(--text-secondary); font-size: 0.85rem;">وضعیت: فعال و در حال اجرا</p>
1155
+ </div>
1156
+ <button class="btn btn-outline" style="margin-right: auto;" onclick="toggleBot()">
1157
+ <i class="fas fa-power-off"></i>
1158
+ <span>توقف</span>
1159
+ </button>
1160
+ </div>
1161
+
1162
+ <div class="config-grid">
1163
+ <div>
1164
+ <div class="form-group">
1165
+ <label class="form-label">جفت ارز معاملاتی</label>
1166
+ <select class="form-select">
1167
+ <option>BTC/USDT</option>
1168
+ <option>ETH/USDT</option>
1169
+ <option>BNB/USDT</option>
1170
+ <option>SOL/USDT</option>
1171
+ </select>
1172
+ </div>
1173
+
1174
+ <div class="form-group">
1175
+ <label class="form-label">استراتژی معاملاتی</label>
1176
+ <select class="form-select">
1177
+ <option>اسکالپینگ</option>
1178
+ <option>روزانه</option>
1179
+ <option>میان‌مدت</option>
1180
+ <option>بلندمدت</option>
1181
+ </select>
1182
+ </div>
1183
+
1184
+ <div class="form-group">
1185
+ <label class="form-label">درصد سرمایه برای هر معامله</label>
1186
+ <div class="range-container">
1187
+ <input type="range" class="range-slider" min="1" max="100" value="25">
1188
+ <span class="range-value">25%</span>
1189
+ </div>
1190
+ </div>
1191
+
1192
+ <div class="form-group">
1193
+ <label class="form-label">حد ضرر (Stop Loss)</label>
1194
+ <div class="range-container">
1195
+ <input type="range" class="range-slider" min="1" max="20" value="5">
1196
+ <span class="range-value">5%</span>
1197
+ </div>
1198
+ </div>
1199
+
1200
+ <div class="form-group">
1201
+ <label class="form-label">حد سود (Take Profit)</label>
1202
+ <div class="range-container">
1203
+ <input type="range" class="range-slider" min="1" max="50" value="15">
1204
+ <span class="range-value">15%</span>
1205
+ </div>
1206
+ </div>
1207
+ </div>
1208
+
1209
+ <div>
1210
+ <div class="form-group">
1211
+ <label class="form-label">اندیکاتورهای فعال</label>
1212
+ <div class="indicator-tags">
1213
+ <span class="indicator-tag active">RSI</span>
1214
+ <span class="indicator-tag active">MACD</span>
1215
+ <span class="indicator-tag active">EMA</span>
1216
+ <span class="indicator-tag">Bollinger Bands</span>
1217
+ <span class="indicator-tag">Stochastic</span>
1218
+ <span class="indicator-tag">ATR</span>
1219
+ </div>
1220
+ </div>
1221
+
1222
+ <div class="toggle-container">
1223
+ <div class="toggle-label">
1224
+ <i class="fas fa-shield-alt" style="color: var(--primary);"></i>
1225
+ <span>فیلتر نویز بازار</span>
1226
+ </div>
1227
+ <label class="toggle-switch">
1228
+ <input type="checkbox" checked>
1229
+ <span class="toggle-slider"></span>
1230
+ </label>
1231
+ </div>
1232
+
1233
+ <div class="toggle-container">
1234
+ <div class="toggle-label">
1235
+ <i class="fas fa-clock" style="color: var(--warning);"></i>
1236
+ <span>معاملات شبانه</span>
1237
+ </div>
1238
+ <label class="toggle-switch">
1239
+ <input type="checkbox" checked>
1240
+ <span class="toggle-slider"></span>
1241
+ </label>
1242
+ </div>
1243
+
1244
+ <div class="toggle-container">
1245
+ <div class="toggle-label">
1246
+ <i class="fas fa-bell" style="color: var(--secondary);"></i>
1247
+ <span>اعلان تلگرام</span>
1248
+ </div>
1249
+ <label class="toggle-switch">
1250
+ <input type="checkbox" checked>
1251
+ <span class="toggle-slider"></span>
1252
+ </label>
1253
+ </div>
1254
+
1255
+ <div class="toggle-container">
1256
+ <div class="toggle-label">
1257
+ <i class="fas fa-sync" style="color: var(--success);"></i>
1258
+ <span>معاملات خودکار</span>
1259
+ </div>
1260
+ <label class="toggle-switch">
1261
+ <input type="checkbox" checked>
1262
+ <span class="toggle-slider"></span>
1263
+ </label>
1264
+ </div>
1265
+
1266
+ <div class="form-group">
1267
+ <label class="form-label">بازه زمانی تحلیل</label>
1268
+ <select class="form-select">
1269
+ <option>1 دقیقه</option>
1270
+ <option>5 دقیقه</option>
1271
+ <option>15 دقیقه</option>
1272
+ <option>1 ساعت</option>
1273
+ <option>4 ساعت</option>
1274
+ </select>
1275
+ </div>
1276
+ </div>
1277
+ </div>
1278
+ </section>
1279
+
1280
+ <!-- Portfolio Section -->
1281
+ <section class="card animate-in" style="margin-top: 1.5rem;">
1282
+ <div class="card-header">
1283
+ <h3 class="card-title">سبد سرمایه‌گذاری</h3>
1284
+ </div>
1285
+
1286
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
1287
+ <div>
1288
+ <div class="portfolio-chart">
1289
+ <canvas id="portfolioChart"></canvas>
1290
+ </div>
1291
+ </div>
1292
+
1293
+ <div class="holdings-list">
1294
+ <div class="holding-item">
1295
+ <div class="holding-info">
1296
+ <div class="holding-icon" style="background: var(--gradient-1);">₿</div>
1297
+ <div class="holding-details">
1298
+ <h4>بیت‌کوین</h4>
1299
+ <span>BTC</span>
1300
+ </div>
1301
+ </div>
1302
+ <div class="holding-value">
1303
+ <div class="holding-usd">$28,234.50</div>
1304
+ <div class="holding-amount">0.589 BTC</div>
1305
+ </div>
1306
+ </div>
1307
+
1308
+ <div class="holding-item">
1309
+ <div class="holding-info">
1310
+ <div class="holding-icon" style="background: linear-gradient(135deg, #627eea 0%, #3c4f9e 100%);">Ξ</div>
1311
+ <div class="holding-details">
1312
+ <h4>اتریوم</h4>
1313
+ <span>ETH</span>
1314
+ </div>
1315
+ </div>
1316
+ <div class="holding-value">
1317
+ <div class="holding-usd">$12,839.45</div>
1318
+ <div class="holding-amount">5.0 ETH</div>
1319
+ </div>
1320
+ </div>
1321
+
1322
+ <div class="holding-item">
1323
+ <div class="holding-info">
1324
+ <div class="holding-icon" style="background: linear-gradient(135deg, #26a17b 0%, #1d8a6a 100%);">X</div>
1325
+ <div class="holding-details">
1326
+ <h4>سولانا</h4>
1327
+ <span>SOL</span>
1328
+ </div>
1329
+ </div>
1330
+ <div class="holding-value">
1331
+ <div class="holding-usd">$4,938.00</div>
1332
+ <div class="holding-amount">50 SOL</div>
1333
+ </div>
1334
+ </div>
1335
+
1336
+ <div class="holding-item">
1337
+ <div class="holding-info">
1338
+ <div class="holding-icon" style="background: linear-gradient(135deg, #f7931a 0%, #e07a1a 100%);">⁽ᵇ⁾</div>
1339
+ <div class="holding-details">
1340
+ <h4>بایننس کوین</h4>
1341
+ <span>BNB</span>
1342
+ </div>
1343
+ </div>
1344
+ <div class="holding-value">
1345
+ <div class="holding-usd">$1,880.70</div>
1346
+ <div class="holding-amount">6.0 BNB</div>
1347
+ </div>
1348
+ </div>
1349
+ </div>
1350
+ </div>
1351
+ </section>
1352
+
1353
+ <!-- News Section -->
1354
+ <section class="card animate-in" style="margin-top: 1.5rem;">
1355
+ <div class="card-header">
1356
+ <h3 class="card-title">اخبار بازار ارزهای دیجیتال</h3>
1357
+ </div>
1358
+
1359
+ <div class="news-list">
1360
+ <div class="news-item">
1361
+ <div