Hugging Face's logo

Spaces:
Opera8
/
Ava
Running

App Files Community
Opera8 commited on
Commit
f396f82
·
verified ·
1 Parent(s): 2f352a8

Delete index (1) (18).html

Browse files
Files changed (1) hide show
  1. index (1) (18).html +0 -629
index (1) (18).html DELETED
@@ -1,629 +0,0 @@
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, maximum-scale=1.0, user-scalable=no" />
6
- <title>آوا هوش - جعبه ابزار صدا</title>
7
-
8
- <!-- Tailwind CSS -->
9
- <script src="https://cdn.tailwindcss.com"></script>
10
-
11
- <!-- Lucide Icons -->
12
- <script src="https://unpkg.com/lucide@latest"></script>
13
-
14
- <!-- Fonts -->
15
- <link rel="preconnect" href="https://fonts.googleapis.com">
16
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
- <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap" rel="stylesheet">
18
-
19
- <style>
20
- body {
21
- font-family: 'Vazirmatn', sans-serif;
22
- background-color: #0f172a;
23
- color: white;
24
- -webkit-tap-highlight-color: transparent;
25
- overflow-x: hidden;
26
- margin: 0;
27
- padding: 0;
28
- }
29
-
30
- /* Custom Scrollbar */
31
- ::-webkit-scrollbar { width: 6px; }
32
- ::-webkit-scrollbar-track { background: #0f172a; }
33
- ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
34
- ::-webkit-scrollbar-thumb:hover { background: #475569; }
35
-
36
- /* Animations */
37
- @keyframes float {
38
- 0%, 100% { transform: translateY(0); }
39
- 50% { transform: translateY(-20px); }
40
- }
41
-
42
- @keyframes pulse-glow {
43
- 0%, 100% { opacity: 0.5; transform: scale(1); }
44
- 50% { opacity: 1; transform: scale(1.1); }
45
- }
46
-
47
- @keyframes blob-move {
48
- 0% { transform: translate(0, 0) scale(1); }
49
- 33% { transform: translate(30px, -50px) scale(1.1); }
50
- 66% { transform: translate(-20px, 20px) scale(0.9); }
51
- 100% { transform: translate(0, 0) scale(1); }
52
- }
53
-
54
- @keyframes rotate-slow {
55
- 0% { transform: rotate(0deg); }
56
- 100% { transform: rotate(360deg); }
57
- }
58
-
59
- @keyframes gradient-x {
60
- 0% { background-position: 0% 50%; }
61
- 50% { background-position: 100% 50%; }
62
- 100% { background-position: 0% 50%; }
63
- }
64
-
65
- @keyframes fade-in-up {
66
- from { opacity: 0; transform: translateY(20px); }
67
- to { opacity: 1; transform: translateY(0); }
68
- }
69
-
70
- @keyframes shimmer {
71
- 0% { transform: translateX(-100%); }
72
- 100% { transform: translateX(100%); }
73
- }
74
-
75
- @keyframes particle-rise {
76
- 0% { transform: translateY(110vh); opacity: 0; }
77
- 20% { opacity: 0.5; }
78
- 80% { opacity: 0.5; }
79
- 100% { transform: translateY(-10vh); opacity: 0; }
80
- }
81
-
82
- .animate-blob { animation: blob-move 20s infinite alternate; }
83
- .animate-gradient-text { background-size: 200% auto; animation: gradient-x 4s linear infinite; }
84
- .fade-in-entry { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }
85
- .animate-shimmer { animation: shimmer 2s infinite; }
86
- .animate-float-slow { animation: float 6s ease-in-out infinite; }
87
-
88
- /* Utility classes */
89
- .glass-panel {
90
- background: rgba(19, 23, 34, 0.8);
91
- backdrop-filter: blur(16px);
92
- -webkit-backdrop-filter: blur(16px);
93
- border: 1px solid rgba(255, 255, 255, 0.05);
94
- }
95
-
96
- .hover-shine {
97
- position: relative;
98
- overflow: hidden;
99
- }
100
- .hover-shine::after {
101
- content: '';
102
- position: absolute;
103
- top: 0;
104
- left: 0;
105
- width: 100%;
106
- height: 100%;
107
- background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
108
- transform: translateX(-100%) skewX(-15deg);
109
- transition: transform 0.5s;
110
- }
111
- .hover-shine:hover::after {
112
- transform: translateX(100%) skewX(-15deg);
113
- }
114
-
115
- .particle {
116
- position: absolute;
117
- width: 4px;
118
- height: 4px;
119
- background: white;
120
- border-radius: 50%;
121
- filter: blur(1px);
122
- }
123
-
124
- /* View transition utility */
125
- .view-section {
126
- display: none;
127
- opacity: 0;
128
- transition: opacity 0.3s ease-in-out;
129
- }
130
- .view-section.active {
131
- display: block;
132
- opacity: 1;
133
- }
134
- </style>
135
- <script type="importmap">
136
- {
137
- "imports": {
138
- "react": "https://esm.sh/react@^19.2.4",
139
- "react-dom/": "https://esm.sh/react-dom@^19.2.4/",
140
- "react/": "https://esm.sh/react@^19.2.4/",
141
- "lucide-react": "https://esm.sh/lucide-react@^0.563.0",
142
- "framer-motion": "https://esm.sh/framer-motion@^12.29.2"
143
- }
144
- }
145
- </script>
146
- </head>
147
- <body>
148
-
149
- <!-- Background Effects -->
150
- <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-[#0B0F19]">
151
- <!-- Tech Grid -->
152
- <div class="absolute inset-0 opacity-[0.04]" style="background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 50px 50px;"></div>
153
-
154
- <!-- Orbs -->
155
- <div class="absolute -top-[10%] -right-[20%] w-[600px] h-[600px] bg-gradient-to-br from-violet-600/20 to-indigo-600/20 rounded-full blur-[120px] animate-blob"></div>
156
- <div class="absolute top-[40%] -left-[20%] w-[500px] h-[500px] bg-gradient-to-tr from-blue-600/15 to-cyan-500/15 rounded-full blur-[100px] animate-blob" style="animation-delay: -5s;"></div>
157
- <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-emerald-500/5 rounded-full blur-[80px] animate-blob" style="animation-delay: -10s;"></div>
158
-
159
- <!-- Particles Container (Populated by JS) -->
160
- <div id="particles-container"></div>
161
-
162
- <!-- Vignette -->
163
- <div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#0B0F19]/60 to-[#0B0F19]"></div>
164
- </div>
165
-
166
- <!-- Main Content Container -->
167
- <div class="relative z-10 min-h-screen pb-24 pt-8">
168
-
169
- <!-- === HOME VIEW === -->
170
- <div id="home-view" class="view-section active">
171
- <!-- Image Slider -->
172
- <div class="px-6 mb-6 fade-in-entry" style="animation-delay: 0.2s;">
173
- <div class="relative w-full aspect-[2/1] rounded-[24px] overflow-hidden shadow-2xl ring-1 ring-white/10 group z-20 bg-slate-800">
174
- <div id="slider-images" class="absolute inset-0 w-full h-full">
175
- <!-- Images injected by JS -->
176
- </div>
177
- <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19]/80 via-transparent to-transparent opacity-80"></div>
178
- <!-- Dots -->
179
- <div id="slider-dots" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10">
180
- <!-- Dots injected by JS -->
181
- </div>
182
- </div>
183
- </div>
184
-
185
- <!-- Hero Text -->
186
- <div class="px-6 pt-2 pb-6 text-center fade-in-entry" style="animation-delay: 0.3s;">
187
- <h2 class="text-[2rem] font-black text-white mb-4 leading-[1.3] tracking-tight">
188
- دنیای صدا را <br />
189
- <span class="relative inline-block px-2">
190
- <span class="absolute inset-0 bg-indigo-500/10 blur-xl rounded-full transform rotate-3"></span>
191
- <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-cyan-300 animate-gradient-text">
192
- با هوش مصنوعی
193
- </span>
194
- </span>
195
- <br/>
196
- <span class="text-white">متحول کنید</span>
197
- </h2>
198
- <p class="text-slate-400 text-sm leading-7 font-light max-w-[80%] mx-auto opacity-80">
199
- تکنولوژی پیشرفته برای خلق، ویرایش و تبدیل صدا
200
- </p>
201
- </div>
202
-
203
- <!-- Features Grid -->
204
- <div class="px-6">
205
- <div id="features-grid" class="grid grid-cols-2 gap-4 sm:gap-6">
206
- <!-- Features injected by JS -->
207
- </div>
208
-
209
- <!-- Special Feature -->
210
- <div id="special-feature-container" class="mt-8 mb-4 fade-in-entry" style="animation-delay: 0.6s;">
211
- <!-- Special Feature injected by JS -->
212
- </div>
213
-
214
- <div class="text-center mt-10 opacity-40 pb-6">
215
- <p class="text-[10px] text-slate-300 font-light tracking-widest">
216
- POWERED BY ALPHA • VER 2.0
217
- </p>
218
- </div>
219
- </div>
220
- </div>
221
-
222
- <!-- === ACCOUNT VIEW (SUBSCRIPTION) === -->
223
- <div id="account-view" class="view-section">
224
- <div class="pb-28">
225
-
226
- <!-- 1. Banner Image -->
227
- <div class="relative w-full mx-auto px-5 mb-6 -mt-2 fade-in-entry">
228
- <div class="relative w-full aspect-[1179/546] rounded-[32px] overflow-hidden shadow-2xl shadow-amber-500/10 ring-1 ring-white/10">
229
- <div class="absolute inset-0 bg-gradient-to-b from-[#1e202e] via-[#131722] to-[#0f111a] z-0"></div>
230
- <img src="https://app.puzzley.net/uploads/user/Jydo/Gpt4/tmpu3en1zel%281%29.png?_t=1769674744"
231
- alt="Premium"
232
- class="absolute inset-0 w-full h-full object-cover z-10 opacity-90" />
233
- <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19] via-transparent to-transparent z-20"></div>
234
- </div>
235
- </div>
236
-
237
- <!-- 2. Title Section -->
238
- <div class="text-center px-6 mb-8 fade-in-entry" style="animation-delay: 0.1s;">
239
- <h1 class="text-2xl font-black text-white mb-2">پلن‌های دسترسی</h1>
240
- <p class="text-slate-400 text-xs font-medium">قدرت واقعی هوش مصنوعی را آزاد کنید</p>
241
- </div>
242
-
243
- <!-- 3. Comparison Table -->
244
- <div class="px-4 mb-8 fade-in-entry" style="animation-delay: 0.2s;">
245
- <div class="bg-[#131722]/60 backdrop-blur-xl rounded-[24px] border border-white/5 overflow-hidden relative">
246
- <!-- Headers -->
247
- <div class="grid grid-cols-[1.2fr_1fr_1fr] border-b border-white/5 bg-white/5">
248
- <div class="p-4 text-[10px] font-bold text-slate-400 flex items-center">ویژگی‌ها</div>
249
- <div class="p-4 text-[11px] font-bold text-slate-300 text-center bg-slate-800/30">رایگان</div>
250
- <div class="p-4 text-[11px] font-bold text-amber-400 text-center bg-amber-500/10 relative">
251
- <span class="relative z-10">نسخه طلایی</span>
252
- <div class="absolute inset-0 bg-amber-500/20 blur-xl"></div>
253
- </div>
254
- </div>
255
-
256
- <!-- Body -->
257
- <div class="divide-y divide-white/5" id="comparison-rows">
258
- <!-- Rows injected via JS -->
259
- </div>
260
- </div>
261
- </div>
262
-
263
- <!-- 4. Lite Button -->
264
- <div class="px-6 relative z-20 fade-in-entry" style="animation-delay: 0.4s;">
265
- <div class="w-full relative group cursor-pointer active:scale-95 transition-transform duration-200">
266
- <div class="absolute inset-0 bg-gradient-to-r from-amber-300 via-yellow-400 to-amber-500 rounded-2xl blur opacity-40 group-hover:opacity-60 transition-opacity duration-500 animate-pulse"></div>
267
- <div class="relative bg-gradient-to-r from-[#1A1F2E] to-[#131722] border border-amber-500/50 rounded-2xl p-4 flex items-center justify-between shadow-xl">
268
-
269
- <div class="flex items-center gap-3">
270
- <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-400 to-yellow-600 flex items-center justify-center shadow-lg shadow-amber-500/30 text-white">
271
- <i data-lucide="crown" class="w-5 h-5 fill-white"></i>
272
- </div>
273
- <div class="flex flex-col items-start">
274
- <span class="text-base font-bold text-white">فعالسازی اشتراک ویژه</span>
275
- <span class="text-[10px] text-amber-400/80 font-medium">دسترسی نامحدود به تمامی امکانات</span>
276
- </div>
277
- </div>
278
-
279
- <div class="h-8 w-8 rounded-full bg-amber-500/10 flex items-center justify-center border border-amber-500/30 group-hover:bg-amber-500 group-hover:text-[#131722] transition-colors duration-300">
280
- <i data-lucide="check" class="w-4 h-4"></i>
281
- </div>
282
- </div>
283
- </div>
284
- </div>
285
-
286
- </div>
287
- </div>
288
-
289
- </div>
290
-
291
- <!-- Bottom Nav -->
292
- <div class="fixed bottom-0 left-0 right-0 z-50 p-4 pb-6">
293
- <div class="mx-auto max-w-sm">
294
- <div class="relative flex items-center justify-between bg-[#131722]/90 backdrop-blur-xl border border-white/10 rounded-full p-2 shadow-2xl shadow-black/50">
295
-
296
- <!-- Active Indicator -->
297
- <div id="nav-indicator" class="absolute top-2 bottom-2 w-[calc(50%-8px)] bg-gradient-to-r from-indigo-600 to-violet-600 rounded-full -z-0 transition-all duration-300 ease-out" style="left: 50%;"></div>
298
-
299
- <!-- Home Button -->
300
- <button onclick="switchTab('home')" id="btn-home" class="relative z-10 flex items-center justify-center gap-2 w-1/2 py-3 rounded-full transition-colors duration-300 text-white">
301
- <i data-lucide="home" class="w-5 h-5"></i>
302
- <span class="text-sm font-bold">خانه</span>
303
- </button>
304
-
305
- <!-- Account Button -->
306
- <button onclick="switchTab('account')" id="btn-account" class="relative z-10 flex items-center justify-center gap-2 w-1/2 py-3 rounded-full transition-colors duration-300 text-slate-400 hover:text-white">
307
- <i data-lucide="user" class="w-5 h-5"></i>
308
- <span class="text-sm font-bold">حساب</span>
309
- </button>
310
- </div>
311
- </div>
312
- </div>
313
-
314
- <script>
315
- // --- Data ---
316
- const FEATURES = [
317
- {
318
- id: 'tts',
319
- title: 'تبدیل متن به صدا',
320
- subtitle: '۳۰ گوینده حرفه‌ای',
321
- icon: 'mic-2',
322
- colorFrom: 'from-blue-500',
323
- colorTo: 'to-cyan-400',
324
- isHot: true
325
- },
326
- {
327
- id: 'stt',
328
- title: 'تبدیل گفتار به متن',
329
- subtitle: 'تایپ صوتی دقیق',
330
- icon: 'file-audio',
331
- colorFrom: 'from-teal-500',
332
- colorTo: 'to-emerald-400'
333
- },
334
- {
335
- id: 'voice-changer',
336
- title: 'تغییر صدا',
337
- subtitle: 'مدل‌های جذاب فارسی',
338
- icon: 'wand-2',
339
- colorFrom: 'from-violet-500',
340
- colorTo: 'to-purple-500'
341
- },
342
- {
343
- id: 'podcast',
344
- title: 'ساخت پادکست',
345
- subtitle: 'تولید خودکار با AI',
346
- icon: 'podcast',
347
- colorFrom: 'from-pink-500',
348
- colorTo: 'to-rose-500'
349
- },
350
- {
351
- id: 'clone',
352
- title: 'کلون کردن صدا',
353
- subtitle: 'شبیه‌سازی دقیق',
354
- icon: 'fingerprint',
355
- colorFrom: 'from-amber-500',
356
- colorTo: 'to-orange-500',
357
- isNew: true
358
- },
359
- {
360
- id: 'enhance',
361
- title: 'افزایش کیفیت',
362
- subtitle: 'حذف نویز و شفاف‌سازی',
363
- icon: 'activity',
364
- colorFrom: 'from-emerald-500',
365
- colorTo: 'to-green-400'
366
- }
367
- ];
368
-
369
- const COMPARISON_DATA = [
370
- {
371
- title: "تعداد تولید روزانه",
372
- icon: 'zap',
373
- free: "۵ عدد",
374
- pro: "نامحدود",
375
- highlight: true
376
- },
377
- {
378
- title: "تنوع صداها",
379
- icon: 'mic-2',
380
- free: "۵ صدای پایه",
381
- pro: "۳۰+ صدای VIP",
382
- highlight: false
383
- },
384
- {
385
- title: "سرعت پردازش",
386
- icon: 'sparkles',
387
- free: "معمولی",
388
- pro: "سرعت نور (Flash)",
389
- highlight: true
390
- },
391
- {
392
- title: "تبلیغات",
393
- icon: 'shield',
394
- free: "دارد",
395
- pro: "حذف کامل",
396
- highlight: false
397
- },
398
- {
399
- title: "دانلود فایل",
400
- icon: 'crown',
401
- free: "کیفیت پایین",
402
- pro: "کیفیت استودیو",
403
- highlight: true
404
- }
405
- ];
406
-
407
- const SPECIAL_FEATURE = {
408
- id: 'ai-gen',
409
- title: 'تولید صدا Ai',
410
- subtitle: 'خلق افکت‌های صوتی خاص',
411
- icon: 'music',
412
- colorFrom: 'from-indigo-600',
413
- colorTo: 'to-blue-600'
414
- };
415
-
416
- const IMAGES = [
417
- "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpxposlxsv.png?_t=1769590682",
418
- "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpnv5v143z.png?_t=1769590682",
419
- "https://app.puzzley.net/uploads/user/Jydo/%D8%AA%D8%BA%DB%8C%D8%B1%20%D8%B5%D8%AF%D8%A7%20%D8%A8%D8%A7%20%D9%87%D9%88%D8%B4%20%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C/tmpkqpm8k8l.png?_t=1769590756"
420
- ];
421
-
422
- // --- Logic ---
423
-
424
- // 1. Render Particles
425
- const particlesContainer = document.getElementById('particles-container');
426
- for(let i=0; i<15; i++) {
427
- const p = document.createElement('div');
428
- p.className = 'particle';
429
- p.style.left = Math.random() * 100 + 'vw';
430
- // Random duration between 10s and 20s
431
- const duration = 10 + Math.random() * 10;
432
- const delay = Math.random() * 5;
433
- p.style.animation = `particle-rise ${duration}s linear ${delay}s infinite`;
434
- particlesContainer.appendChild(p);
435
- }
436
-
437
- // 2. Render Slider
438
- const sliderContainer = document.getElementById('slider-images');
439
- const dotsContainer = document.getElementById('slider-dots');
440
- let currentSlide = 0;
441
-
442
- // Init Images
443
- IMAGES.forEach((src, idx) => {
444
- const img = document.createElement('img');
445
- img.src = src;
446
- img.className = `absolute inset-0 w-full h-full object-cover transition-all duration-700 ease-in-out ${idx === 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-110'}`;
447
- img.id = `slide-${idx}`;
448
- sliderContainer.appendChild(img);
449
-
450
- const dot = document.createElement('div');
451
- dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === 0 ? 'w-6 bg-white' : 'w-1.5 bg-white/40'}`;
452
- dot.id = `dot-${idx}`;
453
- dotsContainer.appendChild(dot);
454
- });
455
-
456
- // Loop Slider
457
- setInterval(() => {
458
- // Hide current
459
- const currentImg = document.getElementById(`slide-${currentSlide}`);
460
- const currentDot = document.getElementById(`dot-${currentSlide}`);
461
- currentImg.classList.replace('opacity-100', 'opacity-0');
462
- currentImg.classList.replace('scale-100', 'scale-110');
463
- currentDot.classList.replace('w-6', 'w-1.5');
464
- currentDot.classList.replace('bg-white', 'bg-white/40');
465
-
466
- // Show next
467
- currentSlide = (currentSlide + 1) % IMAGES.length;
468
- const nextImg = document.getElementById(`slide-${currentSlide}`);
469
- const nextDot = document.getElementById(`dot-${currentSlide}`);
470
- nextImg.classList.replace('opacity-0', 'opacity-100');
471
- nextImg.classList.replace('scale-110', 'scale-100');
472
- nextDot.classList.replace('w-1.5', 'w-6');
473
- nextDot.classList.replace('bg-white/40', 'bg-white');
474
- }, 4000);
475
-
476
- // 3. Render Features Grid
477
- const gridContainer = document.getElementById('features-grid');
478
- FEATURES.forEach((item, index) => {
479
- const delay = 0.4 + (index * 0.1);
480
- const html = `
481
- <div class="relative group cursor-pointer fade-in-entry hover-shine" style="animation-delay: ${delay}s" onclick="alert('قابلیت ${item.title} به زودی فعال می‌شود!')">
482
- <!-- Glow -->
483
- <div class="absolute -inset-[1px] rounded-[24px] bg-gradient-to-b ${item.colorFrom} ${item.colorTo} opacity-0 group-hover:opacity-40 blur-md transition duration-500"></div>
484
-
485
- <div class="relative h-full flex flex-col justify-between glass-panel p-5 rounded-[24px] shadow-2xl overflow-hidden group-hover:border-white/20 transition-all duration-300">
486
- <div class="flex justify-between items-start mb-5 relative z-10">
487
- <div class="relative p-3.5 rounded-2xl bg-gradient-to-br ${item.colorFrom} ${item.colorTo} shadow-lg ring-1 ring-white/20 group-hover:scale-105 transition-transform duration-300">
488
- <i data-lucide="${item.icon}" class="text-white w-6 h-6 relative z-10"></i>
489
- </div>
490
-
491
- ${item.isNew || item.isHot ? `
492
- <div class="flex flex-col items-end gap-1">
493
- ${item.isNew ? `<span class="px-2.5 py-1 text-[9px] font-bold bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-full shadow-lg shadow-amber-500/20">جدید</span>` : ''}
494
- ${item.isHot ? `<span class="px-2.5 py-1 text-[9px] font-bold bg-gradient-to-r from-rose-500 to-pink-600 text-white rounded-full shadow-lg shadow-rose-500/20">داغ</span>` : ''}
495
- </div>
496
- ` : ''}
497
- </div>
498
-
499
- <div class="relative z-10">
500
- <h3 class="text-[16px] font-bold text-white mb-1.5 tracking-tight group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-slate-300 transition-colors">
501
- ${item.title}
502
- </h3>
503
- <p class="text-[11px] text-slate-400 font-medium leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">
504
- ${item.subtitle}
505
- </p>
506
- </div>
507
-
508
- <!-- Action Icon -->
509
- <div class="absolute bottom-4 left-4 w-8 h-8 rounded-full bg-white/5 border border-white/5 flex items-center justify-center opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 shadow-lg">
510
- <i data-lucide="arrow-left" size="14" class="text-white w-3 h-3"></i>
511
- </div>
512
- </div>
513
- </div>
514
- `;
515
- gridContainer.innerHTML += html;
516
- });
517
-
518
- // 4. Render Special Feature
519
- const specialContainer = document.getElementById('special-feature-container');
520
- specialContainer.innerHTML = `
521
- <div class="relative w-full cursor-pointer group" onclick="alert('تولید صدای هوشمند شروع شد!')">
522
- <div class="absolute -inset-[2px] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-[26px] opacity-70 blur-sm group-hover:opacity-100 group-hover:blur-md transition duration-500 animate-pulse"></div>
523
-
524
- <div class="relative overflow-hidden p-6 bg-[#0f1219] rounded-[24px] border border-white/10">
525
- <!-- Background Mesh -->
526
- <div class="absolute inset-0 opacity-20 pointer-events-none">
527
- <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-600 rounded-full blur-[80px] animate-pulse"></div>
528
- <div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-600 rounded-full blur-[80px] animate-pulse" style="animation-delay: 1s;"></div>
529
- </div>
530
-
531
- <div class="relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
532
- <div class="flex items-center gap-5">
533
- <div class="relative">
534
- <div class="w-16 h-16 rounded-2xl bg-gradient-to-br ${SPECIAL_FEATURE.colorFrom} ${SPECIAL_FEATURE.colorTo} flex items-center justify-center shadow-lg shadow-indigo-500/30 ring-4 ring-indigo-500/10 group-hover:scale-105 transition-transform duration-300">
535
- <i data-lucide="${SPECIAL_FEATURE.icon}" class="text-white w-8 h-8"></i>
536
- </div>
537
- <div class="absolute -top-2 -right-2 bg-white text-indigo-700 text-[10px] font-black px-2 py-0.5 rounded-full shadow-md border-2 border-[#0f1219]">Ai</div>
538
- </div>
539
-
540
- <div>
541
- <div class="flex items-center gap-2 mb-1">
542
- <h3 class="text-xl font-black text-white">${SPECIAL_FEATURE.title}</h3>
543
- <i data-lucide="sparkles" class="w-5 h-5 text-yellow-400 fill-yellow-400 animate-bounce"></i>
544
- </div>
545
- <p class="text-sm text-slate-300 font-medium opacity-90 max-w-[200px] leading-relaxed">${SPECIAL_FEATURE.subtitle}</p>
546
- </div>
547
- </div>
548
-
549
- <div class="self-end sm:self-center">
550
- <div class="w-12 h-12 rounded-full bg-white/10 hover:bg-white text-white hover:text-indigo-900 flex items-center justify-center border border-white/10 transition-all duration-300 group-hover:rotate-[-45deg]">
551
- <i data-lucide="arrow-left" class="w-5 h-5" stroke-width="3"></i>
552
- </div>
553
- </div>
554
- </div>
555
- <div class="absolute top-1/2 right-10 -translate-y-1/2 opacity-5 pointer-events-none">
556
- <i data-lucide="wand-2" width="120" height="120"></i>
557
- </div>
558
- </div>
559
- </div>
560
- `;
561
-
562
- // 5. Render Comparison Table
563
- const comparisonContainer = document.getElementById('comparison-rows');
564
- COMPARISON_DATA.forEach((item, idx) => {
565
- const html = `
566
- <div class="grid grid-cols-[1.2fr_1fr_1fr] items-center relative group fade-in-entry" style="animation-delay: ${0.3 + (idx * 0.1)}s">
567
- <div class="p-3.5 pl-4 flex items-center gap-2">
568
- <div class="p-1.5 rounded-lg ${item.highlight ? 'bg-amber-500/10 text-amber-400' : 'bg-slate-700/30 text-slate-400'}">
569
- <i data-lucide="${item.icon}" class="w-3 h-3"></i>
570
- </div>
571
- <span class="text-[10px] font-bold ${item.highlight ? 'text-white' : 'text-slate-400'}">
572
- ${item.title}
573
- </span>
574
- </div>
575
-
576
- <div class="p-3.5 text-center bg-slate-800/10 h-full flex items-center justify-center">
577
- <span class="text-[10px] font-medium text-slate-500">
578
- ${item.free === "دارد" ? '<i data-lucide="check" class="w-3.5 h-3.5 text-slate-500 mx-auto"></i>' : item.free}
579
- </span>
580
- </div>
581
-
582
- <div class="p-3.5 text-center bg-amber-500/5 h-full flex items-center justify-center relative">
583
- ${item.highlight ? '<div class="absolute inset-0 bg-amber-500/5 animate-pulse"></div>' : ''}
584
- <span class="text-[10px] font-bold relative z-10 ${item.highlight ? 'text-amber-300' : 'text-amber-100/80'}">
585
- ${item.pro}
586
- </span>
587
- </div>
588
- </div>
589
- `;
590
- comparisonContainer.innerHTML += html;
591
- });
592
-
593
-
594
- // 5. Navigation Logic
595
- function switchTab(tab) {
596
- const homeView = document.getElementById('home-view');
597
- const accountView = document.getElementById('account-view');
598
- const indicator = document.getElementById('nav-indicator');
599
- const btnHome = document.getElementById('btn-home');
600
- const btnAccount = document.getElementById('btn-account');
601
-
602
- if (tab === 'home') {
603
- homeView.classList.add('active');
604
- accountView.classList.remove('active');
605
-
606
- // Style updates
607
- indicator.style.left = '50%';
608
-
609
- btnHome.classList.replace('text-slate-400', 'text-white');
610
- btnAccount.classList.replace('text-white', 'text-slate-400');
611
- } else {
612
- homeView.classList.remove('active');
613
- accountView.classList.add('active');
614
-
615
- // Style updates
616
- indicator.style.left = '8px';
617
-
618
- btnAccount.classList.replace('text-slate-400', 'text-white');
619
- btnHome.classList.replace('text-white', 'text-slate-400');
620
- }
621
- window.scrollTo(0,0);
622
- }
623
-
624
- // Init Icons
625
- lucide.createIcons();
626
-
627
- </script>
628
- </body>
629
- </html>