Hugging Face's logo

Spaces:
samirerty
/
anycoder-0ea08227
Running

App Files Community
samirerty commited on
Commit
a3b70ce
·
verified ·
1 Parent(s): 41bf6ca

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +830 -19
index.html CHANGED
@@ -1,19 +1,830 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa" dir="rtl">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=no">
7
+ <title>پیام رسان شیشه‌ای | GlassChat</title>
8
+
9
+ <!-- Tailwind CSS -->
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+
12
+ <!-- Font Awesome -->
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
+
15
+ <!-- Google Fonts: Vazirmatn for Persian -->
16
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap"
17
+ rel="stylesheet">
18
+
19
+ <!-- Confetti for effects -->
20
+ <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
21
+
22
+ <script>
23
+ tailwind.config = {
24
+ theme: {
25
+ extend: {
26
+ fontFamily: {
27
+ sans: ['Vazirmatn', 'sans-serif'],
28
+ },
29
+ colors: {
30
+ glass: {
31
+ 100: 'rgba(255, 255, 255, 0.1)',
32
+ 200: 'rgba(255, 255, 255, 0.2)',
33
+ 300: 'rgba(255, 255, 255, 0.3)',
34
+ 400: 'rgba(255, 255, 255, 0.4)',
35
+ 500: 'rgba(255, 255, 255, 0.5)',
36
+ },
37
+ ios: {
38
+ blue: '#007AFF',
39
+ indigo: '#5856D6',
40
+ purple: '#AF52DE',
41
+ pink: '#FF2D55',
42
+ red: '#FF3B30',
43
+ orange: '#FF9500',
44
+ yellow: '#FFCC00',
45
+ green: '#34C759',
46
+ teal: '#5AC8FA',
47
+ gray: '#8E8E93',
48
+ bg: '#F2F2F7'
49
+ }
50
+ },
51
+ animation: {
52
+ 'fade-in': 'fadeIn 0.5s ease-out',
53
+ 'slide-up': 'slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
54
+ 'float': 'float 6s ease-in-out infinite',
55
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
56
+ 'blob': 'blob 7s infinite',
57
+ },
58
+ keyframes: {
59
+ fadeIn: {
60
+ '0%': { opacity: '0' },
61
+ '100%': { opacity: '1' },
62
+ },
63
+ slideUp: {
64
+ '0%': { transform: 'translateY(30px)', opacity: '0' },
65
+ '100%': { transform: 'translateY(0)', opacity: '1' },
66
+ },
67
+ float: {
68
+ '0%, 100%': { transform: 'translateY(0)' },
69
+ '50%': { transform: 'translateY(-20px)' },
70
+ },
71
+ blob: {
72
+ '0%': { transform: 'translate(0px, 0px) scale(1)' },
73
+ '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
74
+ '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
75
+ '100%': { transform: 'translate(0px, 0px) scale(1)' },
76
+ }
77
+ }
78
+ }
79
+ }
80
+ }
81
+ </script>
82
+
83
+ <style>
84
+ /* iOS Glassmorphism Base Styles */
85
+ body {
86
+ font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
87
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
88
+ background-attachment: fixed;
89
+ overflow: hidden;
90
+ }
91
+
92
+ /* Animated Background Blobs */
93
+ .blob {
94
+ position: absolute;
95
+ filter: blur(80px);
96
+ z-index: 0;
97
+ opacity: 0.6;
98
+ animation: blob 7s infinite;
99
+ }
100
+
101
+ .blob-1 { top: 0; left: 0; width: 300px; height: 300px; background: #ff006e; animation-delay: 0s; }
102
+ .blob-2 { top: 0; right: 0; width: 400px; height: 400px; background: #8338ec; animation-delay: 2s; }
103
+ .blob-3 { bottom: 0; left: 20%; width: 350px; height: 350px; background: #3a86ff; animation-delay: 4s; }
104
+ .blob-4 { bottom: 10%; right: 10%; width: 250px; height: 250px; background: #fb5607; animation-delay: 6s; }
105
+
106
+ /* iOS Glass Utility Classes */
107
+ .ios-glass {
108
+ background: rgba(255, 255, 255, 0.15);
109
+ backdrop-filter: blur(20px);
110
+ -webkit-backdrop-filter: blur(20px);
111
+ border: 1px solid rgba(255, 255, 255, 0.3);
112
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
113
+ }
114
+
115
+ .ios-glass-strong {
116
+ background: rgba(255, 255, 255, 0.25);
117
+ backdrop-filter: blur(30px);
118
+ -webkit-backdrop-filter: blur(30px);
119
+ border: 1px solid rgba(255, 255, 255, 0.4);
120
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
121
+ }
122
+
123
+ .ios-glass-dark {
124
+ background: rgba(0, 0, 0, 0.3);
125
+ backdrop-filter: blur(20px);
126
+ -webkit-backdrop-filter: blur(20px);
127
+ border: 1px solid rgba(255, 255, 255, 0.1);
128
+ }
129
+
130
+ .ios-button {
131
+ background: rgba(255, 255, 255, 0.3);
132
+ backdrop-filter: blur(10px);
133
+ border: 1px solid rgba(255, 255, 255, 0.4);
134
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
135
+ }
136
+
137
+ .ios-button:hover {
138
+ background: rgba(255, 255, 255, 0.5);
139
+ transform: translateY(-2px);
140
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
141
+ }
142
+
143
+ .ios-button:active {
144
+ transform: translateY(0);
145
+ }
146
+
147
+ .ios-input {
148
+ background: rgba(255, 255, 255, 0.2);
149
+ border: 1px solid rgba(255, 255, 255, 0.3);
150
+ backdrop-filter: blur(10px);
151
+ transition: all 0.3s;
152
+ }
153
+
154
+ .ios-input:focus {
155
+ background: rgba(255, 255, 255, 0.35);
156
+ border-color: rgba(255, 255, 255, 0.6);
157
+ box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
158
+ }
159
+
160
+ /* Custom Scrollbar - iOS Style */
161
+ ::-webkit-scrollbar {
162
+ width: 6px;
163
+ height: 6px;
164
+ }
165
+ ::-webkit-scrollbar-track {
166
+ background: transparent;
167
+ }
168
+ ::-webkit-scrollbar-thumb {
169
+ background: rgba(255, 255, 255, 0.3);
170
+ border-radius: 10px;
171
+ }
172
+ ::-webkit-scrollbar-thumb:hover {
173
+ background: rgba(255, 255, 255, 0.5);
174
+ }
175
+
176
+ /* Message Bubbles - Glass Style */
177
+ .message-bubble-me {
178
+ background: linear-gradient(135deg, rgba(0, 122, 255, 0.8), rgba(88, 86, 214, 0.8));
179
+ backdrop-filter: blur(10px);
180
+ border: 1px solid rgba(255, 255, 255, 0.3);
181
+ box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
182
+ }
183
+
184
+ .message-bubble-other {
185
+ background: rgba(255, 255, 255, 0.25);
186
+ backdrop-filter: blur(10px);
187
+ border: 1px solid rgba(255, 255, 255, 0.4);
188
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
189
+ }
190
+
191
+ /* Animations */
192
+ .message-enter {
193
+ animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
194
+ }
195
+
196
+ @keyframes popIn {
197
+ from { opacity: 0; transform: scale(0.8) translateY(10px); }
198
+ to { opacity: 1; transform: scale(1) translateY(0); }
199
+ }
200
+
201
+ /* Glass Card Hover Effect */
202
+ .glass-card {
203
+ transition: all 0.3s ease;
204
+ }
205
+ .glass-card:hover {
206
+ transform: translateY(-5px);
207
+ background: rgba(255, 255, 255, 0.25);
208
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
209
+ }
210
+
211
+ /* iOS Toggle Switch */
212
+ .ios-toggle {
213
+ appearance: none;
214
+ width: 50px;
215
+ height: 30px;
216
+ background: rgba(255,255,255,0.3);
217
+ border-radius: 30px;
218
+ position: relative;
219
+ cursor: pointer;
220
+ border: 1px solid rgba(255,255,255,0.4);
221
+ }
222
+ .ios-toggle::after {
223
+ content: '';
224
+ position: absolute;
225
+ width: 26px;
226
+ height: 26px;
227
+ background: white;
228
+ border-radius: 50%;
229
+ top: 1px;
230
+ right: 1px;
231
+ transition: transform 0.3s;
232
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
233
+ }
234
+ .ios-toggle:checked::after {
235
+ transform: translateX(-20px);
236
+ }
237
+ .ios-toggle:checked {
238
+ background: #34C759;
239
+ }
240
+
241
+ /* Responsive Adjustments */
242
+ @media (max-width: 768px) {
243
+ .ios-glass, .ios-glass-strong {
244
+ backdrop-filter: blur(15px);
245
+ -webkit-backdrop-filter: blur(15px);
246
+ }
247
+ }
248
+
249
+ /* Loading Spinner */
250
+ .ios-spinner {
251
+ width: 20px;
252
+ height: 20px;
253
+ border: 2px solid rgba(255,255,255,0.3);
254
+ border-top-color: white;
255
+ border-radius: 50%;
256
+ animation: spin 0.8s linear infinite;
257
+ }
258
+
259
+ @keyframes spin {
260
+ to { transform: rotate(360deg); }
261
+ }
262
+
263
+ /* Tab Animation */
264
+ .tab-active {
265
+ background: rgba(255, 255, 255, 0.4);
266
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
267
+ }
268
+ </style>
269
+ </head>
270
+
271
+ <body class="text-white h-screen overflow-hidden selection:bg-white/30 selection:text-white">
272
+
273
+ <!-- Animated Background -->
274
+ <div class="blob blob-1"></div>
275
+ <div class="blob blob-2"></div>
276
+ <div class="blob blob-3"></div>
277
+ <div class="blob blob-4"></div>
278
+
279
+ <!-- Toast Notification Container -->
280
+ <div id="toast-container"
281
+ class="fixed top-5 left-1/2 transform -translate-x-1/2 z-50 flex flex-col gap-3 w-full max-w-sm px-4 pointer-events-none">
282
+ </div>
283
+
284
+ <!-- ================= AUTHENTICATION VIEW ================= -->
285
+ <div id="auth-view" class="h-full w-full flex items-center justify-center relative z-10 p-4">
286
+
287
+ <div class="ios-glass-strong p-8 rounded-3xl shadow-2xl w-full max-w-md animate-slide-up mx-4 relative overflow-hidden">
288
+ <!-- Decorative shine effect -->
289
+ <div class="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white/20 to-transparent pointer-events-none"></div>
290
+
291
+ <div class="text-center mb-8 relative">
292
+ <div class="w-20 h-20 ios-glass rounded-3xl mx-auto flex items-center justify-center text-white text-3xl shadow-lg mb-4 rotate-3 hover:rotate-6 transition-transform duration-500 border border-white/40">
293
+ <i class="fa-solid fa-comments"></i>
294
+ </div>
295
+ <h1 class="text-3xl font-bold text-white drop-shadow-lg">پیام رسان شیشه‌ای</h1>
296
+ <p class="text-white/80 mt-2 text-sm font-light">بدون نیاز به سرور، فقط با مرورگر</p>
297
+ </div>
298
+
299
+ <!-- Tabs -->
300
+ <div class="flex bg-black/10 p-1.5 rounded-2xl mb-6 backdrop-blur-sm border border-white/10">
301
+ <button onclick="switchAuthTab('login')" id="tab-login" class="flex-1 py-3 rounded-xl text-sm font-bold transition-all duration-300 tab-active text-white">ورود</button>
302
+ <button onclick="switchAuthTab('register')" id="tab-register" class="flex-1 py-3 rounded-xl text-sm font-medium text-white/70 hover:text-white transition-all duration-300">ثبت نام</button>
303
+ </div>
304
+
305
+ <!-- Login Form -->
306
+ <form id="login-form" class="space-y-4" onsubmit="handleLogin(event)">
307
+ <div class="group">
308
+ <label class="block text-xs font-bold text-white/80 mb-2 mr-1">شماره موبایل</label>
309
+ <div class="relative">
310
+ <i class="fa-solid fa-phone absolute right-4 top-3.5 text-white/60"></i>
311
+ <input type="tel" id="login-phone" placeholder="09XXXXXXXXX" class="w-full ios-input rounded-2xl py-3.5 pr-12 pl-4 text-white placeholder-white/40 focus:outline-none" required>
312
+ </div>
313
+ </div>
314
+ <div class="group">
315
+ <label class="block text-xs font-bold text-white/80 mb-2 mr-1">رمز عبور</label>
316
+ <div class="relative">
317
+ <i class="fa-solid fa-lock absolute right-4 top-3.5 text-white/60"></i>
318
+ <input type="password" id="login-password" placeholder="••••••••" class="w-full ios-input rounded-2xl py-3.5 pr-12 pl-4 text-white placeholder-white/40 focus:outline-none" required>
319
+ </div>
320
+ </div>
321
+ <button type="submit" class="w-full bg-white/20 hover:bg-white/30 text-white font-bold py-4 rounded-2xl shadow-lg border border-white/40 transition-all transform hover:scale-[1.02] active:scale-95 backdrop-blur-sm mt-6">
322
+ ورود به حساب
323
+ </button>
324
+ </form>
325
+
326
+ <!-- Register Form (Hidden by default) -->
327
+ <form id="register-form" class="space-y-4 hidden" onsubmit="handleRegister(event)">
328
+ <div>
329
+ <label class="block text-xs font-bold text-white/80 mb-2 mr-1">نام کامل</label>
330
+ <div class="relative">
331
+ <i class="fa-solid fa-user absolute right-4 top-3.5 text-white/60"></i>
332
+ <input type="text" id="reg-name" placeholder="مثلا: علی احمدی" class="w-full ios-input rounded-2xl py-3.5 pr-12 pl-4 text-white placeholder-white/40 focus:outline-none" required>
333
+ </div>
334
+ </div>
335
+ <div>
336
+ <label class="block text-xs font-bold text-white/80 mb-2 mr-1">شماره موبایل</label>
337
+ <div class="relative">
338
+ <i class="fa-solid fa-phone absolute right-4 top-3.5 text-white/60"></i>
339
+ <input type="tel" id="reg-phone" placeholder="09XXXXXXXXX" class="w-full ios-input rounded-2xl py-3.5 pr-12 pl-4 text-white placeholder-white/40 focus:outline-none" required>
340
+ </div>
341
+ </div>
342
+ <div>
343
+ <label class="block text-xs font-bold text-white/80 mb-2 mr-1">رمز عبور</label>
344
+ <div class="relative">
345
+ <i class="fa-solid fa-lock absolute right-4 top-3.5 text-white/60"></i>
346
+ <input type="password" id="reg-password" placeholder="حداقل 4 کاراکتر" class="w-full ios-input rounded-2xl py-3.5 pr-12 pl-4 text-white placeholder-white/40 focus:outline-none" required>
347
+ </div>
348
+ </div>
349
+ <button type="submit" class="w-full bg-white/20 hover:bg-white/30 text-white font-bold py-4 rounded-2xl shadow-lg border border-white/40 transition-all transform hover:scale-[1.02] active:scale-95 backdrop-blur-sm mt-6">
350
+ ایجاد حساب کاربری
351
+ </button>
352
+ </form>
353
+
354
+ <div class="mt-8 text-center">
355
+ <p class="text-xs text-white/60">
356
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
357
+ class="text-white hover:text-white/80 underline decoration-white/30">anycoder</a>
358
+ </p>
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- ================= DASHBOARD VIEW ================= -->
364
+ <div id="dashboard-view" class="hidden h-full w-full flex flex-col md:flex-row relative z-10">
365
+
366
+ <!-- Sidebar -->
367
+ <aside class="w-full md:w-80 ios-glass border-l border-white/20 flex flex-col z-20 shadow-2xl md:shadow-none h-full">
368
+ <!-- User Profile Header -->
369
+ <div class="p-6 border-b border-white/10 bg-white/5">
370
+ <div class="flex items-center gap-4">
371
+ <div class="relative">
372
+ <div class="w-14 h-14 rounded-full bg-gradient-to-tr from-ios-blue to-ios-purple flex items-center justify-center text-white text-xl font-bold shadow-lg border-2 border-white/30">
373
+ <span id="user-avatar-initial">U</span>
374
+ </div>
375
+ <div class="absolute bottom-0 right-0 w-4 h-4 bg-ios-green border-2 border-white rounded-full shadow-sm"></div>
376
+ </div>
377
+ <div class="flex-1">
378
+ <h2 id="user-name-display" class="font-bold text-white text-lg drop-shadow-md">کاربر</h2>
379
+ <p id="user-phone-display" class="text-xs text-white/70 font-mono">09--------</p>
380
+ </div>
381
+ <button onclick="logout()" class="text-white/60 hover:text-white hover:bg-white/20 p-2 rounded-full transition-all" title="خروج">
382
+ <i class="fa-solid fa-power-off text-lg"></i>
383
+ </button>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Create Room Section -->
388
+ <div class="p-6 border-b border-white/10">
389
+ <div class="flex justify-between items-center mb-4">
390
+ <h3 class="font-bold text-white drop-shadow-sm">اتاق های من</h3>
391
+ <span id="room-count-badge" class="ios-glass text-white text-xs font-bold px-3 py-1 rounded-full border border-white/30">0/3</span>
392
+ </div>
393
+ <button onclick="openCreateRoomModal()" id="btn-create-room" class="w-full py-3 border-2 border-dashed border-white/30 text-white/90 rounded-2xl hover:bg-white/20 hover:border-white/50 transition-all flex items-center justify-center gap-2 font-medium text-sm backdrop-blur-sm">
394
+ <i class="fa-solid fa-plus"></i> ساخت اتاق جدید
395
+ </button>
396
+ <p id="room-limit-msg" class="text-xs text-red-300 mt-3 hidden text-center font-medium drop-shadow">شما به حداکثر تعداد اتاق رسیدید.</p>
397
+ </div>
398
+
399
+ <!-- Room List -->
400
+ <div class="flex-1 overflow-y-auto p-3 space-y-2" id="room-list-container">
401
+ <!-- Rooms injected via JS -->
402
+ <div class="text-center mt-10 text-white/50 text-sm flex flex-col items-center">
403
+ <div class="w-16 h-16 ios-glass rounded-full flex items-center justify-center mb-3 border border-white/20">
404
+ <i class="fa-regular fa-folder-open text-2xl"></i>
405
+ </div>
406
+ <p>هنوز اتاقی نساختید</p>
407
+ </div>
408
+ </div>
409
+ </aside>
410
+
411
+ <!-- Main Content Area -->
412
+ <main class="flex-1 flex flex-col h-full relative">
413
+ <!-- Top Bar -->
414
+ <header class="h-16 ios-glass border-b border-white/10 flex items-center justify-between px-6 shadow-sm z-10">
415
+ <div class="flex items-center gap-3">
416
+ <div class="md:hidden text-white/80 cursor-pointer hover:bg-white/20 p-2 rounded-full transition-all">
417
+ <i class="fa-solid fa-bars text-xl"></i>
418
+ </div>
419
+ <h1 class="font-bold text-xl text-white drop-shadow-md hidden md:block">داشبورد</h1>
420
+ </div>
421
+ <div class="flex items-center gap-4">
422
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
423
+ class="text-xs ios-glass hover:bg-white/30 text-white px-4 py-2 rounded-full transition-all border border-white/20 shadow-sm">
424
+ Built with anycoder
425
+ </a>
426
+ </div>
427
+ </header>
428
+
429
+ <!-- Dashboard Content / Welcome -->
430
+ <div id="welcome-screen" class="flex-1 flex flex-col items-center justify-center p-8 text-center overflow-y-auto">
431
+ <div class="w-32 h-32 ios-glass rounded-full flex items-center justify-center mb-6 relative border border-white/30 shadow-2xl">
432
+ <i class="fa-solid fa-rocket text-4xl text-white/80 drop-shadow-lg"></i>
433
+ <div class="absolute inset-0 border-2 border-white/30 border-dashed rounded-full animate-spin-slow" style="animation-duration: 15s;"></div>
434
+ </div>
435
+ <h2 class="text-3xl font-bold text-white mb-3 drop-shadow-lg">به پیام رسان خوش آمدید</h2>
436
+ <p class="text-white/80 max-w-md mb-10 text-lg leading-relaxed">یک اتاق جدید بسازید یا از لیست سمت راست یکی را انتخاب کنید تا گفتگو را شروع کنید.</p>
437
+
438
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-3xl text-right">
439
+ <div class="glass-card ios-glass p-5 rounded-2xl border border-white/20 cursor-pointer group">
440
+ <div class="w-12 h-12 rounded-2xl bg-ios-blue/30 flex items-center justify-center mb-4 text-white text-xl border border-white/20 shadow-lg group-hover:scale-110 transition-transform">
441
+ <i class="fa-solid fa-bolt"></i>
442
+ </div>
443
+ <h4 class="font-bold text-white mb-2 text-lg drop-shadow-md">سریع و آنی</h4>
444
+ <p class="text-sm text-white/70 leading-relaxed">بدون نیاز به سرور، داده ها در مرورگر شما ذخیره می شوند.</p>
445
+ </div>
446
+
447
+ <div class="glass-card ios-glass p-5 rounded-2xl border border-white/20 cursor-pointer group">
448
+ <div class="w-12 h-12 rounded-2xl bg-ios-purple/30 flex items-center justify-center mb-4 text-white text-xl border border-white/20 shadow-lg group-hover:scale-110 transition-transform">
449
+ <i class="fa-solid fa-link"></i>
450
+ </div>
451
+ <h4 class="font-bold text-white mb-2 text-lg drop-shadow-md">اشتراک گذاری</h4>
452
+ <p class="text-sm text-white/70 leading-relaxed">لینک اتاق را کپی کنید و برای دوستانتان بفرستید.</p>
453
+ </div>
454
+
455
+ <div class="glass-card ios-glass p-5 rounded-2xl border border-white/20 cursor-pointer group">
456
+ <div class="w-12 h-12 rounded-2xl bg-ios-green/30 flex items-center justify-center mb-4 text-white text-xl border border-white/20 shadow-lg group-hover:scale-110 transition-transform">
457
+ <i class="fa-solid fa-shield-halved"></i>
458
+ </div>
459
+ <h4 class="font-bold text-white mb-2 text-lg drop-shadow-md">امنیت محلی</h4>
460
+ <p class="text-sm text-white/70 leading-relaxed">هیچ داده ای به سرور ارسال نمی شود. کاملا خصوصی.</p>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Chat Interface (Hidden initially) -->
466
+ <div id="chat-interface" class="hidden flex-col h-full absolute inset-0 bg-transparent z-20 animate-fade-in backdrop-blur-sm">
467
+ <!-- Chat Header -->
468
+ <div class="h-16 ios-glass border-b border-white/10 flex items-center justify-between px-4 shadow-lg">
469
+ <div class="flex items-center gap-3">
470
+ <button onclick="closeChat()" class="md:hidden w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/20 text-white transition-all">
471
+ <i class="fa-solid fa-arrow-right"></i>
472
+ </button>
473
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-ios-indigo to-ios-blue flex items-center justify-center text-white font-bold shadow-md border border-white/30">
474
+ <i class="fa-solid fa-hashtag"></i>
475
+ </div>
476
+ <div>
477
+ <h3 id="chat-room-name" class="font-bold text-white drop-shadow-md">نام اتاق</h3>
478
+ <div class="flex items-center gap-2 text-xs text-white/70">
479
+ <span class="w-2 h-2 bg-ios-green rounded-full shadow-sm animate-pulse"></span>
480
+ <span id="chat-user-count">2 عضو آنلاین</span>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ <div class="flex items-center gap-2">
485
+ <button onclick="copyRoomLink()" class="p-3 text-white/70 hover:text-white hover:bg-white/20 rounded-full transition-all" title="کپی لینک">
486
+ <i class="fa-solid fa-share-nodes"></i>
487
+ </button>
488
+ <button onclick="closeChat()" class="hidden md:block p-3 text-white/70 hover:text-white hover:bg-white/20 rounded-full transition-all" title="بستن">
489
+ <i class="fa-solid fa-xmark"></i>
490
+ </button>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- Messages Area -->
495
+ <div id="messages-container" class="flex-1 overflow-y-auto p-4 space-y-4">
496
+ <!-- Messages injected via JS -->
497
+ </div>
498
+
499
+ <!-- Input Area -->
500
+ <div class="p-4 ios-glass border-t border-white/10 backdrop-blur-xl">
501
+ <form onsubmit="sendMessage(event)" class="flex gap-3 items-center">
502
+ <input type="text" id="message-input" placeholder="پیام خود را بنویسید..." class="flex-1 ios-input rounded-full px-6 py-3.5 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30" autocomplete="off">
503
+ <button type="submit" class="bg-white/20 hover:bg-white/30 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg border border-white/40 transition-all transform active:scale-95 hover:rotate-12">
504
+ <i class="fa-solid fa-paper-plane"></i>
505
+ </button>
506
+ </form>
507
+ </div>
508
+ </div>
509
+ </main>
510
+ </div>
511
+
512
+ <!-- Create Room Modal -->
513
+ <div id="create-room-modal" class="fixed inset-0 z-50 hidden">
514
+ <div class="absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity" onclick="closeCreateRoomModal()"></div>
515
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md p-4">
516
+ <div class="ios-glass-strong rounded-3xl shadow-2xl p-6 animate-slide-up border border-white/40">
517
+ <div class="flex justify-between items-center mb-6">
518
+ <h3 class="text-xl font-bold text-white drop-shadow-md">ساخت اتاق جدید</h3>
519
+ <button onclick="closeCreateRoomModal()" class="text-white/70 hover:text-white hover:bg-white/20 w-8 h-8 rounded-full flex items-center justify-center transition-all">
520
+ <i class="fa-solid fa-xmark text-xl"></i>
521
+ </button>
522
+ </div>
523
+ <form onsubmit="handleCreateRoom(event)">
524
+ <div class="mb-6">
525
+ <label class="block text-sm font-bold text-white/80 mb-2 mr-1">نام اتاق</label>
526
+ <input type="text" id="new-room-name" class="w-full ios-input rounded-2xl px-4 py-3.5 text-white placeholder-white/40 focus:outline-none" placeholder="مثلا: گروه دوستان" required>
527
+ </div>
528
+ <div class="flex gap-3">
529
+ <button type="button" onclick="closeCreateRoomModal()" class="flex-1 py-3.5 rounded-2xl border border-white/30 text-white font-bold hover:bg-white/20 transition-all backdrop-blur-sm">انصراف</button>
530
+ <button type="submit" class="flex-1 py-3.5 rounded-2xl bg-white/20 hover:bg-white/30 text-white font-bold border border-white/40 shadow-lg transition-all transform hover:scale-[1.02] active:scale-95 backdrop-blur-sm">ساختن</button>
531
+ </div>
532
+ </form>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <script>
538
+ // --- DATA & STATE MANAGEMENT ---
539
+
540
+ // Simulating a database using LocalStorage
541
+ const DB_KEYS = {
542
+ USERS: 'chat_app_users',
543
+ ROOMS: 'chat_app_rooms',
544
+ MESSAGES: 'chat_app_messages',
545
+ SESSION: 'chat_app_session'
546
+ };
547
+
548
+ let currentUser = null;
549
+ let currentRoomId = null;
550
+
551
+ // --- INITIALIZATION ---
552
+
553
+ document.addEventListener('DOMContentLoaded', () => {
554
+ checkSession();
555
+
556
+ // Check URL for room invite
557
+ const urlParams = new URLSearchParams(window.location.search);
558
+ const inviteRoomId = urlParams.get('room');
559
+ if (inviteRoomId) {
560
+ // If user is logged in, try to join. If not, store intent.
561
+ // For this simple version, we just show a toast if they are logged in.
562
+ if(currentUser) {
563
+ joinRoomById(inviteRoomId);
564
+ } else {
565
+ showToast('لطفا ابتدا وارد شوید تا بتوانید به اتاق دعوت شده بپیوندید.', 'info');
566
+ }
567
+ }
568
+ });
569
+
570
+ function checkSession() {
571
+ const session = localStorage.getItem(DB_KEYS.SESSION);
572
+ if (session) {
573
+ currentUser = JSON.parse(session);
574
+ showDashboard();
575
+ } else {
576
+ showAuth();
577
+ }
578
+ }
579
+
580
+ // --- AUTHENTICATION LOGIC ---
581
+
582
+ function switchAuthTab(tab) {
583
+ const loginForm = document.getElementById('login-form');
584
+ const registerForm = document.getElementById('register-form');
585
+ const loginTab = document.getElementById('tab-login');
586
+ const registerTab = document.getElementById('tab-register');
587
+
588
+ if (tab === 'login') {
589
+ loginForm.classList.remove('hidden');
590
+ registerForm.classList.add('hidden');
591
+ loginTab.classList.add('tab-active', 'text-white');
592
+ loginTab.classList.remove('text-white/70');
593
+ registerTab.classList.remove('tab-active', 'text-white');
594
+ registerTab.classList.add('text-white/70');
595
+ } else {
596
+ loginForm.classList.add('hidden');
597
+ registerForm.classList.remove('hidden');
598
+ registerTab.classList.add('tab-active', 'text-white');
599
+ registerTab.classList.remove('text-white/70');
600
+ loginTab.classList.remove('tab-active', 'text-white');
601
+ loginTab.classList.add('text-white/70');
602
+ }
603
+ }
604
+
605
+ function handleRegister(e) {
606
+ e.preventDefault();
607
+ const name = document.getElementById('reg-name').value;
608
+ const phone = document.getElementById('reg-phone').value;
609
+ const password = document.getElementById('reg-password').value;
610
+
611
+ let users = JSON.parse(localStorage.getItem(DB_KEYS.USERS) || '[]');
612
+
613
+ if (users.find(u => u.phone === phone)) {
614
+ showToast('این شماره قبلا ثبت نام شده است.', 'error');
615
+ return;
616
+ }
617
+
618
+ const newUser = {
619
+ id: Date.now().toString(),
620
+ name,
621
+ phone,
622
+ password, // In a real app, hash this!
623
+ createdAt: new Date().toISOString()
624
+ };
625
+
626
+ users.push(newUser);
627
+ localStorage.setItem(DB_KEYS.USERS, JSON.stringify(users));
628
+
629
+ // Auto login
630
+ currentUser = { id: newUser.id, name: newUser.name, phone: newUser.phone };
631
+ localStorage.setItem(DB_KEYS.SESSION, JSON.stringify(currentUser));
632
+
633
+ confetti({
634
+ particleCount: 100,
635
+ spread: 70,
636
+ origin: { y: 0.6 },
637
+ colors: ['#ffffff', '#rgba(255,255,255,0.8)', '#rgba(255,255,255,0.5)']
638
+ });
639
+
640
+ showToast('ثبت نام با موفقیت انجام شد!', 'success');
641
+ showDashboard();
642
+ }
643
+
644
+ function handleLogin(e) {
645
+ e.preventDefault();
646
+ const phone = document.getElementById('login-phone').value;
647
+ const password = document.getElementById('login-password').value;
648
+
649
+ const users = JSON.parse(localStorage.getItem(DB_KEYS.USERS) || '[]');
650
+ const user = users.find(u => u.phone === phone && u.password === password);
651
+
652
+ if (user) {
653
+ currentUser = { id: user.id, name: user.name, phone: user.phone };
654
+ localStorage.setItem(DB_KEYS.SESSION, JSON.stringify(currentUser));
655
+ showToast(`خوش آمدید ${user.name}`, 'success');
656
+ showDashboard();
657
+ } else {
658
+ showToast('شماره یا رمز عبور اشتباه است.', 'error');
659
+ }
660
+ }
661
+
662
+ function logout() {
663
+ localStorage.removeItem(DB_KEYS.SESSION);
664
+ currentUser = null;
665
+ showAuth();
666
+ showToast('از حساب کاربری خارج شدید.', 'info');
667
+ }
668
+
669
+ // --- VIEW MANAGEMENT ---
670
+
671
+ function showAuth() {
672
+ document.getElementById('auth-view').classList.remove('hidden');
673
+ document.getElementById('dashboard-view').classList.add('hidden');
674
+ }
675
+
676
+ function showDashboard() {
677
+ document.getElementById('auth-view').classList.add('hidden');
678
+ document.getElementById('dashboard-view').classList.remove('hidden');
679
+
680
+ // Update Profile Info
681
+ document.getElementById('user-name-display').innerText = currentUser.name;
682
+ document.getElementById('user-phone-display').innerText = currentUser.phone;
683
+ document.getElementById('user-avatar-initial').innerText = currentUser.name.charAt(0);
684
+
685
+ renderRoomList();
686
+ }
687
+
688
+ // --- ROOM MANAGEMENT ---
689
+
690
+ function renderRoomList() {
691
+ const allRooms = JSON.parse(localStorage.getItem(DB_KEYS.ROOMS) || '[]');
692
+ // Filter rooms created by current user OR rooms where user is a member
693
+ // For this demo, we show rooms user created + rooms they joined via link (simplified logic)
694
+ const myRooms = allRooms.filter(r => r.creatorId === currentUser.id || (r.members && r.members.includes(currentUser.id)));
695
+
696
+ const container = document.getElementById('room-list-container');
697
+ const countBadge = document.getElementById('room-count-badge');
698
+ const createBtn = document.getElementById('btn-create-room');
699
+ const limitMsg = document.getElementById('room-limit-msg');
700
+
701
+ // Update Badge
702
+ const createdCount = allRooms.filter(r => r.creatorId === currentUser.id).length;
703
+ countBadge.innerText = `${createdCount}/3`;
704
+
705
+ // Handle Limit
706
+ if (createdCount >= 3) {
707
+ createBtn.disabled = true;
708
+ createBtn.classList.add('opacity-50', 'cursor-not-allowed');
709
+ limitMsg.classList.remove('hidden');
710
+ } else {
711
+ createBtn.disabled = false;
712
+ createBtn.classList.remove('opacity-50', 'cursor-not-allowed');
713
+ limitMsg.classList.add('hidden');
714
+ }
715
+
716
+ // Render List
717
+ if (myRooms.length === 0) {
718
+ container.innerHTML = `
719
+ <div class="text-center mt-10 text-white/50 text-sm flex flex-col items-center">
720
+ <div class="w-16 h-16 ios-glass rounded-full flex items-center justify-center mb-3 border border-white/20 shadow-lg">
721
+ <i class="fa-regular fa-folder-open text-2xl"></i>
722
+ </div>
723
+ <p>هنوز اتاقی نساختید</p>
724
+ </div>`;
725
+ return;
726
+ }
727
+
728
+ container.innerHTML = myRooms.map(room => `
729
+ <div onclick="openRoom('${room.id}')" class="group p-3 rounded-2xl hover:bg-white/20 cursor-pointer border border-transparent hover:border-white/20 transition-all flex items-center justify-between glass-card mb-2">
730
+ <div class="flex items-center gap-3">
731
+ <div class="w-10 h-10 rounded-xl ios-glass flex items-center justify-center font-bold text-white shadow-md border border-white/20 group-hover:scale-110 transition-transform">
732
+ ${room.name.charAt(0)}
733
+ </div>
734
+ <div>
735
+ <h4 class="font-bold text-white text-sm drop-shadow-sm">${room.name}</h4>
736
+ <p class="text-xs text-white/60">ایجاد شده در ${new Date(room.createdAt).toLocaleDateString('fa-IR')}</p>
737
+ </div>
738
+ </div>
739
+ <i class="fa-solid fa-chevron-left text-white/40 text-xs group-hover:text-white group-hover:translate-x-1 transition-all"></i>
740
+ </div>
741
+ `).join('');
742
+ }
743
+
744
+ function openCreateRoomModal() {
745
+ document.getElementById('create-room-modal').classList.remove('hidden');
746
+ }
747
+
748
+ function closeCreateRoomModal() {
749
+ document.getElementById('create-room-modal').classList.add('hidden');
750
+ }
751
+
752
+ function handleCreateRoom(e) {
753
+ e.preventDefault();
754
+ const name = document.getElementById('new-room-name').value;
755
+
756
+ const rooms = JSON.parse(localStorage.getItem(DB_KEYS.ROOMS) || '[]');
757
+ const myRoomCount = rooms.filter(r => r.creatorId === currentUser.id).length;
758
+
759
+ if (myRoomCount >= 3) {
760
+ showToast('شما نمی توانید بیش از 3 اتاق بسازید.', 'error');
761
+ return;
762
+ }
763
+
764
+ const newRoom = {
765
+ id: 'room_' + Date.now(),
766
+ name: name,
767
+ creatorId: currentUser.id,
768
+ members: [currentUser.id], // Creator is first member
769
+ createdAt: new Date().toISOString()
770
+ };
771
+
772
+ rooms.push(newRoom);
773
+ localStorage.setItem(DB_KEYS.ROOMS, JSON.stringify(rooms));
774
+
775
+ closeCreateRoomModal();
776
+ document.getElementById('new-room-name').value = '';
777
+ renderRoomList();
778
+ showToast('اتاق با موفقیت ساخته شد!', 'success');
779
+
780
+ // Auto open
781
+ openRoom(newRoom.id);
782
+ }
783
+
784
+ function joinRoomById(roomId) {
785
+ const rooms = JSON.parse(localStorage.getItem(DB_KEYS.ROOMS) || '[]');
786
+ const roomIndex = rooms.findIndex(r => r.id === roomId);
787
+
788
+ if (roomIndex === -1) {
789
+ showToast('اتاق مورد نظر یافت نشد.', 'error');
790
+ return;
791
+ }
792
+
793
+ // Add user to members if not already
794
+ if (!rooms[roomIndex].members) rooms[roomIndex].members = [];
795
+ if (!rooms[roomIndex].members.includes(currentUser.id)) {
796
+ rooms[roomIndex].members.push(currentUser.id);
797
+ localStorage.setItem(DB_KEYS.ROOMS, JSON.stringify(rooms));
798
+ showToast('شما به اتاق پیوستید!', 'success');
799
+ renderRoomList();
800
+ }
801
+
802
+ openRoom(roomId);
803
+ }
804
+
805
+ // --- CHAT LOGIC ---
806
+
807
+ function openRoom(roomId) {
808
+ currentRoomId = roomId;
809
+ const rooms = JSON.parse(localStorage.getItem(DB_KEYS.ROOMS) || '[]');
810
+ const room = rooms.find(r => r.id === roomId);
811
+
812
+ if (!room) return;
813
+
814
+ // UI Updates
815
+ document.getElementById('welcome-screen').classList.add('hidden');
816
+ document.getElementById('chat-interface').classList.remove('hidden');
817
+ document.getElementById('chat-interface').classList.add('flex');
818
+
819
+ document.getElementById('chat-room-name').innerText = room.name;
820
+ document.getElementById('chat-user-count').innerText = `${room.members ? room.members.length : 1} عضو`;
821
+
822
+ loadMessages();
823
+
824
+ // Focus input
825
+ setTimeout(() => document.getElementById('message-input').focus(), 100);
826
+ }
827
+
828
+ function closeChat() {
829
+ document.getElementById('chat-interface').classList.add('hidden');
830
+ document.getElementBy