🎨 Redesign from AnyCoder

index.html

@@ -7,304 +7,656 @@
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
     <script>
         tailwind.config = {
             theme: {
                 extend: {
                     fontFamily: {
-                        'vazir': ['Vazir', 'system-ui'],
+                        sans: ['Vazirmatn', 'system-ui', '-apple-system', 'sans-serif'],
                     },
                     colors: {
                         primary: {
-                            50: '#f0f9ff',
-                            100: '#e0f2fe',
-                            500: '#0ea5e9',
-                            600: '#0284c7',
-                            700: '#0369a1',
+                            50: '#f0fdf4',
+                            100: '#dcfce7',
+                            200: '#bbf7d0',
+                            300: '#86efac',
+                            400: '#4ade80',
+                            500: '#22c55e',
+                            600: '#16a34a',
+                            700: '#15803d',
+                            800: '#166534',
+                            900: '#14532d',
+                        },
+                        accent: {
+                            50: '#faf5ff',
+                            100: '#f3e8ff',
+                            200: '#e9d5ff',
+                            300: '#d8b4fe',
+                            400: '#c084fc',
+                            500: '#a855f7',
+                            600: '#9333ea',
+                            700: '#7c3aed',
                         }
                     }
                 }
             }
         }
     </script>
-    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/font-face.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-font-face.css" rel="stylesheet">
     <style>
-        body {
-            font-family: 'Vazir', sans-serif;
+        * {
+            scrollbar-width: thin;
+            scrollbar-color: #cbd5e1 transparent;
         }
-        .rtl {
-            direction: rtl;
+        
+        *::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
         }
-        .message-bubble-user {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border-radius: 18px 18px 4px 18px;
+        
+        *::-webkit-scrollbar-track {
+            background: transparent;
         }
-        .message-bubble-ai {
-            background: #f1f5f9;
-            color: #334155;
-            border-radius: 18px 18px 18px 4px;
+        
+        *::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 3px;
         }
-        .code-block {
-            background: #1e293b;
-            color: #e2e8f0;
-            border-radius: 8px;
-            font-family: 'Monaco', 'Consolas', monospace;
+        
+        *::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+
+        .message-enter {
+            animation: messageSlide 0.3s ease-out;
+        }
+        
+        @keyframes messageSlide {
+            from {
+                opacity: 0;
+                transform: translateY(8px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .typing-dot {
+            animation: typingBounce 1.4s infinite ease-in-out both;
+        }
+        
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+        
+        @keyframes typingBounce {
+            0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+            40% { transform: scale(1); opacity: 1; }
+        }
+
+        .glass {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+        }
+
+        .dark .glass {
+            background: rgba(15, 23, 42, 0.85);
+        }
+
+        .gradient-text {
+            background: linear-gradient(135deg, #16a34a 0%, #9333ea 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .page {
+            display: none;
+            animation: fadeIn 0.25s ease-out;
+        }
+        
+        .page.active {
+            display: block;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .nav-item {
+            position: relative;
+        }
+        
+        .nav-item::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 50%;
+            right: 50%;
+            height: 2px;
+            background: linear-gradient(90deg, #16a34a, #9333ea);
+            transition: all 0.2s ease;
+            border-radius: 1px;
+        }
+        
+        .nav-item:hover::after,
+        .nav-item.active::after {
+            left: 0;
+            right: 0;
+        }
+
+        .input-focus-ring:focus-within {
+            box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
+        }
+
+        .card-hover {
+            transition: all 0.2s ease;
+        }
+        
+        .card-hover:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
+            transition: all 0.2s ease;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
+        }
+
+        .btn-primary:active {
+            transform: translateY(0);
         }
     </style>
 </head>
-<body class="bg-gray-50 font-vazir rtl">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-sm border-b border-gray-200">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center">
-                    <div class="flex-shrink-0">
-                        <h1 class="text-xl font-bold text-gray-900">پارس‌گوی 🧠</h1>
+<body class="bg-slate-50 text-slate-800 font-sans antialiased dark:bg-slate-900 dark:text-slate-100 transition-colors duration-200">
+    <!-- Header -->
+    <header class="fixed top-0 left-0 right-0 z-50 glass border-b border-slate-200/50 dark:border-slate-700/50">
+        <div class="max-w-5xl mx-auto px-4 sm:px-6">
+            <div class="flex items-center justify-between h-14">
+                <!-- Logo -->
+                <a href="#" onclick="showPage('chat')" class="flex items-center gap-2 group">
+                    <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-primary-500 to-accent-600 flex items-center justify-center text-white text-sm font-bold group-hover:scale-105 transition-transform">
+                        پ
                     </div>
-                    <div class="hidden md:block mr-8">
-                        <div class="flex items-baseline space-x-4 space-x-reverse">
-                            <a href="/" class="text-gray-900 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">چت</a>
-                            <a href="/history.html" class="text-gray-500 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">تاریخچه</a>
-                            <a href="/personas.html" class="text-gray-500 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">شخصیت‌ها</a>
-                            <a href="/profile.html" class="text-gray-500 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">پروفایل</a>
-                        </div>
-                    </div>
-                </div>
-                <div class="flex items-center">
-                    <button id="themeToggle" class="p-2 text-gray-500 hover:text-primary-600">
-                        <i data-feather="moon"></i>
+                    <span class="font-bold text-lg hidden sm:block">پارس‌گوی</span>
+                </a>
+
+                <!-- Navigation -->
+                <nav class="hidden md:flex items-center gap-6">
+                    <a href="#" onclick="showPage('chat')" class="nav-item text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100 py-1 active" id="nav-chat">چت</a>
+                    <a href="#" onclick="showPage('history')" class="nav-item text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100 py-1" id="nav-history">تاریخچه</a>
+                    <a href="#" onclick="showPage('personas')" class="nav-item text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100 py-1" id="nav-personas">شخصیت‌ها</a>
+                    <a href="#" onclick="showPage('profile')" class="nav-item text-sm font-medium text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100 py-1" id="nav-profile">پروفایل</a>
+                </nav>
+
+                <!-- Actions -->
+                <div class="flex items-center gap-2">
+                    <button onclick="toggleTheme()" class="p-2 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-slate-100 dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-colors" aria-label="تغییر تم">
+                        <i data-feather="moon" class="w-5 h-5 dark:hidden"></i>
+                        <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i>
                     </button>
-                    <button id="authButton" class="mr-4 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium">
-                        ورود / ثبت‌نام
+                    <button onclick="showPage('login')" class="btn-primary text-white text-sm font-medium px-4 py-2 rounded-lg hidden sm:block">
+                        ورود
+                    </button>
+                    
+                    <!-- Mobile menu button -->
+                    <button onclick="toggleMobileMenu()" class="md:hidden p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800">
+                        <i data-feather="menu" class="w-5 h-5"></i>
                     </button>
                 </div>
             </div>
         </div>
-    </nav>
-
-    <!-- Main Chat Interface -->
-    <div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-        <!-- Chat Header -->
-        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-3 space-x-reverse">
-                    <div class="w-12 h-12 bg-gradient-to-r from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-white font-bold">
-                        AI
-                    </div>
-                    <div>
-                        <h2 class="text-lg font-semibold text-gray-900">دستیار هوشمند فارسی</h2>
-                        <p class="text-sm text-gray-500">همیشه در دسترس برای کمک به شما</p>
+
+        <!-- Mobile Navigation -->
+        <div id="mobileMenu" class="hidden md:hidden border-t border-slate-200 dark:border-slate-700 glass">
+            <nav class="flex flex-col p-4 gap-2">
+                <a href="#" onclick="showPage('chat'); toggleMobileMenu()" class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800">
+                    <i data-feather="message-circle" class="w-4 h-4"></i>
+                    <span>چت</span>
+                </a>
+                <a href="#" onclick="showPage('history'); toggleMobileMenu()" class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800">
+                    <i data-feather="clock" class="w-4 h-4"></i>
+                    <span>تاریخچه</span>
+                </a>
+                <a href="#" onclick="showPage('personas'); toggleMobileMenu()" class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800">
+                    <i data-feather="users" class="w-4 h-4"></i>
+                    <span>شخصیت‌ها</span>
+                </a>
+                <a href="#" onclick="showPage('profile'); toggleMobileMenu()" class="flex items-center gap-3 px-3 py-2 rounded-lg text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800">
+                    <i data-feather="user" class="w-4 h-4"></i>
+                    <span>پروفایل</span>
+                </a>
+            </nav>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="pt-14 min-h-screen">
+        
+        <!-- Chat Page -->
+        <div id="page-chat" class="page active h-[calc(100vh-3.5rem)] flex flex-col">
+            <!-- Chat Messages -->
+            <div id="chatMessages" class="flex-1 overflow-y-auto px-4 py-4 space-y-4">
+                <!-- Welcome -->
+                <div class="flex justify-center py-8">
+                    <div class="text-center max-w-sm">
+                        <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-primary-100 to-accent-100 dark:from-primary-900/30 dark:to-accent-900/30 flex items-center justify-center">
+                            <span class="text-3xl">🧠</span>
+                        </div>
+                        <h2 class="text-xl font-bold mb-2">سلام! من پارس‌گوی هستم</h2>
+                        <p class="text-sm text-slate-500 dark:text-slate-400">دستیار هوشمند فارسی شما. هر سوالی دارید بپرسید، در خدمتم.</p>
                     </div>
                 </div>
-                <div class="flex items-center space-x-2 space-x-reverse">
-                    <button id="voiceInput" class="p-2 text-gray-500 hover:text-primary-600 rounded-full hover:bg-gray-100">
-                        <i data-feather="mic"></i>
-                    </button>
-                    <button id="clearChat" class="p-2 text-gray-500 hover:text-red-600 rounded-full hover:bg-gray-100">
-                        <i data-feather="trash-2"></i>
-                    </button>
+
+                <!-- AI Message -->
+                <div class="flex gap-3 message-enter">
+                    <div class="w-8 h-8 rounded-xl bg-gradient-to-br from-primary-500 to-accent-600 flex items-center justify-center text-white text-xs font-bold shrink-0">
+                        پ
+                    </div>
+                    <div class="flex-1 max-w-[85%] sm:max-w-[75%]">
+                        <div class="bg-white dark:bg-slate-800 rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm border border-slate-100 dark:border-slate-700">
+                            <p class="text-sm leading-relaxed">سلام! چطور می‌توانم کمکتان کنم؟ می‌توانید درباره هر موضوعی سوال بپرسید: برنامه‌نویسی، نوشتن، یادگیری، یا هر چیز دیگری.</p>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <!-- Chat Messages -->
-        <div id="chatMessages" class="space-y-4 mb-6 min-h-[400px]">
-            <!-- Welcome Message -->
-            <div class="flex justify-start">
-                <div class="message-bubble-ai p-4 max-w-[80%]">
-                    <div class="flex items-center space-x-2 space-x-reverse mb-2">
-                        <div class="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center text-white text-xs">
-                            AI
+            <!-- Input Area -->
+            <div class="border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-4">
+                <div class="max-w-3xl mx-auto">
+                    <div class="relative input-focus-ring rounded-2xl bg-slate-100 dark:bg-slate-800 transition-shadow">
+                        <textarea 
+                            id="messageInput" 
+                            placeholder="پیام خود را بنویسید..."
+                            class="w-full bg-transparent px-4 py-3 pr-12 text-sm resize-none outline-none min-h-[52px] max-h-32"
+                            rows="1"
+                            oninput="autoResize(this)"
+                            onkeydown="handleKeydown(event)"
+                        ></textarea>
+                        
+                        <div class="absolute left-2 bottom-2 flex items-center gap-1">
+                            <button onclick="attachFile()" class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" title="پیوست">
+                                <i data-feather="paperclip" class="w-4 h-4"></i>
+                            </button>
+                            <button onclick="toggleVoice()" id="voiceBtn" class="p-2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" title="گفتار">
+                                <i data-feather="mic" class="w-4 h-4"></i>
+                            </button>
+                            <button onclick="sendMessage()" class="p-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors shadow-sm" title="ارسال">
+                                <i data-feather="send" class="w-4 h-4"></i>
+                            </button>
                         </div>
-                        <span class="text-sm text-gray-500">پارس‌گوی</span>
                     </div>
-                    <p class="text-gray-800">سلام! من پارس‌گوی هستم، دستیار هوشمند فارسی شما. چگونه می‌توانم کمکتان کنم؟</p>
+                    <p class="text-xs text-center text-slate-400 mt-2">پارس‌گوی ممکن است اطلاعات نادرست تولید کند. مهم پاسخ‌ها را بررسی کنید.</p>
                 </div>
             </div>
         </div>
 
-        <!-- Chat Input -->
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-            <div class="flex space-x-3 space-x-reverse">
-                <div class="flex-1">
-                    <textarea 
-                        id="messageInput" 
-                        placeholder="پیام خود را اینجا بنویسید... (برای استفاده از گفتار، روی آیکون میکروفون کلیک کنید)"
-                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent resize-none"
-                        rows="3"
-                    ></textarea>
-                </div>
-                <div class="flex flex-col space-y-2">
-                    <button id="sendMessage" class="bg-primary-500 hover:bg-primary-600 text-white p-3 rounded-lg transition-colors">
-                    <i data-feather="send"></i>
-                </button>
-                <button id="attachFile" class="text-gray-500 hover:text-primary-600 p-3 rounded-lg border border-gray-300 hover:border-primary-500">
-                    <i data-feather="paperclip"></i>
-                </button>
-            </div>
-            </div>
-            <div class="mt-3 flex items-center justify-between text-sm text-gray-500">
-                <div class="flex items-center space-x-2 space-x-reverse">
-                    <button id="regenerateBtn" class="hover:text-primary-600">
-                        <i data-feather="refresh-cw" class="w-4 h-4"></i>
-                        تولید مجدد
+        <!-- History Page -->
+        <div id="page-history" class="page">
+            <div class="max-w-3xl mx-auto px-4 py-6">
+                <div class="flex items-center justify-between mb-6">
+                    <h1 class="text-2xl font-bold">تاریخچه مکالمات</h1>
+                    <button onclick="clearAllHistory()" class="text-sm text-red-500 hover:text-red-600 flex items-center gap-1">
+                        <i data-feather="trash-2" class="w-4 h-4"></i>
+                        پاک کردن همه
                     </button>
                 </div>
-                <div>
-                    <span id="charCount">0/4000</span>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Auth Modal -->
-    <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
-        <div class="bg-white rounded-lg p-6 w-full max-w-md">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-semibold">ورود / ثبت‌نام</h3>
-                <button id="closeAuthModal" class="text-gray-500 hover:text-gray-700">
-                    <i data-feather="x"></i>
-                </button>
-            </div>
-            <form id="authForm" class="space-y-4">
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">ایمیل</label>
-                    <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" required>
+
+                <!-- Search -->
+                <div class="relative mb-6">
+                    <i data-feather="search" class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400"></i>
+                    <input 
+                        type="text" 
+                        placeholder="جستجو در تاریخچه..."
+                        class="w-full pr-12 pl-4 py-3 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500"
+                        oninput="searchHistory(this.value)"
+                    >
                 </div>
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">رمز عبور</label>
-                    <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" required>
+
+                <!-- History List -->
+                <div id="historyList" class="space-y-3">
+                    <div class="bg-white dark:bg-slate-800 rounded-xl p-4 border border-slate-200 dark:border-slate-700 card-hover cursor-pointer group" onclick="loadChat('1')">
+                        <div class="flex items-start justify-between gap-4">
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-medium text-slate-900 dark:text-slate-100 truncate">برنامه‌نویسی پایتون</h3>
+                                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">چگونه می‌توانم یک API REST با FastAPI بسازم؟</p>
+                            </div>
+                            <div class="flex flex-col items-end gap-2 shrink-0">
+                                <span class="text-xs text-slate-400">۲ ساعت پیش</span>
+                                <button onclick="event.stopPropagation(); deleteHistory('1')" class="opacity-0 group-hover:opacity-100 p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-white dark:bg-slate-800 rounded-xl p-4 border border-slate-200 dark:border-slate-700 card-hover cursor-pointer group" onclick="loadChat('2')">
+                        <div class="flex items-start justify-between gap-4">
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-medium text-slate-900 dark:text-slate-100 truncate">نوشتن مقاله علمی</h3>
+                                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">کمک در نوشتن مقدمه مقاله درباره یادگیری عمیق</p>
+                            </div>
+                            <div class="flex flex-col items-end gap-2 shrink-0">
+                                <span class="text-xs text-slate-400">دیروز</span>
+                                <button onclick="event.stopPropagation(); deleteHistory('2')" class="opacity-0 group-hover:opacity-100 p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="bg-white dark:bg-slate-800 rounded-xl p-4 border border-slate-200 dark:border-slate-700 card-hover cursor-pointer group" onclick="loadChat('3')">
+                        <div class="flex items-start justify-between gap-4">
+                            <div class="flex-1 min-w-0">
+                                <h3 class="font-medium text-slate-900 dark:text-slate-100 truncate">ترجمه انگلیسی به فارسی</h3>
+                                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">ترجمه متن یک مقاله ۵۰۰ کلمه‌ای</p>
+                            </div>
+                            <div class="flex flex-col items-end gap-2 shrink-0">
+                                <span class="text-xs text-slate-400">۳ روز پیش</span>
+                                <button onclick="event.stopPropagation(); deleteHistory('3')" class="opacity-0 group-hover:opacity-100 p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <button type="submit" class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg transition-colors">
-                    ادامه
-                </button>
-                <div class="text-center">
-                    <a href="#" class="text-sm text-primary-600 hover:text-primary-700">فراموشی رمز عبور</a>
+
+                <!-- Empty State -->
+                <div id="historyEmpty" class="hidden text-center py-12">
+                    <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
+                        <i data-feather="inbox" class="w-8 h-8 text-slate-400"></i>
+                    </div>
+                    <p class="text-slate-500 dark:text-slate-400">تاریخچه‌ای یافت نشد</p>
                 </div>
-            </form>
+            </div>
         </div>
-    </div>
 
-    <script>
-        // Initialize Feather Icons
-        feather.replace();
-
-        // Theme Toggle
-        const themeToggle = document.getElementById('themeToggle');
-        themeToggle.addEventListener('click', () => {
-            document.body.classList.toggle('dark');
-            const icon = themeToggle.querySelector('i');
-            if (document.body.classList.contains('dark')) {
-                document.body.classList.add('bg-gray-900', 'text-white');
-                icon.setAttribute('data-feather', 'sun');
-            } else {
-                document.body.classList.remove('bg-gray-900', 'text-white');
-                icon.setAttribute('data-feather', 'moon');
-            }
-            feather.replace();
-        });
-
-        // Auth Modal
-        const authButton = document.getElementById('authButton');
-        const authModal = document.getElementById('authModal');
-        const closeAuthModal = document.getElementById('closeAuthModal');
-
-        authButton.addEventListener('click', () => {
-            authModal.classList.remove('hidden');
-        });
-
-        closeAuthModal.addEventListener('click', () => {
-            authModal.classList.add('hidden');
-        });
-
-        // Chat Functionality
-        const messageInput = document.getElementById('messageInput');
-        const sendMessage = document.getElementById('sendMessage');
-        const chatMessages = document.getElementById('chatMessages');
-        const charCount = document.getElementById('charCount');
-
-        messageInput.addEventListener('input', () => {
-            charCount.textContent = `${messageInput.value.length}/4000`;
-        });
-
-        sendMessage.addEventListener('click', sendChatMessage);
-
-        messageInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                sendChatMessage();
-            }
-        });
+        <!-- Personas Page -->
+        <div id="page-personas" class="page">
+            <div class="max-w-4xl mx-auto px-4 py-6">
+                <div class="text-center mb-8">
+                    <h1 class="text-2xl font-bold mb-2">شخصیت‌های هوش مصنوعی</h1>
+                    <p class="text-slate-500 dark:text-slate-400 text-sm">یک شخصیت متناسب با نیاز خود انتخاب کنید</p>
+                </div>
 
-        function sendChatMessage() {
-            const message = messageInput.value.trim();
-            if (!message) return;
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <!-- Default -->
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border-2 border-primary-500 relative card-hover cursor-pointer" onclick="selectPersona('default')">
+                        <div class="absolute top-3 left-3">
+                            <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-xs font-medium">
+                                <i data-feather="check" class="w-3 h-3"></i>
+                                فعال
+                            </span>
+                        </div>
+                        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary-500 to-accent-600 flex items-center justify-center text-white text-xl mb-4">
+                            🧠
+                        </div>
+                        <h3 class="font-bold text-slate-900 dark:text-slate-100 mb-1">پارس‌گوی</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">دستیار همه‌کاره هوشمند برای پاسخ به انواع سوالات</p>
+                        <button class="w-full py-2 rounded-lg bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 text-sm font-medium">
+                            انتخاب شده
+                        </button>
+                    </div>
 
-            // Add user message
-            addMessage(message, 'user');
+                    <!-- Teacher -->
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 card-hover cursor-pointer" onclick="selectPersona('teacher')">
+                        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center text-white text-xl mb-4">
+                            👨‍🏫
+                        </div>
+                        <h3 class="font-bold text-slate-900 dark:text-slate-100 mb-1">معلم خصوصی</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">آموزش مفاهیم پیچیده با زبانی ساده و قابل فهم</p>
+                        <button class="w-full py-2 rounded-lg bg-slate-100 dark:bg-slate-700 hover:bg-primary-50 dark:hover:bg-primary-900/20 text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 text-sm font-medium transition-colors">
+                            انتخاب
+                        </button>
+                    </div>
 
-            // Clear input
-            messageInput.value = '';
-            charCount.textContent = '0/4000';
+                    <!-- Developer -->
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 card-hover cursor-pointer" onclick="selectPersona('developer')">
+                        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-xl mb-4">
+                            💻
+                        </div>
+                        <h3 class="font-bold text-slate-900 dark:text-slate-100 mb-1">برنامه‌نویس</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">کمک در کدنویسی، دیباگ و معماری نرم‌افزار</p>
+                        <button class="w-full py-2 rounded-lg bg-slate-100 dark:bg-slate-700 hover:bg-primary-50 dark:hover:bg-primary-900/20 text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 text-sm font-medium transition-colors">
+                            انتخاب
+                        </button>
+                    </div>
 
-            // Simulate AI response
-            setTimeout(() => {
-                addMessage('این یک پاسخ شبیه‌سازی شده از هوش مصنوعی است. در نسخه کامل، پاسخ واقعی از API دریافت می‌شود.', 'ai');
-            }, 1000);
-        }
+                    <!-- Writer -->
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 card-hover cursor-pointer" onclick="selectPersona('writer')">
+                        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center text-white text-xl mb-4">
+                            ✍️
+                        </div>
+                        <h3 class="font-bold text-slate-900 dark:text-slate-100 mb-1">نویسنده خلاق</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">نوشتن داستان، شعر و محتوای ادبی</p>
+                        <button class="w-full py-2 rounded-lg bg-slate-100 dark:bg-slate-700 hover:bg-primary-50 dark:hover:bg-primary-900/20 text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 text-sm font-medium transition-colors">
+                            انتخاب
+                        </button>
+                    </div>
 
-        function addMessage(text, sender) {
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
-            
-            const bubbleClass = sender === 'user' ? 'message-bubble-user' : 'message-bubble-ai';
-            
-            messageDiv.innerHTML = `
-                <div class="${bubbleClass} p-4 max-w-[80%]">
-                    <div class="flex items-center space-x-2 space-x-reverse mb-2">
-                    ${sender === 'ai' ? `
-                        <div class="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center text-white text-xs">
-                        AI
+                    <!-- Analyst -->
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 border border-slate-200 dark:border-slate-700 card-hover cursor-pointer" onclick="selectPersona('analyst')">
+                        <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center text-white text-xl mb-4">
+                            📊
+                        </div>
+                        <h3 class="font-bold text-slate-900 dark:text-slate-100 mb-1">تحلیلگر داده</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">تحلیل داده‌ها و ارائه بینش‌های کاربردی</p>
+                        <button class="w-full py-2 rounded-lg bg-slate-100 dark:bg-slate-700 hover:bg-primary-50 dark:hover:bg-primary-900/20 text-slate-600 dark:text-slate-300 hover:text-primary-600 dark:hover:text-primary-400 text-sm font-medium transition-colors">
+                            انتخاب
+                        </button>
+                    </div>
+
+                    <!-- Custom -->
+                    <div class="bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-700/50 rounded-2xl p-5 border-2 border-dashed border-slate-300 dark:border-slate-600 card-hover cursor-pointer" onclick="createCustomPersona()">
+                        <div class="w-12 h-12 rounded-xl bg-slate-200 dark:bg-slate-600 flex items-center justify-center text-slate-500 dark:text-slate-400 text-xl mb-4">
+                            <i data-feather="plus" class="w-6 h-6"></i>
+                        </div>
+                        <h3 class="font-bold text-slate-900 dark:text-slate-100 mb-1">شخصیت سفارشی</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">یک شخصیت با ویژگی‌های دلخواه بسازید</p>
+                        <button class="w-full py-2 rounded-lg bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-sm font-medium">
+                            ساختن
+                        </button>
                     </div>
-                    <span class="text-sm ${sender === 'user' ? 'text-blue-100' : 'text-gray-500'}">
-                        ${sender === 'user' ? 'شما' : 'پارس‌گوی'}
-                    </span>
                 </div>
-                <p class="${sender === 'user' ? 'text-white' : 'text-gray-800'}">${text}</p>
             </div>
-            `;
+        </div>
 
-            chatMessages.appendChild(messageDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
+        <!-- Profile Page -->
+        <div id="page-profile" class="page">
+            <div class="max-w-2xl mx-auto px-4 py-6">
+                <h1 class="text-2xl font-bold mb-6">پروفایل کاربری</h1>
+
+                <!-- Profile Card -->
+                <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 mb-6">
+                    <div class="flex items-center gap-4 mb-6">
+                        <div class="relative">
+                            <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-500 to-accent-600 flex items-center justify-center text-white text-2xl font-bold">
+                                ک
+                            </div>
+                            <button class="absolute -bottom-1 -right-1 w-8 h-8 bg-white dark:bg-slate-700 rounded-full border-2 border-slate-100 dark:border-slate-600 flex items-center justify-center text-slate-500 hover:text-primary-500 transition-colors shadow-sm">
+                                <i data-feather="camera" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        <div>
+                            <h2 class="font-bold text-lg">کاربر نمونه</h2>
+                            <p class="text-sm text-slate-500 dark:text-slate-400">عضو از ۱۴۰۲/۰۱/۱۵</p>
+                        </div>
+                    </div>
+
+                    <form onsubmit="saveProfile(event)" class="space-y-4">
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">نام</label>
+                                <input type="text" value="کاربر نمونه" class="w-full px-4 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">ایمیل</label>
+                                <input type="email" value="user@example.com" class="w-full px-4 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500">
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">بیوگرافی</label>
+                            <textarea rows="3" class="w-full px-4 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 resize-none">علاقه‌مند به تکنولوژی و هوش مصنوعی</textarea>
+                        </div>
+                        <div class="flex justify-end">
+                            <button type="submit" class="btn-primary text-white px-6 py-2.5 rounded-xl text-sm font-medium">
+                                ذخیره تغییرات
+                            </button>
+                        </div>
+                    </form>
+                </div>
 
-        // Voice Input
-        const voiceInput = document.getElementById('voiceInput');
-        voiceInput.addEventListener('click', () => {
-            // In a real implementation, this would use the Web Speech API
-            alert('قابلیت گفتار به متن در مرورگر شما فعال شد. شروع به صحبت کنید...');
-        });
-
-        // Clear Chat
-        document.getElementById('clearChat').addEventListener('click', () => {
-            if (confirm('آیا از پاک کردن تمام پیام‌ها مطمئن هستید؟')) {
-                chatMessages.innerHTML = `
-                    <div class="flex justify-start">
-                        <div class="message-bubble-ai p-4 max-w-[80%]">
-                            <div class="flex items-center space-x-2 space-x-reverse mb-2">
-                                <div class="w-6 h-6 bg-primary-500 rounded-full flex items-center justify-center text-white text-xs">
-                                    AI
+                <!-- Stats -->
+                <div class="grid grid-cols-3 gap-4 mb-6">
+                    <div class="bg-white dark:bg-slate-800 rounded-xl p-4 text-center border border-slate-200 dark:border-slate-700">
+                        <div class="text-2xl font-bold gradient-text">۴۷</div>
+                        <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">مکالمه</div>
+                    </div>
+                    <div class="bg-white dark:bg-slate-800 rounded-xl p-4 text-center border border-slate-200 dark:border-slate-700">
+                        <div class="text-2xl font-bold gradient-text">۱.۲K</div>
+                        <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">پیام</div>
+                    </div>
+                    <div class="bg-white dark:bg-slate-800 rounded-xl p-4 text-center border border-slate-200 dark:border-slate-700">
+                        <div class="text-2xl font-bold gradient-text">۱۵</div>
+                        <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">روز فعال</div>
+                    </div>
+                </div>
+
+                <!-- Settings -->
+                <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
+                    <div class="p-4 border-b border-slate-200 dark:border-slate-700">
+                        <h3 class="font-medium">تنظیمات</h3>
+                    </div>
+                    <div class="divide-y divide-slate-200 dark:divide-slate-700">
+                        <label class="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-xl bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center text-primary-600 dark:text-primary-400">
+                                    <i data-feather="bell" class="w-5 h-5"></i>
+                                </div>
+                                <div>
+                                    <div class="font-medium text-sm">اعلان‌ها</div>
+                                    <div class="text-xs text-slate-500 dark:text-slate-400">دریافت اعلان در مرورگر</div>
+                                </div>
+                            </div>
+                            <input type="checkbox" checked class="w-5 h-5 rounded-lg border-slate-300 text-primary-500 focus:ring-primary-500">
+                        </label>
+                        <label class="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-xl bg-accent-100 dark:bg-accent-900/30 flex items-center justify-center text-accent-600 dark:text-accent-400">
+                                    <i data-feather="volume-2" class="w-5 h-5"></i>
+                                </div>
+                                <div>
+                                    <div class="font-medium text-sm">خواندن پاسخ</div>
+                                    <div class="text-xs text-slate-500 dark:text-slate-400">پخش صوتی پاسخ‌ها</div>
+                                </div>
+                            </div>
+                            <input type="checkbox" class="w-5 h-5 rounded-lg border-slate-300 text-primary-500 focus:ring-primary-500">
+                        </label>
+                        <button onclick="exportData()" class="w-full flex items-center justify-between p-4 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors text-right">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
+                                    <i data-feather="download" class="w-5 h-5"></i>
                                 </div>
-                                <span class="text-sm text-gray-500">پارس‌گوی</span>
+                                <div>
+                                    <div class="font-medium text-sm">خروجی داده‌ها</div>
+                                    <div class="text-xs text-slate-500 dark:text-slate-400">دانلود تمام مکالمات</div>
+                                </div>
+                            </div>
+                            <i data-feather="chevron-left" class="w-5 h-5 text-slate-400"></i>
+                        </button>
+                        <button onclick="deleteAccount()" class="w-full flex items-center justify-between p-4 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-right text-red-600">
+                            <div class="flex items-center gap-3">
+                                <div class="w-10 h-10 rounded-xl bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
+                                    <i data-feather="trash-2" class="w-5 h-5"></i>
+                                </div>
+                                <div>
+                                    <div class="font-medium text-sm">حذف حساب</div>
+                                    <div class="text-xs text-red-400">غیرقابل بازگشت</div>
+                                </div>
+                            </div>
+                            <i data-feather="chevron-left" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Login Page -->
+        <div id="page-login" class="page">
+            <div class="min-h-[calc(100vh-3.5rem)] flex items-center justify-center p-4">
+                <div class="w-full max-w-sm">
+                    <div class="text-center mb-8">
+                        <div class="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-primary-500 to-accent-600 flex items-center justify-center text-white text-2xl font-bold mb-4">
+                            پ
+                        </div>
+                        <h1 class="text-2xl font-bold">خوش آمدید</h1>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 mt-2">برای ادامه وارد شوید یا حساب بسازید</p>
+                    </div>
+
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700">
+                        <form onsubmit="handleLogin(event)" class="space-y-4">
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">ایمیل</label>
+                                <input type="email" required class="w-full px-4 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500" placeholder="your@email.com">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">رمز عبور</label>
+                                <input type="password" required class="w-full px-4 py-2.5 rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500" placeholder="••••••••">
+                            </div>
+                            <div class="flex items-center justify-between text-sm">
+                                <label class="flex items-center gap-2 cursor-pointer">
+                                    <input type="checkbox" class="rounded border-slate-300 text-primary-500 focus:ring-primary-500">
+                                    <span class="text-slate-600 dark:text-slate-400">مرا به خاطر بسپار</span>
+                                </label>
+                                <a href="#" class="text-primary-600 hover:text-primary-700">فراموشی رمز؟</a>
+                            </div>
+                            <button type="submit" class="w-full btn-primary text-white py-2.5 rounded-xl font-medium">
+                                ورود به حساب
+                            </button>
+                        </form>
+
+                        <div class="relative my-6">
+                            <div class="absolute inset-0 flex items-center">
+                                <div class="w-full border-t border-slate-200 dark:border-slate-700"></div>
+                            </div>
+                            <div class="relative flex justify-center text-sm">
+                                <span class="px-2 bg-white dark:bg-slate-800 text-slate-500">یا</span>
                             </div>
-                            <p class="text-gray-800">سلام! من پارس‌گوی هستم، دستیار هوشمند فارسی شما. چگونه می‌توانم کمکتان کنم؟</p>
                         </div>
+
+                        <button class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
+                            <svg class="w-5 h-5" viewBox="0 0 24 24">
+                                <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                                <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                                <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                                <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                            </svg>
+                            <span class="text-sm font-medium">ورود با گوگل</span>
+                        </button>
+
+                        <p class="text-center text-sm text-slate-500 dark:text-slate-400 mt-6">
+                            حساب ندارید؟
+                            <a href="#" onclick="showPage('register')" class="text-primary-600 hover:text-primary-700 font-medium">ثبت‌نام کنید</a>
+                        </p>
                     </div>
-                `;
-            }
-        });
-    </script>
-</body>
-</html>
+                </div>
+            </div>
+        </div>
+
+        <!-- Register Page -->
+        <div id="page-register" class="page">
+            <div class="min-h-[calc(100vh-3.5rem)] flex items-center justify-center p-4">
+                <div class="w-full max-w-sm">
+                    <div class="text-center mb-8">
+                        <div class="w-16 h-16 mx-auto rounded-2xl bg-gradient-to-br from-primary-500 to-accent-600 flex items-center justify-center text-white text-2xl font-bold mb-4">
+                            پ
+                        </div>
+                        <h1 class="text-2xl font-bold">ایجاد حساب</h1>
+                        <p class="text-sm text-slate-500 dark:text-slate-400 mt-2