Hugging Face's logo

Spaces:
Re2906
/
anycoder-7a4e4804
Running

App Files Community
Re2906 commited on
Commit
c0ec165
·
verified ·
1 Parent(s): 9b7a01f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1155 -1054
index.html CHANGED
@@ -1,1076 +1,1177 @@
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 Advanced Project Builder v3.0.0</title>
7
- <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
8
- <style>
9
- * {
10
- margin: 0;
11
- padding: 0;
12
- box-sizing: border-box;
13
- }
14
-
15
- :root {
16
- --primary: #0088cc;
17
- --primary-dark: #006699;
18
- --secondary: #22c55e;
19
- --danger: #ef4444;
20
- --warning: #f59e0b;
21
- --dark: #0f172a;
22
- --dark-lighter: #1e293b;
23
- --dark-card: #334155;
24
- --text-primary: #f1f5f9;
25
- --text-secondary: #94a3b8;
26
- --border: #475569;
27
- --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
28
- --ton-gradient: linear-gradient(135deg, #0088cc 0%, #00a8ff 100%);
29
- }
30
-
31
- body {
32
- font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
33
- background: var(--dark);
34
- color: var(--text-primary);
35
- line-height: 1.6;
36
- min-height: 100vh;
37
- overflow-x: hidden;
38
- }
39
-
40
- body::-webkit-scrollbar {
41
- width: 8px;
42
- }
43
-
44
- body::-webkit-scrollbar-track {
45
- background: var(--dark-lighter);
46
- }
47
-
48
- body::-webkit-scrollbar-thumb {
49
- background: var(--primary);
50
- border-radius: 4px;
51
- }
52
-
53
- /* Header */
54
- header {
55
- background: var(--dark-lighter);
56
- border-bottom: 1px solid var(--border);
57
- padding: 1rem 2rem;
58
- position: sticky;
59
- top: 0;
60
- z-index: 100;
61
- backdrop-filter: blur(10px);
62
- background: rgba(30, 41, 59, 0.95);
63
- }
64
-
65
- .header-content {
66
- max-width: 1400px;
67
- margin: 0 auto;
68
- display: flex;
69
- justify-content: space-between;
70
- align-items: center;
71
- flex-wrap: wrap;
72
- gap: 1rem;
73
- }
74
-
75
- .logo {
76
- display: flex;
77
- align-items: center;
78
- gap: 1rem;
79
- font-size: 1.5rem;
80
- font-weight: bold;
81
- color: var(--primary);
82
- }
83
-
84
- .logo i {
85
- font-size: 2rem;
86
- background: var(--ton-gradient);
87
- -webkit-background-clip: text;
88
- -webkit-text-fill-color: transparent;
89
- }
90
-
91
- .nav-buttons {
92
- display: flex;
93
- gap: 1rem;
94
- flex-wrap: wrap;
95
- }
96
-
97
- .btn {
98
- padding: 0.5rem 1.5rem;
99
- border: none;
100
- border-radius: 8px;
101
- font-size: 1rem;
102
- cursor: pointer;
103
- transition: all 0.3s ease;
104
- display: inline-flex;
105
- align-items: center;
106
- gap: 0.5rem;
107
- text-decoration: none;
108
- font-weight: 500;
109
- }
110
-
111
- .btn-primary {
112
- background: var(--ton-gradient);
113
- color: white;
114
- }
115
-
116
- .btn-primary:hover {
117
- transform: translateY(-2px);
118
- box-shadow: 0 10px 20px rgba(0, 136, 204, 0.3);
119
- }
120
-
121
- .btn-secondary {
122
- background: transparent;
123
- color: var(--text-primary);
124
- border: 1px solid var(--border);
125
- }
126
-
127
- .btn-secondary:hover {
128
- background: var(--dark-card);
129
- border-color: var(--primary);
130
- }
131
-
132
- /* Main Container */
133
- .container {
134
- max-width: 1400px;
135
- margin: 2rem auto;
136
- padding: 0 2rem;
137
- }
138
-
139
- /* Hero Section */
140
- .hero {
141
- background: var(--ton-gradient);
142
- border-radius: 20px;
143
- padding: 3rem;
144
- margin-bottom: 3rem;
145
- position: relative;
146
- overflow: hidden;
147
- }
148
-
149
- .hero::before {
150
- content: '';
151
- position: absolute;
152
- top: -50%;
153
- right: -50%;
154
- width: 200%;
155
- height: 200%;
156
- background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
157
- animation: float 20s infinite linear;
158
- }
159
-
160
- @keyframes float {
161
- 0% { transform: rotate(0deg); }
162
- 100% { transform: rotate(360deg); }
163
- }
164
-
165
- .hero-content {
166
- position: relative;
167
- z-index: 1;
168
- }
169
-
170
- .hero h1 {
171
- font-size: 3rem;
172
- margin-bottom: 1rem;
173
- text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
174
- }
175
-
176
- .hero .version {
177
- display: inline-block;
178
- background: rgba(255,255,255,0.2);
179
- padding: 0.25rem 1rem;
180
- border-radius: 20px;
181
- font-size: 0.9rem;
182
- margin-bottom: 1rem;
183
- }
184
-
185
- .hero .description {
186
- font-size: 1.2rem;
187
- margin-bottom: 2rem;
188
- opacity: 0.95;
189
- }
190
-
191
- .hero-buttons {
192
- display: flex;
193
- gap: 1rem;
194
- flex-wrap: wrap;
195
- }
196
-
197
- /* Security Status */
198
- .security-status {
199
- background: var(--dark-lighter);
200
- border-radius: 15px;
201
- padding: 2rem;
202
- margin-bottom: 2rem;
203
- border: 1px solid var(--border);
204
- }
205
-
206
- .security-header {
207
- display: flex;
208
- align-items: center;
209
- gap: 1rem;
210
- margin-bottom: 1.5rem;
211
- }
212
-
213
- .security-header i {
214
- font-size: 2rem;
215
- color: var(--secondary);
216
- }
217
-
218
- .security-features {
219
- display: grid;
220
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
221
- gap: 1rem;
222
- }
223
-
224
- .security-feature {
225
- display: flex;
226
- align-items: center;
227
- gap: 0.75rem;
228
- padding: 0.75rem;
229
- background: var(--dark);
230
- border-radius: 8px;
231
- transition: all 0.3s ease;
232
- }
233
-
234
- .security-feature:hover {
235
- transform: translateX(5px);
236
- background: var(--dark-card);
237
- }
238
-
239
- .security-feature i {
240
- color: var(--secondary);
241
- font-size: 1.2rem;
242
- }
243
-
244
- /* Dashboard Grid */
245
- .dashboard-grid {
246
- display: grid;
247
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
248
- gap: 2rem;
249
- margin-bottom: 3rem;
250
- }
251
-
252
- .card {
253
- background: var(--dark-lighter);
254
- border-radius: 15px;
255
- padding: 1.5rem;
256
- border: 1px solid var(--border);
257
- transition: all 0.3s ease;
258
- position: relative;
259
- overflow: hidden;
260
- }
261
-
262
- .card::before {
263
- content: '';
264
- position: absolute;
265
- top: 0;
266
- left: 0;
267
- width: 100%;
268
- height: 3px;
269
- background: var(--ton-gradient);
270
- transform: scaleX(0);
271
- transition: transform 0.3s ease;
272
- }
273
-
274
- .card:hover::before {
275
- transform: scaleX(1);
276
- }
277
-
278
- .card:hover {
279
- transform: translateY(-5px);
280
- box-shadow: 0 10px 30px rgba(0,0,0,0.3);
281
- }
282
-
283
- .card-header {
284
- display: flex;
285
- align-items: center;
286
- gap: 1rem;
287
- margin-bottom: 1rem;
288
- }
289
-
290
- .card-icon {
291
- width: 50px;
292
- height: 50px;
293
- border-radius: 12px;
294
- display: flex;
295
- align-items: center;
296
- justify-content: center;
297
- font-size: 1.5rem;
298
- }
299
-
300
- .card-icon.tools {
301
- background: rgba(34, 197, 94, 0.2);
302
- color: var(--secondary);
303
- }
304
-
305
- .card-icon.deps {
306
- background: rgba(245, 158, 11, 0.2);
307
- color: var(--warning);
308
- }
309
-
310
- .card-icon.network {
311
- background: rgba(0, 136, 204, 0.2);
312
- color: var(--primary);
313
- }
314
-
315
- .card-icon.wallet {
316
- background: rgba(239, 68, 68, 0.2);
317
- color: var(--danger);
318
- }
319
-
320
- .card-title {
321
- font-size: 1.2rem;
322
- font-weight: 600;
323
- }
324
-
325
- .card-content {
326
- color: var(--text-secondary);
327
- }
328
-
329
- .progress-bar {
330
- width: 100%;
331
- height: 8px;
332
- background: var(--dark);
333
- border-radius: 4px;
334
- overflow: hidden;
335
- margin-top: 1rem;
336
- }
337
-
338
- .progress-fill {
339
- height: 100%;
340
- background: var(--ton-gradient);
341
- border-radius: 4px;
342
- transition: width 1s ease;
343
- animation: progressAnimation 2s ease-in-out;
344
- }
345
-
346
- @keyframes progressAnimation {
347
- 0% { width: 0; }
348
- }
349
-
350
- /* Command Terminal */
351
- .terminal {
352
- background: #0a0a0a;
353
- border-radius: 10px;
354
- padding: 1rem;
355
- font-family: 'Courier New', monospace;
356
- margin: 1rem 0;
357
- border: 1px solid var(--border);
358
- }
359
-
360
- .terminal-header {
361
- display: flex;
362
- gap: 0.5rem;
363
- margin-bottom: 1rem;
364
- }
365
-
366
- .terminal-dot {
367
- width: 12px;
368
- height: 12px;
369
- border-radius: 50%;
370
- }
371
-
372
- .terminal-dot.red { background: #ff5f56; }
373
- .terminal-dot.yellow { background: #ffbd2e; }
374
- .terminal-dot.green { background: #27c93f; }
375
-
376
- .terminal-content {
377
- color: #0f0;
378
- font-size: 0.9rem;
379
- line-height: 1.4;
380
- }
381
-
382
- .terminal-line {
383
- margin: 0.25rem 0;
384
- }
385
-
386
- .terminal-cursor {
387
- display: inline-block;
388
- width: 8px;
389
- height: 16px;
390
- background: #0f0;
391
- animation: blink 1s infinite;
392
- }
393
-
394
- @keyframes blink {
395
- 0%, 50% { opacity: 1; }
396
- 51%, 100% { opacity: 0; }
397
- }
398
-
399
- /* Installation Steps */
400
- .steps {
401
- display: grid;
402
- gap: 1rem;
403
- }
404
-
405
- .step {
406
- display: flex;
407
- gap: 1rem;
408
- align-items: flex-start;
409
- padding: 1rem;
410
- background: var(--dark);
411
- border-radius: 10px;
412
- border: 1px solid var(--border);
413
- transition: all 0.3s ease;
414
- }
415
-
416
- .step:hover {
417
- border-color: var(--primary);
418
- transform: translateX(10px);
419
- }
420
-
421
- .step-number {
422
- width: 30px;
423
- height: 30px;
424
- border-radius: 50%;
425
- background: var(--ton-gradient);
426
- display: flex;
427
- align-items: center;
428
- justify-content: center;
429
- font-weight: bold;
430
- flex-shrink: 0;
431
- }
432
-
433
- .step-content h3 {
434
- color: var(--text-primary);
435
- margin-bottom: 0.5rem;
436
- }
437
-
438
- .step-content p {
439
- color: var(--text-secondary);
440
- font-size: 0.9rem;
441
- }
442
-
443
- /* Footer */
444
- footer {
445
- background: var(--dark-lighter);
446
- border-top: 1px solid var(--border);
447
- padding: 2rem;
448
- margin-top: 4rem;
449
- text-align: center;
450
- }
451
-
452
- .footer-content {
453
- max-width: 1400px;
454
- margin: 0 auto;
455
- }
456
-
457
- .footer-links {
458
- display: flex;
459
- justify-content: center;
460
- gap: 2rem;
461
- margin-bottom: 1rem;
462
- flex-wrap: wrap;
463
- }
464
-
465
- .footer-links a {
466
- color: var(--text-secondary);
467
- text-decoration: none;
468
- transition: color 0.3s ease;
469
- }
470
-
471
- .footer-links a:hover {
472
- color: var(--primary);
473
- }
474
-
475
- /* Responsive Design */
476
- @media (max-width: 768px) {
477
- .hero h1 {
478
- font-size: 2rem;
479
- }
480
-
481
- .hero {
482
- padding: 2rem 1.5rem;
483
- }
484
-
485
- .container {
486
- padding: 0 1rem;
487
- }
488
-
489
- .dashboard-grid {
490
- grid-template-columns: 1fr;
491
- }
492
-
493
- .security-features {
494
- grid-template-columns: 1fr;
495
- }
496
-
497
- .header-content {
498
- flex-direction: column;
499
- text-align: center;
500
- }
501
- }
502
-
503
- /* Loading Animation */
504
- .loading {
505
- display: inline-block;
506
- width: 20px;
507
- height: 20px;
508
- border: 3px solid var(--border);
509
- border-top-color: var(--primary);
510
- border-radius: 50%;
511
- animation: spin 1s linear infinite;
512
- }
513
-
514
- @keyframes spin {
515
- 0% { transform: rotate(0deg); }
516
- 100% { transform: rotate(360deg); }
517
- }
518
-
519
- /* Tabs */
520
- .tabs {
521
- display: flex;
522
- gap: 0.5rem;
523
- margin-bottom: 2rem;
524
- border-bottom: 1px solid var(--border);
525
- overflow-x: auto;
526
- }
527
-
528
- .tab {
529
- padding: 1rem 1.5rem;
530
- background: transparent;
531
- border: none;
532
- color: var(--text-secondary);
533
- cursor: pointer;
534
- transition: all 0.3s ease;
535
- white-space: nowrap;
536
- position: relative;
537
- }
538
-
539
- .tab:hover {
540
- color: var(--text-primary);
541
- }
542
-
543
- .tab.active {
544
- color: var(--primary);
545
- }
546
-
547
- .tab.active::after {
548
- content: '';
549
- position: absolute;
550
- bottom: -1px;
551
- left: 0;
552
- width: 100%;
553
- height: 2px;
554
- background: var(--primary);
555
- }
556
-
557
- .tab-content {
558
- display: none;
559
- animation: fadeIn 0.5s ease;
560
- }
561
-
562
- .tab-content.active {
563
- display: block;
564
- }
565
-
566
- @keyframes fadeIn {
567
- from { opacity: 0; transform: translateY(10px); }
568
- to { opacity: 1; transform: translateY(0); }
569
- }
570
-
571
- /* Status Badge */
572
- .status-badge {
573
- display: inline-flex;
574
- align-items: center;
575
- gap: 0.5rem;
576
- padding: 0.25rem 0.75rem;
577
- border-radius: 20px;
578
- font-size: 0.85rem;
579
- font-weight: 500;
580
- }
581
-
582
- .status-badge.active {
583
- background: rgba(34, 197, 94, 0.2);
584
- color: var(--secondary);
585
- }
586
-
587
- .status-badge.inactive {
588
- background: rgba(239, 68, 68, 0.2);
589
- color: var(--danger);
590
- }
591
-
592
- .status-badge.warning {
593
- background: rgba(245, 158, 11, 0.2);
594
- color: var(--warning);
595
- }
596
-
597
- .status-badge i {
598
- font-size: 0.8rem;
599
- }
600
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
601
  </head>
 
602
  <body>
603
- <header>
604
- <div class="header-content">
605
- <div class="logo">
606
- <i class="ri-rocket-2-line"></i>
607
- <div>
608
- <div>TON Advanced Project Builder</div>
609
- <small style="color: var(--text-secondary);">نسخه 3.0.0 | امنیت: کاملاً امن</small>
610
- </div>
611
- </div>
612
- <div class="nav-buttons">
613
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="btn btn-secondary">
614
- <i class="ri-code-line"></i>
615
- Built with anycoder
616
- </a>
617
- <button class="btn btn-primary" onclick="startSetup()">
618
- <i class="ri-play-line"></i>
619
- شروع راه‌اندازی
620
- </button>
621
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
622
  </div>
623
- </header>
624
-
625
- <main class="container">
626
- <!-- Hero Section -->
627
- <section class="hero">
628
- <div class="hero-content">
629
- <span class="version">🚀 نسخه: 3.0.0 | تاریخ: 2025-10-05</span>
630
- <h1>اسکریپت جامع و حرفه‌ای ایجاد پروژه TON</h1>
631
- <p class="description">
632
- این اسکریپت پیشرفته تمام ابزارهای توسعه TON را با امنیت کامل و قابلیت‌های حرفه‌ای ترکیب می‌کند.
633
- بر اساس بهترین شیوه‌های TON و منابع رسمی طراحی شده است.
634
- </p>
635
- <div class="hero-buttons">
636
- <button class="btn btn-primary" onclick="checkEnvironment()">
637
- <i class="ri-shield-check-line"></i>
638
- بررسی امنیت
639
- </button>
640
- <button class="btn btn-secondary" onclick="installDependencies()">
641
- <i class="ri-download-line"></i>
642
- نصب وابستگی‌ها
643
- </button>
644
- <button class="btn btn-secondary" onclick="createProject()">
645
- <i class="ri-folder-add-line"></i>
646
- ایجاد پروژه جدید
647
- </button>
648
- </div>
 
 
 
 
 
649
  </div>
650
- </section>
651
-
652
- <!-- Security Status -->
653
- <section class="security-status">
654
- <div class="security-header">
655
- <i class="ri-shield-keyhole-line"></i>
656
- <div>
657
- <h2>🔒 وضعیت امنیت</h2>
658
- <p style="color: var(--text-secondary); margin-top: 0.25rem;">تأیید ویژگی‌های امنیتی کلیدی</p>
659
- </div>
660
- <div style="margin-left: auto;">
661
- <span class="status-badge active">
662
- <i class="ri-checkbox-circle-line"></i>
663
- امن
664
- </span>
665
- </div>
666
  </div>
667
- <div class="security-features">
668
- <div class="security-feature">
669
- <i class="ri-key-2-line"></i>
670
- <span>بدون کلیدهای سخت‌کد شده</span>
671
- </div>
672
- <div class="security-feature">
673
- <i class="ri-user-check-line"></i>
674
- <span>تأیید کاربر قبل از عملیات</span>
675
- </div>
676
- <div class="security-feature">
677
- <i class="ri-search-eye-line"></i>
678
- <span>Audit خودکار</span>
679
- </div>
680
- <div class="security-feature">
681
- <i class="ri-lock-2-line"></i>
682
- <span>مجوزهای امن (600)</span>
683
- </div>
684
- <div class="security-feature">
685
- <i class="ri-code-s-slash-line"></i>
686
- <span>TypeScript Strict</span>
687
- </div>
688
- <div class="security-feature">
689
- <i class="ri-git-branch-line"></i>
690
- <span>Gitignore حرفه‌ای</span>
691
- </div>
692
- <div class="security-feature">
693
- <i class="ri-wifi-line"></i>
694
- <span>Network Validation</span>
695
- </div>
696
- <div class="security-feature">
697
- <i class="ri-terminal-box-line"></i>
698
- <span>Sandbox Mode</span>
699
- </div>
700
  </div>
701
- </section>
702
-
703
- <!-- Tabs Section -->
704
- <div class="tabs">
705
- <button class="tab active" onclick="switchTab('overview', this)">نمای کلی</button>
706
- <button class="tab" onclick="switchTab('installation', this)">نصب</button>
707
- <button class="tab" onclick="switchTab('tools', this)">ابزارها</button>
708
- <button class="tab" onclick="switchTab('commands', this)">دستورات</button>
709
  </div>
710
 
711
- <!-- Tab Contents -->
712
- <div class="tab-content active" id="overview">
713
- <!-- Dashboard Grid -->
714
- <div class="dashboard-grid">
715
- <div class="card">
716
- <div class="card-header">
717
- <div class="card-icon tools">
718
- <i class="ri-tools-line"></i>
719
- </div>
720
- <div>
721
- <h3 class="card-title">ابزارهای توسعه</h3>
722
- </div>
723
- </div>
724
- <div class="card-content">
725
- <p>Blueprint SDK، TON Connect، Chainstack APIs</p>
726
- <div class="progress-bar">
727
- <div class="progress-fill" style="width: 85%;"></div>
728
- </div>
729
- <p style="margin-top: 0.5rem; font-size: 0.9rem;">85% نصب شده</p>
730
- </div>
731
- </div>
732
-
733
- <div class="card">
734
- <div class="card-header">
735
- <div class="card-icon deps">
736
- <i class="ri-package-line"></i>
737
- </div>
738
- <div>
739
- <h3 class="card-title">وابستگی‌ها</h3>
740
- </div>
741
- </div>
742
- <div class="card-content">
743
- <p>Node.js v18+، Python 3، Git، Docker</p>
744
- <div class="progress-bar">
745
- <div class="progress-fill" style="width: 70%;"></div>
746
- </div>
747
- <p style="margin-top: 0.5rem; font-size: 0.9rem;">70% آماده</p>
748
- </div>
749
- </div>
750
-
751
- <div class="card">
752
- <div class="card-header">
753
- <div class="card-icon network">
754
- <i class="ri-global-line"></i>
755
- </div>
756
- <div>
757
- <h3 class="card-title">شبکه</h3>
758
- </div>
759
- </div>
760
- <div class="card-content">
761
- <p>Testnet فعال | Mainnet آماده</p>
762
- <div class="progress-bar">
763
- <div class="progress-fill" style="width: 100%;"></div>
764
- </div>
765
- <p style="margin-top: 0.5rem; font-size: 0.9rem;">متصل</p>
766
- </div>
767
- </div>
768
-
769
- <div class="card">
770
- <div class="card-header">
771
- <div class="card-icon wallet">
772
- <i class="ri-wallet-3-line"></i>
773
- </div>
774
- <div>
775
- <h3 class="card-title">کیف پول</h3>
776
- </div>
777
- </div>
778
- <div class="card-content">
779
- <p>Deployer و User wallets</p>
780
- <div class="progress-bar">
781
- <div class="progress-fill" style="width: 60%;"></div>
782
- </div>
783
- <p style="margin-top: 0.5rem; font-size: 0.9rem;">پیکربندی مورد نیاز</p>
784
- </div>
785
- </div>
786
  </div>
787
-
788
- <!-- Terminal Preview -->
789
- <div class="terminal">
790
- <div class="terminal-header">
791
- <div class="terminal-dot red"></div>
792
- <div class="terminal-dot yellow"></div>
793
- <div class="terminal-dot green"></div>
794
- </div>
795
- <div class="terminal-content">
796
- <div class="terminal-line">$ ton-pro-check</div>
797
- <div class="terminal-line">🔍 بررسی جامع محیط TON Professional v3.0.0</div>
798
- <div class="terminal-line">✅ Node.js: v18.19.0</div>
799
- <div class="terminal-line">✅ Blueprint: v1.0.0</div>
800
- <div class="terminal-line">✅ TON Center: متصل</div>
801
- <div class="terminal-line">✅ امنیت: Strict Mode</div>
802
- <div class="terminal-line">🎉 محیط TON Professional آماده استفاده! 🚀</div>
803
- <div class="terminal-line">$ <span class="terminal-cursor"></span></div>
804
- </div>
805
  </div>
806
- </div>
807
-
808
- <div class="tab-content" id="installation">
809
- <h2 style="margin-bottom: 2rem;">📋 مراحل نصب پیش‌نیازها</h2>
810
- <div class="steps">
811
- <div class="step">
812
- <div class="step-number">1</div>
813
- <div class="step-content">
814
- <h3>Node.js v18+</h3>
815
- <p>نصب Node.js نسخه 18 یا بالاتر برای اجرای اسکریپت</p>
816
- <code style="background: var(--dark); padding: 0.25rem 0.5rem; border-radius: 4px; display: inline-block; margin-top: 0.5rem;">
817
- curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
818
- </code>
819
- </div>
820
- </div>
821
- <div class="step">
822
- <div class="step-number">2</div>
823
- <div class="step-content">
824
- <h3>Python 3 و pip</h3>
825
- <p>برای نصب و استفاده از toncli</p>
826
- <code style="background: var(--dark); padding: 0.25rem 0.5rem; border-radius: 4px; display: inline-block; margin-top: 0.5rem;">
827
- sudo apk update && sudo apk add -y python3 python3-pip git
828
- </code>
829
- </div>
830
- </div>
831
- <div class="step">
832
- <div class="step-number">3</div>
833
- <div class="step-content">
834
- <h3>Docker (اختیاری)</h3>
835
- <p>برای deployment و محیط‌های ایزوله</p>
836
- <code style="background: var(--dark); padding: 0.25rem 0.5rem; border-radius: 4px; display: inline-block; margin-top: 0.5rem;">
837
- curl -fsSL https://get.docker.com -o get-docker.sh && sudo sh get-docker.sh
838
- </code>
839
- </div>
840
- </div>
841
- <div class="step">
842
- <div class="step-number">4</div>
843
- <div class="step-content">
844
- <h3>Git</h3>
845
- <p>برای کنترل نسخه و مدیریت پروژه</p>
846
- <code style="background: var(--dark); padding: 0.25rem 0.5rem; border-radius: 4px; display: inline-block; margin-top: 0.5rem;">
847
- sudo apt install -y git
848
- </code>
849
- </div>
850
- </div>
851
  </div>
 
 
852
  </div>
853
 
854
- <div class="tab-content" id="tools">
855
- <h2 style="margin-bottom: 2rem;">🔧 ابزارهای حرفه‌ای</h2>
856
- <div class="dashboard-grid">
857
- <div class="card">
858
- <div class="card-header">
859
- <div class="card-icon tools">
860
- <i class="ri-search-line"></i>
861
- </div>
862
- <div>
863
- <h3 class="card-title">ton-pro-check</h3>
864
- </div>
865
- </div>
866
- <div class="card-content">
867
- <p>بررسی جامع محیط و امنیت TON</p>
868
- <button class="btn btn-secondary" style="margin-top: 1rem; width: 100%;" onclick="runCommand('ton-pro-check')">
869
- اجرا
870
- </button>
871
- </div>
872
- </div>
873
-
874
- <div class="card">
875
- <div class="card-header">
876
- <div class="card-icon deps">
877
- <i class="ri-folder-add-line"></i>
878
- </div>
879
- <div>
880
- <h3 class="card-title">ton-pro-create</h3>
881
- </div>
882
- </div>
883
- <div class="card-content">
884
- <p>ایجاد پروژه جدید با قالب‌های پیشرفته</p>
885
- <button class="btn btn-secondary" style="margin-top: 1rem; width: 100%;" onclick="runCommand('ton-pro-create')">
886
- اجرا
887
- </button>
888
- </div>
889
- </div>
890
-
891
- <div class="card">
892
- <div class="card-header">
893
- <div class="card-icon network">
894
- <i class="ri-upload-cloud-line"></i>
895
- </div>
896
- <div>
897
- <h3 class="card-title">ton-pro-deploy</h3>
898
- </div>
899
- </div>
900
- <div class="card-content">
901
- <p>استقرار امن قراردادهای هوشمند</p>
902
- <button class="btn btn-secondary" style="margin-top: 1rem; width: 100%;" onclick="runCommand('ton-pro-deploy')">
903
- اجرا
904
- </button>
905
- </div>
906
- </div>
907
-
908
- <div class="card">
909
- <div class="card-header">
910
- <div class="card-icon wallet">
911
- <i class="ri-shield-check-line"></i>
912
- </div>
913
- <div>
914
- <h3 class="card-title">ton-pro-security</h3>
915
- </div>
916
- </div>
917
- <div class="card-content">
918
- <p>بررسی امنیتی و audit پروژه</p>
919
- <button class="btn btn-secondary" style="margin-top: 1rem; width: 100%;" onclick="runCommand('ton-pro-security')">
920
- اجرا
921
- </button>
922
- </div>
923
- </div>
924
  </div>
 
 
 
 
 
 
 
 
 
 
 
925
  </div>
926
 
927
- <div class="tab-content" id="commands">
928
- <h2 style="margin-bottom: 2rem;">⌨️ دستورات اصلی</h2>
929
- <div class="terminal">
930
- <div class="terminal-header">
931
- <div class="terminal-dot red"></div>
932
- <div class="terminal-dot yellow"></div>
933
- <div class="terminal-dot green"></div>
934
- </div>
935
- <div class="terminal-content">
936
- <div class="terminal-line"># راه‌اندازی محیط</div>
937
- <div class="terminal-line">./ton-advanced-builder.sh</div>
938
- <div class="terminal-line"></div>
939
- <div class="terminal-line"># بررسی محیط</div>
940
- <div class="terminal-line">ton-pro-check</div>
941
- <div class="terminal-line"></div>
942
- <div class="terminal-line"># ایجاد پروژه جدید</div>
943
- <div class="terminal-line">ton-pro-create my-dapp fullstack modern</div>
944
- <div class="terminal-line"></div>
945
- <div class="terminal-line"># توسعه محلی</div>
946
- <div class="terminal-line">npm run dev</div>
947
- <div class="terminal-line"></div>
948
- <div class="terminal-line"># استقرار امن</div>
949
- <div class="terminal-line">ton-pro-deploy</div>
950
- <div class="terminal-line"></div>
951
- <div class="terminal-line"># بررسی امنیت</div>
952
- <div class="terminal-line">npm run security</div>
953
- </div>
954
  </div>
955
- </div>
956
- </main>
957
-
958
- <footer>
959
- <div class="footer-content">
960
- <div class="footer-links">
961
- <a href="#"><i class="ri-github-line"></i> GitHub</a>
962
- <a href="#"><i class="ri-book-line"></i> مستندات</a>
963
- <a href="#"><i class="ri-community-line"></i> جامعه</a>
964
- <a href="#"><i class="ri-question-line"></i> پشتیبانی</a>
965
- <a href="#"><i class="ri-shield-line"></i> امنیت</a>
966
  </div>
967
- <p style="color: var(--text-secondary);">
968
- © 2025 TON Advanced Project Builder v3.0.0 | ساخته شده با ❤️ برای اکوسیستم TON
969
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
970
  </div>
971
- </footer>
972
-
973
- <script>
974
- // Tab switching
975
- function switchTab(tabName, tabElement) {
976
- // Hide all tabs
977
- document.querySelectorAll('.tab-content').forEach(content => {
978
- content.classList.remove('active');
979
- });
980
-
981
- // Remove active class from all tabs
982
- document.querySelectorAll('.tab').forEach(tab => {
983
- tab.classList.remove('active');
984
- });
985
-
986
- // Show selected tab
987
- document.getElementById(tabName).classList.add('active');
988
- tabElement.classList.add('active');
989
- }
990
-
991
- // Command runner simulation
992
- function runCommand(command) {
993
- showNotification(`در حال اجرای دستور: ${command}`, 'info');
994
-
995
- // Simulate command execution
996
- setTimeout(() => {
997
- showNotification(`دستور ${command} با موفقیت اجرا شد!`, 'success');
998
- }, 2000);
999
- }
1000
-
1001
- // Environment check simulation
1002
- function checkEnvironment() {
1003
- showNotification('در حال بررسی محیط...', 'info');
1004
-
1005
- const checks = [
1006
- 'بررسی Node.js...',
1007
- 'بررسی Blueprint SDK...',
1008
- 'بررسی اتصال شبکه...',
1009
- 'بررسی امنیت...',
1010
- 'تأیید مجوزها...'
1011
- ];
1012
-
1013
- checks.forEach((check, index) => {
1014
- setTimeout(() => {
1015
- showNotification(check, 'info');
1016
- if (index === checks.length - 1) {
1017
- setTimeout(() => {
1018
- showNotification('محیط TON Professional آماده استفاده! 🎉', 'success');
1019
- }, 1000);
1020
- }
1021
- }, index * 800);
1022
- });
1023
- }
1024
-
1025
- // Install dependencies simulation
1026
- function installDependencies() {
1027
- showNotification('شروع نصب وابستگی‌ها...', 'info');
1028
-
1029
- const packages = [
1030
- '@ton/blueprint',
1031
- '@ton/ton',
1032
- '@ton/core',
1033
- '@ton/crypto',
1034
- 'toncli',
1035
- 'create-ton'
1036
- ];
1037
-
1038
- packages.forEach((pkg, index) => {
1039
- setTimeout(() => {
1040
- showNotification(`نصب ${pkg}...`, 'info');
1041
- if (index === packages.length - 1) {
1042
- setTimeout(() => {
1043
- showNotification('همه وابستگی‌ها با موفقیت نصب شدند! ✅', 'success');
1044
- }, 1000);
1045
- }
1046
- }, index * 600);
1047
- });
1048
- }
1049
-
1050
- // Create project simulation
1051
- function createProject() {
1052
- const projectName = prompt('نام پروژه را وارد کنید:', 'my-ton-dapp');
1053
- if (projectName) {
1054
- showNotification(`ایجاد پروژه ${projectName}...`, 'info');
1055
-
1056
- setTimeout(() => {
1057
- showNotification('ایجاد ساختار پروژه...', 'info');
1058
- }, 1000);
1059
-
1060
- setTimeout(() => {
1061
- showNotification('نصب وابستگی‌های پروژه...', 'info');
1062
- }, 2000);
1063
-
1064
- setTimeout(() => {
1065
- showNotification(`پروژه ${projectName} با موفقیت ایجاد شد! 🚀`, 'success');
1066
- }, 3000);
1067
- }
1068
- }
1069
-
1070
- // Start setup simulation
1071
- function startSetup() {
1072
- showNotification('شروع راه‌اندازی TON Advanced Project Builder...', 'info');
1073
-
1074
- const steps = [
1075
- 'تنظیم محیط امن...',
1076
- 'بررسی پیش
 
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 Advanced Project Builder v3.0.0</title>
8
+ <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --primary: #0088cc;
18
+ --primary-dark: #006699;
19
+ --secondary: #22c55e;
20
+ --danger: #ef4444;
21
+ --warning: #f59e0b;
22
+ --dark: #0f172a;
23
+ --dark-lighter: #1e293b;
24
+ --dark-card: #334155;
25
+ --text-primary: #f1f5f9;
26
+ --text-secondary: #94a3b8;
27
+ --border: #475569;
28
+ --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
29
+ --ton-gradient: linear-gradient(135deg, #0088cc 0%, #00a8ff 100%);
30
+ --neon-glow: 0 0 20px rgba(0, 136, 204, 0.5);
31
+ --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
32
+ }
33
+
34
+ body {
35
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
36
+ background: var(--dark);
37
+ color: var(--text-primary);
38
+ line-height: 1.6;
39
+ min-height: 100vh;
40
+ overflow-x: hidden;
41
+ position: relative;
42
+ }
43
+
44
+ /* Animated Background */
45
+ body::before {
46
+ content: '';
47
+ position: fixed;
48
+ top: 0;
49
+ left: 0;
50
+ width: 100%;
51
+ height: 100%;
52
+ background:
53
+ radial-gradient(circle at 20% 50%, rgba(0, 136, 204, 0.1) 0%, transparent 50%),
54
+ radial-gradient(circle at 80% 80%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
55
+ radial-gradient(circle at 40% 20%, rgba(34, 197, 94, 0.05) 0%, transparent 50%);
56
+ z-index: -1;
57
+ animation: backgroundFloat 20s ease-in-out infinite;
58
+ }
59
+
60
+ @keyframes backgroundFloat {
61
+ 0%, 100% { transform: translate(0, 0) rotate(0deg); }
62
+ 33% { transform: translate(-20px, -20px) rotate(1deg); }
63
+ 66% { transform: translate(20px, -10px) rotate(-1deg); }
64
+ }
65
+
66
+ /* Scrollbar Styling */
67
+ ::-webkit-scrollbar {
68
+ width: 8px;
69
+ height: 8px;
70
+ }
71
+
72
+ ::-webkit-scrollbar-track {
73
+ background: var(--dark-lighter);
74
+ }
75
+
76
+ ::-webkit-scrollbar-thumb {
77
+ background: var(--primary);
78
+ border-radius: 4px;
79
+ }
80
+
81
+ ::-webkit-scrollbar-thumb:hover {
82
+ background: var(--primary-dark);
83
+ }
84
+
85
+ /* Header */
86
+ header {
87
+ background: rgba(30, 41, 59, 0.95);
88
+ backdrop-filter: blur(20px);
89
+ border-bottom: 1px solid var(--border);
90
+ padding: 1rem 2rem;
91
+ position: sticky;
92
+ top: 0;
93
+ z-index: 100;
94
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
95
+ }
96
+
97
+ .header-content {
98
+ max-width: 1400px;
99
+ margin: 0 auto;
100
+ display: flex;
101
+ justify-content: space-between;
102
+ align-items: center;
103
+ flex-wrap: wrap;
104
+ gap: 1rem;
105
+ }
106
+
107
+ .logo {
108
+ display: flex;
109
+ align-items: center;
110
+ gap: 1rem;
111
+ font-size: 1.5rem;
112
+ font-weight: bold;
113
+ color: var(--primary);
114
+ transition: transform 0.3s ease;
115
+ }
116
+
117
+ .logo:hover {
118
+ transform: scale(1.05);
119
+ }
120
+
121
+ .logo i {
122
+ font-size: 2rem;
123
+ background: var(--ton-gradient);
124
+ -webkit-background-clip: text;
125
+ -webkit-text-fill-color: transparent;
126
+ animation: pulse 2s ease-in-out infinite;
127
+ }
128
+
129
+ @keyframes pulse {
130
+ 0%, 100% { opacity: 1; }
131
+ 50% { opacity: 0.8; }
132
+ }
133
+
134
+ .nav-buttons {
135
+ display: flex;
136
+ gap: 1rem;
137
+ flex-wrap: wrap;
138
+ }
139
+
140
+ .btn {
141
+ padding: 0.5rem 1.5rem;
142
+ border: none;
143
+ border-radius: 8px;
144
+ font-size: 1rem;
145
+ cursor: pointer;
146
+ transition: all 0.3s ease;
147
+ display: inline-flex;
148
+ align-items: center;
149
+ gap: 0.5rem;
150
+ text-decoration: none;
151
+ font-weight: 500;
152
+ position: relative;
153
+ overflow: hidden;
154
+ }
155
+
156
+ .btn::before {
157
+ content: '';
158
+ position: absolute;
159
+ top: 50%;
160
+ left: 50%;
161
+ width: 0;
162
+ height: 0;
163
+ border-radius: 50%;
164
+ background: rgba(255, 255, 255, 0.2);
165
+ transform: translate(-50%, -50%);
166
+ transition: width 0.6s, height 0.6s;
167
+ }
168
+
169
+ .btn:hover::before {
170
+ width: 300px;
171
+ height: 300px;
172
+ }
173
+
174
+ .btn-primary {
175
+ background: var(--ton-gradient);
176
+ color: white;
177
+ box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
178
+ }
179
+
180
+ .btn-primary:hover {
181
+ transform: translateY(-2px);
182
+ box-shadow: 0 10px 25px rgba(0, 136, 204, 0.4);
183
+ }
184
+
185
+ .btn-secondary {
186
+ background: transparent;
187
+ color: var(--text-primary);
188
+ border: 1px solid var(--border);
189
+ }
190
+
191
+ .btn-secondary:hover {
192
+ background: var(--dark-card);
193
+ border-color: var(--primary);
194
+ transform: translateY(-2px);
195
+ }
196
+
197
+ /* Main Container */
198
+ .container {
199
+ max-width: 1400px;
200
+ margin: 2rem auto;
201
+ padding: 0 2rem;
202
+ }
203
+
204
+ /* Hero Section */
205
+ .hero {
206
+ background: var(--ton-gradient);
207
+ border-radius: 20px;
208
+ padding: 3rem;
209
+ margin-bottom: 3rem;
210
+ position: relative;
211
+ overflow: hidden;
212
+ box-shadow: var(--card-shadow);
213
+ }
214
+
215
+ .hero::before {
216
+ content: '';
217
+ position: absolute;
218
+ top: -50%;
219
+ right: -50%;
220
+ width: 200%;
221
+ height: 200%;
222
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
223
+ animation: float 20s infinite linear;
224
+ }
225
+
226
+ @keyframes float {
227
+ 0% { transform: rotate(0deg); }
228
+ 100% { transform: rotate(360deg); }
229
+ }
230
+
231
+ .hero-content {
232
+ position: relative;
233
+ z-index: 1;
234
+ }
235
+
236
+ .hero h1 {
237
+ font-size: 3rem;
238
+ margin-bottom: 1rem;
239
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
240
+ animation: slideInFromLeft 0.8s ease;
241
+ }
242
+
243
+ @keyframes slideInFromLeft {
244
+ from {
245
+ opacity: 0;
246
+ transform: translateX(-30px);
247
+ }
248
+ to {
249
+ opacity: 1;
250
+ transform: translateX(0);
251
+ }
252
+ }
253
+
254
+ .hero .version {
255
+ display: inline-block;
256
+ background: rgba(255, 255, 255, 0.2);
257
+ padding: 0.25rem 1rem;
258
+ border-radius: 20px;
259
+ font-size: 0.9rem;
260
+ margin-bottom: 1rem;
261
+ animation: slideInFromRight 0.8s ease;
262
+ }
263
+
264
+ @keyframes slideInFromRight {
265
+ from {
266
+ opacity: 0;
267
+ transform: translateX(30px);
268
+ }
269
+ to {
270
+ opacity: 1;
271
+ transform: translateX(0);
272
+ }
273
+ }
274
+
275
+ .hero .description {
276
+ font-size: 1.2rem;
277
+ margin-bottom: 2rem;
278
+ opacity: 0.95;
279
+ animation: fadeInUp 0.8s ease 0.2s both;
280
+ }
281
+
282
+ @keyframes fadeInUp {
283
+ from {
284
+ opacity: 0;
285
+ transform: translateY(20px);
286
+ }
287
+ to {
288
+ opacity: 1;
289
+ transform: translateY(0);
290
+ }
291
+ }
292
+
293
+ .hero-buttons {
294
+ display: flex;
295
+ gap: 1rem;
296
+ flex-wrap: wrap;
297
+ animation: fadeInUp 0.8s ease 0.4s both;
298
+ }
299
+
300
+ /* Security Status */
301
+ .security-status {
302
+ background: var(--dark-lighter);
303
+ border-radius: 15px;
304
+ padding: 2rem;
305
+ margin-bottom: 2rem;
306
+ border: 1px solid var(--border);
307
+ box-shadow: var(--card-shadow);
308
+ transition: all 0.3s ease;
309
+ }
310
+
311
+ .security-status:hover {
312
+ transform: translateY(-5px);
313
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
314
+ }
315
+
316
+ .security-header {
317
+ display: flex;
318
+ align-items: center;
319
+ gap: 1rem;
320
+ margin-bottom: 1.5rem;
321
+ }
322
+
323
+ .security-header i {
324
+ font-size: 2rem;
325
+ color: var(--secondary);
326
+ animation: bounce 2s infinite;
327
+ }
328
+
329
+ @keyframes bounce {
330
+ 0%, 100% { transform: translateY(0); }
331
+ 50% { transform: translateY(-10px); }
332
+ }
333
+
334
+ .security-features {
335
+ display: grid;
336
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
337
+ gap: 1rem;
338
+ }
339
+
340
+ .security-feature {
341
+ display: flex;
342
+ align-items: center;
343
+ gap: 0.75rem;
344
+ padding: 0.75rem;
345
+ background: var(--dark);
346
+ border-radius: 8px;
347
+ transition: all 0.3s ease;
348
+ position: relative;
349
+ overflow: hidden;
350
+ }
351
+
352
+ .security-feature::before {
353
+ content: '';
354
+ position: absolute;
355
+ top: 0;
356
+ left: -100%;
357
+ width: 100%;
358
+ height: 100%;
359
+ background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.1), transparent);
360
+ transition: left 0.5s ease;
361
+ }
362
+
363
+ .security-feature:hover::before {
364
+ left: 100%;
365
+ }
366
+
367
+ .security-feature:hover {
368
+ transform: translateX(5px);
369
+ background: var(--dark-card);
370
+ }
371
+
372
+ .security-feature i {
373
+ color: var(--secondary);
374
+ font-size: 1.2rem;
375
+ transition: transform 0.3s ease;
376
+ }
377
+
378
+ .security-feature:hover i {
379
+ transform: rotate(360deg);
380
+ }
381
+
382
+ /* Dashboard Grid */
383
+ .dashboard-grid {
384
+ display: grid;
385
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
386
+ gap: 2rem;
387
+ margin-bottom: 3rem;
388
+ }
389
+
390
+ .card {
391
+ background: var(--dark-lighter);
392
+ border-radius: 15px;
393
+ padding: 1.5rem;
394
+ border: 1px solid var(--border);
395
+ transition: all 0.3s ease;
396
+ position: relative;
397
+ overflow: hidden;
398
+ box-shadow: var(--card-shadow);
399
+ }
400
+
401
+ .card::before {
402
+ content: '';
403
+ position: absolute;
404
+ top: 0;
405
+ left: 0;
406
+ width: 100%;
407
+ height: 3px;
408
+ background: var(--ton-gradient);
409
+ transform: scaleX(0);
410
+ transition: transform 0.3s ease;
411
+ }
412
+
413
+ .card:hover::before {
414
+ transform: scaleX(1);
415
+ }
416
+
417
+ .card:hover {
418
+ transform: translateY(-5px);
419
+ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
420
+ }
421
+
422
+ .card-header {
423
+ display: flex;
424
+ align-items: center;
425
+ gap: 1rem;
426
+ margin-bottom: 1rem;
427
+ }
428
+
429
+ .card-icon {
430
+ width: 50px;
431
+ height: 50px;
432
+ border-radius: 12px;
433
+ display: flex;
434
+ align-items: center;
435
+ justify-content: center;
436
+ font-size: 1.5rem;
437
+ transition: all 0.3s ease;
438
+ }
439
+
440
+ .card-icon.tools {
441
+ background: rgba(34, 197, 94, 0.2);
442
+ color: var(--secondary);
443
+ }
444
+
445
+ .card-icon.deps {
446
+ background: rgba(245, 158, 11, 0.2);
447
+ color: var(--warning);
448
+ }
449
+
450
+ .card-icon.network {
451
+ background: rgba(0, 136, 204, 0.2);
452
+ color: var(--primary);
453
+ }
454
+
455
+ .card-icon.wallet {
456
+ background: rgba(239, 68, 68, 0.2);
457
+ color: var(--danger);
458
+ }
459
+
460
+ .card:hover .card-icon {
461
+ transform: rotate(360deg) scale(1.1);
462
+ }
463
+
464
+ .card-title {
465
+ font-size: 1.2rem;
466
+ font-weight: 600;
467
+ }
468
+
469
+ .card-content {
470
+ color: var(--text-secondary);
471
+ }
472
+
473
+ .progress-bar {
474
+ width: 100%;
475
+ height: 8px;
476
+ background: var(--dark);
477
+ border-radius: 4px;
478
+ overflow: hidden;
479
+ margin-top: 1rem;
480
+ position: relative;
481
+ }
482
+
483
+ .progress-fill {
484
+ height: 100%;
485
+ background: var(--ton-gradient);
486
+ border-radius: 4px;
487
+ transition: width 1s ease;
488
+ animation: progressAnimation 2s ease-in-out;
489
+ position: relative;
490
+ }
491
+
492
+ .progress-fill::after {
493
+ content: '';
494
+ position: absolute;
495
+ top: 0;
496
+ left: 0;
497
+ right: 0;
498
+ bottom: 0;
499
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
500
+ animation: shimmer 2s infinite;
501
+ }
502
+
503
+ @keyframes shimmer {
504
+ 0% { transform: translateX(-100%); }
505
+ 100% { transform: translateX(100%); }
506
+ }
507
+
508
+ @keyframes progressAnimation {
509
+ 0% { width: 0; }
510
+ }
511
+
512
+ /* Command Terminal */
513
+ .terminal {
514
+ background: #0a0a0a;
515
+ border-radius: 10px;
516
+ padding: 1rem;
517
+ font-family: 'Courier New', monospace;
518
+ margin: 1rem 0;
519
+ border: 1px solid var(--border);
520
+ box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
521
+ }
522
+
523
+ .terminal-header {
524
+ display: flex;
525
+ gap: 0.5rem;
526
+ margin-bottom: 1rem;
527
+ }
528
+
529
+ .terminal-dot {
530
+ width: 12px;
531
+ height: 12px;
532
+ border-radius: 50%;
533
+ transition: all 0.3s ease;
534
+ }
535
+
536
+ .terminal-dot:hover {
537
+ transform: scale(1.2);
538
+ }
539
+
540
+ .terminal-dot.red {
541
+ background: #ff5f56;
542
+ }
543
+
544
+ .terminal-dot.yellow {
545
+ background: #ffbd2e;
546
+ }
547
+
548
+ .terminal-dot.green {
549
+ background: #27c93f;
550
+ }
551
+
552
+ .terminal-content {
553
+ color: #0f0;
554
+ font-size: 0.9rem;
555
+ line-height: 1.4;
556
+ }
557
+
558
+ .terminal-line {
559
+ margin: 0.25rem 0;
560
+ opacity: 0;
561
+ animation: typewriter 0.5s ease forwards;
562
+ }
563
+
564
+ @keyframes typewriter {
565
+ from {
566
+ opacity: 0;
567
+ transform: translateX(-10px);
568
+ }
569
+ to {
570
+ opacity: 1;
571
+ transform: translateX(0);
572
+ }
573
+ }
574
+
575
+ .terminal-cursor {
576
+ display: inline-block;
577
+ width: 8px;
578
+ height: 16px;
579
+ background: #0f0;
580
+ animation: blink 1s infinite;
581
+ }
582
+
583
+ @keyframes blink {
584
+ 0%, 50% { opacity: 1; }
585
+ 51%, 100% { opacity: 0; }
586
+ }
587
+
588
+ /* Installation Steps */
589
+ .steps {
590
+ display: grid;
591
+ gap: 1rem;
592
+ }
593
+
594
+ .step {
595
+ display: flex;
596
+ gap: 1rem;
597
+ align-items: flex-start;
598
+ padding: 1rem;
599
+ background: var(--dark);
600
+ border-radius: 10px;
601
+ border: 1px solid var(--border);
602
+ transition: all 0.3s ease;
603
+ position: relative;
604
+ overflow: hidden;
605
+ }
606
+
607
+ .step::before {
608
+ content: '';
609
+ position: absolute;
610
+ top: 0;
611
+ left: 0;
612
+ width: 0;
613
+ height: 100%;
614
+ background: var(--ton-gradient);
615
+ opacity: 0.1;
616
+ transition: width 0.3s ease;
617
+ }
618
+
619
+ .step:hover::before {
620
+ width: 100%;
621
+ }
622
+
623
+ .step:hover {
624
+ border-color: var(--primary);
625
+ transform: translateX(10px);
626
+ }
627
+
628
+ .step-number {
629
+ width: 30px;
630
+ height: 30px;
631
+ border-radius: 50%;
632
+ background: var(--ton-gradient);
633
+ display: flex;
634
+ align-items: center;
635
+ justify-content: center;
636
+ font-weight: bold;
637
+ flex-shrink: 0;
638
+ transition: all 0.3s ease;
639
+ }
640
+
641
+ .step:hover .step-number {
642
+ transform: scale(1.2);
643
+ box-shadow: 0 0 20px rgba(0, 136, 204, 0.5);
644
+ }
645
+
646
+ .step-content h3 {
647
+ color: var(--text-primary);
648
+ margin-bottom: 0.5rem;
649
+ }
650
+
651
+ .step-content p {
652
+ color: var(--text-secondary);
653
+ font-size: 0.9rem;
654
+ }
655
+
656
+ /* Tabs */
657
+ .tabs {
658
+ display: flex;
659
+ gap: 0.5rem;
660
+ margin-bottom: 2rem;
661
+ border-bottom: 1px solid var(--border);
662
+ overflow-x: auto;
663
+ position: relative;
664
+ }
665
+
666
+ .tab {
667
+ padding: 1rem 1.5rem;
668
+ background: transparent;
669
+ border: none;
670
+ color: var(--text-secondary);
671
+ cursor: pointer;
672
+ transition: all 0.3s ease;
673
+ white-space: nowrap;
674
+ position: relative;
675
+ }
676
+
677
+ .tab::after {
678
+ content: '';
679
+ position: absolute;
680
+ bottom: 0;
681
+ left: 50%;
682
+ width: 0;
683
+ height: 2px;
684
+ background: var(--primary);
685
+ transform: translateX(-50%);
686
+ transition: all 0.3s ease;
687
+ }
688
+
689
+ .tab:hover {
690
+ color: var(--text-primary);
691
+ }
692
+
693
+ .tab.active {
694
+ color: var(--primary);
695
+ }
696
+
697
+ .tab.active::after {
698
+ width: 100%;
699
+ }
700
+
701
+ .tab-content {
702
+ display: none;
703
+ animation: fadeIn 0.5s ease;
704
+ }
705
+
706
+ .tab-content.active {
707
+ display: block;
708
+ }
709
+
710
+ @keyframes fadeIn {
711
+ from {
712
+ opacity: 0;
713
+ transform: translateY(10px);
714
+ }
715
+ to {
716
+ opacity: 1;
717
+ transform: translateY(0);
718
+ }
719
+ }
720
+
721
+ /* Status Badge */
722
+ .status-badge {
723
+ display: inline-flex;
724
+ align-items: center;
725
+ gap: 0.5rem;
726
+ padding: 0.25rem 0.75rem;
727
+ border-radius: 20px;
728
+ font-size: 0.85rem;
729
+ font-weight: 500;
730
+ transition: all 0.3s ease;
731
+ }
732
+
733
+ .status-badge:hover {
734
+ transform: scale(1.05);
735
+ }
736
+
737
+ .status-badge.active {
738
+ background: rgba(34, 197, 94, 0.2);
739
+ color: var(--secondary);
740
+ box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
741
+ }
742
+
743
+ .status-badge.inactive {
744
+ background: rgba(239, 68, 68, 0.2);
745
+ color: var(--danger);
746
+ box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
747
+ }
748
+
749
+ .status-badge.warning {
750
+ background: rgba(245, 158, 11, 0.2);
751
+ color: var(--warning);
752
+ box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
753
+ }
754
+
755
+ .status-badge i {
756
+ font-size: 0.8rem;
757
+ animation: rotate 2s linear infinite;
758
+ }
759
+
760
+ @keyframes rotate {
761
+ from { transform: rotate(0deg); }
762
+ to { transform: rotate(360deg); }
763
+ }
764
+
765
+ /* Footer */
766
+ footer {
767
+ background: var(--dark-lighter);
768
+ border-top: 1px solid var(--border);
769
+ padding: 2rem;
770
+ margin-top: 4rem;
771
+ text-align: center;
772
+ }
773
+
774
+ .footer-content {
775
+ max-width: 1400px;
776
+ margin: 0 auto;
777
+ }
778
+
779
+ .footer-links {
780
+ display: flex;
781
+ justify-content: center;
782
+ gap: 2rem;
783
+ margin-bottom: 1rem;
784
+ flex-wrap: wrap;
785
+ }
786
+
787
+ .footer-links a {
788
+ color: var(--text-secondary);
789
+ text-decoration: none;
790
+ transition: all 0.3s ease;
791
+ display: flex;
792
+ align-items: center;
793
+ gap: 0.5rem;
794
+ }
795
+
796
+ .footer-links a:hover {
797
+ color: var(--primary);
798
+ transform: translateY(-2px);
799
+ }
800
+
801
+ /* Notification */
802
+ .notification {
803
+ position: fixed;
804
+ top: 100px;
805
+ right: 20px;
806
+ background: var(--dark-card);
807
+ border: 1px solid var(--border);
808
+ border-radius: 10px;
809
+ padding: 1rem 1.5rem;
810
+ box-shadow: var(--card-shadow);
811
+ z-index: 1000;
812
+ animation: slideIn 0.3s ease;
813
+ max-width: 300px;
814
+ }
815
+
816
+ @keyframes slideIn {
817
+ from {
818
+ transform: translateX(400px);
819
+ opacity: 0;
820
+ }
821
+ to {
822
+ transform: translateX(0);
823
+ opacity: 1;
824
+ }
825
+ }
826
+
827
+ .notification.success {
828
+ border-color: var(--secondary);
829
+ background: rgba(34, 197, 94, 0.1);
830
+ }
831
+
832
+ .notification.error {
833
+ border-color: var(--danger);
834
+ background: rgba(239, 68, 68, 0.1);
835
+ }
836
+
837
+ .notification.info {
838
+ border-color: var(--primary);
839
+ background: rgba(0, 136, 204, 0.1);
840
+ }
841
+
842
+ /* Responsive Design */
843
+ @media (max-width: 768px) {
844
+ .hero h1 {
845
+ font-size: 2rem;
846
+ }
847
+
848
+ .hero {
849
+ padding: 2rem 1.5rem;
850
+ }
851
+
852
+ .container {
853
+ padding: 0 1rem;
854
+ }
855
+
856
+ .dashboard-grid {
857
+ grid-template-columns: 1fr;
858
+ }
859
+
860
+ .security-features {
861
+ grid-template-columns: 1fr;
862
+ }
863
+
864
+ .header-content {
865
+ flex-direction: column;
866
+ text-align: center;
867
+ }
868
+
869
+ .footer-links {
870
+ flex-direction: column;
871
+ align-items: center;
872
+ }
873
+ }
874
+
875
+ /* Loading Animation */
876
+ .loading {
877
+ display: inline-block;
878
+ width: 20px;
879
+ height: 20px;
880
+ border: 3px solid var(--border);
881
+ border-top-color: var(--primary);
882
+ border-radius: 50%;
883
+ animation: spin 1s linear infinite;
884
+ }
885
+
886
+ @keyframes spin {
887
+ 0% { transform: rotate(0deg); }
888
+ 100% { transform: rotate(360deg); }
889
+ }
890
+
891
+ /* Floating Action Button */
892
+ .fab {
893
+ position: fixed;
894
+ bottom: 30px;
895
+ left: 30px;
896
+ width: 60px;
897
+ height: 60px;
898
+ border-radius: 50%;
899
+ background: var(--ton-gradient);
900
+ color: white;
901
+ border: none;
902
+ cursor: pointer;
903
+ box-shadow: 0 5px 20px rgba(0, 136, 204, 0.4);
904
+ display: flex;
905
+ align-items: center;
906
+ justify-content: center;
907
+ font-size: 1.5rem;
908
+ transition: all 0.3s ease;
909
+ z-index: 99;
910
+ }
911
+
912
+ .fab:hover {
913
+ transform: scale(1.1);
914
+ box-shadow: 0 8px 30px rgba(0, 136, 204, 0.6);
915
+ }
916
+
917
+ /* Modal */
918
+ .modal {
919
+ display: none;
920
+ position: fixed;
921
+ top: 0;
922
+ left: 0;
923
+ width: 100%;
924
+ height: 100%;
925
+ background: rgba(0, 0, 0, 0.8);
926
+ z-index: 200;
927
+ align-items: center;
928
+ justify-content: center;
929
+ }
930
+
931
+ .modal.active {
932
+ display: flex;
933
+ }
934
+
935
+ .modal-content {
936
+ background: var(--dark-lighter);
937
+ border-radius: 15px;
938
+ padding: 2rem;
939
+ max-width: 500px;
940
+ width: 90%;
941
+ border: 1px solid var(--border);
942
+ animation: modalSlideIn 0.3s ease;
943
+ }
944
+
945
+ @keyframes modalSlideIn {
946
+ from {
947
+ transform: translateY(-50px);
948
+ opacity: 0;
949
+ }
950
+ to {
951
+ transform: translateY(0);
952
+ opacity: 1;
953
+ }
954
+ }
955
+
956
+ .modal-header {
957
+ display: flex;
958
+ justify-content: space-between;
959
+ align-items: center;
960
+ margin-bottom: 1.5rem;
961
+ }
962
+
963
+ .modal-close {
964
+ background: none;
965
+ border: none;
966
+ color: var(--text-secondary);
967
+ font-size: 1.5rem;
968
+ cursor: pointer;
969
+ transition: all 0.3s ease;
970
+ }
971
+
972
+ .modal-close:hover {
973
+ color: var(--danger);
974
+ transform: rotate(90deg);
975
+ }
976
+ </style>
977
  </head>
978
+
979
  <body>
980
+ <header>
981
+ <div class="header-content">
982
+ <div class="logo">
983
+ <i class="ri-rocket-2-line"></i>
984
+ <div>
985
+ <div>TON Advanced Project Builder</div>
986
+ <small style="color: var(--text-secondary);">نسخه 3.0.0 | امنیت: کاملاً امن</small>
987
+ </div>
988
+ </div>
989
+ <div class="nav-buttons">
990
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="btn btn-secondary">
991
+ <i class="ri-code-line"></i>
992
+ Built with anycoder
993
+ </a>
994
+ <button class="btn btn-primary" onclick="startSetup()">
995
+ <i class="ri-play-line"></i>
996
+ شروع راه‌اندازی
997
+ </button>
998
+ </div>
999
+ </div>
1000
+ </header>
1001
+
1002
+ <main class="container">
1003
+ <!-- Hero Section -->
1004
+ <section class="hero">
1005
+ <div class="hero-content">
1006
+ <span class="version">🚀 نسخه: 3.0.0 | تاریخ: 2025-10-05</span>
1007
+ <h1>اسکریپت جامع و حرفه‌ای ایجاد پروژه TON</h1>
1008
+ <p class="description">
1009
+ این اسکریپت پیشرفته تمام ابزارهای توسعه TON را با امنیت کامل و قابلیت‌های حرفه‌ای ترکیب می‌کند.
1010
+ بر اساس بهترین شیوه‌های TON و منابع رسمی طراحی شده است.
1011
+ </p>
1012
+ <div class="hero-buttons">
1013
+ <button class="btn btn-primary" onclick="checkEnvironment()">
1014
+ <i class="ri-shield-check-line"></i>
1015
+ بررسی امنیت
1016
+ </button>
1017
+ <button class="btn btn-secondary" onclick="installDependencies()">
1018
+ <i class="ri-download-line"></i>
1019
+ نصب وابستگی‌ها
1020
+ </button>
1021
+ <button class="btn btn-secondary" onclick="createProject()">
1022
+ <i class="ri-folder-add-line"></i>
1023
+ ایجاد پروژه جدید
1024
+ </button>
1025
+ </div>
1026
+ </div>
1027
+ </section>
1028
+
1029
+ <!-- Security Status -->
1030
+ <section class="security-status">
1031
+ <div class="security-header">
1032
+ <i class="ri-shield-keyhole-line"></i>
1033
+ <div>
1034
+ <h2>🔒 وضعیت امنیت</h2>
1035
+ <p style="color: var(--text-secondary); margin-top: 0.25rem;">تأیید ویژگی‌های امنیتی کلیدی</p>
1036
+ </div>
1037
+ <div style="margin-left: auto;">
1038
+ <span class="status-badge active">
1039
+ <i class="ri-checkbox-circle-line"></i>
1040
+ امن
1041
+ </span>
1042
+ </div>
1043
+ </div>
1044
+ <div class="security-features">
1045
+ <div class="security-feature">
1046
+ <i class="ri-key-2-line"></i>
1047
+ <span>بدون کلیدهای سخت‌کد شده</span>
1048
+ </div>
1049
+ <div class="security-feature">
1050
+ <i class="ri-user-check-line"></i>
1051
+ <span>تأیید کاربر قبل از عملیات</span>
1052
+ </div>
1053
+ <div class="security-feature">
1054
+ <i class="ri-search-eye-line"></i>
1055
+ <span>Audit خودکار</span>
1056
+ </div>
1057
+ <div class="security-feature">
1058
+ <i class="ri-lock-2-line"></i>
1059
+ <span>مجوزهای امن (600)</span>
1060
+ </div>
1061
+ <div class="security-feature">
1062
+ <i class="ri-code-s-slash-line"></i>
1063
+ <span>TypeScript Strict</span>
1064
  </div>
1065
+ <div class="security-feature">
1066
+ <i class="ri-git-branch-line"></i>
1067
+ <span>Gitignore حرفه‌ای</span>
1068
+ </div>
1069
+ <div class="security-feature">
1070
+ <i class="ri-wifi-line"></i>
1071
+ <span>Network Validation</span>
1072
+ </div>
1073
+ <div class="security-feature">
1074
+ <i class="ri-terminal-box-line"></i>
1075
+ <span>Sandbox Mode</span>
1076
+ </div>
1077
+ </div>
1078
+ </section>
1079
+
1080
+ <!-- Tabs Section -->
1081
+ <div class="tabs">
1082
+ <button class="tab active" onclick="switchTab('overview', this)">نمای کلی</button>
1083
+ <button class="tab" onclick="switchTab('installation', this)">نصب</button>
1084
+ <button class="tab" onclick="switchTab('tools', this)">ابزارها</button>
1085
+ <button class="tab" onclick="switchTab('commands', this)">دستورات</button>
1086
+ </div>
1087
+
1088
+ <!-- Tab Contents -->
1089
+ <div class="tab-content active" id="overview">
1090
+ <!-- Dashboard Grid -->
1091
+ <div class="dashboard-grid">
1092
+ <div class="card">
1093
+ <div class="card-header">
1094
+ <div class="card-icon tools">
1095
+ <i class="ri-tools-line"></i>
1096
  </div>
1097
+ <div>
1098
+ <h3 class="card-title">ابزارهای توسعه</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1099
  </div>
1100
+ </div>
1101
+ <div class="card-content">
1102
+ <p>Blueprint SDK، TON Connect، Chainstack APIs</p>
1103
+ <div class="progress-bar">
1104
+ <div class="progress-fill" style="width: 85%;"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1105
  </div>
1106
+ <p style="margin-top: 0.5rem; font-size: 0.9rem;">85% نصب شده</p>
1107
+ </div>
 
 
 
 
 
 
1108
  </div>
1109
 
1110
+ <div class="card">
1111
+ <div class="card-header">
1112
+ <div class="card-icon deps">
1113
+ <i class="ri-package-line"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1114
  </div>
1115
+ <div>
1116
+ <h3 class="card-title">وابستگی‌ها</h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1117
  </div>
1118
+ </div>
1119
+ <div class="card-content">
1120
+ <p>Node.js v18+، Python 3، Git، Docker</p>
1121
+ <div class="progress-bar">
1122
+ <div class="progress-fill" style="width: 70%;"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1123
  </div>
1124
+ <p style="margin-top: 0.5rem; font-size: 0.9rem;">70% آماده</p>
1125
+ </div>
1126
  </div>
1127
 
1128
+ <div class="card">
1129
+ <div class="card-header">
1130
+ <div class="card-icon network">
1131
+ <i class="ri-global-line"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1132
  </div>
1133
+ <div>
1134
+ <h3 class="card-title">شبکه</h3>
1135
+ </div>
1136
+ </div>
1137
+ <div class="card-content">
1138
+ <p>Testnet فعال | Mainnet آماده</p>
1139
+ <div class="progress-bar">
1140
+ <div class="progress-fill" style="width: 100%;"></div>
1141
+ </div>
1142
+ <p style="margin-top: 0.5rem; font-size: 0.9rem;">متصل</p>
1143
+ </div>
1144
  </div>
1145
 
1146
+ <div class="card">
1147
+ <div class="card-header">
1148
+ <div class="card-icon wallet">
1149
+ <i class="ri-wallet-3-line"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1150
  </div>
1151
+ <div>
1152
+ <h3 class="card-title">کیف پول</h3>
 
 
 
 
 
 
 
 
 
1153
  </div>
1154
+ </div>
1155
+ <div class="card-content">
1156
+ <p>Deployer و User wallets</p>
1157
+ <div class="progress-bar">
1158
+ <div class="progress-fill" style="width: 60%;"></div>
1159
+ </div>
1160
+ <p style="margin-top: 0.5rem; font-size: 0.9rem;">پیکربندی مورد نیاز</p>
1161
+ </div>
1162
+ </div>
1163
+ </div>
1164
+
1165
+ <!-- Terminal Preview -->
1166
+ <div class="terminal">
1167
+ <div class="terminal-header">
1168
+ <div class="terminal-dot red"></div>
1169
+ <div class="terminal-dot yellow"></div>
1170
+ <div class="terminal-dot green"></div>
1171
  </div>
1172
+ <div class="terminal-content" id="terminal-output">
1173
+ <div class="terminal-line">$ ton-pro-check</div>
1174
+ <div class="terminal-line">🔍 بررسی جامع محیط TON Professional v3.0.0</div>
1175
+ <div class="terminal-line">✅ Node.js: v18.19.0</div>
1176
+ <div class="terminal-line">✅ Blueprint: v1.0.0</div>
1177
+ <div class="terminal-line">