Download index.html from Opera8/Ava: direct link, hf CLI and curl.
- Browser
- Download file 31.3 kB
-
https://huggingface.co/spaces/Opera8/Ava/resolve/main/index.html
- Command line
-
hf download hf://spaces/Opera8/Ava/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Opera8/Ava/resolve/main/index.html
31.3 kB
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title>آوا هوش - جعبه ابزار صدا</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Vazirmatn', sans-serif; | |
| background-color: #0f172a; | |
| color: white; | |
| -webkit-tap-highlight-color: transparent; | |
| overflow-x: hidden; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: #0f172a; } | |
| ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: #475569; } | |
| /* Animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { opacity: 0.5; transform: scale(1); } | |
| 50% { opacity: 1; transform: scale(1.1); } | |
| } | |
| @keyframes blob-move { | |
| 0% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(30px, -50px) scale(1.1); } | |
| 66% { transform: translate(-20px, 20px) scale(0.9); } | |
| 100% { transform: translate(0, 0) scale(1); } | |
| } | |
| @keyframes rotate-slow { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| @keyframes gradient-x { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes fade-in-up { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes shimmer { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| @keyframes particle-rise { | |
| 0% { transform: translateY(110vh); opacity: 0; } | |
| 20% { opacity: 0.5; } | |
| 80% { opacity: 0.5; } | |
| 100% { transform: translateY(-10vh); opacity: 0; } | |
| } | |
| .animate-blob { animation: blob-move 20s infinite alternate; } | |
| .animate-gradient-text { background-size: 200% auto; animation: gradient-x 4s linear infinite; } | |
| .fade-in-entry { animation: fade-in-up 0.8s ease-out forwards; opacity: 0; } | |
| .animate-shimmer { animation: shimmer 2s infinite; } | |
| .animate-float-slow { animation: float 6s ease-in-out infinite; } | |
| /* Utility classes */ | |
| .glass-panel { | |
| background: rgba(19, 23, 34, 0.8); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .hover-shine { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hover-shine::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent); | |
| transform: translateX(-100%) skewX(-15deg); | |
| transition: transform 0.5s; | |
| } | |
| .hover-shine:hover::after { | |
| transform: translateX(100%) skewX(-15deg); | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| background: white; | |
| border-radius: 50%; | |
| filter: blur(1px); | |
| } | |
| /* View transition utility */ | |
| .view-section { | |
| display: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease-in-out; | |
| } | |
| .view-section.active { | |
| display: block; | |
| opacity: 1; | |
| } | |
| </style> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "react": "https://esm.sh/react@^19.2.4", | |
| "react-dom/": "https://esm.sh/react-dom@^19.2.4/", | |
| "react/": "https://esm.sh/react@^19.2.4/", | |
| "lucide-react": "https://esm.sh/lucide-react@^0.563.0", | |
| "framer-motion": "https://esm.sh/framer-motion@^12.29.2" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Background Effects --> | |
| <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none bg-[#0B0F19]"> | |
| <!-- Tech Grid --> | |
| <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> | |
| <!-- Orbs --> | |
| <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> | |
| <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> | |
| <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> | |
| <!-- Particles Container (Populated by JS) --> | |
| <div id="particles-container"></div> | |
| <!-- Vignette --> | |
| <div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#0B0F19]/60 to-[#0B0F19]"></div> | |
| </div> | |
| <!-- Main Content Container --> | |
| <div class="relative z-10 min-h-screen pb-24 pt-8"> | |
| <!-- === HOME VIEW === --> | |
| <div id="home-view" class="view-section active"> | |
| <!-- Image Slider --> | |
| <div class="px-6 mb-6 fade-in-entry" style="animation-delay: 0.2s;"> | |
| <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"> | |
| <div id="slider-images" class="absolute inset-0 w-full h-full"> | |
| <!-- Images injected by JS --> | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19]/80 via-transparent to-transparent opacity-80"></div> | |
| <!-- Dots --> | |
| <div id="slider-dots" class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5 z-10"> | |
| <!-- Dots injected by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Text --> | |
| <div class="px-6 pt-2 pb-6 text-center fade-in-entry" style="animation-delay: 0.3s;"> | |
| <h2 class="text-[2rem] font-black text-white mb-4 leading-[1.3] tracking-tight"> | |
| دنیای صدا را <br /> | |
| <span class="relative inline-block px-2"> | |
| <span class="absolute inset-0 bg-indigo-500/10 blur-xl rounded-full transform rotate-3"></span> | |
| <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-cyan-300 animate-gradient-text"> | |
| با هوش مصنوعی | |
| </span> | |
| </span> | |
| <br/> | |
| <span class="text-white">متحول کنید</span> | |
| </h2> | |
| <p class="text-slate-400 text-sm leading-7 font-light max-w-[80%] mx-auto opacity-80"> | |
| تکنولوژی پیشرفته برای خلق، ویرایش و تبدیل صدا | |
| </p> | |
| </div> | |
| <!-- Features Grid --> | |
| <div class="px-6"> | |
| <div id="features-grid" class="grid grid-cols-2 gap-4 sm:gap-6"> | |
| <!-- Features injected by JS --> | |
| </div> | |
| <!-- Special Feature --> | |
| <div id="special-feature-container" class="mt-8 mb-4 fade-in-entry" style="animation-delay: 0.6s;"> | |
| <!-- Special Feature injected by JS --> | |
| </div> | |
| <div class="text-center mt-10 opacity-40 pb-6"> | |
| <p class="text-[10px] text-slate-300 font-light tracking-widest"> | |
| POWERED BY ALPHA • VER 2.0 | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- === ACCOUNT VIEW (SUBSCRIPTION) === --> | |
| <div id="account-view" class="view-section"> | |
| <div class="pb-28"> | |
| <!-- 1. Banner Image --> | |
| <div class="relative w-full mx-auto px-5 mb-6 -mt-2 fade-in-entry"> | |
| <div class="relative w-full aspect-[1179/546] rounded-[32px] overflow-hidden shadow-2xl shadow-amber-500/10 ring-1 ring-white/10"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-[#1e202e] via-[#131722] to-[#0f111a] z-0"></div> | |
| <img src="https://app.puzzley.net/uploads/user/Jydo/Gpt4/tmpu3en1zel%281%29.png?_t=1769674744" | |
| alt="Premium" | |
| class="absolute inset-0 w-full h-full object-cover z-10 opacity-90" /> | |
| <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19] via-transparent to-transparent z-20"></div> | |
| </div> | |
| </div> | |
| <!-- 2. Title Section --> | |
| <div class="text-center px-6 mb-8 fade-in-entry" style="animation-delay: 0.1s;"> | |
| <h1 class="text-2xl font-black text-white mb-2">پلنهای دسترسی</h1> | |
| <p class="text-slate-400 text-xs font-medium">قدرت واقعی هوش مصنوعی را آزاد کنید</p> | |
| </div> | |
| <!-- 3. Comparison Table --> | |
| <div class="px-4 mb-8 fade-in-entry" style="animation-delay: 0.2s;"> | |
| <div class="bg-[#131722]/60 backdrop-blur-xl rounded-[24px] border border-white/5 overflow-hidden relative"> | |
| <!-- Headers --> | |
| <div class="grid grid-cols-[1.2fr_1fr_1fr] border-b border-white/5 bg-white/5"> | |
| <div class="p-4 text-[10px] font-bold text-slate-400 flex items-center">ویژگیها</div> | |
| <div class="p-4 text-[11px] font-bold text-slate-300 text-center bg-slate-800/30">رایگان</div> | |
| <div class="p-4 text-[11px] font-bold text-amber-400 text-center bg-amber-500/10 relative"> | |
| <span class="relative z-10">نسخه طلایی</span> | |
| <div class="absolute inset-0 bg-amber-500/20 blur-xl"></div> | |
| </div> | |
| </div> | |
| <!-- Body --> | |
| <div class="divide-y divide-white/5" id="comparison-rows"> | |
| <!-- Rows injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 4. Lite Button --> | |
| <div class="px-6 relative z-20 fade-in-entry" style="animation-delay: 0.4s;"> | |
| <div class="w-full relative group cursor-pointer active:scale-95 transition-transform duration-200"> | |
| <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> | |
| <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"> | |
| <div class="flex items-center gap-3"> | |
| <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"> | |
| <i data-lucide="crown" class="w-5 h-5 fill-white"></i> | |
| </div> | |
| <div class="flex flex-col items-start"> | |
| <span class="text-base font-bold text-white">فعالسازی اشتراک ویژه</span> | |
| <span class="text-[10px] text-amber-400/80 font-medium">دسترسی نامحدود به تمامی امکانات</span> | |
| </div> | |
| </div> | |
| <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"> | |
| <i data-lucide="check" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Nav --> | |
| <div class="fixed bottom-0 left-0 right-0 z-50 p-4 pb-6"> | |
| <div class="mx-auto max-w-sm"> | |
| <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"> | |
| <!-- Active Indicator --> | |
| <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> | |
| <!-- Home Button --> | |
| <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"> | |
| <i data-lucide="home" class="w-5 h-5"></i> | |
| <span class="text-sm font-bold">خانه</span> | |
| </button> | |
| <!-- Account Button --> | |
| <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"> | |
| <i data-lucide="user" class="w-5 h-5"></i> | |
| <span class="text-sm font-bold">حساب</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // --- Data --- | |
| const FEATURES = [ | |
| { | |
| id: 'tts', | |
| title: 'تبدیل متن به صدا', | |
| subtitle: '۳۰ گوینده حرفهای', | |
| icon: 'mic-2', | |
| colorFrom: 'from-blue-500', | |
| colorTo: 'to-cyan-400', | |
| isHot: true | |
| }, | |
| { | |
| id: 'stt', | |
| title: 'تبدیل گفتار به متن', | |
| subtitle: 'تایپ صوتی دقیق', | |
| icon: 'file-audio', | |
| colorFrom: 'from-teal-500', | |
| colorTo: 'to-emerald-400' | |
| }, | |
| { | |
| id: 'voice-changer', | |
| title: 'تغییر صدا', | |
| subtitle: 'مدلهای جذاب فارسی', | |
| icon: 'wand-2', | |
| colorFrom: 'from-violet-500', | |
| colorTo: 'to-purple-500' | |
| }, | |
| { | |
| id: 'podcast', | |
| title: 'ساخت پادکست', | |
| subtitle: 'تولید خودکار با AI', | |
| icon: 'podcast', | |
| colorFrom: 'from-pink-500', | |
| colorTo: 'to-rose-500' | |
| }, | |
| { | |
| id: 'clone', | |
| title: 'کلون کردن صدا', | |
| subtitle: 'شبیهسازی دقیق', | |
| icon: 'fingerprint', | |
| colorFrom: 'from-amber-500', | |
| colorTo: 'to-orange-500', | |
| isNew: true | |
| }, | |
| { | |
| id: 'enhance', | |
| title: 'افزایش کیفیت', | |
| subtitle: 'حذف نویز و شفافسازی', | |
| icon: 'activity', | |
| colorFrom: 'from-emerald-500', | |
| colorTo: 'to-green-400' | |
| } | |
| ]; | |
| const COMPARISON_DATA = [ | |
| { | |
| title: "تعداد تولید روزانه", | |
| icon: 'zap', | |
| free: "۵ عدد", | |
| pro: "نامحدود", | |
| highlight: true | |
| }, | |
| { | |
| title: "تنوع صداها", | |
| icon: 'mic-2', | |
| free: "۵ صدای پایه", | |
| pro: "۳۰+ صدای VIP", | |
| highlight: false | |
| }, | |
| { | |
| title: "سرعت پردازش", | |
| icon: 'sparkles', | |
| free: "معمولی", | |
| pro: "سرعت نور (Flash)", | |
| highlight: true | |
| }, | |
| { | |
| title: "تبلیغات", | |
| icon: 'shield', | |
| free: "دارد", | |
| pro: "حذف کامل", | |
| highlight: false | |
| }, | |
| { | |
| title: "دانلود فایل", | |
| icon: 'crown', | |
| free: "کیفیت پایین", | |
| pro: "کیفیت استودیو", | |
| highlight: true | |
| } | |
| ]; | |
| const SPECIAL_FEATURE = { | |
| id: 'ai-gen', | |
| title: 'تولید صدا Ai', | |
| subtitle: 'خلق افکتهای صوتی خاص', | |
| icon: 'music', | |
| colorFrom: 'from-indigo-600', | |
| colorTo: 'to-blue-600' | |
| }; | |
| const IMAGES = [ | |
| "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", | |
| "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", | |
| "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" | |
| ]; | |
| // --- Logic --- | |
| // 1. Render Particles | |
| const particlesContainer = document.getElementById('particles-container'); | |
| for(let i=0; i<15; i++) { | |
| const p = document.createElement('div'); | |
| p.className = 'particle'; | |
| p.style.left = Math.random() * 100 + 'vw'; | |
| // Random duration between 10s and 20s | |
| const duration = 10 + Math.random() * 10; | |
| const delay = Math.random() * 5; | |
| p.style.animation = `particle-rise ${duration}s linear ${delay}s infinite`; | |
| particlesContainer.appendChild(p); | |
| } | |
| // 2. Render Slider | |
| const sliderContainer = document.getElementById('slider-images'); | |
| const dotsContainer = document.getElementById('slider-dots'); | |
| let currentSlide = 0; | |
| // Init Images | |
| IMAGES.forEach((src, idx) => { | |
| const img = document.createElement('img'); | |
| img.src = src; | |
| 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'}`; | |
| img.id = `slide-${idx}`; | |
| sliderContainer.appendChild(img); | |
| const dot = document.createElement('div'); | |
| dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === 0 ? 'w-6 bg-white' : 'w-1.5 bg-white/40'}`; | |
| dot.id = `dot-${idx}`; | |
| dotsContainer.appendChild(dot); | |
| }); | |
| // Loop Slider | |
| setInterval(() => { | |
| // Hide current | |
| const currentImg = document.getElementById(`slide-${currentSlide}`); | |
| const currentDot = document.getElementById(`dot-${currentSlide}`); | |
| currentImg.classList.replace('opacity-100', 'opacity-0'); | |
| currentImg.classList.replace('scale-100', 'scale-110'); | |
| currentDot.classList.replace('w-6', 'w-1.5'); | |
| currentDot.classList.replace('bg-white', 'bg-white/40'); | |
| // Show next | |
| currentSlide = (currentSlide + 1) % IMAGES.length; | |
| const nextImg = document.getElementById(`slide-${currentSlide}`); | |
| const nextDot = document.getElementById(`dot-${currentSlide}`); | |
| nextImg.classList.replace('opacity-0', 'opacity-100'); | |
| nextImg.classList.replace('scale-110', 'scale-100'); | |
| nextDot.classList.replace('w-1.5', 'w-6'); | |
| nextDot.classList.replace('bg-white/40', 'bg-white'); | |
| }, 4000); | |
| // 3. Render Features Grid | |
| const gridContainer = document.getElementById('features-grid'); | |
| FEATURES.forEach((item, index) => { | |
| const delay = 0.4 + (index * 0.1); | |
| const html = ` | |
| <div class="relative group cursor-pointer fade-in-entry hover-shine" style="animation-delay: ${delay}s" onclick="alert('قابلیت ${item.title} به زودی فعال میشود!')"> | |
| <!-- Glow --> | |
| <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> | |
| <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"> | |
| <div class="flex justify-between items-start mb-5 relative z-10"> | |
| <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"> | |
| <i data-lucide="${item.icon}" class="text-white w-6 h-6 relative z-10"></i> | |
| </div> | |
| ${item.isNew || item.isHot ? ` | |
| <div class="flex flex-col items-end gap-1"> | |
| ${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>` : ''} | |
| ${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>` : ''} | |
| </div> | |
| ` : ''} | |
| </div> | |
| <div class="relative z-10"> | |
| <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"> | |
| ${item.title} | |
| </h3> | |
| <p class="text-[11px] text-slate-400 font-medium leading-relaxed opacity-80 group-hover:opacity-100 transition-opacity"> | |
| ${item.subtitle} | |
| </p> | |
| </div> | |
| <!-- Action Icon --> | |
| <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"> | |
| <i data-lucide="arrow-left" size="14" class="text-white w-3 h-3"></i> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| gridContainer.innerHTML += html; | |
| }); | |
| // 4. Render Special Feature | |
| const specialContainer = document.getElementById('special-feature-container'); | |
| specialContainer.innerHTML = ` | |
| <div class="relative w-full cursor-pointer group" onclick="alert('تولید صدای هوشمند شروع شد!')"> | |
| <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> | |
| <div class="relative overflow-hidden p-6 bg-[#0f1219] rounded-[24px] border border-white/10"> | |
| <!-- Background Mesh --> | |
| <div class="absolute inset-0 opacity-20 pointer-events-none"> | |
| <div class="absolute top-0 right-0 w-64 h-64 bg-indigo-600 rounded-full blur-[80px] animate-pulse"></div> | |
| <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> | |
| </div> | |
| <div class="relative z-10 flex flex-col sm:flex-row sm:items-center justify-between gap-4"> | |
| <div class="flex items-center gap-5"> | |
| <div class="relative"> | |
| <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"> | |
| <i data-lucide="${SPECIAL_FEATURE.icon}" class="text-white w-8 h-8"></i> | |
| </div> | |
| <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> | |
| </div> | |
| <div> | |
| <div class="flex items-center gap-2 mb-1"> | |
| <h3 class="text-xl font-black text-white">${SPECIAL_FEATURE.title}</h3> | |
| <i data-lucide="sparkles" class="w-5 h-5 text-yellow-400 fill-yellow-400 animate-bounce"></i> | |
| </div> | |
| <p class="text-sm text-slate-300 font-medium opacity-90 max-w-[200px] leading-relaxed">${SPECIAL_FEATURE.subtitle}</p> | |
| </div> | |
| </div> | |
| <div class="self-end sm:self-center"> | |
| <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]"> | |
| <i data-lucide="arrow-left" class="w-5 h-5" stroke-width="3"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-1/2 right-10 -translate-y-1/2 opacity-5 pointer-events-none"> | |
| <i data-lucide="wand-2" width="120" height="120"></i> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // 5. Render Comparison Table | |
| const comparisonContainer = document.getElementById('comparison-rows'); | |
| COMPARISON_DATA.forEach((item, idx) => { | |
| const html = ` | |
| <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"> | |
| <div class="p-3.5 pl-4 flex items-center gap-2"> | |
| <div class="p-1.5 rounded-lg ${item.highlight ? 'bg-amber-500/10 text-amber-400' : 'bg-slate-700/30 text-slate-400'}"> | |
| <i data-lucide="${item.icon}" class="w-3 h-3"></i> | |
| </div> | |
| <span class="text-[10px] font-bold ${item.highlight ? 'text-white' : 'text-slate-400'}"> | |
| ${item.title} | |
| </span> | |
| </div> | |
| <div class="p-3.5 text-center bg-slate-800/10 h-full flex items-center justify-center"> | |
| <span class="text-[10px] font-medium text-slate-500"> | |
| ${item.free === "دارد" ? '<i data-lucide="check" class="w-3.5 h-3.5 text-slate-500 mx-auto"></i>' : item.free} | |
| </span> | |
| </div> | |
| <div class="p-3.5 text-center bg-amber-500/5 h-full flex items-center justify-center relative"> | |
| ${item.highlight ? '<div class="absolute inset-0 bg-amber-500/5 animate-pulse"></div>' : ''} | |
| <span class="text-[10px] font-bold relative z-10 ${item.highlight ? 'text-amber-300' : 'text-amber-100/80'}"> | |
| ${item.pro} | |
| </span> | |
| </div> | |
| </div> | |
| `; | |
| comparisonContainer.innerHTML += html; | |
| }); | |
| // 5. Navigation Logic | |
| function switchTab(tab) { | |
| const homeView = document.getElementById('home-view'); | |
| const accountView = document.getElementById('account-view'); | |
| const indicator = document.getElementById('nav-indicator'); | |
| const btnHome = document.getElementById('btn-home'); | |
| const btnAccount = document.getElementById('btn-account'); | |
| if (tab === 'home') { | |
| homeView.classList.add('active'); | |
| accountView.classList.remove('active'); | |
| // Style updates | |
| indicator.style.left = '50%'; | |
| btnHome.classList.replace('text-slate-400', 'text-white'); | |
| btnAccount.classList.replace('text-white', 'text-slate-400'); | |
| } else { | |
| homeView.classList.remove('active'); | |
| accountView.classList.add('active'); | |
| // Style updates | |
| indicator.style.left = '8px'; | |
| btnAccount.classList.replace('text-slate-400', 'text-white'); | |
| btnHome.classList.replace('text-white', 'text-slate-400'); | |
| } | |
| window.scrollTo(0,0); | |
| } | |
| // Init Icons | |
| lucide.createIcons(); | |
| </script> | |
| </body> | |
| </html> |