Spaces:

Ezmary
/

Tttt

Running

App Files Files Community

Ezmary commited on Dec 25, 2025

Commit

2471577

verified ·

1 Parent(s): f2272da

Update index.html

Browse files

Files changed (1) hide show

index.html +245 -156

index.html CHANGED Viewed

@@ -3,211 +3,300 @@
 <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>
-    <!-- SEO Tags -->
-    <meta name="description" content="آلفا صدا: برترین ابزار هوش مصنوعی برای تبدیل متن به صدا، تغییر صدا خوانندگان و ساخت پادکست.">
-    <meta name="keywords" content="تغییر صدا هوش مصنوعی، متن به صدا، هوش مصنوعی صوتی، حذف نویز، پادکست ساز">
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
-        body {
-            font-family: 'Vazirmatn', sans-serif;
-            background-color: #F7F8FA; /* رنگ پس‌زمینه مشابه ویرا */
-            color: #2D3748;
             -webkit-tap-highlight-color: transparent;
         }
-        /* حذف اسکرول‌بار */
-        ::-webkit-scrollbar { display: none; }
         .app-container {
-            max-width: 480px;
             margin: 0 auto;
             min-height: 100vh;
             padding-bottom: 100px;
-            display: flex;
-            flex-direction: column;
         }
-        .main-card-gradient {
-            background: linear-gradient(135deg, #E0E7FF 0%, #FDE68A 100%);
         }
         .tool-card {
             background: white;
-            border-radius: 1.8rem;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
-            transition: transform 0.2s;
         }
         .tool-card:active {
-            transform: scale(0.96);
         }
-        .bottom-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            max-width: 480px;
-            margin: 0 auto;
-            background: white;
-            height: 80px;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            border-top: 1px solid #EDF2F7;
-            z-index: 1000;
         }
-        .nav-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            color: #A0AEC0;
-            text-decoration: none;
-            font-size: 11px;
-            font-weight: bold;
         }
-        .nav-item.active {
-            color: #1A202C;
         }
-        .nav-item i {
-            font-size: 22px;
-            margin-bottom: 4px;
         }
     </style>
 </head>
 <body>
-<div class="app-container px-5">
-    <!-- Top Header (Logo) -->
-    <header class="py-8 text-center">
-        <h1 class="text-3xl font-light tracking-[0.2em] text-slate-800">آلفا صـدا</h1>
     </header>
-    <!-- Hero Banner Card -->
-    <div class="main-card-gradient rounded-[2.5rem] p-6 mb-6 relative overflow-hidden flex items-center shadow-sm">
-        <div class="flex-1 z-10">
-            <h2 class="text-xl font-black text-slate-800 mb-2">تغییر صدا، بدون مکث</h2>
-            <p class="text-xs text-slate-600 mb-4">با آلفا صدا، ویس‌ها رو هوشمندانه به صدای خواننده‌ها تبدیل کن</p>
-            <a href="/voice-changer" class="bg-indigo-600 text-white px-5 py-2 rounded-full text-xs font-bold inline-flex items-center gap-2">
-                تغییر صدا <i class="fas fa-chevron-left text-[10px]"></i>
-            </a>
         </div>
-        <div class="w-24 h-24 bg-white/30 rounded-3xl backdrop-blur-md flex items-center justify-center">
-            <i class="fas fa-microphone-lines text-4xl text-indigo-600"></i>
         </div>
     </div>
-    <!-- 2x2 Grid Tools -->
-    <div class="grid grid-cols-2 gap-4 mb-6">
-        <!-- TTS -->
-        <a href="/tts" class="tool-card p-6 text-center">
-            <div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center mx-auto mb-3">
-                <i class="fas fa-keyboard text-blue-500 text-xl"></i>
-            </div>
-            <h3 class="font-black text-sm text-slate-800">آواشو</h3>
-            <p class="text-[10px] text-slate-400 mt-1">متن به صوت</p>
-        </a>
-        <!-- Chat AI -->
-        <a href="/chat" class="tool-card p-6 text-center">
-            <div class="w-12 h-12 bg-indigo-50 rounded-2xl flex items-center justify-center mx-auto mb-3">
-                <i class="fas fa-comment-dots text-indigo-500 text-xl"></i>
-            </div>
-            <h3 class="font-black text-sm text-slate-800">دانیار</h3>
-            <p class="text-[10px] text-slate-400 mt-1">چت‌بات صوتی</p>
-        </a>
-    </div>
-    <!-- Wide Card Tool (Full Width) -->
-    <div class="tool-card p-4 flex items-center gap-4 mb-6">
-        <div class="w-16 h-16 bg-orange-50 rounded-2xl flex items-center justify-center shrink-0">
-            <i class="fas fa-wand-magic-sparkles text-orange-500 text-2xl"></i>
-        </div>
-        <div class="flex-1">
-            <h3 class="font-black text-sm text-slate-800">پالت</h3>
-            <p class="text-[10px] text-slate-400">افزایش کیفیت و حذف نویز صدا</p>
         </div>
-        <i class="fas fa-chevron-left text-slate-300 ml-2"></i>
-    </div>
-    <!-- Second Grid Row -->
-    <div class="grid grid-cols-3 gap-3 mb-10">
-        <!-- STT -->
-        <a href="/stt" class="tool-card p-4 text-center">
-            <div class="w-10 h-10 bg-cyan-50 rounded-xl flex items-center justify-center mx-auto mb-2">
-                <i class="fas fa-file-audio text-cyan-500 text-lg"></i>
-            </div>
-            <h3 class="font-black text-[10px] text-slate-800">آوانگار</h3>
-            <p class="text-[8px] text-slate-400">صوت به متن</p>
-        </a>
-        <!-- Podcast -->
-        <a href="/podcast" class="tool-card p-4 text-center">
-            <div class="w-10 h-10 bg-emerald-50 rounded-xl flex items-center justify-center mx-auto mb-2">
-                <i class="fas fa-podcast text-emerald-500 text-lg"></i>
             </div>
-            <h3 class="font-black text-[10px] text-slate-800">رادیو آلفا</h3>
-            <p class="text-[8px] text-slate-400">ساخت پادکست</p>
-        </a>
-        <!-- Video AI -->
-        <a href="/chat" class="tool-card p-4 text-center opacity-60">
-            <div class="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center mx-auto mb-2">
-                <i class="fas fa-video text-slate-400 text-lg"></i>
             </div>
-            <h3 class="font-black text-[10px] text-slate-800">هماهنگ</h3>
-            <p class="text-[8px] text-slate-400">به‌زودی...</p>
-        </a>
     </div>
-    <!-- SEO Content Section (Visible to Google) -->
-    <section class="mt-10 border-t border-slate-200 pt-8 pb-20">
-        <h2 class="text-lg font-black text-slate-800 mb-4 text-center">درباره هوش مصنوعی آلفا صدا</h2>
-        <div class="text-xs text-slate-500 leading-6 text-justify space-y-4">
-            <p>
-                آلفا صدا به عنوان جامع‌ترین پلتفرم <strong>هوش مصنوعی صوتی فارسی</strong>، با ارائه ابزارهای نوین تلاش می‌کند تا فاصله بین ایده‌های شما و خروجی‌های صوتی حرفه‌ای را از بین ببرد.
-            </p>
-            <p>
-                سرویس <strong>تغییر صدا</strong> ما با بهره‌گیری از مدل‌های پیشرفته RVC v2، امکان تبدیل صدا به خوانندگان محبوب را فراهم کرده است. همچنین ابزار <strong>تبدیل متن به صدا</strong> (آواشو) با استفاده از فناوری Neural TTS، نوشته‌های شما را به گفتاری کاملاً طبیعی و با کیفیت استودیویی تبدیل می‌کند.
-            </p>
         </div>
-    </section>
-    <!-- Bottom Navigation (Vira Style) -->
-    <nav class="bottom-nav">
-        <a href="/profile" class="nav-item">
-            <i class="far fa-user-circle"></i>
-            <span>پروفایل</span>
-        </a>
-        <a href="/pricing" class="nav-item">
-            <i class="far fa-gem"></i>
-            <span>اشتراک</span>
-        </a>
-        <a href="/" class="nav-item active">
-            <i class="fas fa-home"></i>
-            <span>خانه</span>
-        </a>
     </nav>
 </div>
 <script>
-    // شبیه‌سازی انتخاب منو
-    document.querySelectorAll('.nav-item').forEach(item => {
-        item.addEventListener('click', function(e) {
-            // این بخش در وردپرس با تغییر آدرس صفحه انجام می‌شود
-            // اما برای نمایش گرافیکی:
-            document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
-            this.classList.add('active');
         });
-    });
 </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <!-- SEO Meta Tags -->
+    <title>آلفا صدا | سوپر اپلیکیشن هوش مصنوعی صوتی</title>
+    <meta name="description" content="اولین استودیو هوشمند صوتی ایران. تغییر صدا، متن به گفتار، ساخت پادکست و حذف نویز با تکنولوژی RVC و Neural TTS.">
+    <meta name="keywords" content="تغییر صدا هوش مصنوعی، متن به صدا فارسی، هوش مصنوعی صوتی، حذف نویز، ساخت پادکست، تبدیل گفتار به متن">
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4A6CFA',
+                        secondary: '#0FD4A8',
+                        accent: '#F59E0B',
+                        dark: '#0F172A',
+                        appBg: '#F1F5F9'
+                    },
+                    borderRadius: {
+                        'app': '2rem',
+                    }
+                }
+            }
+        }
+    </script>
     <style>
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background-color: #F1F5F9;
+            color: #1E293B;
+            overflow-x: hidden;
             -webkit-tap-highlight-color: transparent;
         }
+        /* Mobile-First Layout */
         .app-container {
+            max-width: 500px;
             margin: 0 auto;
+            background: #F1F5F9;
             min-height: 100vh;
+            position: relative;
             padding-bottom: 100px;
         }
+        .glass-nav {
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-top: 1px solid rgba(255, 255, 255, 0.3);
         }
         .tool-card {
             background: white;
+            border-radius: 1.5rem;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 1px solid #E2E8F0;
         }
         .tool-card:active {
+            transform: scale(0.95);
+            background: #F8FAFC;
         }
+        /* Smooth Tab Transition */
+        .tab-content {
+            display: none;
+            animation: slideIn 0.3s ease-out;
         }
+        .tab-content.active {
+            display: block;
         }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+        /* Desktop Mockup */
+        @media (min-width: 501px) {
+            body { background-color: #E2E8F0; }
+            .app-container {
+                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+                margin-top: 20px;
+                margin-bottom: 20px;
+                border-radius: 3rem;
+                overflow: hidden;
+                height: 90vh;
+                overflow-y: auto;
+            }
         }
     </style>
 </head>
 <body>
+<div class="app-container no-scrollbar">
+    <!-- App Header -->
+    <header class="p-6 flex justify-between items-center bg-white/50 sticky top-0 z-50 backdrop-blur-md">
+        <div class="flex items-center gap-3">
+            <div class="w-10 h-10 bg-primary rounded-xl flex items-center justify-center text-white shadow-lg">
+                <i class="fas fa-wave-square"></i>
+            </div>
+            <h1 class="text-xl font-black text-slate-800">آلفا صدا</h1>
+        </div>
+        <button class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600">
+            <i class="fas fa-user"></i>
+        </button>
     </header>
+    <!-- Tab 1: Home (Tools Grid) -->
+    <div id="home-tab" class="tab-content active p-6">
+        <!-- Credit Status -->
+        <div class="bg-gradient-to-r from-primary to-blue-600 rounded-3xl p-6 text-white shadow-xl mb-8 relative overflow-hidden">
+            <div class="absolute top-0 left-0 w-full h-full opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
+            <h2 class="text-lg font-bold mb-2">اعتبار رایگان امروز</h2>
+            <div class="flex gap-4 mt-4 text-center">
+                <div class="flex-1 bg-white/20 rounded-2xl p-3 backdrop-blur-md">
+                    <span class="block text-2xl font-black">۵</span>
+                    <span class="text-[10px] opacity-80">متن به صدا</span>
+                </div>
+                <div class="flex-1 bg-white/20 rounded-2xl p-3 backdrop-blur-md">
+                    <span class="block text-2xl font-black">۱۰</span>
+                    <span class="text-[10px] opacity-80">تغییر صدا</span>
+                </div>
+            </div>
         </div>
+        <h3 class="font-black text-slate-800 mb-6 flex items-center gap-2">
+            <i class="fas fa-th-large text-primary"></i> ابزارهای هوشمند
+        </h3>
+        <!-- Tools Grid -->
+        <div class="grid grid-cols-2 gap-4">
+            <!-- TTS -->
+            <a href="/tts" class="tool-card p-5 text-center flex flex-col items-center">
+                <div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
+                    <i class="fas fa-keyboard"></i>
+                </div>
+                <span class="text-xs font-black text-slate-700 leading-tight">تبدیل متن<br>به صدا</span>
+            </a>
+            <!-- Voice Changer -->
+            <a href="/voice-changer" class="tool-card p-5 text-center flex flex-col items-center border-2 border-primary/20 shadow-lg shadow-primary/5">
+                <div class="w-14 h-14 bg-purple-100 text-purple-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
+                    <i class="fas fa-microphone-lines"></i>
+                </div>
+                <span class="text-xs font-black text-slate-700 leading-tight">تغییر صدا<br>(AI)</span>
+            </a>
+            <!-- Podcast -->
+            <a href="/podcast" class="tool-card p-5 text-center flex flex-col items-center">
+                <div class="w-14 h-14 bg-emerald-100 text-emerald-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
+                    <i class="fas fa-podcast"></i>
+                </div>
+                <span class="text-xs font-black text-slate-700 leading-tight">ساخت<br>پادکست</span>
+            </a>
+            <!-- Enhancement -->
+            <a href="/enhance" class="tool-card p-5 text-center flex flex-col items-center">
+                <div class="w-14 h-14 bg-orange-100 text-orange-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
+                    <i class="fas fa-wand-magic-sparkles"></i>
+                </div>
+                <span class="text-xs font-black text-slate-700 leading-tight">افزایش کیفیت<br>و حذف نویز</span>
+            </a>
+            <!-- STT -->
+            <a href="/stt" class="tool-card p-5 text-center flex flex-col items-center">
+                <div class="w-14 h-14 bg-cyan-100 text-cyan-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
+                    <i class="fas fa-file-audio"></i>
+                </div>
+                <span class="text-xs font-black text-slate-700 leading-tight">تبدیل گفتار<br>به متن</span>
+            </a>
+            <!-- AI Chat -->
+            <a href="/chat" class="tool-card p-5 text-center flex flex-col items-center">
+                <div class="w-14 h-14 bg-rose-100 text-rose-600 rounded-2xl flex items-center justify-center text-2xl mb-3">
+                    <i class="fas fa-video"></i>
+                </div>
+                <span class="text-xs font-black text-slate-700 leading-tight">چت صوتی و<br>تصویری</span>
+            </a>
         </div>
     </div>
+    <!-- Tab 2: Info/SEO (Content Section) -->
+    <div id="info-tab" class="tab-content p-6">
+        <h2 class="text-2xl font-black text-slate-900 mb-6">راهنمای جامع آلفا صدا</h2>
+        <div class="space-y-8 text-sm text-slate-600 leading-loose text-justify">
+            <!-- TTS SEO -->
+            <section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
+                <h3 class="text-lg font-black text-primary mb-4">تبدیل متن به صدا با هوش مصنوعی</h3>
+                <p>
+                    سرویس <strong>تبدیل متن به صدا</strong> آلفا صدا، پیشرفته‌ترین ابزار TTS فارسی است. ما با استفاده از مدل‌های Deep Learning، متن‌های شما را با لحنی کاملاً انسانی تولید می‌کنیم. این ابزار برای تولید کتاب صوتی، نریشن ویدیوهای اینستاگرامی و یوتیوب ایده‌آل است.
+                </p>
+            </section>
+            <!-- Voice Changer SEO -->
+            <section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
+                <h3 class="text-lg font-black text-purple-600 mb-4">تغییر صدا با هوش مصنوعی (RVC)</h3>
+                <p>
+                    تکنولوژی <strong>تغییر صدا</strong> به شما این امکان را می‌دهد تا فایل صوتی خود را به صدای خوانندگان مشهور یا شخصیت‌های محبوب تبدیل کنید. این فرآیند با دقت فرکانسی ۹۸٪ انجام می‌شود و تمام جزئیات صدای هدف را بازسازی می‌کند.
+                </p>
+            </section>
+            <!-- Podcast SEO -->
+            <section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
+                <h3 class="text-lg font-black text-emerald-600 mb-4">ساخت پادکست هوشمند</h3>
+                <p>
+                    دیگر نیازی به اجاره استودیو ندارید. با <strong>ساخت پادکست هوشمند</strong>، سناریو بنویسید و ��فتگوهای چند نفره را با کیفیت عالی تحویل بگیرید. هوش مصنوعی ما به صورت خودکار موسیقی متن و فواصل صوتی را تنظیم می‌کند.
+                </p>
+            </section>
+            <!-- Enhancement SEO -->
+            <section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
+                <h3 class="text-lg font-black text-orange-600 mb-4">حذف نویز و افزایش کیفیت صدا</h3>
+                <p>
+                    ابزار <strong>افزایش کیفیت صدا</strong> نویزهای آزاردهنده محیطی، باد و خش‌خش را حذف کرده و با بازسازی فرکانس‌های ضعیف، خروجی استودیویی (HD) تحویل می‌دهد. مناسب برای ویس‌های ضبط شده در محیط‌های شلوغ.
+                </p>
+            </section>
+            <!-- STT SEO -->
+            <section class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100">
+                <h3 class="text-lg font-black text-cyan-600 mb-4">تبدیل گفتار به متن</h3>
+                <p>
+                    جلسات، ویس‌های تلگرامی و ویدیوهای خود را به راحتی به متن تایپ شده تبدیل کنید. ابزار <strong>تبدیل گفتار به متن</strong> ما از علائم نگارشی فارسی پشتیبانی کرده و دقت بسیار بالایی در تشخیص لهجه‌ها دارد.
+                </p>
+            </section>
         </div>
+        <!-- FAQ Section -->
+        <div id="faq" class="mt-12 space-y-4 pb-20">
+            <h3 class="text-xl font-black text-center mb-8">سوالات متداول</h3>
+            <div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100">
+                <h4 class="font-bold text-slate-800 text-sm mb-2">آیا اعتبارها روزانه شارژ می‌شوند؟</h4>
+                <p class="text-xs text-slate-500">بله، هر شب ساعت ۰۰:۰۰ اعتبار ۵ تایی متن به صدا و ۱۰ تایی تغییر صدا برای تمام کاربران شارژ مجدد می‌شود.</p>
             </div>
+            <div class="bg-white rounded-2xl p-5 shadow-sm border border-slate-100">
+                <h4 class="font-bold text-slate-800 text-sm mb-2">چگونه اشتراک نامحدود تهیه کنم؟</h4>
+                <p class="text-xs text-slate-500">از طریق منوی پروفایل و بخش ارتقای حساب، می‌توانید پلن‌های ۳۰ روزه، ۹۰ روزه و سالانه را با قیمت‌های استثنایی تهیه کنید.</p>
             </div>
+        </div>
     </div>
+    <!-- Bottom Navigation Bar (The App Feel) -->
+    <nav class="fixed bottom-0 left-0 right-0 glass-nav z-[100] max-w-[500px] mx-auto rounded-t-[2.5rem] shadow-[0_-10px_30px_rgba(0,0,0,0.05)]">
+        <div class="flex justify-around items-center h-20 px-6">
+            <button onclick="switchTab('home')" id="home-btn" class="flex flex-col items-center gap-1 text-primary">
+                <i class="fas fa-home text-xl"></i>
+                <span class="text-[10px] font-black">خانه</span>
+            </button>
+            <button onclick="switchTab('info')" id="info-btn" class="flex flex-col items-center gap-1 text-slate-400">
+                <i class="fas fa-book-open text-xl"></i>
+                <span class="text-[10px] font-bold">آموزش و سئو</span>
+            </button>
+            <div class="relative -top-8">
+                <a href="https://t.me/ezmarynoori" class="w-14 h-14 bg-dark text-white rounded-full flex items-center justify-center shadow-xl border-4 border-[#F1F5F9] active:scale-90 transition-transform">
+                    <i class="fab fa-telegram-plane text-xl"></i>
+                </a>
+            </div>
+            <button onclick="window.location.href='/pricing'" class="flex flex-col items-center gap-1 text-slate-400">
+                <i class="fas fa-crown text-xl"></i>
+                <span class="text-[10px] font-bold">اشتراک</span>
+            </button>
+            <button onclick="window.location.href='/login'" class="flex flex-col items-center gap-1 text-slate-400">
+                <i class="fas fa-user-circle text-xl"></i>
+                <span class="text-[10px] font-bold">پروفایل</span>
+            </button>
         </div>
     </nav>
 </div>
 <script>
+    function switchTab(tabName) {
+        // Hide all contents
+        document.querySelectorAll('.tab-content').forEach(tab => {
+            tab.classList.remove('active');
         });
+        // Deactivate all buttons
+        document.querySelectorAll('nav button').forEach(btn => {
+            btn.classList.replace('text-primary', 'text-slate-400');
+            btn.querySelector('span').classList.replace('font-black', 'font-bold');
+        });
+        // Show selected content
+        document.getElementById(tabName + '-tab').classList.add('active');
+        // Active button style
+        const activeBtn = document.getElementById(tabName + '-btn');
+        activeBtn.classList.replace('text-slate-400', 'text-primary');
+        activeBtn.querySelector('span').classList.replace('font-bold', 'font-black');
+        // Scroll to top
+        if(window.innerWidth > 500) {
+            document.querySelector('.app-container').scrollTop = 0;
+        } else {
+            window.scrollTo(0, 0);
+        }
+    }
 </script>
 </body>