Hugging Face's logo

Spaces:
samirerty
/
anycoder-5bccc721
Running

App Files Community
samirerty commited on
Commit
b598574
·
verified ·
1 Parent(s): abe3648

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +780 -3
index.html CHANGED
@@ -1,3 +1,780 @@
1
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
2
- <i class="fas fa-code"></i> Built with anycoder
3
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>چت روم فارسی | Persian Chat</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- FontAwesome -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+
14
+ <!-- Google Fonts: Vazirmatn for Persian Typography -->
15
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
16
+
17
+ <script>
18
+ tailwind.config = {
19
+ theme: {
20
+ extend: {
21
+ fontFamily: {
22
+ sans: ['Vazirmatn', 'sans-serif'],
23
+ },
24
+ colors: {
25
+ primary: '#6366f1', // Indigo 500
26
+ secondary: '#ec4899', // Pink 500
27
+ dark: '#0f172a', // Slate 900
28
+ card: '#1e293b', // Slate 800
29
+ },
30
+ animation: {
31
+ 'fade-in': 'fadeIn 0.5s ease-out',
32
+ 'slide-up': 'slideUp 0.5s ease-out',
33
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
34
+ },
35
+ keyframes: {
36
+ fadeIn: {
37
+ '0%': { opacity: '0' },
38
+ '100%': { opacity: '1' },
39
+ },
40
+ slideUp: {
41
+ '0%': { transform: 'translateY(20px)', opacity: '0' },
42
+ '100%': { transform: 'translateY(0)', opacity: '1' },
43
+ }
44
+ }
45
+ }
46
+ }
47
+ }
48
+ </script>
49
+
50
+ <style>
51
+ body {
52
+ background-color: #0f172a;
53
+ color: #f8fafc;
54
+ overflow-x: hidden;
55
+ }
56
+
57
+ /* Custom Scrollbar */
58
+ ::-webkit-scrollbar {
59
+ width: 8px;
60
+ }
61
+ ::-webkit-scrollbar-track {
62
+ background: #1e293b;
63
+ }
64
+ ::-webkit-scrollbar-thumb {
65
+ background: #475569;
66
+ border-radius: 4px;
67
+ }
68
+ ::-webkit-scrollbar-thumb:hover {
69
+ background: #6366f1;
70
+ }
71
+
72
+ .glass-panel {
73
+ background: rgba(30, 41, 59, 0.7);
74
+ backdrop-filter: blur(12px);
75
+ -webkit-backdrop-filter: blur(12px);
76
+ border: 1px solid rgba(255, 255, 255, 0.1);
77
+ }
78
+
79
+ .gradient-text {
80
+ background: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
81
+ -webkit-background-clip: text;
82
+ -webkit-text-fill-color: transparent;
83
+ }
84
+
85
+ .hidden-page {
86
+ display: none;
87
+ }
88
+
89
+ .active-page {
90
+ display: flex;
91
+ animation: fadeIn 0.4s ease-in-out;
92
+ }
93
+
94
+ /* Chat Bubble Styles */
95
+ .message-bubble {
96
+ max-width: 80%;
97
+ padding: 10px 15px;
98
+ border-radius: 18px;
99
+ margin-bottom: 10px;
100
+ position: relative;
101
+ word-wrap: break-word;
102
+ }
103
+ .message-sent {
104
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
105
+ border-bottom-right-radius: 4px;
106
+ align-self: flex-end;
107
+ }
108
+ .message-received {
109
+ background: #334155;
110
+ border-bottom-left-radius: 4px;
111
+ align-self: flex-start;
112
+ }
113
+ </style>
114
+ </head>
115
+ <body class="h-screen flex flex-col font-sans antialiased selection:bg-primary selection:text-white">
116
+
117
+ <!-- Navigation -->
118
+ <nav class="fixed top-0 w-full z-50 glass-panel border-b border-white/10">
119
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
120
+ <div class="flex items-center justify-between h-16">
121
+ <div class="flex items-center gap-2 cursor-pointer" onclick="router.navigate('home')">
122
+ <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">
123
+ <i class="fa-solid fa-comments"></i>
124
+ </div>
125
+ <span class="font-bold text-xl tracking-tight">چت<span class="text-primary">روم</span></span>
126
+ </div>
127
+ <div class="hidden md:block">
128
+ <div class="ml-10 flex items-baseline space-x-4 space-x-reverse">
129
+ <span id="nav-user-info" class="text-gray-300 text-sm hidden items-center gap-2">
130
+ <!-- Populated by JS -->
131
+ </span>
132
+ <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">
133
+ خروج
134
+ </button>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </nav>
140
+
141
+ <!-- Main Content Area -->
142
+ <main class="flex-grow pt-16 relative">
143
+
144
+ <!-- BACKGROUND EFFECTS -->
145
+ <div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
146
+ <div class="absolute top-[-10%] right-[-5%] w-96 h-96 bg-primary/20 rounded-full blur-3xl animate-pulse-slow"></div>
147
+ <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>
148
+ </div>
149
+
150
+ <!-- 1. LANDING PAGE -->
151
+ <section id="page-home" class="active-page flex-col items-center justify-center min-h-[80vh] text-center px-4">
152
+ <div class="max-w-3xl mx-auto animate-slide-up">
153
+ <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">
154
+ نسخه ۱.۰ • بدون نیاز به سرور
155
+ </div>
156
+ <h1 class="text-5xl md:text-7xl font-black mb-6 leading-tight">
157
+ ارتباط آسان و <br>
158
+ <span class="gradient-text">امن</span> با دوستان
159
+ </h1>
160
+ <p class="text-lg md:text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
161
+ یک پلتفرم چت ساده، سریع و کاملاً محلی. بدون پیچیدگی‌های سرور، فقط کافیست ثبت نام کنید و لینک روم خود را به اشتراک بگذارید.
162
+ </p>
163
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
164
+ <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">
165
+ <span>شروع کنید</span>
166
+ <i class="fa-solid fa-arrow-left"></i>
167
+ </button>
168
+ <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">
169
+ اطلاعات بیشتر
170
+ </button>
171
+ </div>
172
+
173
+ <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 text-right">
174
+ <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-primary/50 transition-colors">
175
+ <div class="w-12 h-12 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center mb-4 text-xl">
176
+ <i class="fa-solid fa-bolt"></i>
177
+ </div>
178
+ <h3 class="text-xl font-bold mb-2">سریع و سبک</h3>
179
+ <p class="text-gray-400 text-sm">بدون نیاز به دیتابیس سنگین، همه چیز در لحظه لود می‌شود.</p>
180
+ </div>
181
+ <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-secondary/50 transition-colors">
182
+ <div class="w-12 h-12 rounded-lg bg-pink-500/20 text-pink-400 flex items-center justify-center mb-4 text-xl">
183
+ <i class="fa-solid fa-link"></i>
184
+ </div>
185
+ <h3 class="text-xl font-bold mb-2">اشتراک‌گذاری آسان</h3>
186
+ <p class="text-gray-400 text-sm">با یک کلیک لینک روم خود را کپی کرده و برای دوستان بفرستید.</p>
187
+ </div>
188
+ <div class="p-6 rounded-2xl bg-card border border-white/5 hover:border-green-500/50 transition-colors">
189
+ <div class="w-12 h-12 rounded-lg bg-green-500/20 text-green-400 flex items-center justify-center mb-4 text-xl">
190
+ <i class="fa-solid fa-shield-halved"></i>
191
+ </div>
192
+ <h3 class="text-xl font-bold mb-2">حریم خصوصی</h3>
193
+ <p class="text-gray-400 text-sm">داده‌ها فقط روی دستگاه شما ذخیره می‌شوند.</p>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </section>
198
+
199
+ <!-- 2. AUTHENTICATION PAGE -->
200
+ <section id="page-auth" class="hidden-page flex-col items-center justify-center min-h-[80vh] px-4">
201
+ <div class="w-full max-w-md p-8 rounded-2xl glass-panel shadow-2xl animate-slide-up">
202
+ <div class="text-center mb-8">
203
+ <h2 class="text-3xl font-bold mb-2">خوش آمدید</h2>
204
+ <p class="text-gray-400">برای ادامه شماره خود را وارد کنید</p>
205
+ </div>
206
+
207
+ <!-- Tabs -->
208
+ <div class="flex bg-dark rounded-lg p-1 mb-6">
209
+ <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>
210
+ <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>
211
+ </div>
212
+
213
+ <form id="auth-form" onsubmit="auth.handleSubmit(event)" class="space-y-4">
214
+ <div>
215
+ <label class="block text-sm font-medium text-gray-400 mb-1">شماره موبایل</label>
216
+ <div class="relative">
217
+ <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-mobile-screen"></i></span>
218
+ <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">
219
+ </div>
220
+ </div>
221
+
222
+ <div>
223
+ <label class="block text-sm font-medium text-gray-400 mb-1">رمز عبور</label>
224
+ <div class="relative">
225
+ <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-lock"></i></span>
226
+ <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">
227
+ </div>
228
+ </div>
229
+
230
+ <div id="register-fields" class="hidden space-y-4">
231
+ <div>
232
+ <label class="block text-sm font-medium text-gray-400 mb-1">نام نمایشی</label>
233
+ <div class="relative">
234
+ <span class="absolute right-3 top-3 text-gray-500"><i class="fa-solid fa-user"></i></span>
235
+ <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">
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <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">
241
+ <span id="auth-btn-text">ورود به حساب</span>
242
+ </button>
243
+ </form>
244
+
245
+ <div class="mt-6 text-center">
246
+ <button onclick="router.navigate('home')" class="text-sm text-gray-500 hover:text-white transition-colors">
247
+ <i class="fa-solid fa-arrow-right ml-1"></i> بازگشت به صفحه اصلی
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- 3. DASHBOARD (ROOMS) -->
254
+ <section id="page-dashboard" class="hidden-page flex-col items-center pt-10 px-4 pb-20">
255
+ <div class="w-full max-w-5xl">
256
+ <div class="flex justify-between items-end mb-8 border-b border-white/10 pb-4">
257
+ <div>
258
+ <h2 class="text-3xl font-bold">اتاق‌های من</h2>
259
+ <p class="text-gray-400 mt-1">شما می‌توانید حداکثر <span class="text-primary font-bold">3</span> اتاق داشته باشید.</p>
260
+ </div>
261
+ <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">
262
+ <i class="fa-solid fa-gear ml-2"></i> تنظیمات پروفایل
263
+ </button>
264
+ </div>
265
+
266
+ <!-- Rooms Grid -->
267
+ <div id="rooms-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
268
+ <!-- Rooms injected via JS -->
269
+ </div>
270
+
271
+ <!-- Empty State (If no rooms) -->
272
+ <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">
273
+ <div class="w-20 h-20 bg-white/5 rounded-full flex items-center justify-center text-3xl text-gray-500 mb-4">
274
+ <i class="fa-regular fa-folder-open"></i>
275
+ </div>
276
+ <h3 class="text-xl font-bold text-gray-300">هنوز اتاقی نساخته‌اید</h3>
277
+ <p class="text-gray-500 mt-2 mb-6">برای شروع گفتگو، یک اتاق جدید بسازید.</p>
278
+ </div>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- 4. CHAT ROOM -->
283
+ <section id="page-chat" class="hidden-page fixed inset-0 z-40 bg-dark pt-16 flex flex-col">
284
+ <!-- Chat Header -->
285
+ <div class="h-16 bg-card border-b border-white/10 flex items-center justify-between px-4 shadow-md z-10">
286
+ <div class="flex items-center gap-3">
287
+ <button onclick="router.navigate('dashboard')" class="w-8 h-8 rounded-full hover:bg-white/10 flex items-center justify-center transition-colors">
288
+ <i class="fa-solid fa-arrow-right"></i>
289
+ </button>
290
+ <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">
291
+ <i class="fa-solid fa-hashtag"></i>
292
+ </div>
293
+ <div>
294
+ <h3 id="chat-room-name" class="font-bold text-lg leading-tight">Room Name</h3>
295
+ <span class="text-xs text-green-400 flex items-center gap-1">
296
+ <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> آنلاین
297
+ </span>
298
+ </div>
299
+ </div>
300
+ <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">
301
+ <i class="fa-regular fa-copy ml-1"></i> کپی لینک
302
+ </button>
303
+ </div>
304
+
305
+ <!-- Chat Area -->
306
+ <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]">
307
+ <!-- Messages injected via JS -->
308
+ <div class="text-center my-4">
309
+ <span class="bg-black/30 text-gray-400 text-xs px-3 py-1 rounded-full">امروز</span>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Chat Input -->
314
+ <div class="p-4 bg-card border-t border-white/10">
315
+ <form onsubmit="chat.sendMessage(event)" class="flex gap-2">
316
+ <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">
317
+ <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">
318
+ <i class="fa-solid fa-paper-plane"></i>
319
+ </button>
320
+ </form>
321
+ </div>
322
+ </section>
323
+
324
+ <!-- 5. SETTINGS PAGE -->
325
+ <section id="page-settings" class="hidden-page flex-col items-center justify-center min-h-[80vh] px-4">
326
+ <div class="w-full max-w-2xl glass-panel rounded-2xl p-8 animate-slide-up">
327
+ <div class="flex items-center justify-between mb-8 border-b border-white/10 pb-4">
328
+ <h2 class="text-2xl font-bold">تنظیمات پروفایل</h2>
329
+ <button onclick="router.navigate('dashboard')" class="text-gray-400 hover:text-white">
330
+ <i class="fa-solid fa-xmark text-xl"></i>
331
+ </button>
332
+ </div>
333
+
334
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
335
+ <!-- Avatar Selection -->
336
+ <div>
337
+ <label class="block text-sm font-medium text-gray-400 mb-3">انتخاب آواتار</label>
338
+ <div class="grid grid-cols-4 gap-3" id="avatar-grid">
339
+ <!-- Avatars injected via JS -->
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Info Form -->
344
+ <div class="space-y-6">
345
+ <div>
346
+ <label class="block text-sm font-medium text-gray-400 mb-2">نام نمایشی</label>
347
+ <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">
348
+ </div>
349
+
350
+ <div>
351
+ <label class="block text-sm font-medium text-gray-400 mb-2">شماره موبایل</label>
352
+ <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">
353
+ <p class="text-xs text-gray-500 mt-1">شماره موبایل قابل تغییر نیست.</p>
354
+ </div>
355
+
356
+ <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">
357
+ ذخیره تغییرات
358
+ </button>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </section>
363
+
364
+ </main>
365
+
366
+ <!-- Toast Notification -->
367
+ <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">
368
+ <i class="fa-solid fa-circle-check text-green-400"></i>
369
+ <span id="toast-msg">عملیات موفقیت آمیز بود</span>
370
+ </div>
371
+
372
+ <!-- JAVASCRIPT LOGIC -->
373
+ <script>
374
+ // --- DATA & STATE MANAGEMENT ---
375
+ const AVATARS = [
376
+ { id: 'av1', color: 'from-blue-400 to-blue-600', icon: 'fa-user-astronaut' },
377
+ { id: 'av2', color: 'from-purple-400 to-purple-600', icon: 'fa-robot' },
378
+ { id: 'av3', color: 'from-pink-400 to-pink-600', icon: 'fa-ghost' },
379
+ { id: 'av4', color: 'from-green-400 to-green-600', icon: 'fa-gamepad' },
380
+ { id: 'av5', color: 'from-yellow-400 to-orange-500', icon: 'fa-cat' },
381
+ { id: 'av6', color: 'from-red-400 to-red-600', icon: 'fa-dragon' },
382
+ { id: 'av7', color: 'from-indigo-400 to-indigo-600', icon: 'fa-meteor' },
383
+ { id: 'av8', color: 'from-teal-400 to-teal-600', icon: 'fa-frog' },
384
+ ];
385
+
386
+ // Mock Database (In-Memory + LocalStorage persistence)
387
+ const db = {
388
+ users: JSON.parse(localStorage.getItem('chat_users')) || [],
389
+ rooms: JSON.parse(localStorage.getItem('chat_rooms')) || [],
390
+ messages: JSON.parse(localStorage.getItem('chat_messages')) || {}, // Key: roomId, Value: Array of msgs
391
+
392
+ saveUsers() { localStorage.setItem('chat_users', JSON.stringify(this.users)); },
393
+ saveRooms() { localStorage.setItem('chat_rooms', JSON.stringify(this.rooms)); },
394
+ saveMessages() { localStorage.setItem('chat_messages', JSON.stringify(this.messages)); }
395
+ };
396
+
397
+ let currentUser = JSON.parse(localStorage.getItem('chat_current_user')) || null;
398
+ let currentRoomId = null;
399
+
400
+ // --- UTILS ---
401
+ const utils = {
402
+ generateId: () => Math.random().toString(36).substr(2, 9),
403
+ showToast: (msg) => {
404
+ const toast = document.getElementById('toast');
405
+ document.getElementById('toast-msg').innerText = msg;
406
+ toast.classList.remove('translate-y-20', 'opacity-0');
407
+ setTimeout(() => {
408
+ toast.classList.add('translate-y-20', 'opacity-0');
409
+ }, 3000);
410
+ },
411
+ getAvatarHtml: (avatarId, size = 'w-10 h-10') => {
412
+ const av = AVATARS.find(a => a.id === avatarId) || AVATARS[0];
413
+ 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">
414
+ <i class="fa-solid ${av.icon}"></i>
415
+ </div>`;
416
+ }
417
+ };
418
+
419
+ // --- ROUTER ---
420
+ const router = {
421
+ navigate: (pageId) => {
422
+ // Hide all pages
423
+ document.querySelectorAll('main > section').forEach(el => {
424
+ el.classList.remove('active-page');
425
+ el.classList.add('hidden-page');
426
+ });
427
+
428
+ // Show target page
429
+ const target = document.getElementById(`page-${pageId}`);
430
+ if(target) {
431
+ target.classList.remove('hidden-page');
432
+ target.classList.add('active-page');
433
+ }
434
+
435
+ // Auth Guard
436
+ if (pageId !== 'home' && pageId !== 'auth' && !currentUser) {
437
+ router.navigate('auth');
438
+ return;
439
+ }
440
+
441
+ // Page specific init
442
+ if (pageId === 'dashboard') dashboard.init();
443
+ if (pageId === 'settings') settings.init();
444
+ if (pageId === 'chat') chat.init();
445
+ }
446
+ };
447
+
448
+ // --- AUTH MODULE ---
449
+ const auth = {
450
+ mode: 'login', // 'login' or 'register'
451
+
452
+ toggleMode: (mode) => {
453
+ auth.mode = mode;
454
+ const regFields = document.getElementById('register-fields');
455
+ const btnText = document.getElementById('auth-btn-text');
456
+ const tabLogin = document.getElementById('tab-login');
457
+ const tabReg = document.getElementById('tab-register');
458
+
459
+ if (mode === 'register') {
460
+ regFields.classList.remove('hidden');
461
+ btnText.innerText = 'ایجاد حساب کاربری';
462
+ tabReg.classList.add('bg-primary', 'text-white', 'shadow');
463
+ tabReg.classList.remove('text-gray-400');
464
+ tabLogin.classList.remove('bg-primary', 'text-white', 'shadow');
465
+ tabLogin.classList.add('text-gray-400');
466
+ } else {
467
+ regFields.classList.add('hidden');
468
+ btnText.innerText = 'ورود به حساب';
469
+ tabLogin.classList.add('bg-primary', 'text-white', 'shadow');
470
+ tabLogin.classList.remove('text-gray-400');
471
+ tabReg.classList.remove('bg-primary', 'text-white', 'shadow');
472
+ tabReg.classList.add('text-gray-400');
473
+ }
474
+ },
475
+
476
+ handleSubmit: (e) => {
477
+ e.preventDefault();
478
+ const phone = document.getElementById('auth-phone').value;
479
+ const password = document.getElementById('auth-password').value;
480
+
481
+ if (auth.mode === 'register') {
482
+ const name = document.getElementById('auth-name').value;
483
+ if (!name) return utils.showToast('لطفاً نام خود را وارد کنید');
484
+
485
+ // Check existing
486
+ if (db.users.find(u => u.phone === phone)) {
487
+ return utils.showToast('این شماره قبلاً ثبت شده است');
488
+ }
489
+
490
+ const newUser = {
491
+ id: utils.generateId(),
492
+ phone,
493
+ password, // In real app, hash this!
494
+ name,
495
+ avatar: AVATARS[0].id
496
+ };
497
+ db.users.push(newUser);
498
+ db.saveUsers();
499
+ currentUser = newUser;
500
+ utils.showToast('ثبت نام موفقیت آمیز بود');
501
+ } else {
502
+ // Login
503
+ const user = db.users.find(u => u.phone === phone && u.password === password);
504
+ if (!user) {
505
+ return utils.showToast('شماره یا رمز عبور اشتباه است');
506
+ }
507
+ currentUser = user;
508
+ utils.showToast('خوش آمدید ' + user.name);
509
+ }
510
+
511
+ localStorage.setItem('chat_current_user', JSON.stringify(currentUser));
512
+ auth.updateUI();
513
+ router.navigate('dashboard');
514
+ },
515
+
516
+ logout: () => {
517
+ currentUser = null;
518
+ localStorage.removeItem('chat_current_user');
519
+ auth.updateUI();
520
+ router.navigate('home');
521
+ },
522
+
523
+ updateUI: () => {
524
+ const navInfo = document.getElementById('nav-user-info');
525
+ const btnLogout = document.getElementById('btn-logout');
526
+
527
+ if (currentUser) {
528
+ navInfo.innerHTML = `${utils.getAvatarHtml(currentUser.avatar, 'w-6 h-6 text-xs')} <span>${currentUser.name}</span>`;
529
+ navInfo.classList.remove('hidden');
530
+ navInfo.classList.add('flex');
531
+ btnLogout.classList.remove('hidden');
532
+ } else {
533
+ navInfo.classList.add('hidden');
534
+ navInfo.classList.remove('flex');
535
+ btnLogout.classList.add('hidden');
536
+ }
537
+ }
538
+ };
539
+
540
+ // --- DASHBOARD MODULE ---
541
+ const dashboard = {
542
+ init: () => {
543
+ const container = document.getElementById('rooms-container');
544
+ const emptyState = document.getElementById('empty-state');
545
+ container.innerHTML = '';
546
+
547
+ const myRooms = db.rooms.filter(r => r.ownerId === currentUser.id);
548
+
549
+ if (myRooms.length === 0) {
550
+ emptyState.classList.remove('hidden');
551
+ emptyState.classList.add('flex');
552
+ } else {
553
+ emptyState.classList.add('hidden');
554
+ emptyState.classList.remove('flex');
555
+ }
556
+
557
+ // Render existing rooms
558
+ myRooms.forEach(room => {
559
+ const roomCard = document.createElement('div');
560
+ roomCard.className = 'bg-card border border-white/10 rounded-xl p-5 hover:border-primary/50 transition-all group relative overflow-hidden';
561
+ roomCard.innerHTML = `
562
+ <div class="absolute top-0 left-0 w-1 h-full bg-primary"></div>
563
+ <div class="flex justify-between items-start mb-4">
564
+ <div class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-2xl text-primary">
565
+ <i class="fa-solid fa-comments"></i>
566
+ </div>
567
+ <button onclick="dashboard.deleteRoom('${room.id}')" class="text-gray-500 hover:text-red-400 transition-colors">
568
+ <i class="fa-solid fa-trash"></i>
569
+ </button>
570
+ </div>
571
+ <h3 class="text-xl font-bold mb-1">${room.name}</h3>
572
+ <p class="text-gray-400 text-sm mb-4">ایجاد شده در: ${new Date(room.createdAt).toLocaleDateString('fa-IR')}</p>
573
+ <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">
574
+ ورود به اتاق
575
+ </button>
576
+ `;
577
+ container.appendChild(roomCard);
578
+ });
579
+
580
+ // Render "Create New" card if < 3
581
+ if (myRooms.length < 3) {
582
+ const createCard = document.createElement('div');
583
+ 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]';
584
+ createCard.onclick = dashboard.createRoom;
585
+ createCard.innerHTML = `
586
+ <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">
587
+ <i class="fa-solid fa-plus"></i>
588
+ </div>
589
+ <span class="font-bold">ساخت اتاق جدید</span>
590
+ <span class="text-xs mt-1 opacity-70">(${myRooms.length} از 3)</span>
591
+ `;
592
+ container.appendChild(createCard);
593
+ }
594
+ },
595
+
596
+ createRoom: () => {
597
+ const name = prompt("نام اتاق جدید را وارد کنید:", "اتاق گفتگوی من");
598
+ if (name) {
599
+ const newRoom = {
600
+ id: utils.generateId(),
601
+ ownerId: currentUser.id,
602
+ name: name,
603
+ createdAt: Date.now()
604
+ };
605
+ db.rooms.push(newRoom);
606
+ db.saveRooms();
607
+ db.messages[newRoom.id] = []; // Init message array
608
+ db.saveMessages();
609
+ dashboard.init();
610
+ utils.showToast('اتاق جدید ساخته شد');
611
+ }
612
+ },
613
+
614
+ deleteRoom: (id) => {
615
+ if(confirm('آیا از حذف این اتاق اطمینان دارید؟')) {
616
+ db.rooms = db.rooms.filter(r => r.id !== id);
617
+ delete db.messages[id];
618
+ db.saveRooms();
619
+ db.saveMessages();
620
+ dashboard.init();
621
+ utils.showToast('اتاق حذف شد');
622
+ }
623
+ }
624
+ };
625
+
626
+ // --- CHAT MODULE ---
627
+ const chat = {
628
+ loadRoom: (roomId) => {
629
+ currentRoomId = roomId;
630
+ const room = db.rooms.find(r => r.id === roomId);
631
+ document.getElementById('chat-room-name').innerText = room ? room.name : 'Unknown Room';
632
+ chat.renderMessages();
633
+ },
634
+
635
+ init: () => {
636
+ // Scroll to bottom
637
+ const container = document.getElementById('chat-messages');
638
+ container.scrollTop = container.scrollHeight;
639
+ },
640
+
641
+ renderMessages: () => {
642
+ const container = document.getElementById('chat-messages');
643
+ // Keep the date separator
644
+ 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>`;
645
+
646
+ const msgs = db.messages[currentRoomId] || [];
647
+
648
+ msgs.forEach(msg => {
649
+ const isMe = msg.userId === currentUser.id;
650
+ const div = document.createElement('div');
651
+ div.className = `flex w-full ${isMe ? 'justify-end' : 'justify-start'}`;
652
+
653
+ // Find user details for avatar
654
+ const user = isMe ? currentUser : db.users.find(u => u.id === msg.userId);
655
+ const avatarHtml = user ? utils.getAvatarHtml(user.avatar, 'w-8 h-8 text-xs') : '';
656
+
657
+ div.innerHTML = `
658
+ <div class="flex items-end gap-2 max-w-[85%] ${isMe ? 'flex-row-reverse' : 'flex-row'}">
659
+ ${!isMe ? avatarHtml : ''}
660
+ <div class="message-bubble ${isMe ? 'message-sent' : 'message-received'}">
661
+ ${!isMe ? `<div class="text-xs text-gray-300 mb-1 font-bold">${user ? user.name : 'Unknown'}</div>` : ''}
662
+ <div class="text-sm">${msg.text}</div>
663
+ <div class="text-[10px] opacity-70 mt-1 text-left" dir="ltr">${msg.time}</div>
664
+ </div>
665
+ ${isMe ? avatarHtml : ''}
666
+ </div>
667
+ `;
668
+ container.appendChild(div);
669
+ });
670
+
671
+ container.scrollTop = container.scrollHeight;
672
+ },
673
+
674
+ sendMessage: (e) => {
675
+ e.preventDefault();
676
+ const input = document.getElementById('chat-input');
677
+ const text = input.value.trim();
678
+ if (!text) return;
679
+
680
+ if (!db.messages[currentRoomId]) db.messages[currentRoomId] = [];
681
+
682
+ db.messages[currentRoomId].push({
683
+ userId: currentUser.id,
684
+ text: text,
685
+ time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'})
686
+ });
687
+
688
+ db.saveMessages();
689
+ input.value = '';
690
+ chat.renderMessages();
691
+
692
+ // Simulate reply after 2 seconds
693
+ setTimeout(() => {
694
+ const replies = ["جالب بود!", "متوجه شدم.", "حتماً بررسی می‌کنم.", "😂😂", "ممنون از اطلاع رسانی"];
695
+ const randomReply = replies[Math.floor(Math.random() * replies.length)];
696
+
697
+ // Simulate a fake user
698
+ const fakeUsers = db.users.filter(u => u.id !== currentUser.id);
699
+ const randomUser = fakeUsers.length > 0 ? fakeUsers[0] : {id: 'bot', name: 'پشتیبان', avatar: 'av2'};
700
+
701
+ db.messages[currentRoomId].push({
702
+ userId: randomUser.id,
703
+ text: randomReply,
704
+ time: new Date().toLocaleTimeString('fa-IR', {hour: '2-digit', minute:'2-digit'})
705
+ });
706
+ db.saveMessages();
707
+ chat.renderMessages();
708
+ }, 2000);
709
+ },
710
+
711
+ copyLink: () => {
712
+ const dummyLink = `https://chatapp.ir/room/${currentRoomId}`;
713
+ navigator.clipboard.writeText(dummyLink).then(() => {
714
+ utils.showToast('لینک اتاق کپی شد');
715
+ });
716
+ }
717
+ };
718
+
719
+ // --- SETTINGS MODULE ---
720
+ const settings = {
721
+ selectedAvatar: currentUser ? currentUser.avatar : AVATARS[0].id,
722
+
723
+ init: () => {
724
+ document.getElementById('settings-name').value = currentUser.name;
725
+ settings.renderAvatars();
726
+ },
727
+
728
+ renderAvatars: () => {
729
+ const grid = document.getElementById('avatar-grid');
730
+ grid.innerHTML = '';
731
+ AVATARS.forEach(av => {
732
+ const div = document.createElement('div');
733
+ const isSelected = settings.selectedAvatar === av.id;
734
+ div.className = `cursor-pointer rounded-xl p-2 transition-all border-2 ${isSelected ? 'border-primary bg-primary/20' : 'border-transparent hover:bg-white/5'}`;
735
+ div.onclick = () => {
736
+ settings.selectedAvatar = av.id;
737
+ settings.renderAvatars();
738
+ };
739
+ 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">
740
+ <i class="fa-solid ${av.icon}"></i>
741
+ </div>`;
742
+ grid.appendChild(div);
743
+ });
744
+ },
745
+
746
+ save: () => {
747
+ const newName = document.getElementById('settings-name').value;
748
+ if (!newName) return utils.showToast('نام نمی‌تواند خالی باشد');
749
+
750
+ // Update current user
751
+ currentUser.name = newName;
752
+ currentUser.avatar = settings.selectedAvatar;
753
+
754
+ // Update DB
755
+ const userIndex = db.users.findIndex(u => u.id === currentUser.id);
756
+ if (userIndex > -1) {
757
+ db.users[userIndex] = currentUser;
758
+ db.saveUsers();
759
+ }
760
+
761
+ localStorage.setItem('chat_current_user', JSON.stringify(currentUser));
762
+ auth.updateUI();
763
+ utils.showToast('تنظیمات ذخیره شد');
764
+ router.navigate('dashboard');
765
+ }
766
+ };
767
+
768
+ // --- INITIALIZATION ---
769
+ window.addEventListener('DOMContentLoaded', () => {
770
+ auth.updateUI();
771
+ if (currentUser) {
772
+ router.navigate('dashboard');
773
+ } else {
774
+ router.navigate('home');
775
+ }
776
+ });
777
+
778
+ </script>
779
+ </body>
780
+ </html>