Re2906 commited on
Commit
0ce65ae
·
verified ·
1 Parent(s): c418ae2

Upload folder using huggingface_hub

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