Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>چت روم فارسی | Persian Chat</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- FontAwesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts: Vazirmatn for Persian Typography --> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Vazirmatn', 'sans-serif'], | |
| }, | |
| colors: { | |
| primary: '#6366f1', // Indigo 500 | |
| secondary: '#ec4899', // Pink 500 | |
| dark: '#0f172a', // Slate 900 | |
| card: '#1e293b', // Slate 800 | |
| }, | |
| animation: { | |
| 'fade-in': 'fadeIn 0.5s ease-out', | |
| 'slide-up': 'slideUp 0.5s ease-out', | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| overflow-x: hidden; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #475569; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #6366f1; | |
| } | |
| .glass-panel { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(to right, #818cf8, #c084fc, #f472b6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hidden-page { | |
| display: none; | |
| } | |
| .active-page { | |
| display: flex; | |
| animation: fadeIn 0.4s ease-in-out; | |
| } | |
| /* Chat Bubble Styles */ | |
| .message-bubble { | |
| max-width: 80%; | |
| padding: 10px 15px; | |
| border-radius: 18px; | |
| margin-bottom: 10px; | |
| position: relative; | |
| word-wrap: break-word; | |
| } | |
| .message-sent { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| border-bottom-right-radius: 4px; | |
| align-self: flex-end; | |
| } | |
| .message-received { | |
| background: #334155; | |
| border-bottom-left-radius: 4px; | |
| align-self: flex-start; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-screen flex flex-col font-sans antialiased selection:bg-primary selection:text-white"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full z-50 glass-panel border-b border-white/10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center gap-2 cursor-pointer" onclick="router.navigate('home')"> | |
| <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold"> | |
| <i class="fa-solid fa-comments"></i> | |
| </div> | |
| <span class="font-bold text-xl tracking-tight">چت<span class="text-primary">روم</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4 space-x-reverse"> | |
| <span id="nav-user-info" class="text-gray-300 text-sm hidden items-center gap-2"> | |
| <!-- Populated by JS --> | |
| </span> | |
| <button id="btn-logout" onclick="auth.logout()" class="hidden bg-red-500/10 hover:bg-red-500/20 text-red-400 px-3 py-1 rounded-md text-sm font-medium transition-colors"> | |
| خروج | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content Area --> | |
| <main class="flex-grow pt-16 relative"> | |
| <!-- BACKGROUND EFFECTS --> | |
| <div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none"> | |
| <div class="absolute top-[-10%] right-[-5%] w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div> | |
| <div class="absolute bottom-[-10%] left-[-5%] w-96 h-96 bg-secondary/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div> | |
| </div> | |
| <!-- 1. LANDING PAGE --> | |
| <section id="page-home" class="active-page flex-col items-center justify-center min-h-[80vh] text-center px-4"> | |
| <div class="max-w-3xl mx-auto animate-slide-up"> | |
| <div class="inline-block mb-4 px-4 py-1 rounded-full bg-white/5 border border-white/10 text-sm text-primary font-medium"> | |
| نسخه ۱.۰ • بدون نیاز به سرور | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight"> | |
| ارتباط آسان و <br> | |
| <span class="gradient-text">امن</span> با دوستان | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed"> | |
| یک پلتفرم چت ساده، سریع و کاملاً محلی. بدون پیچیدگیهای سرور، فقط کافیست ثبت نام کنید و لینک روم خود را به اشتراک بگذارید. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <button onclick="router.navigate('auth')" class="px-8 py-4 bg-primary hover:bg-indigo-600 text-white rounded-xl font-bold text-lg transition-all transform hover:scale-105 shadow-lg shadow-indigo-500/30 flex items-center justify-center gap-2"> | |
| <span>شروع کنید</span> | |
| <i class="fa-solid fa-arrow-left"></i> | |
| </button> | |
| <button onclick="alert('این یک پروژه نمونه است. دادهها در مرورگر شما ذخیره میشوند.')" class="px-8 py-4 bg-white/5 hover:bg-white/10 text-white border border-white/10 rounded-xl font-bold text-lg transition-all"> | |
| اطلاعات بیشتر | |
| </button> | |
| </div> | |
| <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 text-right"> | |
| <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-primary/50 transition-colors"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center mb-4 text-xl"> | |
| <i class="fa-solid fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">سریع و سبک</h3> | |
| <p class="text-gray-400 text-sm">بدون نیاز به دیتابیس سنگین، همه چیز در لحظه لود میشود.</p> | |
| </div> | |
| <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-secondary/50 transition-colors"> | |
| <div class="w-12 h-12 rounded-lg bg-pink-500/20 text-pink-400 flex items-center justify-center mb-4 text-xl"> | |
| <i class="fa-solid fa-link"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">اشتراکگذاری آسان</h3> | |
| <p class="text-gray-400 text-sm">با یک کلیک لینک روم خود را کپی کرده و برای دوستان بفرستید.</p> | |
| </div> | |
| <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-green-500/50 transition-colors"> | |
| <div class="w-12 h-12 rounded-lg bg-green-500/20 text-green-400 flex items-center justify-center mb-4 text-xl"> | |
| <i class="fa-solid fa-shield-halved"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">حریم خصوصی</h3> | |
| <p class="text-gray-400 text-sm">دادهها فقط روی دستگاه شما ذخیره میشوند.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 2. AUTHENTICATION PAGE --> | |
| <section id="page-auth" class="hidden-page flex-col items-center justify-center min-h-[80vh] px-4"> | |
| <div class="w-full max-w-md p-8 rounded-2xl glass-panel shadow-2xl animate-slide-up"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold mb-2">خوش آمدید</h2> | |
| <p class="text-gray-400">برای ادامه شماره خود را وارد کنید</p> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="flex bg-dark rounded-lg p-1 mb-6"> | |
| <button onclick="auth.toggleMode('login')" id="tab-login" class="flex-1 py-2 rounded-md text-sm font-medium transition-all bg-primary text-white shadow">ورود</button> | |
| <button onclick="auth.toggleMode('register')" id="tab-register" class="flex-1 py-2 rounded-md text-sm font-medium transition-all text-gray-400 hover:text-white">ثبت نام</button> | |
| </div> | |
| <form id="auth-form" onsubmit="auth.handleSubmit(event)" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">شماره موبایل</label> | |
| <div class="relative"> | |
| <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-mobile-screen"></i></span> | |
| <input type="tel" id="auth-phone" required placeholder="09xxxxxxxxx" class="w-full bg-dark border border-white/10 rounded-lg py-2.5 pr-10 pl-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" dir="ltr"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">رمز عبور</label> | |
| <div class="relative"> | |
| <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-lock"></i></span> | |
| <input type="password" id="auth-password" required placeholder="••••••••" class="w-full bg-dark border border-white/10 rounded-lg py-2.5 pr-10 pl-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" dir="ltr"> | |
| </div> | |
| </div> | |
| <div id="register-fields" class="hidden space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-1">نام نمایشی</label> | |
| <div class="relative"> | |
| <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-user"></i></span> | |
| <input type="text" id="auth-name" placeholder="مثلاً: علی" class="w-full bg-dark border border-white/10 rounded-lg py-2.5 pr-10 pl-4 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-white font-bold py-3 rounded-lg shadow-lg shadow-indigo-500/25 transition-all transform active:scale-95 mt-2"> | |
| <span id="auth-btn-text">ورود به حساب</span> | |
| </button> | |
| </form> | |
| <div class="mt-6 text-center"> | |
| <button onclick="router.navigate('home')" class="text-sm text-gray-500 hover:text-white transition-colors"> | |
| <i class="fa-solid fa-arrow-right ml-1"></i> بازگشت به صفحه اصلی | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3. DASHBOARD (ROOMS) --> | |
| <section id="page-dashboard" class="hidden-page flex-col items-center pt-10 px-4 pb-20"> | |
| <div class="w-full max-w-5xl"> | |
| <div class="flex justify-between items-end mb-8 border-b border-white/10 pb-4"> | |
| <div> | |
| <h2 class="text-3xl font-bold">اتاقهای من</h2> | |
| <p class="text-gray-400 mt-1">شما میتوانید حداکثر <span class="text-primary font-bold">3</span> اتاق داشته باشید.</p> | |
| </div> | |
| <button onclick="router.navigate('settings')" class="text-sm bg-white/5 hover:bg-white/10 px-4 py-2 rounded-lg transition-colors border border-white/10"> | |
| <i class="fa-solid fa-gear ml-2"></i> تنظیمات پروفایل | |
| </button> | |
| </div> | |
| <!-- Rooms Grid --> | |
| <div id="rooms-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Rooms injected via JS --> | |
| </div> | |
| <!-- Empty State (If no rooms) --> | |
| <div id="empty-state" class="hidden flex-col items-center justify-center py-20 text-center border-2 border-dashed border-white/10 rounded-2xl bg-white/5"> | |
| <div class="w-20 h-20 bg-white/5 rounded-full flex items-center justify-center text-3xl text-gray-500 mb-4"> | |
| <i class="fa-regular fa-folder-open"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-300">هنوز اتاقی نساختهاید</h3> | |
| <p class="text-gray-500 mt-2 mb-6">برای شروع گفتگو، یک اتاق جدید بسازید.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 4. CHAT ROOM --> | |
| <section id="page-chat" class="hidden-page fixed inset-0 z-40 bg-dark pt-16 flex flex-col"> | |
| <!-- Chat Header --> | |
| <div class="h-16 bg-card border-b border-white/10 flex items-center justify-between px-4 shadow-md z-10"> | |
| <div class="flex items-center gap-3"> | |
| <button onclick="router.navigate('dashboard')" class="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center transition-colors"> | |
| <i class="fa-solid fa-arrow-right"></i> | |
| </button> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-tr from-primary to-secondary flex items-center justify-center text-white font-bold text-lg"> | |
| <i class="fa-solid fa-hashtag"></i> | |
| </div> | |
| <div> | |
| <h3 id="chat-room-name" class="font-bold text-lg leading-tight">Room Name</h3> | |
| <span class="text-xs text-green-400 flex items-center gap-1"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> آنلاین | |
| </span> | |
| </div> | |
| </div> | |
| <button onclick="chat.copyLink()" class="text-sm bg-primary/20 text-primary hover:bg-primary hover:text-white px-3 py-1.5 rounded-lg transition-all border border-primary/30"> | |
| <i class="fa-regular fa-copy ml-1"></i> کپی لینک | |
| </button> | |
| </div> | |
| <!-- Chat Area --> | |
| <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"> | |
| <!-- Messages injected via JS --> | |
| <div class="text-center my-4"> | |
| <span class="bg-black/30 text-gray-400 text-xs px-3 py-1 rounded-full">امروز</span> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="p-4 bg-card border-t border-white/10"> | |
| <form onsubmit="chat.sendMessage(event)" class="flex gap-2"> | |
| <input type="text" id="chat-input" placeholder="پیام خود را بنویسید..." class="flex-1 bg-dark border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all" autocomplete="off"> | |
| <button type="submit" class="w-12 h-12 bg-primary hover:bg-indigo-600 text-white rounded-xl flex items-center justify-center transition-all shadow-lg shadow-indigo-500/20"> | |
| <i class="fa-solid fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- 5. SETTINGS PAGE --> | |
| <section id="page-settings" class="hidden-page flex-col items-center justify-center min-h-[80vh] px-4"> | |
| <div class="w-full max-w-2xl glass-panel rounded-2xl p-8 animate-slide-up"> | |
| <div class="flex items-center justify-between mb-8 border-b border-white/10 pb-4"> | |
| <h2 class="text-2xl font-bold">تنظیمات پروفایل</h2> | |
| <button onclick="router.navigate('dashboard')" class="text-gray-400 hover:text-white"> | |
| <i class="fa-solid fa-xmark text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Avatar Selection --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-3">انتخاب آواتار</label> | |
| <div class="grid grid-cols-4 gap-3" id="avatar-grid"> | |
| <!-- Avatars injected via JS --> | |
| </div> | |
| </div> | |
| <!-- Info Form --> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-2">نام نمایشی</label> | |
| <input type="text" id="settings-name" class="w-full bg-dark border border-white/10 rounded-lg py-3 px-4 text-white focus:border-primary focus:outline-none transition-colors"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-400 mb-2">شماره موبایل</label> | |
| <input type="text" disabled class="w-full bg-black/20 border border-white/5 rounded-lg py-3 px-4 text-gray-500 cursor-not-allowed"> | |
| <p class="text-xs text-gray-500 mt-1">شماره موبایل قابل تغییر نیست.</p> | |
| </div> | |
| <button onclick="settings.save()" class="w-full bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-lg transition-all shadow-lg shadow-indigo-500/20"> | |
| ذخیره تغییرات | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="fixed bottom-5 left-1/2 transform -translate-x-1/2 bg-card border border-white/10 text-white px-6 py-3 rounded-full shadow-2xl translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-2"> | |
| <i class="fa-solid fa-circle-check text-green-400"></i> | |
| <span id="toast-msg">عملیات موفقیت آمیز بود</span> | |
| </div> | |
| <!-- JAVASCRIPT LOGIC --> | |
| <script> | |
| // --- DATA & STATE MANAGEMENT --- | |
| const AVATARS = [ | |
| { id: 'av1', color: 'from-blue-400 to-blue-600', icon: 'fa-user-astronaut' }, | |
| { id: 'av2', color: 'from-purple-400 to-purple-600', icon: 'fa-robot' }, | |
| { id: 'av3', color: 'from-pink-400 to-pink-600', icon: 'fa-ghost' }, | |
| { id: 'av4', color: 'from-green-400 to-green-600', icon: 'fa-gamepad' }, | |
| { id: 'av5', color: 'from-yellow-400 to-orange-500', icon: 'fa-cat' }, | |
| { id: 'av6', color: 'from-red-400 to-red-600', icon: 'fa-dragon' }, | |
| { id: 'av7', color: 'from-indigo-400 to-indigo-600', icon: 'fa-meteor' }, | |
| { id: 'av8', color: 'from-teal-400 to-teal-600', icon: 'fa-frog' }, | |
| ]; | |
| // Mock Database (In-Memory + LocalStorage persistence) | |
| const db = { | |
| users: JSON.parse(localStorage.getItem('chat_users')) || [], | |
| rooms: JSON.parse(localStorage.getItem('chat_rooms')) || [], | |
| messages: JSON.parse(localStorage.getItem('chat_messages')) || {}, // Key: roomId, Value: Array of msgs | |
| saveUsers() { localStorage.setItem('chat_users', JSON.stringify(this.users)); }, | |
| saveRooms() { localStorage.setItem('chat_rooms', JSON.stringify(this.rooms)); }, | |
| saveMessages() { localStorage.setItem('chat_messages', JSON.stringify(this.messages)); } | |
| }; | |
| let currentUser = JSON.parse(localStorage.getItem('chat_current_user')) || null; | |
| let currentRoomId = null; | |
| // --- UTILS --- | |
| const utils = { | |
| generateId: () => Math.random().toString(36).substr(2, 9), | |
| showToast: (msg) => { | |
| const toast = document.getElementById('toast'); | |
| document.getElementById('toast-msg').innerText = msg; | |
| toast.classList.remove('translate-y-20', 'opacity-0'); | |
| setTimeout(() => { | |
| toast.classList.add('translate-y-20', 'opacity-0'); | |
| }, 3000); | |
| }, | |
| getAvatarHtml: (avatarId, size = 'w-10 h-10') => { | |
| const av = AVATARS.find(a => a.id === avatarId) || AVATARS[0]; | |
| return `<div class="${size} rounded-full bg-gradient-to-br ${av.color} flex items-center justify-center text-white shadow-lg border-2 border-white/10"> | |
| <i class="fa-solid ${av.icon}"></i> | |
| </div>`; | |
| } | |
| }; | |
| // --- ROUTER --- | |
| const router = { | |
| navigate: (pageId) => { | |
| // Hide all pages | |
| document.querySelectorAll('main > section').forEach(el => { | |
| el.classList.remove('active-page'); | |
| el.classList.add('hidden-page'); | |
| }); | |
| // Show target page | |
| const target = document.getElementById(`page-${pageId}`); | |
| if(target) { | |
| target.classList.remove('hidden-page'); | |
| target.classList.add('active-page'); | |
| } | |
| // Auth Guard | |
| if (pageId !== 'home' && pageId !== 'auth' && !currentUser) { | |
| router.navigate('auth'); | |
| return; | |
| } | |
| // Page specific init | |
| if (pageId === 'dashboard') dashboard.init(); | |
| if (pageId === 'settings') settings.init(); | |
| if (pageId === 'chat') chat.init(); | |
| } | |
| }; | |
| // --- AUTH MODULE --- | |
| const auth = { | |
| mode: 'login', // 'login' or 'register' | |
| toggleMode: (mode) => { | |
| auth.mode = mode; | |
| const regFields = document.getElementById('register-fields'); | |
| const btnText = document.getElementById('auth-btn-text'); | |
| const tabLogin = document.getElementById('tab-login'); | |
| const tabReg = document.getElementById('tab-register'); | |
| if (mode === 'register') { | |
| regFields.classList.remove('hidden'); | |
| btnText.innerText = 'ایجاد حساب کاربری'; | |
| tabReg.classList.add('bg-primary', 'text-white', 'shadow'); | |
| tabReg.classList.remove('text-gray-400'); | |
| tabLogin.classList.remove('bg-primary', 'text-white', 'shadow'); | |
| tabLogin.classList.add('text-gray-400'); | |
| } else { | |
| regFields.classList.add('hidden'); | |
| btnText.innerText = 'ورود به حساب'; | |
| tabLogin.classList.add('bg-primary', 'text-white', 'shadow'); | |
| tabLogin.classList.remove('text-gray-400'); | |
| tabReg.classList.remove('bg-primary', 'text-white', 'shadow'); | |
| tabReg.classList.add('text-gray-400'); | |
| } | |
| }, | |
| handleSubmit: (e) => { | |
| e.preventDefault(); | |
| const phone = document.getElementById('auth-phone').value; | |
| const password = document.getElementById('auth-password').value; | |
| if (auth.mode === 'register') { | |
| const name = document.getElementById('auth-name').value; | |
| if (!name) return utils.showToast('لطفاً نام خود را وارد کنید'); | |
| // Check existing | |
| if (db.users.find(u => u.phone === phone)) { | |
| return utils.showToast('این شماره قبلاً ثبت شده است'); | |
| } | |
| const newUser = { | |
| id: utils.generateId(), | |
| phone, | |
| password, // In real app, hash this! | |
| name, | |
| avatar: AVATARS[0].id | |
| }; | |
| db.users.push(newUser); | |
| db.saveUsers(); | |
| currentUser = newUser; | |
| utils.showToast('ثبت نام موفقیت آمیز بود'); | |
| } else { | |
| // Login | |
| const user = db.users.find(u => u.phone === phone && u.password === password); | |
| if (!user) { | |
| return utils.showToast('شماره یا رمز عبور اشتباه است'); | |
| } | |
| currentUser = user; | |
| utils.showToast('خوش آمدید ' + user.name); | |
| } | |
| localStorage.setItem('chat_current_user', JSON.stringify(currentUser)); | |
| auth.updateUI(); | |
| router.navigate('dashboard'); | |
| }, | |
| logout: () => { | |
| currentUser = null; | |
| localStorage.removeItem('chat_current_user'); | |
| auth.updateUI(); | |
| router.navigate('home'); | |
| }, | |
| updateUI: () => { | |
| const navInfo = document.getElementById('nav-user-info'); | |
| const btnLogout = document.getElementById('btn-logout'); | |
| if (currentUser) { | |
| navInfo.innerHTML = `${utils.getAvatarHtml(currentUser.avatar, 'w-6 h-6 text-xs')} <span>${currentUser.name}</span>`; | |
| navInfo.classList.remove('hidden'); | |
| navInfo.classList.add('flex'); | |
| btnLogout.classList.remove('hidden'); | |
| } else { | |
| navInfo.classList.add('hidden'); | |
| navInfo.classList.remove('flex'); | |
| btnLogout.classList.add('hidden'); | |
| } | |
| } | |
| }; | |
| // --- DASHBOARD MODULE --- | |
| const dashboard = { | |
| init: () => { | |
| const container = document.getElementById('rooms-container'); | |
| const emptyState = document.getElementById('empty-state'); | |
| container.innerHTML = ''; | |
| const myRooms = db.rooms.filter(r => r.ownerId === currentUser.id); | |
| if (myRooms.length === 0) { | |
| emptyState.classList.remove('hidden'); | |
| emptyState.classList.add('flex'); | |
| } else { | |
| emptyState.classList.add('hidden'); | |
| emptyState.classList.remove('flex'); | |
| } | |
| // Render existing rooms | |
| myRooms.forEach(room => { | |
| const roomCard = document.createElement('div'); | |
| roomCard.className = 'bg-card border border-white/10 rounded-xl p-5 hover:border-primary/50 transition-all group relative overflow-hidden'; | |
| roomCard.innerHTML = ` | |
| <div class="absolute top-0 left-0 w-1 h-full bg-primary"></div> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-2xl text-primary"> | |
| <i class="fa-solid fa-comments"></i> | |
| </div> | |
| <button onclick="dashboard.deleteRoom('${room.id}')" class="text-gray-500 hover:text-red-400 transition-colors"> | |
| <i class="fa-solid fa-trash"></i> | |
| </button> | |
| </div> | |
| <h3 class="text-xl font-bold mb-1">${room.name}</h3> | |
| <p class="text-gray-400 text-sm mb-4">ایجاد شده در: ${new Date(room.createdAt).toLocaleDateString('fa-IR')}</p> | |
| <button onclick="router.navigate('chat'); chat.loadRoom('${room.id}')" class="w-full bg-white/5 hover:bg-primary hover:text-white text-primary border border-primary/30 py-2 rounded-lg transition-all font-medium"> | |
| ورود به اتاق | |
| </button> | |
| `; | |
| container.appendChild(roomCard); | |
| }); | |
| // Render "Create New" card if < 3 | |
| if (myRooms.length < 3) { | |
| const createCard = document.createElement('div'); | |
| createCard.className = 'border-2 border-dashed border-white/20 rounded-xl p-5 flex flex-col items-center justify-center text-gray-400 hover:border-primary hover:text-primary hover:bg-primary/5 transition-all cursor-pointer min-h-[200px]'; | |
| createCard.onclick = dashboard.createRoom; | |
| createCard.innerHTML = ` | |
| <div class="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center text-3xl mb-3 group-hover:scale-110 transition-transform"> | |
| <i class="fa-solid fa-plus"></i> | |
| </div> | |
| <span class="font-bold">ساخت اتاق جدید</span> | |
| <span class="text-xs mt-1 opacity-70">(${myRooms.length} از 3)</span> | |
| `; | |
| container.appendChild(createCard); | |
| } | |
| }, | |
| createRoom: () => { | |
| const name = prompt("نام اتاق جدید را وارد کنید:", "اتاق گفتگوی من"); | |
| if (name) { | |
| const newRoom = { | |
| id: utils.generateId(), | |
| ownerId: currentUser.id, | |
| name: name, | |
| createdAt: Date.now() | |
| }; | |
| db.rooms.push(newRoom); | |
| db.saveRooms(); | |
| db.messages[newRoom.id] = []; // Init message array | |
| db.saveMessages(); | |
| dashboard.init(); | |
| utils.showToast('اتاق جدید ساخته شد'); | |
| } | |
| }, | |
| deleteRoom: (id) => { | |
| if(confirm('آیا از حذف این اتاق اطمینان دارید؟')) { | |
| db.rooms = db.rooms.filter(r => r.id !== id); | |
| delete db.messages[id]; | |
| db.saveRooms(); | |
| db.saveMessages(); | |
| dashboard.init(); | |
| utils.showToast('اتاق حذف شد'); | |
| } | |
| } | |
| }; | |
| // --- CHAT MODULE --- | |
| const chat = { | |
| loadRoom: (roomId) => { | |
| currentRoomId = roomId; | |
| const room = db.rooms.find(r => r.id === roomId); | |
| document.getElementById('chat-room-name').innerText = room ? room.name : 'Unknown Room'; | |
| chat.renderMessages(); | |
| }, | |
| init: () => { | |
| // Scroll to bottom | |
| const container = document.getElementById('chat-messages'); | |
| container.scrollTop = container.scrollHeight; | |
| }, | |
| renderMessages: () => { | |
| const container = document.getElementById('chat-messages'); | |
| // Keep the date separator | |
| container.innerHTML = `<div class="text-center my-4"><span class="bg-black/30 text-gray-400 text-xs px-3 py-1 rounded-full">امروز</span></div>`; | |
| const msgs = db.messages[currentRoomId] || []; | |
| msgs.forEach(msg => { | |
| const isMe = msg.userId === currentUser.id; | |
| const div = document.createElement('div'); | |
| div.className = `flex w-full ${isMe ? 'justify-end' : 'justify-start'}`; | |
| // Find user details for avatar | |
| const user = isMe ? currentUser : db.users.find(u => u.id === msg.userId); | |
| const avatarHtml = user ? utils.getAvatarHtml(user.avatar, 'w-8 h-8 text-xs') : ''; | |
| div.innerHTML = ` | |
| <div class="flex items-end gap-2 max-w-[85%] ${isMe ? 'flex-row-reverse' : 'flex-row'}"> | |
| ${!isMe ? avatarHtml : ''} | |
| <div class="message-bubble ${isMe ? 'message-sent' : 'message-received'}"> | |
| ${!isMe ? `<div class="text-xs text-gray-300 mb-1 font-bold">${user ? user.name : 'Unknown'}</div>` : ''} | |
| <div class="text-sm">${msg.text}</div> | |
| <div class="text-[10px] opacity-70 mt-1 text-left" dir="ltr">${msg.time}</div> | |
| </div> | |
| ${isMe ? avatarHtml : ''} | |
| </div> | |
| `; | |
| container.appendChild(div); | |
| }); | |
| container.scrollTop = container.scrollHeight; | |
| }, | |
| sendMessage: (e) => { | |
| e.preventDefault(); | |
| const input = document.getElementById('chat-input'); | |
| const text = input.value.trim(); | |
| if (!text) return; | |
| if (!db.messages[currentRoomId]) db.messages[currentRoomId] = []; | |
| db.messages[currentRoomId].push({ | |
| userId: currentUser.id, | |
| text: text, | |
| time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'}) | |
| }); | |
| db.saveMessages(); | |
| input.value = ''; | |
| chat.renderMessages(); | |
| // Simulate reply after 2 seconds | |
| setTimeout(() => { | |
| const replies = ["جالب بود!", "متوجه شدم.", "حتماً بررسی میکنم.", "😂😂", "ممنون از اطلاع رسانی"]; | |
| const randomReply = replies[Math.floor(Math.random() * replies.length)]; | |
| // Simulate a fake user | |
| const fakeUsers = db.users.filter(u => u.id !== currentUser.id); | |
| const randomUser = fakeUsers.length > 0 ? fakeUsers[0] : {id: 'bot', name: 'پشتیبان', avatar: 'av2'}; | |
| db.messages[currentRoomId].push({ | |
| userId: randomUser.id, | |
| text: randomReply, | |
| time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'}) | |
| }); | |
| db.saveMessages(); | |
| chat.renderMessages(); | |
| }, 2000); | |
| }, | |
| copyLink: () => { | |
| const dummyLink = `https://chatapp.ir/room/${currentRoomId}`; | |
| navigator.clipboard.writeText(dummyLink).then(() => { | |
| utils.showToast('لینک اتاق کپی شد'); | |
| }); | |
| } | |
| }; | |
| // --- SETTINGS MODULE --- | |
| const settings = { | |
| selectedAvatar: currentUser ? currentUser.avatar : AVATARS[0].id, | |
| init: () => { | |
| document.getElementById('settings-name').value = currentUser.name; | |
| settings.renderAvatars(); | |
| }, | |
| renderAvatars: () => { | |
| const grid = document.getElementById('avatar-grid'); | |
| grid.innerHTML = ''; | |
| AVATARS.forEach(av => { | |
| const div = document.createElement('div'); | |
| const isSelected = settings.selectedAvatar === av.id; | |
| div.className = `cursor-pointer rounded-xl p-2 transition-all border-2 ${isSelected ? 'border-primary bg-primary/20' : 'border-transparent hover:bg-white/5'}`; | |
| div.onclick = () => { | |
| settings.selectedAvatar = av.id; | |
| settings.renderAvatars(); | |
| }; | |
| div.innerHTML = `<div class="w-full aspect-square rounded-lg bg-gradient-to-br ${av.color} flex items-center justify-center text-white text-2xl"> | |
| <i class="fa-solid ${av.icon}"></i> | |
| </div>`; | |
| grid.appendChild(div); | |
| }); | |
| }, | |
| save: () => { | |
| const newName = document.getElementById('settings-name').value; | |
| if (!newName) return utils.showToast('نام نمیتواند خالی باشد'); | |
| // Update current user | |
| currentUser.name = newName; | |
| currentUser.avatar = settings.selectedAvatar; | |
| // Update DB | |
| const userIndex = db.users.findIndex(u => u.id === currentUser.id); | |
| if (userIndex > -1) { | |
| db.users[userIndex] = currentUser; | |
| db.saveUsers(); | |
| } | |
| localStorage.setItem('chat_current_user', JSON.stringify(currentUser)); | |
| auth.updateUI(); | |
| utils.showToast('تنظیمات ذخیره شد'); | |
| router.navigate('dashboard'); | |
| } | |
| }; | |
| // --- INITIALIZATION --- | |
| window.addEventListener('DOMContentLoaded', () => { | |
| auth.updateUI(); | |
| if (currentUser) { | |
| router.navigate('dashboard'); | |
| } else { | |
| router.navigate('home'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |