Update index.html

index.html

@@ -221,112 +221,68 @@
 
         <!-- === ACCOUNT VIEW (SUBSCRIPTION) === -->
         <div id="account-view" class="view-section">
-             <div class="pb-24">
+             <div class="pb-28">
                  
-                 <!-- 1. Banner Image (Wide aspect ratio 1179/546) -->
-                 <div class="relative w-full mx-auto px-5 mb-4 -mt-2 fade-in-entry">
-                     <div class="relative w-full aspect-[1179/546] rounded-[32px] overflow-hidden shadow-2xl shadow-amber-500/20">
-                         <!-- Background -->
+                 <!-- 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>
-                         <div class="absolute top-[20%] left-1/2 -translate-x-1/2 w-full h-full bg-amber-500/10 blur-[100px] animate-pulse"></div>
-
-                         <!-- Image -->
                          <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" />
-
-                         <!-- Overlay -->
-                         <div class="absolute inset-0 bg-gradient-to-t from-[#0B0F19]/40 via-transparent to-transparent z-20"></div>
+                              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. Animated Title Section (New) -->
-                 <div class="text-center px-6 mb-8 fade-in-entry" style="animation-delay: 0.2s;">
-                      <h1 class="text-[1.6rem] font-black mb-2 relative inline-block">
-                         <span class="absolute -inset-1 blur-lg bg-amber-500/20 rounded-full"></span>
-                         <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-500 drop-shadow-sm">
-                           اشـتـراک ویـــژه طـلایـی
-                         </span>
-                      </h1>
-                      <p class="text-slate-400 text-xs font-medium leading-relaxed tracking-wide opacity-80">
-                         دسترسی نامحدود به تمام قدرت هوش مصنوعی
-                      </p>
+                 <!-- 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>
 
-                 <div class="px-5">
-                    <!-- 3. Purchase Card -->
-                    <div class="mb-8 fade-in-entry" style="animation-delay: 0.3s;">
-                        <div class="relative p-[1px] rounded-[24px] bg-gradient-to-r from-amber-300 via-yellow-500 to-amber-600 shadow-xl shadow-amber-500/10 overflow-hidden group">
-                            <!-- Shine on hover -->
-                            <div class="absolute inset-0 bg-white/50 opacity-0 group-hover:opacity-20 transition-opacity"></div>
-                            
-                            <div class="bg-[#131722] rounded-[23px] p-1.5 relative overflow-hidden">
-                                <div class="absolute -right-10 -top-10 text-amber-500/5 rotate-12"><i data-lucide="sparkles" class="w-24 h-24"></i></div>
-
-                                <div class="flex flex-col items-center text-center py-4 px-4">
-                                    <button class="w-full py-4 rounded-xl bg-gradient-to-r from-amber-400 to-orange-500 text-white font-black text-lg shadow-lg shadow-orange-500/40 flex items-center justify-center gap-2 relative overflow-hidden group/btn">
-                                        <i data-lucide="crown" class="fill-white/20 w-5 h-5"></i>
-                                        <span class="relative z-10">تهیه اشتراک ویژه</span>
-                                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent translate-x-[-100%] animate-shimmer"></div>
-                                    </button>
-                                    <p class="text-[10px] text-slate-500 mt-3 flex items-center gap-1 opacity-70">
-                                        <i data-lucide="shield-check" class="w-3 h-3"></i>
-                                        تضمین بازگشت وجه در صورت نارضایتی
-                                    </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>
-                    </div>
-
-                    <!-- 4. Features -->
-                    <div class="space-y-3 fade-in-entry" style="animation-delay: 0.4s;">
-                        <div class="flex items-center gap-2 mb-3 px-1 opacity-90">
-                            <div class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></div>
-                            <h3 class="text-xs font-bold text-slate-300 uppercase tracking-wider">ویژگی‌های فعال شده</h3>
-                        </div>
-
-                        <div class="flex items-center gap-4 bg-[#1A1F2E]/50 border border-white/5 p-4 rounded-2xl hover:bg-[#1A1F2E] transition-colors">
-                             <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-500/20 to-orange-500/10 flex items-center justify-center shrink-0 border border-amber-500/10">
-                                 <i data-lucide="infinity" class="text-amber-400 w-5 h-5"></i>
-                             </div>
-                             <div>
-                                 <h4 class="text-sm font-bold text-white mb-0.5">دسترسی نامحدود</h4>
-                                 <p class="text-[11px] text-slate-400 leading-relaxed">تولید صدا و متن بدون هیچگونه محدودیت</p>
-                             </div>
+                        
+                        <!-- Body -->
+                        <div class="divide-y divide-white/5" id="comparison-rows">
+                            <!-- Rows injected via JS -->
                         </div>
+                    </div>
+                 </div>
 
-                        <div class="flex items-center gap-4 bg-[#1A1F2E]/50 border border-white/5 p-4 rounded-2xl hover:bg-[#1A1F2E] transition-colors">
-                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-500/20 to-orange-500/10 flex items-center justify-center shrink-0 border border-amber-500/10">
-                                <i data-lucide="zap" class="text-amber-400 w-5 h-5"></i>
-                            </div>
-                            <div>
-                                <h4 class="text-sm font-bold text-white mb-0.5">سرعت پردازش بالا</h4>
-                                <p class="text-[11px] text-slate-400 leading-relaxed">اولویت در صف پردازش سرورهای اختصاصی</p>
-                            </div>
-                       </div>
-
-                       <div class="flex items-center gap-4 bg-[#1A1F2E]/50 border border-white/5 p-4 rounded-2xl hover:bg-[#1A1F2E] transition-colors">
-                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-500/20 to-orange-500/10 flex items-center justify-center shrink-0 border border-amber-500/10">
-                                <i data-lucide="star" class="text-amber-400 w-5 h-5"></i>
-                            </div>
-                            <div>
-                                <h4 class="text-sm font-bold text-white mb-0.5">صداهای VIP</h4>
-                                <p class="text-[11px] text-slate-400 leading-relaxed">دسترسی به ۳۰ صدای اختصاصی و طبیعی</p>
+                 <!-- 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>
 
-                       <div class="flex items-center gap-4 bg-[#1A1F2E]/50 border border-white/5 p-4 rounded-2xl hover:bg-[#1A1F2E] transition-colors">
-                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-500/20 to-orange-500/10 flex items-center justify-center shrink-0 border border-amber-500/10">
-                                <i data-lucide="shield-check" class="text-amber-400 w-5 h-5"></i>
+                            <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>
-                                <h4 class="text-sm font-bold text-white mb-0.5">بدون تبلیغات</h4>
-                                <p class="text-[11px] text-slate-400 leading-relaxed">تجربه کاربری روان و بدون مزاحمت</p>
-                            </div>
-                       </div>
-
-                     </div>
+                        </div>
+                    </div>
                  </div>
+
              </div>
         </div>
 
@@ -410,6 +366,44 @@
             }
         ];
 
+        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',
@@ -565,6 +559,38 @@
             </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');
@@ -578,7 +604,6 @@
                 accountView.classList.remove('active');
                 
                 // Style updates
-                // Home is on the Right side in RTL. Left 50% starts the second half (Right side).
                 indicator.style.left = '50%';
                 
                 btnHome.classList.replace('text-slate-400', 'text-white');
@@ -588,7 +613,6 @@
                 accountView.classList.add('active');
                 
                 // Style updates
-                // Account is on the Left side in RTL. Left 8px starts the first half (Left side).
                 indicator.style.left = '8px';
                 
                 btnAccount.classList.replace('text-slate-400', 'text-white');