Hugging Face's logo

Spaces:
Re2906
/
anycoder-4c2ff1ef
Running

App Files Community
Re2906 commited on
Commit
6ff0487
·
verified ·
1 Parent(s): 4b8cf11

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1192 -19
index.html CHANGED
@@ -1,19 +1,1192 @@
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
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>TON Blockchain Platform - Mainnet</title>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link
11
+ href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap"
12
+ rel="stylesheet">
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
14
+ <style>
15
+ :root {
16
+ --ton-primary: #2979ff;
17
+ --ton-secondary: #1e3a8a;
18
+ --ton-success: #10b981;
19
+ --ton-warning: #f59e0b;
20
+ --ton-error: #ef4444;
21
+ --ton-dark: #0f172a;
22
+ --ton-glass: rgba(30, 41, 59, 0.7);
23
+ --ton-glass-border: rgba(148, 163, 184, 0.1);
24
+ --ton-card-bg: #1e293b;
25
+ --ton-card-border: #334155;
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ body {
35
+ font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
36
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
37
+ min-height: 100vh;
38
+ color: #f1f5f9;
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ .font-mono {
43
+ font-family: 'JetBrains Mono', monospace;
44
+ }
45
+
46
+ /* Header */
47
+ .header {
48
+ background: rgba(15, 23, 42, 0.9);
49
+ backdrop-filter: blur(20px);
50
+ border-bottom: 1px solid var(--ton-glass-border);
51
+ padding: 1rem 2rem;
52
+ position: sticky;
53
+ top: 0;
54
+ z-index: 100;
55
+ }
56
+
57
+ .header-content {
58
+ max-width: 1400px;
59
+ margin: 0 auto;
60
+ display: flex;
61
+ justify-content: space-between;
62
+ align-items: center;
63
+ flex-wrap: wrap;
64
+ gap: 1rem;
65
+ }
66
+
67
+ .logo {
68
+ display: flex;
69
+ align-items: center;
70
+ gap: 0.75rem;
71
+ }
72
+
73
+ .logo-icon {
74
+ width: 48px;
75
+ height: 48px;
76
+ background: linear-gradient(135deg, var(--ton-primary), var(--ton-success));
77
+ border-radius: 12px;
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ font-size: 1.5rem;
82
+ font-weight: bold;
83
+ }
84
+
85
+ .logo-text {
86
+ font-size: 1.5rem;
87
+ font-weight: 700;
88
+ background: linear-gradient(135deg, var(--ton-primary), var(--ton-success));
89
+ -webkit-background-clip: text;
90
+ -webkit-text-fill-color: transparent;
91
+ background-clip: text;
92
+ }
93
+
94
+ .built-with {
95
+ font-size: 0.75rem;
96
+ color: #94a3b8;
97
+ text-decoration: none;
98
+ transition: color 0.3s;
99
+ }
100
+
101
+ .built-with:hover {
102
+ color: var(--ton-primary);
103
+ }
104
+
105
+ .nav-links {
106
+ display: flex;
107
+ gap: 0.5rem;
108
+ flex-wrap: wrap;
109
+ }
110
+
111
+ .nav-link {
112
+ padding: 0.5rem 1rem;
113
+ border-radius: 8px;
114
+ color: #94a3b8;
115
+ text-decoration: none;
116
+ transition: all 0.3s;
117
+ font-weight: 500;
118
+ cursor: pointer;
119
+ }
120
+
121
+ .nav-link:hover,
122
+ .nav-link.active {
123
+ background: var(--ton-card-bg);
124
+ color: #f1f5f9;
125
+ }
126
+
127
+ .connect-btn {
128
+ background: linear-gradient(135deg, var(--ton-primary), var(--ton-secondary));
129
+ color: white;
130
+ border: none;
131
+ padding: 0.75rem 1.5rem;
132
+ border-radius: 12px;
133
+ font-weight: 600;
134
+ cursor: pointer;
135
+ transition: all 0.3s;
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 0.5rem;
139
+ }
140
+
141
+ .connect-btn:hover {
142
+ transform: translateY(-2px);
143
+ box-shadow: 0 10px 30px rgba(41, 121, 255, 0.3);
144
+ }
145
+
146
+ /* Main Container */
147
+ .main-container {
148
+ max-width: 1400px;
149
+ margin: 0 auto;
150
+ padding: 2rem;
151
+ }
152
+
153
+ /* Cards Grid */
154
+ .cards-grid {
155
+ display: grid;
156
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
157
+ gap: 1.5rem;
158
+ margin-bottom: 2rem;
159
+ }
160
+
161
+ .card {
162
+ background: var(--ton-glass);
163
+ backdrop-filter: blur(16px);
164
+ border: 1px solid var(--ton-glass-border);
165
+ border-radius: 16px;
166
+ padding: 1.5rem;
167
+ transition: all 0.3s;
168
+ }
169
+
170
+ .card:hover {
171
+ transform: translateY(-5px);
172
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
173
+ border-color: var(--ton-primary);
174
+ }
175
+
176
+ .card-header {
177
+ display: flex;
178
+ justify-content: space-between;
179
+ align-items: center;
180
+ margin-bottom: 1rem;
181
+ }
182
+
183
+ .card-title {
184
+ font-size: 1.1rem;
185
+ font-weight: 600;
186
+ display: flex;
187
+ align-items: center;
188
+ gap: 0.5rem;
189
+ }
190
+
191
+ .card-icon {
192
+ width: 40px;
193
+ height: 40px;
194
+ border-radius: 10px;
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: center;
198
+ font-size: 1.2rem;
199
+ }
200
+
201
+ .card-icon.blue {
202
+ background: rgba(41, 121, 255, 0.2);
203
+ color: var(--ton-primary);
204
+ }
205
+
206
+ .card-icon.green {
207
+ background: rgba(16, 185, 129, 0.2);
208
+ color: var(--ton-success);
209
+ }
210
+
211
+ .card-icon.yellow {
212
+ background: rgba(245, 158, 11, 0.2);
213
+ color: var(--ton-warning);
214
+ }
215
+
216
+ .card-icon.purple {
217
+ background: rgba(139, 92, 246, 0.2);
218
+ color: #8b5cf6;
219
+ }
220
+
221
+ /* Stats Cards */
222
+ .stats-value {
223
+ font-size: 2rem;
224
+ font-weight: 700;
225
+ margin: 0.5rem 0;
226
+ }
227
+
228
+ .stats-change {
229
+ display: flex;
230
+ align-items: center;
231
+ gap: 0.25rem;
232
+ font-size: 0.875rem;
233
+ }
234
+
235
+ .stats-change.positive {
236
+ color: var(--ton-success);
237
+ }
238
+
239
+ .stats-change.negative {
240
+ color: var(--ton-error);
241
+ }
242
+
243
+ /* Wallet Section */
244
+ .wallet-section {
245
+ background: linear-gradient(135deg, rgba(41, 121, 255, 0.1), rgba(16, 185, 129, 0.1));
246
+ border: 1px solid var(--ton-glass-border);
247
+ border-radius: 20px;
248
+ padding: 2rem;
249
+ margin-bottom: 2rem;
250
+ }
251
+
252
+ .wallet-balance {
253
+ text-align: center;
254
+ margin-bottom: 2rem;
255
+ }
256
+
257
+ .balance-label {
258
+ color: #94a3b8;
259
+ font-size: 0.9rem;
260
+ margin-bottom: 0.5rem;
261
+ }
262
+
263
+ .balance-value {
264
+ font-size: 3rem;
265
+ font-weight: 700;
266
+ background: linear-gradient(135deg, #fff, #94a3b8);
267
+ -webkit-background-clip: text;
268
+ -webkit-text-fill-color: transparent;
269
+ background-clip: text;
270
+ }
271
+
272
+ .balance-usd {
273
+ color: #94a3b8;
274
+ font-size: 1.1rem;
275
+ }
276
+
277
+ .wallet-address {
278
+ background: var(--ton-card-bg);
279
+ padding: 1rem;
280
+ border-radius: 12px;
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: space-between;
284
+ margin-bottom: 1.5rem;
285
+ gap: 1rem;
286
+ }
287
+
288
+ .address-text {
289
+ font-family: 'JetBrains Mono', monospace;
290
+ font-size: 0.85rem;
291
+ color: #94a3b8;
292
+ overflow: hidden;
293
+ text-overflow: ellipsis;
294
+ white-space: nowrap;
295
+ }
296
+
297
+ .copy-btn {
298
+ background: var(--ton-primary);
299
+ color: white;
300
+ border: none;
301
+ padding: 0.5rem 1rem;
302
+ border-radius: 8px;
303
+ cursor: pointer;
304
+ transition: all 0.3s;
305
+ white-space: nowrap;
306
+ }
307
+
308
+ .copy-btn:hover {
309
+ background: #1d4ed8;
310
+ }
311
+
312
+ .wallet-actions {
313
+ display: grid;
314
+ grid-template-columns: repeat(4, 1fr);
315
+ gap: 1rem;
316
+ }
317
+
318
+ .wallet-action {
319
+ background: var(--ton-card-bg);
320
+ border: 1px solid var(--ton-card-border);
321
+ border-radius: 12px;
322
+ padding: 1.5rem 1rem;
323
+ text-align: center;
324
+ cursor: pointer;
325
+ transition: all 0.3s;
326
+ }
327
+
328
+ .wallet-action:hover {
329
+ border-color: var(--ton-primary);
330
+ transform: translateY(-3px);
331
+ }
332
+
333
+ .wallet-action i {
334
+ font-size: 1.5rem;
335
+ margin-bottom: 0.5rem;
336
+ display: block;
337
+ }
338
+
339
+ .wallet-action span {
340
+ font-size: 0.9rem;
341
+ font-weight: 500;
342
+ }
343
+
344
+ /* Swap Section */
345
+ .swap-container {
346
+ background: var(--ton-card-bg);
347
+ border: 1px solid var(--ton-card-border);
348
+ border-radius: 20px;
349
+ padding: 1.5rem;
350
+ max-width: 480px;
351
+ margin: 0 auto 2rem;
352
+ }
353
+
354
+ .swap-input-group {
355
+ background: var(--ton-dark);
356
+ border-radius: 16px;
357
+ padding: 1rem;
358
+ margin-bottom: 0.5rem;
359
+ }
360
+
361
+ .swap-label {
362
+ display: flex;
363
+ justify-content: space-between;
364
+ margin-bottom: 0.5rem;
365
+ font-size: 0.85rem;
366
+ color: #94a3b8;
367
+ }
368
+
369
+ .swap-input-row {
370
+ display: flex;
371
+ align-items: center;
372
+ gap: 1rem;
373
+ }
374
+
375
+ .swap-input {
376
+ flex: 1;
377
+ background: transparent;
378
+ border: none;
379
+ font-size: 1.5rem;
380
+ font-weight: 600;
381
+ color: #f1f5f9;
382
+ outline: none;
383
+ }
384
+
385
+ .token-select {
386
+ display: flex;
387
+ align-items: center;
388
+ gap: 0.5rem;
389
+ background: var(--ton-card-bg);
390
+ padding: 0.5rem 1rem;
391
+ border-radius: 12px;
392
+ cursor: pointer;
393
+ transition: all 0.3s;
394
+ }
395
+
396
+ .token-select:hover {
397
+ background: var(--ton-card-border);
398
+ }
399
+
400
+ .token-icon {
401
+ width: 28px;
402
+ height: 28px;
403
+ border-radius: 50%;
404
+ background: linear-gradient(135deg, var(--ton-primary), var(--ton-secondary));
405
+ display: flex;
406
+ align-items: center;
407
+ justify-content: center;
408
+ font-size: 0.8rem;
409
+ font-weight: bold;
410
+ }
411
+
412
+ .swap-arrow {
413
+ display: flex;
414
+ justify-content: center;
415
+ margin: -0.5rem 0;
416
+ position: relative;
417
+ z-index: 1;
418
+ }
419
+
420
+ .swap-arrow-btn {
421
+ width: 40px;
422
+ height: 40px;
423
+ border-radius: 12px;
424
+ background: var(--ton-card-bg);
425
+ border: 4px solid var(--ton-dark);
426
+ display: flex;
427
+ align-items: center;
428
+ justify-content: center;
429
+ cursor: pointer;
430
+ transition: all 0.3s;
431
+ }
432
+
433
+ .swap-arrow-btn:hover {
434
+ background: var(--ton-primary);
435
+ transform: rotate(180deg);
436
+ }
437
+
438
+ .swap-info {
439
+ background: var(--ton-dark);
440
+ border-radius: 12px;
441
+ padding: 1rem;
442
+ margin-top: 1rem;
443
+ }
444
+
445
+ .swap-info-row {
446
+ display: flex;
447
+ justify-content: space-between;
448
+ padding: 0.5rem 0;
449
+ font-size: 0.9rem;
450
+ color: #94a3b8;
451
+ }
452
+
453
+ .swap-btn {
454
+ width: 100%;
455
+ background: linear-gradient(135deg, var(--ton-primary), var(--ton-secondary));
456
+ color: white;
457
+ border: none;
458
+ padding: 1rem;
459
+ border-radius: 12px;
460
+ font-size: 1.1rem;
461
+ font-weight: 600;
462
+ cursor: pointer;
463
+ transition: all 0.3s;
464
+ margin-top: 1rem;
465
+ }
466
+
467
+ .swap-btn:hover {
468
+ transform: translateY(-2px);
469
+ box-shadow: 0 10px 30px rgba(41, 121, 255, 0.3);
470
+ }
471
+
472
+ .swap-btn:disabled {
473
+ opacity: 0.5;
474
+ cursor: not-allowed;
475
+ transform: none;
476
+ }
477
+
478
+ /* Mining Section */
479
+ .mining-section {
480
+ background: var(--ton-glass);
481
+ border: 1px solid var(--ton-glass-border);
482
+ border-radius: 20px;
483
+ padding: 2rem;
484
+ margin-bottom: 2rem;
485
+ }
486
+
487
+ .mining-header {
488
+ display: flex;
489
+ justify-content: space-between;
490
+ align-items: center;
491
+ margin-bottom: 1.5rem;
492
+ flex-wrap: wrap;
493
+ gap: 1rem;
494
+ }
495
+
496
+ .mining-stats {
497
+ display: grid;
498
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
499
+ gap: 1rem;
500
+ margin-bottom: 1.5rem;
501
+ }
502
+
503
+ .mining-stat {
504
+ background: var(--ton-card-bg);
505
+ border-radius: 12px;
506
+ padding: 1rem;
507
+ text-align: center;
508
+ }
509
+
510
+ .mining-stat-label {
511
+ color: #94a3b8;
512
+ font-size: 0.85rem;
513
+ margin-bottom: 0.25rem;
514
+ }
515
+
516
+ .mining-stat-value {
517
+ font-size: 1.25rem;
518
+ font-weight: 600;
519
+ }
520
+
521
+ .mining-controls {
522
+ display: flex;
523
+ gap: 1rem;
524
+ flex-wrap: wrap;
525
+ }
526
+
527
+ .mining-btn {
528
+ flex: 1;
529
+ min-width: 120px;
530
+ padding: 1rem;
531
+ border-radius: 12px;
532
+ border: none;
533
+ font-weight: 600;
534
+ cursor: pointer;
535
+ transition: all 0.3s;
536
+ display: flex;
537
+ align-items: center;
538
+ justify-content: center;
539
+ gap: 0.5rem;
540
+ }
541
+
542
+ .mining-btn.start {
543
+ background: var(--ton-success);
544
+ color: white;
545
+ }
546
+
547
+ .mining-btn.pause {
548
+ background: var(--ton-warning);
549
+ color: white;
550
+ }
551
+
552
+ .mining-btn.stop {
553
+ background: var(--ton-error);
554
+ color: white;
555
+ }
556
+
557
+ .mining-btn:hover {
558
+ transform: translateY(-2px);
559
+ }
560
+
561
+ .mining-log {
562
+ background: var(--ton-dark);
563
+ border-radius: 12px;
564
+ padding: 1rem;
565
+ height: 200px;
566
+ overflow-y: auto;
567
+ font-family: 'JetBrains Mono', monospace;
568
+ font-size: 0.8rem;
569
+ margin-top: 1rem;
570
+ }
571
+
572
+ .log-entry {
573
+ padding: 0.25rem 0;
574
+ border-bottom: 1px solid var(--ton-card-border);
575
+ }
576
+
577
+ .log-time {
578
+ color: #64748b;
579
+ margin-left: 0.5rem;
580
+ }
581
+
582
+ .log-info {
583
+ color: #a5b4fc;
584
+ }
585
+
586
+ .log-success {
587
+ color: #6ee7b7;
588
+ }
589
+
590
+ .log-warning {
591
+ color: #fcd34d;
592
+ }
593
+
594
+ .log-error {
595
+ color: #fca5a5;
596
+ }
597
+
598
+ /* Transactions */
599
+ .transactions-section {
600
+ background: var(--ton-glass);
601
+ border: 1px solid var(--ton-glass-border);
602
+ border-radius: 20px;
603
+ padding: 2rem;
604
+ margin-bottom: 2rem;
605
+ }
606
+
607
+ .transactions-table {
608
+ width: 100%;
609
+ border-collapse: collapse;
610
+ }
611
+
612
+ .transactions-table th {
613
+ text-align: right;
614
+ padding: 1rem;
615
+ color: #94a3b8;
616
+ font-weight: 500;
617
+ border-bottom: 1px solid var(--ton-card-border);
618
+ }
619
+
620
+ .transactions-table td {
621
+ padding: 1rem;
622
+ border-bottom: 1px solid var(--ton-card-border);
623
+ }
624
+
625
+ .transactions-table tr:hover {
626
+ background: rgba(30, 41, 59, 0.3);
627
+ }
628
+
629
+ .tx-type {
630
+ display: inline-flex;
631
+ align-items: center;
632
+ gap: 0.5rem;
633
+ padding: 0.25rem 0.75rem;
634
+ border-radius: 20px;
635
+ font-size: 0.85rem;
636
+ font-weight: 500;
637
+ }
638
+
639
+ .tx-type.send {
640
+ background: rgba(239, 68, 68, 0.15);
641
+ color: var(--ton-error);
642
+ }
643
+
644
+ .tx-type.receive {
645
+ background: rgba(16, 185, 129, 0.15);
646
+ color: var(--ton-success);
647
+ }
648
+
649
+ .tx-type.swap {
650
+ background: rgba(139, 92, 246, 0.15);
651
+ color: #8b5cf6;
652
+ }
653
+
654
+ .tx-hash {
655
+ font-family: 'JetBrains Mono', monospace;
656
+ font-size: 0.8rem;
657
+ color: var(--ton-primary);
658
+ cursor: pointer;
659
+ }
660
+
661
+ .tx-hash:hover {
662
+ text-decoration: underline;
663
+ }
664
+
665
+ /* Chart */
666
+ .chart-container {
667
+ height: 200px;
668
+ display: flex;
669
+ align-items: flex-end;
670
+ gap: 4px;
671
+ padding: 1rem;
672
+ background: var(--ton-dark);
673
+ border-radius: 12px;
674
+ }
675
+
676
+ .chart-bar {
677
+ flex: 1;
678
+ background: linear-gradient(to top, var(--ton-primary), var(--ton-success));
679
+ border-radius: 4px 4px 0 0;
680
+ transition: all 0.5s;
681
+ cursor: pointer;
682
+ position: relative;
683
+ }
684
+
685
+ .chart-bar:hover {
686
+ opacity: 0.8;
687
+ }
688
+
689
+ .chart-bar:hover::after {
690
+ content: attr(data-value);
691
+ position: absolute;
692
+ top: -25px;
693
+ left: 50%;
694
+ transform: translateX(-50%);
695
+ background: var(--ton-card-bg);
696
+ padding: 0.25rem 0.5rem;
697
+ border-radius: 4px;
698
+ font-size: 0.75rem;
699
+ white-space: nowrap;
700
+ }
701
+
702
+ /* Modal */
703
+ .modal {
704
+ display: none;
705
+ position: fixed;
706
+ top: 0;
707
+ left: 0;
708
+ width: 100%;
709
+ height: 100%;
710
+ background: rgba(0, 0, 0, 0.8);
711
+ z-index: 1000;
712
+ align-items: center;
713
+ justify-content: center;
714
+ padding: 1rem;
715
+ }
716
+
717
+ .modal.show {
718
+ display: flex;
719
+ }
720
+
721
+ .modal-content {
722
+ background: var(--ton-dark);
723
+ border: 1px solid var(--ton-card-border);
724
+ border-radius: 20px;
725
+ width: 100%;
726
+ max-width: 500px;
727
+ max-height: 90vh;
728
+ overflow-y: auto;
729
+ }
730
+
731
+ .modal-header {
732
+ display: flex;
733
+ justify-content: space-between;
734
+ align-items: center;
735
+ padding: 1.5rem;
736
+ border-bottom: 1px solid var(--ton-card-border);
737
+ }
738
+
739
+ .modal-title {
740
+ font-size: 1.25rem;
741
+ font-weight: 600;
742
+ }
743
+
744
+ .modal-close {
745
+ width: 36px;
746
+ height: 36px;
747
+ border-radius: 50%;
748
+ background: var(--ton-card-bg);
749
+ border: none;
750
+ color: #94a3b8;
751
+ cursor: pointer;
752
+ display: flex;
753
+ align-items: center;
754
+ justify-content: center;
755
+ transition: all 0.3s;
756
+ }
757
+
758
+ .modal-close:hover {
759
+ background: var(--ton-card-border);
760
+ color: #f1f5f9;
761
+ }
762
+
763
+ .modal-body {
764
+ padding: 1.5rem;
765
+ }
766
+
767
+ /* Network Indicator */
768
+ .network-indicator {
769
+ position: fixed;
770
+ bottom: 20px;
771
+ right: 20px;
772
+ z-index: 100;
773
+ display: flex;
774
+ align-items: center;
775
+ gap: 8px;
776
+ padding: 8px 16px;
777
+ background: rgba(15, 23, 42, 0.9);
778
+ backdrop-filter: blur(10px);
779
+ border-radius: 30px;
780
+ border: 1px solid var(--ton-glass-border);
781
+ }
782
+
783
+ .status-dot {
784
+ width: 10px;
785
+ height: 10px;
786
+ border-radius: 50%;
787
+ background: var(--ton-success);
788
+ animation: pulse 2s infinite;
789
+ }
790
+
791
+ @keyframes pulse {
792
+
793
+ 0%,
794
+ 100% {
795
+ opacity: 1;
796
+ }
797
+
798
+ 50% {
799
+ opacity: 0.5;
800
+ }
801
+ }
802
+
803
+ /* Mining Status */
804
+ .mining-status-indicator {
805
+ position: fixed;
806
+ bottom: 20px;
807
+ left: 20px;
808
+ z-index: 100;
809
+ display: flex;
810
+ align-items: center;
811
+ gap: 8px;
812
+ padding: 8px 16px;
813
+ background: rgba(15, 23, 42, 0.9);
814
+ backdrop-filter: blur(10px);
815
+ border-radius: 30px;
816
+ border: 1px solid var(--ton-glass-border);
817
+ }
818
+
819
+ /* Toast Notifications */
820
+ .toast-container {
821
+ position: fixed;
822
+ top: 20px;
823
+ left: 20px;
824
+ z-index: 1000;
825
+ display: flex;
826
+ flex-direction: column;
827
+ gap: 10px;
828
+ }
829
+
830
+ .toast {
831
+ background: rgba(15, 23, 42, 0.95);
832
+ backdrop-filter: blur(10px);
833
+ border-radius: 12px;
834
+ padding: 1rem 1.5rem;
835
+ display: flex;
836
+ align-items: center;
837
+ gap: 12px;
838
+ animation: slideIn 0.3s ease;
839
+ border: 1px solid var(--ton-glass-border);
840
+ max-width: 350px;
841
+ }
842
+
843
+ .toast.success {
844
+ border-left: 4px solid var(--ton-success);
845
+ }
846
+
847
+ .toast.error {
848
+ border-left: 4px solid var(--ton-error);
849
+ }
850
+
851
+ .toast.warning {
852
+ border-left: 4px solid var(--ton-warning);
853
+ }
854
+
855
+ @keyframes slideIn {
856
+ from {
857
+ transform: translateX(-100%);
858
+ opacity: 0;
859
+ }
860
+
861
+ to {
862
+ transform: translateX(0);
863
+ opacity: 1;
864
+ }
865
+ }
866
+
867
+ /* Responsive */
868
+ @media (max-width: 768px) {
869
+ .header-content {
870
+ flex-direction: column;
871
+ }
872
+
873
+ .nav-links {
874
+ order: 3;
875
+ width: 100%;
876
+ justify-content: center;
877
+ }
878
+
879
+ .wallet-actions {
880
+ grid-template-columns: repeat(2, 1fr);
881
+ }
882
+
883
+ .balance-value {
884
+ font-size: 2rem;
885
+ }
886
+
887
+ .transactions-table {
888
+ display: block;
889
+ overflow-x: auto;
890
+ }
891
+
892
+ .cards-grid {
893
+ grid-template-columns: 1fr;
894
+ }
895
+ }
896
+
897
+ /* Scrollbar */
898
+ ::-webkit-scrollbar {
899
+ width: 8px;
900
+ height: 8px;
901
+ }
902
+
903
+ ::-webkit-scrollbar-track {
904
+ background: var(--ton-card-bg);
905
+ border-radius: 4px;
906
+ }
907
+
908
+ ::-webkit-scrollbar-thumb {
909
+ background: var(--ton-card-border);
910
+ border-radius: 4px;
911
+ }
912
+
913
+ ::-webkit-scrollbar-thumb:hover {
914
+ background: #64748b;
915
+ }
916
+
917
+ /* Input Styles */
918
+ .input {
919
+ width: 100%;
920
+ padding: 12px 16px;
921
+ background: var(--ton-card-bg);
922
+ border: 1px solid var(--ton-card-border);
923
+ border-radius: 12px;
924
+ color: #f1f5f9;
925
+ font-size: 1rem;
926
+ transition: all 0.3s;
927
+ }
928
+
929
+ .input:focus {
930
+ outline: none;
931
+ border-color: var(--ton-primary);
932
+ box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.2);
933
+ }
934
+
935
+ .form-group {
936
+ margin-bottom: 1rem;
937
+ }
938
+
939
+ .form-label {
940
+ display: block;
941
+ margin-bottom: 0.5rem;
942
+ color: #94a3b8;
943
+ font-size: 0.9rem;
944
+ }
945
+
946
+ /* Token Badges */
947
+ .token-badge {
948
+ display: inline-flex;
949
+ align-items: center;
950
+ gap: 4px;
951
+ padding: 4px 10px;
952
+ border-radius: 20px;
953
+ font-size: 0.8rem;
954
+ font-weight: 500;
955
+ }
956
+
957
+ .token-badge.ton {
958
+ background: rgba(41, 121, 255, 0.15);
959
+ color: var(--ton-primary);
960
+ }
961
+
962
+ .token-badge.usdt {
963
+ background: rgba(16, 185, 129, 0.15);
964
+ color: var(--ton-success);
965
+ }
966
+
967
+ .section-title {
968
+ font-size: 1.25rem;
969
+ font-weight: 600;
970
+ margin-bottom: 1rem;
971
+ display: flex;
972
+ align-items: center;
973
+ gap: 0.5rem;
974
+ }
975
+ </style>
976
+ </head>
977
+
978
+ <body>
979
+ <!-- Header -->
980
+ <header class="header">
981
+ <div class="header-content">
982
+ <div class="logo">
983
+ <div class="logo-icon">
984
+ <i class="fas fa-gem"></i>
985
+ </div>
986
+ <div>
987
+ <div class="logo-text">TON Platform</div>
988
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built
989
+ with anycoder</a>
990
+ </div>
991
+ </div>
992
+
993
+ <nav class="nav-links">
994
+ <a class="nav-link active" onclick="showSection('dashboard')">
995
+ <i class="fas fa-home"></i> داشبورد
996
+ </a>
997
+ <a class="nav-link" onclick="showSection('wallet')">
998
+ <i class="fas fa-wallet"></i> کیف پول
999
+ </a>
1000
+ <a class="nav-link" onclick="showSection('swap')">
1001
+ <i class="fas fa-exchange-alt"></i> تبادل
1002
+ </a>
1003
+ <a class="nav-link" onclick="showSection('mining')">
1004
+ <i class="fas fa-hammer"></i> ماینینگ
1005
+ </a>
1006
+ <a class="nav-link" onclick="showSection('transactions')">
1007
+ <i class="fas fa-history"></i> تراکنش‌ها
1008
+ </a>
1009
+ </nav>
1010
+
1011
+ <button class="connect-btn" onclick="toggleWalletConnect()">
1012
+ <i class="fas fa-link"></i>
1013
+ <span id="connectBtnText">اتصال کیف پول</span>
1014
+ </button>
1015
+ </div>
1016
+ </header>
1017
+
1018
+ <!-- Main Container -->
1019
+ <main class="main-container">
1020
+ <!-- Dashboard Section -->
1021
+ <section id="dashboard-section">
1022
+ <!-- Stats Cards -->
1023
+ <div class="cards-grid">
1024
+ <div class="card">
1025
+ <div class="card-header">
1026
+ <div class="card-title">
1027
+ <div class="card-icon blue">
1028
+ <i class="fas fa-coins"></i>
1029
+ </div>
1030
+ قیمت TON
1031
+ </div>
1032
+ </div>
1033
+ <div class="stats-value">$<span id="tonPrice">5.42</span></div>
1034
+ <div class="stats-change positive">
1035
+ <i class="fas fa-arrow-up"></i>
1036
+ <span>+3.2%</span>
1037
+ </div>
1038
+ </div>
1039
+
1040
+ <div class="card">
1041
+ <div class="card-header">
1042
+ <div class="card-title">
1043
+ <div class="card-icon green">
1044
+ <i class="fas fa-chart-line"></i>
1045
+ </div>
1046
+ حجم معاملات ۲۴ ساعته
1047
+ </div>
1048
+ </div>
1049
+ <div class="stats-value">$<span id="volume24h">142.5M</span></div>
1050
+ <div class="stats-change positive">
1051
+ <i class="fas fa-arrow-up"></i>
1052
+ <span>+12.8%</span>
1053
+ </div>
1054
+ </div>
1055
+
1056
+ <div class="card">
1057
+ <div class="card-header">
1058
+ <div class="card-title">
1059
+ <div class="card-icon yellow">
1060
+ <i class="fas fa-network-wired"></i>
1061
+ </div>
1062
+ تراکنش‌های شبکه
1063
+ </div>
1064
+ </div>
1065
+ <div class="stats-value"><span id="networkTx">1.2M</span></div>
1066
+ <div class="stats-change positive">
1067
+ <i class="fas fa-arrow-up"></i>
1068
+ <span>+5.4%</span>
1069
+ </div>
1070
+ </div>
1071
+
1072
+ <div class="card">
1073
+ <div class="card-header">
1074
+ <div class="card-title">
1075
+ <div class="card-icon purple">
1076
+ <i class="fas fa-users"></i>
1077
+ </div>
1078
+ کاربران فعال
1079
+ </div>
1080
+ </div>
1081
+ <div class="stats-value"><span id="activeUsers">845K</span></div>
1082
+ <div class="stats-change positive">
1083
+ <i class="fas fa-arrow-up"></i>
1084
+ <span>+8.1%</span>
1085
+ </div>
1086
+ </div>
1087
+ </div>
1088
+
1089
+ <!-- Price Chart -->
1090
+ <div class="card" style="margin-bottom: 2rem;">
1091
+ <div class="card-header">
1092
+ <div class="card-title">
1093
+ <i class="fas fa-chart-area"></i>
1094
+ نمودار قیمت TON (۷ روز گذشته)
1095
+ </div>
1096
+ </div>
1097
+ <div class="chart-container" id="priceChart"></div>
1098
+ </div>
1099
+ </section>
1100
+
1101
+ <!-- Wallet Section -->
1102
+ <section id="wallet-section" style="display: none;">
1103
+ <div class="wallet-section">
1104
+ <div class="wallet-balance">
1105
+ <div class="balance-label">موجودی کل</div>
1106
+ <div class="balance-value" id="totalBalance">0.00 TON</div>
1107
+ <div class="balance-usd">≈ $<span id="balanceUsd">0.00</span></div>
1108
+ </div>
1109
+
1110
+ <div class="wallet-address" id="walletAddressContainer" style="display: none;">
1111
+ <span class="address-text" id="walletAddress">EQD...abc123</span>
1112
+ <button class="copy-btn" onclick="copyAddress()">
1113
+ <i class="fas fa-copy"></i> کپی
1114
+ </button>
1115
+ </div>
1116
+
1117
+ <div class="wallet-actions">
1118
+ <div class="wallet-action" onclick="openModal('sendModal')">
1119
+ <i class="fas fa-paper-plane" style="color: var(--ton-primary);"></i>
1120
+ <span>ارسال</span>
1121
+ </div>
1122
+ <div class="wallet-action" onclick="openModal('receiveModal')">
1123
+ <i class="fas fa-qrcode" style="color: var(--ton-success);"></i>
1124
+ <span>دریافت</span>
1125
+ </div>
1126
+ <div class="wallet-action" onclick="showSection('swap')">
1127
+ <i class="fas fa-exchange-alt" style="color: #8b5cf6;"></i>
1128
+ <span>تبادل</span>
1129
+ </div>
1130
+ <div class="wallet-action" onclick="showSection('transactions')">
1131
+ <i class="fas fa-history" style="color: var(--ton-warning);"></i>
1132
+ <span>تاریخچه</span>
1133
+ </div>
1134
+ </div>
1135
+ </div>
1136
+
1137
+ <!-- Token List -->
1138
+ <div class="card">
1139
+ <div class="card-header">
1140
+ <div class="card-title">
1141
+ <i class="fas fa-coins"></i>
1142
+ دارایی‌های شما
1143
+ </div>
1144
+ </div>
1145
+ <div id="tokenList">
1146
+ <div
1147
+ style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid var(--ton-card-border);">
1148
+ <div style="display: flex; align-items: center; gap: 12px;">
1149
+ <div class="token-icon">T</div>
1150
+ <div>
1151
+ <div style="font-weight: 600;">TON</div>
1152
+ <div style="color: #94a3b8; font-size: 0.85rem;">Toncoin</div>
1153
+ </div>
1154
+ </div>
1155
+ <div style="text-align: left;">
1156
+ <div style="font-weight: 600;">0.00</div>
1157
+ <div style="color: #94a3b8; font-size: 0.85rem;">$0.00</div>
1158
+ </div>
1159
+ </div>
1160
+ <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem;">
1161
+ <div style="display: flex; align-items: center; gap: 12px;">
1162
+ <div class="token-icon" style="background: linear-gradient(135deg, #10b981, #059669);">U
1163
+ </div>
1164
+ <div>
1165
+ <div style="font-weight: 600;">USDT</div>
1166
+ <div style="color: #94a3b8; font-size: 0.85rem;">Tether USD</div>
1167
+ </div>
1168
+ </div>
1169
+ <div style="text-align: left;">
1170
+ <div style="font-weight: 600;">0.00</div>
1171
+ <div style="color: #94a3b8; font-size: 0.85rem;">$0.00</div>
1172
+ </div>
1173
+ </div>
1174
+ </div>
1175
+ </div>
1176
+ </section>
1177
+
1178
+ <!-- Swap Section -->
1179
+ <section id="swap-section" style="display: none;">
1180
+ <h2 class="section-title" style="text-align: center; margin-bottom: 2rem;">
1181
+ <i class="fas fa-exchange-alt"></i>
1182
+ تبادل توکن
1183
+ </h2>
1184
+
1185
+ <div class="swap-container">
1186
+ <div class="swap-input-group">
1187
+ <div class="swap-label">
1188
+ <span>از</span>
1189
+ <span>موجودی: <span id="fromBalance">0.00</span></span>
1190
+ </div>
1191
+ <div class="swap-input-row">
1192
+ <input type="number" class="swap-input" id="fromAmount" placeholder="0.00" oninput="calculateSwap()