Hugging Face's logo

Spaces:
Re2906
/
anycoder-3c43eb46
Running

App Files Community
Re2906 commited on
Commit
61c554c
·
verified ·
1 Parent(s): 4113166

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1053 -19
index.html CHANGED
@@ -1,19 +1,1053 @@
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>🎉 پروژه کامل و آماده استقرار</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
19
+ --success-gradient: linear-gradient(135deg, #13B497 0%, #59D4A4 100%);
20
+ --bg-dark: #0f0f23;
21
+ --bg-card: #1a1a2e;
22
+ --text-primary: #ffffff;
23
+ --text-secondary: #a8a8b3;
24
+ --accent: #667eea;
25
+ --success: #10b981;
26
+ --warning: #f59e0b;
27
+ --danger: #ef4444;
28
+ }
29
+
30
+ body {
31
+ font-family: 'Vazirmatn', sans-serif;
32
+ background: var(--bg-dark);
33
+ color: var(--text-primary);
34
+ line-height: 1.6;
35
+ overflow-x: hidden;
36
+ }
37
+
38
+ /* Animated Background */
39
+ .bg-animation {
40
+ position: fixed;
41
+ width: 100%;
42
+ height: 100%;
43
+ top: 0;
44
+ left: 0;
45
+ z-index: -1;
46
+ background: linear-gradient(45deg, #0f0f23, #1a1a2e, #16213e);
47
+ overflow: hidden;
48
+ }
49
+
50
+ .bg-animation::before {
51
+ content: '';
52
+ position: absolute;
53
+ width: 200%;
54
+ height: 200%;
55
+ top: -50%;
56
+ left: -50%;
57
+ background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 1px, transparent 1px);
58
+ background-size: 50px 50px;
59
+ animation: bgMove 20s linear infinite;
60
+ }
61
+
62
+ @keyframes bgMove {
63
+ 0% { transform: translate(0, 0); }
64
+ 100% { transform: translate(50px, 50px); }
65
+ }
66
+
67
+ /* Header */
68
+ header {
69
+ background: rgba(26, 26, 46, 0.95);
70
+ backdrop-filter: blur(10px);
71
+ padding: 1rem 0;
72
+ position: sticky;
73
+ top: 0;
74
+ z-index: 1000;
75
+ border-bottom: 1px solid rgba(102, 126, 234, 0.3);
76
+ }
77
+
78
+ .header-content {
79
+ max-width: 1200px;
80
+ margin: 0 auto;
81
+ padding: 0 2rem;
82
+ display: flex;
83
+ justify-content: space-between;
84
+ align-items: center;
85
+ }
86
+
87
+ .logo {
88
+ font-size: 1.5rem;
89
+ font-weight: 700;
90
+ background: var(--primary-gradient);
91
+ -webkit-background-clip: text;
92
+ -webkit-text-fill-color: transparent;
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 0.5rem;
96
+ }
97
+
98
+ .build-with {
99
+ color: var(--text-secondary);
100
+ font-size: 0.9rem;
101
+ text-decoration: none;
102
+ transition: color 0.3s;
103
+ }
104
+
105
+ .build-with:hover {
106
+ color: var(--accent);
107
+ }
108
+
109
+ /* Hero Section */
110
+ .hero {
111
+ padding: 4rem 2rem;
112
+ text-align: center;
113
+ position: relative;
114
+ }
115
+
116
+ .hero h1 {
117
+ font-size: clamp(2rem, 5vw, 3.5rem);
118
+ font-weight: 900;
119
+ margin-bottom: 1rem;
120
+ background: var(--primary-gradient);
121
+ -webkit-background-clip: text;
122
+ -webkit-text-fill-color: transparent;
123
+ animation: fadeInUp 0.8s ease;
124
+ }
125
+
126
+ .hero-subtitle {
127
+ font-size: 1.25rem;
128
+ color: var(--text-secondary);
129
+ margin-bottom: 2rem;
130
+ animation: fadeInUp 0.8s ease 0.2s both;
131
+ }
132
+
133
+ @keyframes fadeInUp {
134
+ from {
135
+ opacity: 0;
136
+ transform: translateY(30px);
137
+ }
138
+ to {
139
+ opacity: 1;
140
+ transform: translateY(0);
141
+ }
142
+ }
143
+
144
+ /* Status Badge */
145
+ .status-badge {
146
+ display: inline-flex;
147
+ align-items: center;
148
+ gap: 0.5rem;
149
+ background: var(--success-gradient);
150
+ padding: 0.75rem 1.5rem;
151
+ border-radius: 50px;
152
+ font-weight: 600;
153
+ animation: pulse 2s infinite;
154
+ margin-bottom: 2rem;
155
+ }
156
+
157
+ @keyframes pulse {
158
+ 0%, 100% { transform: scale(1); }
159
+ 50% { transform: scale(1.05); }
160
+ }
161
+
162
+ .status-badge i {
163
+ animation: spin 2s linear infinite;
164
+ }
165
+
166
+ @keyframes spin {
167
+ from { transform: rotate(0deg); }
168
+ to { transform: rotate(360deg); }
169
+ }
170
+
171
+ /* Main Container */
172
+ .container {
173
+ max-width: 1200px;
174
+ margin: 0 auto;
175
+ padding: 0 2rem;
176
+ }
177
+
178
+ /* Stats Grid */
179
+ .stats-grid {
180
+ display: grid;
181
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
182
+ gap: 1.5rem;
183
+ margin-bottom: 3rem;
184
+ }
185
+
186
+ .stat-card {
187
+ background: var(--bg-card);
188
+ padding: 1.5rem;
189
+ border-radius: 15px;
190
+ border: 1px solid rgba(102, 126, 234, 0.2);
191
+ transition: all 0.3s ease;
192
+ position: relative;
193
+ overflow: hidden;
194
+ }
195
+
196
+ .stat-card::before {
197
+ content: '';
198
+ position: absolute;
199
+ top: 0;
200
+ left: 0;
201
+ width: 100%;
202
+ height: 3px;
203
+ background: var(--primary-gradient);
204
+ }
205
+
206
+ .stat-card:hover {
207
+ transform: translateY(-5px);
208
+ box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
209
+ }
210
+
211
+ .stat-icon {
212
+ width: 50px;
213
+ height: 50px;
214
+ background: var(--primary-gradient);
215
+ border-radius: 12px;
216
+ display: flex;
217
+ align-items: center;
218
+ justify-content: center;
219
+ margin-bottom: 1rem;
220
+ font-size: 1.5rem;
221
+ }
222
+
223
+ .stat-number {
224
+ font-size: 2rem;
225
+ font-weight: 700;
226
+ margin-bottom: 0.5rem;
227
+ }
228
+
229
+ .stat-label {
230
+ color: var(--text-secondary);
231
+ font-size: 0.9rem;
232
+ }
233
+
234
+ /* Feature Sections */
235
+ .feature-section {
236
+ background: var(--bg-card);
237
+ border-radius: 20px;
238
+ padding: 2rem;
239
+ margin-bottom: 2rem;
240
+ border: 1px solid rgba(102, 126, 234, 0.2);
241
+ }
242
+
243
+ .section-header {
244
+ display: flex;
245
+ align-items: center;
246
+ gap: 1rem;
247
+ margin-bottom: 1.5rem;
248
+ }
249
+
250
+ .section-icon {
251
+ width: 40px;
252
+ height: 40px;
253
+ background: var(--primary-gradient);
254
+ border-radius: 10px;
255
+ display: flex;
256
+ align-items: center;
257
+ justify-content: center;
258
+ }
259
+
260
+ .section-title {
261
+ font-size: 1.5rem;
262
+ font-weight: 700;
263
+ }
264
+
265
+ /* Checklists */
266
+ .checklist {
267
+ display: grid;
268
+ gap: 1rem;
269
+ }
270
+
271
+ .checklist-item {
272
+ display: flex;
273
+ align-items: flex-start;
274
+ gap: 1rem;
275
+ padding: 1rem;
276
+ background: rgba(102, 126, 234, 0.05);
277
+ border-radius: 10px;
278
+ transition: all 0.3s ease;
279
+ }
280
+
281
+ .checklist-item:hover {
282
+ background: rgba(102, 126, 234, 0.1);
283
+ transform: translateX(5px);
284
+ }
285
+
286
+ .check-icon {
287
+ color: var(--success);
288
+ font-size: 1.25rem;
289
+ flex-shrink: 0;
290
+ }
291
+
292
+ .check-content {
293
+ flex: 1;
294
+ }
295
+
296
+ .check-title {
297
+ font-weight: 600;
298
+ margin-bottom: 0.25rem;
299
+ }
300
+
301
+ .check-desc {
302
+ color: var(--text-secondary);
303
+ font-size: 0.9rem;
304
+ }
305
+
306
+ /* Links Table */
307
+ .links-table {
308
+ width: 100%;
309
+ border-collapse: separate;
310
+ border-spacing: 0;
311
+ overflow: hidden;
312
+ border-radius: 10px;
313
+ }
314
+
315
+ .links-table th {
316
+ background: rgba(102, 126, 234, 0.2);
317
+ padding: 1rem;
318
+ text-align: right;
319
+ font-weight: 600;
320
+ }
321
+
322
+ .links-table td {
323
+ padding: 1rem;
324
+ border-bottom: 1px solid rgba(102, 126, 234, 0.1);
325
+ }
326
+
327
+ .links-table tr:hover td {
328
+ background: rgba(102, 126, 234, 0.05);
329
+ }
330
+
331
+ .link-button {
332
+ display: inline-flex;
333
+ align-items: center;
334
+ gap: 0.5rem;
335
+ background: var(--primary-gradient);
336
+ color: white;
337
+ padding: 0.5rem 1rem;
338
+ border-radius: 8px;
339
+ text-decoration: none;
340
+ transition: all 0.3s ease;
341
+ font-weight: 500;
342
+ }
343
+
344
+ .link-button:hover {
345
+ transform: translateY(-2px);
346
+ box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
347
+ }
348
+
349
+ /* Deployment Steps */
350
+ .deployment-steps {
351
+ counter-reset: step;
352
+ }
353
+
354
+ .step-card {
355
+ position: relative;
356
+ padding: 2rem 2rem 2rem 4rem;
357
+ background: rgba(102, 126, 234, 0.05);
358
+ border-radius: 15px;
359
+ margin-bottom: 1.5rem;
360
+ transition: all 0.3s ease;
361
+ }
362
+
363
+ .step-card:hover {
364
+ background: rgba(102, 126, 234, 0.1);
365
+ transform: translateX(10px);
366
+ }
367
+
368
+ .step-card::before {
369
+ counter-increment: step;
370
+ content: counter(step);
371
+ position: absolute;
372
+ right: 2rem;
373
+ top: 50%;
374
+ transform: translateY(-50%);
375
+ width: 40px;
376
+ height: 40px;
377
+ background: var(--primary-gradient);
378
+ border-radius: 50%;
379
+ display: flex;
380
+ align-items: center;
381
+ justify-content: center;
382
+ font-weight: 700;
383
+ font-size: 1.25rem;
384
+ }
385
+
386
+ .step-title {
387
+ font-size: 1.25rem;
388
+ font-weight: 700;
389
+ margin-bottom: 0.5rem;
390
+ margin-right: 3rem;
391
+ }
392
+
393
+ .step-desc {
394
+ color: var(--text-secondary);
395
+ margin-right: 3rem;
396
+ line-height: 1.8;
397
+ }
398
+
399
+ .code-block {
400
+ background: #0f0f23;
401
+ padding: 1rem;
402
+ border-radius: 8px;
403
+ margin-top: 1rem;
404
+ font-family: monospace;
405
+ border: 1px solid rgba(102, 126, 234, 0.3);
406
+ position: relative;
407
+ }
408
+
409
+ .copy-btn {
410
+ position: absolute;
411
+ top: 0.5rem;
412
+ left: 0.5rem;
413
+ background: var(--primary-gradient);
414
+ border: none;
415
+ color: white;
416
+ padding: 0.25rem 0.5rem;
417
+ border-radius: 5px;
418
+ cursor: pointer;
419
+ font-size: 0.75rem;
420
+ transition: all 0.3s ease;
421
+ }
422
+
423
+ .copy-btn:hover {
424
+ transform: scale(1.05);
425
+ }
426
+
427
+ /* Cost Badge */
428
+ .cost-badge {
429
+ background: var(--success-gradient);
430
+ padding: 1.5rem;
431
+ border-radius: 15px;
432
+ text-align: center;
433
+ margin: 2rem 0;
434
+ }
435
+
436
+ .cost-amount {
437
+ font-size: 2rem;
438
+ font-weight: 900;
439
+ margin-bottom: 0.5rem;
440
+ }
441
+
442
+ .cost-desc {
443
+ color: rgba(255, 255, 255, 0.9);
444
+ }
445
+
446
+ /* Footer */
447
+ footer {
448
+ background: var(--bg-card);
449
+ padding: 2rem;
450
+ text-align: center;
451
+ margin-top: 4rem;
452
+ border-top: 1px solid rgba(102, 126, 234, 0.2);
453
+ }
454
+
455
+ .footer-content {
456
+ max-width: 1200px;
457
+ margin: 0 auto;
458
+ }
459
+
460
+ .final-message {
461
+ font-size: 1.25rem;
462
+ font-weight: 600;
463
+ margin-bottom: 1rem;
464
+ background: var(--secondary-gradient);
465
+ -webkit-background-clip: text;
466
+ -webkit-text-fill-color: transparent;
467
+ }
468
+
469
+ /* Responsive */
470
+ @media (max-width: 768px) {
471
+ .hero h1 {
472
+ font-size: 2rem;
473
+ }
474
+
475
+ .stats-grid {
476
+ grid-template-columns: 1fr;
477
+ }
478
+
479
+ .step-card {
480
+ padding-right: 4rem;
481
+ }
482
+
483
+ .step-card::before {
484
+ right: 1rem;
485
+ }
486
+
487
+ .links-table {
488
+ font-size: 0.9rem;
489
+ }
490
+
491
+ .links-table th,
492
+ .links-table td {
493
+ padding: 0.5rem;
494
+ }
495
+ }
496
+
497
+ /* Loading Animation */
498
+ .loading-dots {
499
+ display: inline-flex;
500
+ gap: 0.25rem;
501
+ }
502
+
503
+ .loading-dots span {
504
+ width: 8px;
505
+ height: 8px;
506
+ background: currentColor;
507
+ border-radius: 50%;
508
+ animation: loadingDot 1.4s infinite ease-in-out both;
509
+ }
510
+
511
+ .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
512
+ .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
513
+
514
+ @keyframes loadingDot {
515
+ 0%, 80%, 100% {
516
+ transform: scale(0);
517
+ opacity: 0.5;
518
+ }
519
+ 40% {
520
+ transform: scale(1);
521
+ opacity: 1;
522
+ }
523
+ }
524
+
525
+ /* Tooltip */
526
+ .tooltip {
527
+ position: relative;
528
+ display: inline-block;
529
+ }
530
+
531
+ .tooltip .tooltiptext {
532
+ visibility: hidden;
533
+ width: 200px;
534
+ background-color: var(--bg-card);
535
+ color: var(--text-primary);
536
+ text-align: center;
537
+ border-radius: 8px;
538
+ padding: 0.5rem;
539
+ position: absolute;
540
+ z-index: 1;
541
+ bottom: 125%;
542
+ left: 50%;
543
+ margin-left: -100px;
544
+ opacity: 0;
545
+ transition: opacity 0.3s;
546
+ border: 1px solid rgba(102, 126, 234, 0.3);
547
+ font-size: 0.875rem;
548
+ }
549
+
550
+ .tooltip:hover .tooltiptext {
551
+ visibility: visible;
552
+ opacity: 1;
553
+ }
554
+ </style>
555
+ </head>
556
+ <body>
557
+ <div class="bg-animation"></div>
558
+
559
+ <header>
560
+ <div class="header-content">
561
+ <div class="logo">
562
+ <i class="fas fa-rocket"></i>
563
+ <span>پروژه TON Suite</span>
564
+ </div>
565
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="build-with">
566
+ Built with anycoder <i class="fas fa-external-link-alt"></i>
567
+ </a>
568
+ </div>
569
+ </header>
570
+
571
+ <section class="hero">
572
+ <h1>🎉 تبریک! پروژه 100% کامل و آماده استقرار است! 🎉</h1>
573
+ <p class="hero-subtitle">سیستم کامل Firebase Push Notifications با پشتیبانی از زبان فارسی</p>
574
+
575
+ <div class="status-badge">
576
+ <i class="fas fa-check-circle"></i>
577
+ <span>پروژه با موفقیت تکمیل شد</span>
578
+ <div class="loading-dots">
579
+ <span></span>
580
+ <span></span>
581
+ <span></span>
582
+ </div>
583
+ </div>
584
+ </section>
585
+
586
+ <div class="container">
587
+ <!-- Stats Grid -->
588
+ <div class="stats-grid">
589
+ <div class="stat-card">
590
+ <div class="stat-icon">
591
+ <i class="fas fa-file-code"></i>
592
+ </div>
593
+ <div class="stat-number">16</div>
594
+ <div class="stat-label">فایل ایجاد شده</div>
595
+ </div>
596
+
597
+ <div class="stat-card">
598
+ <div class="stat-icon">
599
+ <i class="fas fa-code"></i>
600
+ </div>
601
+ <div class="stat-number">+3,888</div>
602
+ <div class="stat-label">خط کد اضافه شده</div>
603
+ </div>
604
+
605
+ <div class="stat-card">
606
+ <div class="stat-icon">
607
+ <i class="fas fa-plug"></i>
608
+ </div>
609
+ <div class="stat-number">8</div>
610
+ <div class="stat-label">نقطه پایانی API</div>
611
+ </div>
612
+
613
+ <div class="stat-card">
614
+ <div class="stat-icon">
615
+ <i class="fas fa-bell"></i>
616
+ </div>
617
+ <div class="stat-number">8</div>
618
+ <div class="stat-label">نوع اعلان پوش</div>
619
+ </div>
620
+
621
+ <div class="stat-card">
622
+ <div class="stat-icon">
623
+ <i class="fas fa-book"></i>
624
+ </div>
625
+ <div class="stat-number">9</div>
626
+ <div class="stat-label">فایل مستندات</div>
627
+ </div>
628
+
629
+ <div class="stat-card">
630
+ <div class="stat-icon">
631
+ <i class="fas fa-vial"></i>
632
+ </div>
633
+ <div class="stat-number">2</div>
634
+ <div class="stat-label">اسکریپت تست</div>
635
+ </div>
636
+ </div>
637
+
638
+ <!-- Firebase Push Notifications -->
639
+ <div class="feature-section">
640
+ <div class="section-header">
641
+ <div class="section-icon">
642
+ <i class="fas fa-bell"></i>
643
+ </div>
644
+ <h2 class="section-title">🔥 سیستم کامل Firebase Push Notifications</h2>
645
+ </div>
646
+
647
+ <div class="checklist">
648
+ <div class="checklist-item">
649
+ <i class="fas fa-check-circle check-icon"></i>
650
+ <div class="check-content">
651
+ <div class="check-title">8 نوع اعلان پوش با متن فارسی</div>
652
+ <div class="check-desc">دریافت تراکنش، ارسال، ایجاد توکن، هشدار موجودی و...</div>
653
+ </div>
654
+ </div>
655
+
656
+ <div class="checklist-item">
657
+ <i class="fas fa-check-circle check-icon"></i>
658
+ <div class="check-content">
659
+ <div class="check-title">8 نقطه پایانی API</div>
660
+ <div class="check-desc">برای مدیریت کامل اعلان‌ها</div>
661
+ </div>
662
+ </div>
663
+
664
+ <div class="checklist-item">
665
+ <i class="fas fa-check-circle check-icon"></i>
666
+ <div class="check-content">
667
+ <div class="check-title">مانیتورینگ خودکار کیف پول TON</div>
668
+ <div class="check-desc">ارسال اعلان برای ت��اکنش‌های جدید</div>
669
+ </div>
670
+ </div>
671
+
672
+ <div class="checklist-item">
673
+ <i class="fas fa-check-circle check-icon"></i>
674
+ <div class="check-content">
675
+ <div class="check-title">پشتیبانی کامل</div>
676
+ <div class="check-desc">iOS + Android + Web</div>
677
+ </div>
678
+ </div>
679
+ </div>
680
+ </div>
681
+
682
+ <!-- Build and Preparation -->
683
+ <div class="feature-section">
684
+ <div class="section-header">
685
+ <div class="section-icon">
686
+ <i class="fas fa-hammer"></i>
687
+ </div>
688
+ <h2 class="section-title">🏗️ Build و آماده‌سازی</h2>
689
+ </div>
690
+
691
+ <div class="checklist">
692
+ <div class="checklist-item">
693
+ <i class="fas fa-check-circle check-icon"></i>
694
+ <div class="check-content">
695
+ <div class="check-title">Frontend بیلد شده</div>
696
+ <div class="check-desc">1.04 MB (307 KB فشرده)</div>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="checklist-item">
701
+ <i class="fas fa-check-circle check-icon"></i>
702
+ <div class="check-content">
703
+ <div class="check-title">Backend کامپایل شده</div>
704
+ <div class="check-desc">با TypeScript</div>
705
+ </div>
706
+ </div>
707
+
708
+ <div class="checklist-item">
709
+ <i class="fas fa-check-circle check-icon"></i>
710
+ <div class="check-content">
711
+ <div class="check-title">همه وابستگی‌ها نصب شده</div>
712
+ <div class="check-desc">آماده برای استقرار</div>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="checklist-item">
717
+ <i class="fas fa-check-circle check-icon"></i>
718
+ <div class="check-content">
719
+ <div class="check-title">مسیر Build آماده</div>
720
+ <div class="check-desc">/home/user/dist/frontend/client/</div>
721
+ </div>
722
+ </div>
723
+ </div>
724
+ </div>
725
+
726
+ <!-- Documentation -->
727
+ <div class="feature-section">
728
+ <div class="section-header">
729
+ <div class="section-icon">
730
+ <i class="fas fa-file-alt"></i>
731
+ </div>
732
+ <h2 class="section-title">📚 مستندات جامع (6,000+ کلمه)</h2>
733
+ </div>
734
+
735
+ <div class="checklist">
736
+ <div class="checklist-item">
737
+ <i class="fas fa-check-circle check-icon"></i>
738
+ <div class="check-content">
739
+ <div class="check-title">9 فایل مستندات</div>
740
+ <div class="check-desc">8 انگلیسی + 1 فارسی</div>
741
+ </div>
742
+ </div>
743
+
744
+ <div class="checklist-item">
745
+ <i class="fas fa-check-circle check-icon"></i>
746
+ <div class="check-content">
747
+ <div class="check-title">راهنمای گام‌به‌گام استقرار</div>
748
+ <div class="check-desc">مثال‌های کامل کد</div>
749
+ </div>
750
+ </div>
751
+
752
+ <div class="checklist-item">
753
+ <i class="fas fa-check-circle check-icon"></i>
754
+ <div class="check-content">
755
+ <div class="check-title">دستورالعمل‌های کامل</div>
756
+ <div class="check-desc">Firebase، Cloudflare، GitHub</div>
757
+ </div>
758
+ </div>
759
+ </div>
760
+ </div>
761
+
762
+ <!-- Important Links -->
763
+ <div class="feature-section">
764
+ <div class="section-header">
765
+ <div class="section-icon">
766
+ <i class="fas fa-link"></i>
767
+ </div>
768
+ <h2 class="section-title">🌐 لینک‌های مهم</h2>
769
+ </div>
770
+
771
+ <table class="links-table">
772
+ <thead>
773
+ <tr>
774
+ <th>نوع</th>
775
+ <th>لینک</th>
776
+ <th>عملیات</th>
777
+ </tr>
778
+ </thead>
779
+ <tbody>
780
+ <tr>
781
+ <td><strong>Production URL</strong></td>
782
+ <td>https://swap-coffee-suite.pages.dev</td>
783
+ <td>
784
+ <a href="https://swap-coffee-suite.pages.dev" target="_blank" class="link-button">
785
+ <i class="fas fa-external-link-alt"></i>
786
+ بازدید
787
+ </a>
788
+ </td>
789
+ </tr>
790
+ <tr>
791
+ <td><strong>Preview URL</strong></td>
792
+ <td>https://develop.swap-coffee-suite.pages.dev</td>
793
+ <td>
794
+ <a href="https://develop.swap-coffee-suite.pages.dev" target="_blank" class="link-button">
795
+ <i class="fas fa-external-link-alt"></i>
796
+ بازدید
797
+ </a>
798
+ </td>
799
+ </tr>
800
+ <tr>
801
+ <td><strong>Pull Request</strong></td>
802
+ <td>#4</td>
803
+ <td>
804
+ <a href="https://github.com/finaljrad-IRr/re29066/pull/4" target="_blank" class="link-button">
805
+ <i class="fab fa-github"></i>
806
+ GitHub
807
+ </a>
808
+ </td>
809
+ </tr>
810
+ <tr>
811
+ <td><strong>Repository</strong></td>
812
+ <td>main</td>
813
+ <td>
814
+ <a href="https://github.com/finaljrad-IRr/re29066" target="_blank" class="link-button">
815
+ <i class="fab fa-github"></i>
816
+ GitHub
817
+ </a>
818
+ </td>
819
+ </tr>
820
+ <tr>
821
+ <td><strong>Cloudflare Dashboard</strong></td>
822
+ <td>Pages View</td>
823
+ <td>
824
+ <a href="https://dash.cloudflare.com/8f573700dcd61195fa4afc0ad3723191/pages/view/swap-coffee-suite" target="_blank" class="link-button">
825
+ <i class="fas fa-tachometer-alt"></i>
826
+ داشبورد
827
+ </a>
828
+ </td>
829
+ </tr>
830
+ </tbody>
831
+ </table>
832
+ </div>
833
+
834
+ <!-- Cost Information -->
835
+ <div class="cost-badge">
836
+ <div class="cost-amount">💰 0 تومان/ماه</div>
837
+ <div class="cost-desc">100% رایگان! • Cloudflare Pages: رایگان • Firebase: رایگان (10,000 پیام/ماه) • TON Center API: رایگان</div>
838
+ </div>
839
+
840
+ <!-- Deployment Steps -->
841
+ <div class="feature-section">
842
+ <div class="section-header">
843
+ <div class="section-icon">
844
+ <i class="fas fa-rocket"></i>
845
+ </div>
846
+ <h2 class="section-title">🚀 استقرار در 3 مرحله ساده (5 دقیقه)</h2>
847
+ </div>
848
+
849
+ <div class="deployment-steps">
850
+ <div class="step-card">
851
+ <h3 class="step-title">مرحله 1: توکن API Cloudflare بگیرید (2 دقیقه)</h3>
852
+ <p class="step-desc">
853
+ 1. به آدرس بروید: <a href="https://dash.cloudflare.com/profile/api-tokens" target="_blank" style="color: var(--accent);">https://dash.cloudflare.com/profile/api-tokens</a><br>
854
+ 2. روی "Create Token" کلیک کنید<br>
855
+ 3. الگوی "Edit Cloudflare Workers" را انتخاب کنید<br>
856
+ 4. توکن را کپی کنید
857
+ </p>
858
+ </div>
859
+
860
+ <div class="step-card">
861
+ <h3 class="step-title">مرحله 2: پروژه را Deploy کنید (2 دقیقه)</h3>
862
+ <p class="step-desc">
863
+ فقط این دستور را اجرا کنید:
864
+ </p>
865
+ <div class="code-block">
866
+ <button class="copy-btn" onclick="copyCode(this)">کپی</button>
867
+ <code>export CLOUDFLARE_API_TOKEN="توکن-شما-اینجا" ./deploy-cloudflare.sh</code>
868
+ </div>
869
+ </div>
870
+
871
+ <div class="step-card">
872
+ <h3 class="step-title">مرحله 3: Firebase را راه‌اندازی کنید (1 دقیقه)</h3>
873
+ <p class="step-desc">
874
+ 1. به آدرس بروید: <a href="https://console.firebase.google.com" target="_blank" style="color: var(--accent);">https://console.firebase.google.com</a><br>
875
+ 2. Project Settings → Service Accounts → Generate New Private Key<br>
876
+ 3. فایل را ذخیره کنید در: backend/firebase-service-account.json
877
+ </p>
878
+ </div>
879
+ </div>
880
+
881
+ <div style="text-align: center; margin-top: 2rem;">
882
+ <div class="status-badge">
883
+ <i class="fas fa-check"></i>
884
+ <span>✅ تمام! برنامه شما live است در: https://swap-coffee-suite.pages.dev</span>
885
+ </div>
886
+ </div>
887
+ </div>
888
+
889
+ <!-- Key Features -->
890
+ <div class="feature-section">
891
+ <div class="section-header">
892
+ <div class="section-icon">
893
+ <i class="fas fa-star"></i>
894
+ </div>
895
+ <h2 class="section-title">🎯 ویژگی‌های کلیدی</h2>
896
+ </div>
897
+
898
+ <div class="checklist">
899
+ <div class="checklist-item">
900
+ <i class="fas fa-check-circle check-icon"></i>
901
+ <div class="check-content">
902
+ <div class="check-title">Firebase Push Notifications با متن فارسی</div>
903
+ </div>
904
+ </div>
905
+
906
+ <div class="checklist-item">
907
+ <i class="fas fa-check-circle check-icon"></i>
908
+ <div class="check-content">
909
+ <div class="check-title">یکپارچه‌سازی TonConnect Wallet</div>
910
+ </div>
911
+ </div>
912
+
913
+ <div class="checklist-item">
914
+ <i class="fas fa-check-circle check-icon"></i>
915
+ <div class="check-content">
916
+ <div class="check-title">ایجاد و Claim کردن Jettons</div>
917
+ </div>
918
+ </div>
919
+
920
+ <div class="checklist-item">
921
+ <i class="fas fa-check-circle check-icon"></i>
922
+ <div class="check-content">
923
+ <div class="check-title">مانیتورینگ خودکار تراکنش‌ها</div>
924
+ </div>
925
+ </div>
926
+
927
+ <div class="checklist-item">
928
+ <i class="fas fa-check-circle check-icon"></i>
929
+ <div class="check-content">
930
+ <div class="check-title">داشبورد آمار پیشرفته</div>
931
+ </div>
932
+ </div>
933
+
934
+ <div class="checklist-item">
935
+ <i class="fas fa-check-circle check-icon"></i>
936
+ <div class="check-content">
937
+ <div class="check-title">رابط کاربری فارسی/انگلیسی</div>
938
+ </div>
939
+ </div>
940
+
941
+ <div class="checklist-item">
942
+ <i class="fas fa-check-circle check-icon"></i>
943
+ <div class="check-content">
944
+ <div class="check-title">Responsive Design (موبایل + دسکتاپ)</div>
945
+ </div>
946
+ </div>
947
+
948
+ <div class="checklist-item">
949
+ <i class="fas fa-check-circle check-icon"></i>
950
+ <div class="check-content">
951
+ <div class="check-title">Performance Optimized</div>
952
+ </div>
953
+ </div>
954
+ </div>
955
+ </div>
956
+ </div>
957
+
958
+ <footer>
959
+ <div class="footer-content">
960
+ <div class="final-message">
961
+ 🎉 پولدارت کردم! حالا برو deploy کن! 💰🚀
962
+ </div>
963
+ <p style="color: var(--text-secondary); margin-bottom: 1rem;">
964
+ فقط 5 دقیقه تا live شدن برنامه‌ات!
965
+ </p>
966
+ <div class="code-block" style="max-width: 600px; margin: 0 auto;">
967
+ <button class="copy-btn" onclick="copyCode(this)">کپی</button>
968
+ <code>export CLOUDFLARE_API_TOKEN="توکن-تو" ./deploy-cloudflare.sh</code>
969
+ </div>
970
+ <p style="margin-top: 1rem; color: var(--success); font-weight: 600;">
971
+ برنامه‌ات در https://swap-coffee-suite.pages.dev فعال می‌شه! 🎉
972
+ </p>
973
+ </div>
974
+ </footer>
975
+
976
+ <script>
977
+ // Copy code functionality
978
+ function copyCode(button) {
979
+ const codeBlock = button.parentElement;
980
+ const code = codeBlock.querySelector('code').textContent;
981
+
982
+ navigator.clipboard.writeText(code).then(() => {
983
+ const originalText = button.textContent;
984
+ button.textContent = 'کپی شد!';
985
+ button.style.background = 'var(--success-gradient)';
986
+
987
+ setTimeout(() => {
988
+ button.textContent = originalText;
989
+ button.style.background = '';
990
+ }, 2000);
991
+ });
992
+ }
993
+
994
+ // Add smooth scroll behavior
995
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
996
+ anchor.addEventListener('click', function (e) {
997
+ e.preventDefault();
998
+ const target = document.querySelector(this.getAttribute('href'));
999
+ if (target) {
1000
+ target.scrollIntoView({
1001
+ behavior: 'smooth',
1002
+ block: 'start'
1003
+ });
1004
+ }
1005
+ });
1006
+ });
1007
+
1008
+ // Add animation on scroll
1009
+ const observerOptions = {
1010
+ threshold: 0.1,
1011
+ rootMargin: '0px 0px -50px 0px'
1012
+ };
1013
+
1014
+ const observer = new IntersectionObserver((entries) => {
1015
+ entries.forEach(entry => {
1016
+ if (entry.isIntersecting) {
1017
+ entry.target.style.animation = 'fadeInUp 0.6s ease both';
1018
+ observer.unobserve(entry.target);
1019
+ }
1020
+ });
1021
+ }, observerOptions);
1022
+
1023
+ // Observe all feature sections
1024
+ document.querySelectorAll('.feature-section, .stat-card, .step-card').forEach(el => {
1025
+ observer.observe(el);
1026
+ });
1027
+
1028
+ // Add interactive hover effect to stat cards
1029
+ document.querySelectorAll('.stat-card').forEach(card => {
1030
+ card.addEventListener('mouseenter', function() {
1031
+ this.querySelector('.stat-icon').style.transform = 'scale(1.1) rotate(5deg)';
1032
+ });
1033
+
1034
+ card.addEventListener('mouseleave', function() {
1035
+ this.querySelector('.stat-icon').style.transform = '';
1036
+ });
1037
+ });
1038
+
1039
+ // Dynamic year in footer
1040
+ const currentYear = new Date().getFullYear();
1041
+ const yearElements = document.querySelectorAll('.current-year');
1042
+ yearElements.forEach(el => {
1043
+ el.textContent = currentYear;
1044
+ });
1045
+
1046
+ // Add ripple effect on click
1047
+ document.addEventListener('click', function(e) {
1048
+ if (e.target.matches('.link-button, .copy-btn')) {
1049
+ const ripple = document.createElement('span');
1050
+ ripple.style.position = 'absolute';
1051
+ ripple.style.width = '20px';
1052
+ ripple.style.height = '20px';
1053
+ ripple.style.background = 'rgba(255,