Update index.html

index.html

@@ -33,7 +33,7 @@
         ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
         ::-webkit-scrollbar-thumb:hover { background: #475569; }
 
-        /* Animations mimicking Framer Motion */
+        /* Animations */
         @keyframes float {
             0%, 100% { transform: translateY(0); }
             50% { transform: translateY(-20px); }
@@ -66,6 +66,11 @@
             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; }
@@ -77,6 +82,7 @@
         .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; }
         
         /* Utility classes */
         .glass-panel {
@@ -113,6 +119,17 @@
             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">
 {
@@ -145,56 +162,152 @@
         <div class="absolute inset-0 bg-gradient-to-b from-transparent via-[#0B0F19]/60 to-[#0B0F19]"></div>
     </div>
 
-    <!-- Main Content -->
-    <div class="relative z-10 min-h-screen pb-10 pt-8">
+    <!-- Main Content Container -->
+    <div class="relative z-10 min-h-screen pb-24 pt-8">
         
-        <!-- 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 -->
+        <!-- === 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>
-        </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">
-                   با هوش مصنوعی
+            <!-- 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>
-              </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 -->
+                <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>
 
-            <!-- 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 -->
+            <!-- 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>
 
-            <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>
+        <!-- === 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>
+                         </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="zap" class="text-white w-4 h-4"></i>
+                        </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>
+                        </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>
+                        <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>
+                 </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-around 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>
+
+                <!-- 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">
+                    <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>
+                </button>
             </div>
         </div>
     </div>
@@ -409,6 +522,36 @@
             </div>
         `;
 
+        // 5. Navigation Logic
+        function switchTab(tab) {
+            const homeView = document.getElementById('home-view');
+            const subView = document.getElementById('subscription-view');
+            const indicator = document.getElementById('nav-indicator');
+            const btnHome = document.getElementById('btn-home');
+            const btnSub = document.getElementById('btn-sub');
+
+            if (tab === 'home') {
+                homeView.classList.add('active');
+                subView.classList.remove('active');
+                
+                // Style updates
+                indicator.style.transform = 'translateX(4px)'; // Adjust based on padding
+                
+                btnHome.classList.replace('text-slate-400', 'text-white');
+                btnSub.classList.replace('text-white', 'text-slate-400');
+            } else {
+                homeView.classList.remove('active');
+                subView.classList.add('active');
+                
+                // Style updates
+                indicator.style.transform = 'translateX(100%) translateX(12px)';
+                
+                btnSub.classList.replace('text-slate-400', 'text-white');
+                btnHome.classList.replace('text-white', 'text-slate-400');
+            }
+            window.scrollTo(0,0);
+        }
+
         // Init Icons
         lucide.createIcons();