Update index.html

index.html

@@ -83,6 +83,7 @@
         .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 {
@@ -218,70 +219,117 @@
             </div>
         </div>
 
-        <!-- === SUBSCRIPTION VIEW === -->
-        <div id="subscription-view" class="view-section">
-             <div class="px-6 pt-4">
-                 <!-- Hero Coin Image -->
-                 <div class="relative w-full aspect-square mb-6 mx-auto max-w-sm fade-in-entry">
-                     <div class="absolute inset-0 bg-amber-500/20 blur-[60px] rounded-full animate-pulse"></div>
-                     <img src="https://app.puzzley.net/uploads/user/Jydo/Gpt4/tmpu3en1zel%281%29.png?_t=1769674744" alt="VIP" class="relative z-10 w-full h-full object-contain drop-shadow-2xl animate-float" />
-                 </div>
-
-                 <!-- Title -->
-                 <div class="text-center mb-8 fade-in-entry" style="animation-delay: 0.2s;">
-                    <h2 class="text-3xl font-black text-white mb-2">
-                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-yellow-400 to-amber-600">
-                            اشتراک طلایی آلفا
-                        </span>
-                    </h2>
-                    <p class="text-slate-400 text-sm leading-6 max-w-xs mx-auto">
-                        با تهیه اشتراک، قدرت واقعی هوش مصنوعی را آزاد کنید و بدون محدودیت خلق کنید.
-                    </p>
-                 </div>
-
-                 <!-- Feature List -->
-                 <div class="space-y-3 mb-8 fade-in-entry" style="animation-delay: 0.3s;">
-                     <!-- List items injected -->
-                     <div class="flex items-center gap-3 bg-white/5 border border-white/5 p-3 rounded-xl backdrop-blur-sm">
-                         <div class="w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-orange-600 flex items-center justify-center shrink-0 shadow-lg shadow-amber-500/20">
-                             <i data-lucide="infinity" class="text-white w-4 h-4"></i>
+        <!-- === ACCOUNT VIEW (SUBSCRIPTION) === -->
+        <div id="account-view" class="view-section">
+             <div class="pb-24">
+                 
+                 <!-- 1. Banner Image (Wide aspect ratio 1179/546) -->
+                 <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/20">
+                         <!-- Background -->
+                         <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] via-transparent to-transparent z-20 opacity-60"></div>
+
+                         <!-- Badge -->
+                         <div class="absolute top-4 right-4 z-30">
+                             <div class="px-3 py-1.5 bg-black/40 backdrop-blur-md border border-amber-500/30 rounded-full flex items-center gap-1.5 shadow-lg">
+                                 <i data-lucide="crown" class="text-amber-400 fill-amber-400 w-3 h-3"></i>
+                                 <span class="text-[11px] font-bold text-amber-100">نسخه ویژه آلفا</span>
+                             </div>
                          </div>
-                         <span class="text-sm font-medium text-slate-200">تولید نامحدود صدا و متن</span>
+                         
+                         <!-- Title Overlay -->
+                        <div class="absolute bottom-6 right-0 left-0 text-center z-30">
+                             <h2 class="text-2xl font-black text-white drop-shadow-lg mb-1">اشتراک طلایی</h2>
+                             <p class="text-amber-200 text-xs font-medium drop-shadow-md">تجربه قدرت واقعی هوش مصنوعی</p>
+                        </div>
                      </div>
-                     <div class="flex items-center gap-3 bg-white/5 border border-white/5 p-3 rounded-xl backdrop-blur-sm">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-orange-600 flex items-center justify-center shrink-0 shadow-lg shadow-amber-500/20">
-                            <i data-lucide="zap" class="text-white w-4 h-4"></i>
+                 </div>
+
+                 <div class="px-5">
+                    <!-- 2. Purchase Card -->
+                    <div class="mb-8 fade-in-entry" style="animation-delay: 0.2s;">
+                        <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-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 relative z-10">
+                                    <div class="flex items-end gap-1 mb-5">
+                                        <span class="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-b from-amber-200 to-amber-500">۱۴۹,۰۰۰</span>
+                                        <span class="text-sm text-slate-400 font-medium mb-1">تومان / ماهانه</span>
+                                    </div>
+
+                                    <button class="w-full py-4 rounded-xl bg-gradient-to-r from-amber-400 to-orange-500 text-white font-bold text-lg shadow-lg shadow-orange-500/40 flex items-center justify-center gap-2 relative overflow-hidden group/btn">
+                                        <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">
+                                        <i data-lucide="shield-check" class="w-3 h-3"></i>
+                                        تضمین بازگشت وجه در صورت نارضایتی
+                                    </p>
+                                </div>
+                            </div>
                         </div>
-                        <span class="text-sm font-medium text-slate-200">سرعت پردازش ۵ برابر بالاتر</span>
                     </div>
-                    <div class="flex items-center gap-3 bg-white/5 border border-white/5 p-3 rounded-xl backdrop-blur-sm">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-orange-600 flex items-center justify-center shrink-0 shadow-lg shadow-amber-500/20">
-                            <i data-lucide="star" class="text-white w-4 h-4"></i>
+
+                    <!-- 3. 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>
-                        <span class="text-sm font-medium text-slate-200">دسترسی به ۳۰ صدای اختصاصی VIP</span>
-                    </div>
-                    <div class="flex items-center gap-3 bg-white/5 border border-white/5 p-3 rounded-xl backdrop-blur-sm">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-amber-400 to-orange-600 flex items-center justify-center shrink-0 shadow-lg shadow-amber-500/20">
-                            <i data-lucide="shield-check" class="text-white w-4 h-4"></i>
+
+                        <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>
                         </div>
-                        <span class="text-sm font-medium text-slate-200">بدون تبلیغات + پشتیبانی اولویت‌دار</span>
-                    </div>
-                 </div>
 
-                 <!-- Pricing Card -->
-                 <div class="relative p-1 rounded-3xl bg-gradient-to-b from-amber-300 via-yellow-500 to-amber-700 shadow-2xl shadow-amber-600/20 fade-in-entry" style="animation-delay: 0.5s;">
-                     <div class="bg-[#131722] rounded-[22px] p-6 text-center relative overflow-hidden">
-                         <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-white/10 to-transparent pointer-events-none"></div>
-                         <p class="text-slate-400 text-xs mb-1 font-medium">پکیج ماهانه</p>
-                         <div class="flex items-center justify-center gap-2 mb-6">
-                             <span class="text-3xl font-black text-white">۱۴۹,۰۰۰</span>
-                             <span class="text-sm text-slate-400">تومان</span>
-                         </div>
-                         <button class="w-full py-4 rounded-xl bg-gradient-to-r from-amber-400 to-orange-500 text-white font-bold text-lg shadow-lg shadow-orange-500/30 flex items-center justify-center gap-2 relative overflow-hidden group">
-                             <span class="relative z-10">تهیه اشتراک ویژه</span>
-                             <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent translate-x-[-100%] animate-shimmer"></div>
-                         </button>
-                         <p class="text-[10px] text-slate-500 mt-4">تضمین بازگشت وجه تا ۷ روز در صورت نارضایتی</p>
+                        <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>
+                            </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>
+                            <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>
@@ -292,21 +340,21 @@
     <!-- 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-around bg-[#131722]/90 backdrop-blur-xl border border-white/10 rounded-full p-2 shadow-2xl shadow-black/50">
+            <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: 0; transform: translateX(4px);"></div>
+                <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 gap-2 px-6 py-3 rounded-full transition-colors duration-300 text-white w-1/2 justify-center">
+                <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>
 
-                <!-- Sub Button -->
-                <button onclick="switchTab('subscription')" id="btn-sub" class="relative z-10 flex items-center gap-2 px-6 py-3 rounded-full transition-colors duration-300 text-slate-400 w-1/2 justify-center hover:text-white">
-                    <i data-lucide="crown" class="w-5 h-5"></i>
-                    <span class="text-sm font-bold">اشتراک</span>
+                <!-- 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>
@@ -525,28 +573,30 @@
         // 5. Navigation Logic
         function switchTab(tab) {
             const homeView = document.getElementById('home-view');
-            const subView = document.getElementById('subscription-view');
+            const accountView = document.getElementById('account-view');
             const indicator = document.getElementById('nav-indicator');
             const btnHome = document.getElementById('btn-home');
-            const btnSub = document.getElementById('btn-sub');
+            const btnAccount = document.getElementById('btn-account');
 
             if (tab === 'home') {
                 homeView.classList.add('active');
-                subView.classList.remove('active');
+                accountView.classList.remove('active');
                 
                 // Style updates
-                indicator.style.transform = 'translateX(4px)'; // Adjust based on padding
+                // 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');
-                btnSub.classList.replace('text-white', 'text-slate-400');
+                btnAccount.classList.replace('text-white', 'text-slate-400');
             } else {
                 homeView.classList.remove('active');
-                subView.classList.add('active');
+                accountView.classList.add('active');
                 
                 // Style updates
-                indicator.style.transform = 'translateX(100%) translateX(12px)';
+                // Account is on the Left side in RTL. Left 8px starts the first half (Left side).
+                indicator.style.left = '8px';
                 
-                btnSub.classList.replace('text-slate-400', 'text-white');
+                btnAccount.classList.replace('text-slate-400', 'text-white');
                 btnHome.classList.replace('text-white', 'text-slate-400');
             }
             window.scrollTo(0,0);