Hugging Face's logo

Spaces:
Opera8
/
Ava
Running

App Files Community
Opera8 commited on
Commit
33b1736
·
verified ·
1 Parent(s): 2ed27d8

Delete index (1) (7).html

Browse files
Files changed (1) hide show
  1. index (1) (7).html +0 -423
index (1) (7).html DELETED
@@ -1,423 +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 mimicking Framer Motion */
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 particle-rise {
71
- 0% { transform: translateY(110vh); opacity: 0; }
72
- 20% { opacity: 0.5; }
73
- 80% { opacity: 0.5; }
74
- 100% { transform: translateY(-10vh); opacity: 0; }
75
- }
76
-
77
- .animate-blob { animation: blob-move 20s infinite alternate; }
78
- .animate-gradient-text { background-size: 200% auto; animation: gradient-x 4s linear infinite; }
79
- .fade-in-entry { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; }
80
-
81
- /* Utility classes */
82
- .glass-panel {
83
- background: rgba(19, 23, 34, 0.8);
84
- backdrop-filter: blur(16px);
85
- -webkit-backdrop-filter: blur(16px);
86
- border: 1px solid rgba(255, 255, 255, 0.05);
87
- }
88
-
89
- .hover-shine {
90
- position: relative;
91
- overflow: hidden;
92
- }
93
- .hover-shine::after {
94
- content: '';
95
- position: absolute;
96
- top: 0;
97
- left: 0;
98
- width: 100%;
99
- height: 100%;
100
- background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
101
- transform: translateX(-100%) skewX(-15deg);
102
- transition: transform 0.5s;
103
- }
104
- .hover-shine:hover::after {
105
- transform: translateX(100%) skewX(-15deg);
106
- }
107
-
108
- .particle {
109
- position: absolute;
110
- width: 4px;
111
- height: 4px;
112
- background: white;
113
- border-radius: 50%;
114
- filter: blur(1px);
115
- }
116
- </style>
117
- <script type="importmap">
118
- {
119
- "imports": {
120
- "react": "https://esm.sh/react@^19.2.4",
121
- "react-dom/": "https://esm.sh/react-dom@^19.2.4/",
122
- "react/": "https://esm.sh/react@^19.2.4/",
123
- "lucide-react": "https://esm.sh/lucide-react@^0.563.0",
124
- "framer-motion": "https://esm.sh/framer-motion@^12.29.2"
125
- }
126
- }
127
- </script>
128
- </head>
129
- <body>
130
-
131
- <!-- Background Effects -->
132
- <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-[#0B0F19]">
133
- <!-- Tech Grid -->
134
- <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>
135
-
136
- <!-- Orbs -->
137
- <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>
138
- <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>
139
- <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>
140
-
141
- <!-- Particles Container (Populated by JS) -->
142
- <div id="particles-container"></div>
143
-
144
- <!-- Vignette -->
145
- <div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#0B0F19]/60 to-[#0B0F19]"></div>
146
- </div>
147
-
148
- <!-- Main Content -->
149
- <div class="relative z-10 min-h-screen pb-10">
150
-
151
- <!-- Header -->
152
- <header class="flex flex-col items-center justify-center pt-8 pb-4 fade-in-entry" style="animation-delay: 0.1s;">
153
- <div class="relative group cursor-pointer mb-4">
154
- <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-600 flex items-center justify-center shadow-2xl shadow-indigo-500/40 ring-4 ring-white/5 transition-transform duration-500 hover:scale-105">
155
- <span class="text-4xl font-black text-white pb-2">آ</span>
156
- </div>
157
- <span class="absolute -top-1 -right-1 flex h-4 w-4">
158
- <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
159
- <span class="relative inline-flex rounded-full h-4 w-4 bg-cyan-500 border-4 border-[#0B0F19]"></span>
160
- </span>
161
- </div>
162
- <h1 class="text-xl font-bold text-slate-200 tracking-wide opacity-90">آوا هوش</h1>
163
- </header>
164
-
165
- <!-- Image Slider -->
166
- <div class="px-6 mb-6 fade-in-entry" style="animation-delay: 0.2s;">
167
- <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">
168
- <div id="slider-images" class="absolute inset-0 w-full h-full">
169
- <!-- Images injected by JS -->
170
- </div>
171
- <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19]/80 via-transparent to-transparent opacity-80"></div>
172
- <!-- Dots -->
173
- <div id="slider-dots" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10">
174
- <!-- Dots injected by JS -->
175
- </div>
176
- </div>
177
- </div>
178
-
179
- <!-- Hero Text -->
180
- <div class="px-6 pt-2 pb-6 text-center fade-in-entry" style="animation-delay: 0.3s;">
181
- <h2 class="text-[2rem] font-black text-white mb-4 leading-[1.3] tracking-tight">
182
- دنیای صدا را <br />
183
- <span class="relative inline-block px-2">
184
- <span class="absolute inset-0 bg-indigo-500/10 blur-xl rounded-full transform rotate-3"></span>
185
- <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-cyan-300 animate-gradient-text">
186
- با هوش مصنوعی
187
- </span>
188
- </span>
189
- <br/>
190
- <span class="text-white">متحول کنید</span>
191
- </h2>
192
- <p class="text-slate-400 text-sm leading-7 font-light max-w-[80%] mx-auto opacity-80">
193
- تکنولوژی پیشرفته برای خلق، ویرایش و تبدیل صدا
194
- </p>
195
- </div>
196
-
197
- <!-- Features Grid -->
198
- <div class="px-6">
199
- <div id="features-grid" class="grid grid-cols-2 gap-4 sm:gap-6">
200
- <!-- Features injected by JS -->
201
- </div>
202
-
203
- <!-- Special Feature -->
204
- <div id="special-feature-container" class="mt-8 mb-4 fade-in-entry" style="animation-delay: 0.6s;">
205
- <!-- Special Feature injected by JS -->
206
- </div>
207
-
208
- <div class="text-center mt-10 opacity-40 pb-6">
209
- <p class="text-[10px] text-slate-300 font-light tracking-widest">
210
- POWERED BY AVA HOOSH • VER 2.0
211
- </p>
212
- </div>
213
- </div>
214
- </div>
215
-
216
- <script>
217
- // --- Data ---
218
- const FEATURES = [
219
- {
220
- id: 'tts',
221
- title: 'تبدیل متن به گفتار',
222
- subtitle: '۳۰ گوینده حرفه‌ای',
223
- icon: 'mic-2',
224
- colorFrom: 'from-blue-500',
225
- colorTo: 'to-cyan-400',
226
- isHot: true
227
- },
228
- {
229
- id: 'voice-changer',
230
- title: 'تغییر صدا',
231
- subtitle: 'مدل‌های جذاب فارسی',
232
- icon: 'wand-2',
233
- colorFrom: 'from-violet-500',
234
- colorTo: 'to-purple-500'
235
- },
236
- {
237
- id: 'podcast',
238
- title: 'ساخت پادکست',
239
- subtitle: 'تولید خودکار با AI',
240
- icon: 'podcast',
241
- colorFrom: 'from-pink-500',
242
- colorTo: 'to-rose-500'
243
- },
244
- {
245
- id: 'clone',
246
- title: 'کلون کردن صدا',
247
- subtitle: 'شبیه‌سازی دقیق',
248
- icon: 'fingerprint',
249
- colorFrom: 'from-amber-500',
250
- colorTo: 'to-orange-500',
251
- isNew: true
252
- },
253
- {
254
- id: 'enhance',
255
- title: 'افزایش کیفیت',
256
- subtitle: 'حذف نویز و شفاف‌سازی',
257
- icon: 'activity',
258
- colorFrom: 'from-emerald-500',
259
- colorTo: 'to-green-400'
260
- }
261
- ];
262
-
263
- const SPECIAL_FEATURE = {
264
- id: 'ai-gen',
265
- title: 'تولید صدا Ai',
266
- subtitle: 'خلق افکت‌های صوتی خاص',
267
- icon: 'music',
268
- colorFrom: 'from-indigo-600',
269
- colorTo: 'to-blue-600'
270
- };
271
-
272
- const IMAGES = [
273
- "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",
274
- "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",
275
- "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"
276
- ];
277
-
278
- // --- Logic ---
279
-
280
- // 1. Render Particles
281
- const particlesContainer = document.getElementById('particles-container');
282
- for(let i=0; i<15; i++) {
283
- const p = document.createElement('div');
284
- p.className = 'particle';
285
- p.style.left = Math.random() * 100 + 'vw';
286
- // Random duration between 10s and 20s
287
- const duration = 10 + Math.random() * 10;
288
- const delay = Math.random() * 5;
289
- p.style.animation = `particle-rise ${duration}s linear ${delay}s infinite`;
290
- particlesContainer.appendChild(p);
291
- }
292
-
293
- // 2. Render Slider
294
- const sliderContainer = document.getElementById('slider-images');
295
- const dotsContainer = document.getElementById('slider-dots');
296
- let currentSlide = 0;
297
-
298
- // Init Images
299
- IMAGES.forEach((src, idx) => {
300
- const img = document.createElement('img');
301
- img.src = src;
302
- 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'}`;
303
- img.id = `slide-${idx}`;
304
- sliderContainer.appendChild(img);
305
-
306
- const dot = document.createElement('div');
307
- dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === 0 ? 'w-6 bg-white' : 'w-1.5 bg-white/40'}`;
308
- dot.id = `dot-${idx}`;
309
- dotsContainer.appendChild(dot);
310
- });
311
-
312
- // Loop Slider
313
- setInterval(() => {
314
- // Hide current
315
- const currentImg = document.getElementById(`slide-${currentSlide}`);
316
- const currentDot = document.getElementById(`dot-${currentSlide}`);
317
- currentImg.classList.replace('opacity-100', 'opacity-0');
318
- currentImg.classList.replace('scale-100', 'scale-110');
319
- currentDot.classList.replace('w-6', 'w-1.5');
320
- currentDot.classList.replace('bg-white', 'bg-white/40');
321
-
322
- // Show next
323
- currentSlide = (currentSlide + 1) % IMAGES.length;
324
- const nextImg = document.getElementById(`slide-${currentSlide}`);
325
- const nextDot = document.getElementById(`dot-${currentSlide}`);
326
- nextImg.classList.replace('opacity-0', 'opacity-100');
327
- nextImg.classList.replace('scale-110', 'scale-100');
328
- nextDot.classList.replace('w-1.5', 'w-6');
329
- nextDot.classList.replace('bg-white/40', 'bg-white');
330
- }, 4000);
331
-
332
- // 3. Render Features Grid
333
- const gridContainer = document.getElementById('features-grid');
334
- FEATURES.forEach((item, index) => {
335
- const delay = 0.4 + (index * 0.1);
336
- const html = `
337
- <div class="relative group cursor-pointer fade-in-entry hover-shine" style="animation-delay: ${delay}s" onclick="alert('قابلیت ${item.title} به زودی فعال می‌شود!')">
338
- <!-- Glow -->
339
- <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>
340
-
341
- <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">
342
- <div class="flex justify-between items-start mb-5 relative z-10">
343
- <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">
344
- <i data-lucide="${item.icon}" class="text-white w-6 h-6 relative z-10"></i>
345
- </div>
346
-
347
- ${item.isNew || item.isHot ? `
348
- <div class="flex flex-col items-end gap-1">
349
- ${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>` : ''}
350
- ${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>` : ''}
351
- </div>
352
- ` : ''}
353
- </div>
354
-
355
- <div class="relative z-10">
356
- <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">
357
- ${item.title}
358
- </h3>
359
- <p class="text-[11px] text-slate-400 font-medium leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity">
360
- ${item.subtitle}
361
- </p>
362
- </div>
363
-
364
- <!-- Action Icon -->
365
- <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">
366
- <i data-lucide="arrow-left" size="14" class="text-white w-3 h-3"></i>
367
- </div>
368
- </div>
369
- </div>
370
- `;
371
- gridContainer.innerHTML += html;
372
- });
373
-
374
- // 4. Render Special Feature
375
- const specialContainer = document.getElementById('special-feature-container');
376
- specialContainer.innerHTML = `
377
- <div class="relative w-full cursor-pointer group" onclick="alert('تولید صدای هوشمند شروع شد!')">
378
- <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>
379
-
380
- <div class="relative overflow-hidden p-6 bg-[#0f1219] rounded-[24px] border border-white/10">
381
- <!-- Background Mesh -->
382
- <div class="absolute inset-0 opacity-20 pointer-events-none">
383
- <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-600 rounded-full blur-[80px] animate-pulse"></div>
384
- <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>
385
- </div>
386
-
387
- <div class="relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
388
- <div class="flex items-center gap-5">
389
- <div class="relative">
390
- <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">
391
- <i data-lucide="${SPECIAL_FEATURE.icon}" class="text-white w-8 h-8"></i>
392
- </div>
393
- <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>
394
- </div>
395
-
396
- <div>
397
- <div class="flex items-center gap-2 mb-1">
398
- <h3 class="text-xl font-black text-white">${SPECIAL_FEATURE.title}</h3>
399
- <i data-lucide="sparkles" class="w-5 h-5 text-yellow-400 fill-yellow-400 animate-bounce"></i>
400
- </div>
401
- <p class="text-sm text-slate-300 font-medium opacity-90 max-w-[200px] leading-relaxed">${SPECIAL_FEATURE.subtitle}</p>
402
- </div>
403
- </div>
404
-
405
- <div class="self-end sm:self-center">
406
- <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]">
407
- <i data-lucide="arrow-left" class="w-5 h-5" stroke-width="3"></i>
408
- </div>
409
- </div>
410
- </div>
411
- <div class="absolute top-1/2 right-10 -translate-y-1/2 opacity-5 pointer-events-none">
412
- <i data-lucide="wand-2" width="120" height="120"></i>
413
- </div>
414
- </div>
415
- </div>
416
- `;
417
-
418
- // Init Icons
419
- lucide.createIcons();
420
-
421
- </script>
422
- </body>
423
- </html>