Hugging Face's logo

Spaces:
samirerty
/
anycoder-80001597
Running

App Files Community
samirerty commited on
Commit
8a76eec
·
verified ·
1 Parent(s): cbb1686

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +727 -19
index.html CHANGED
@@ -1,19 +1,727 @@
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
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Glass Chat | iOS Style</title>
7
+
8
+ <!-- Vazirmatn Font for Persian/Arabic Support -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700&display=swap" rel="stylesheet">
12
+
13
+ <style>
14
+ /* --- 1. BASE & RESET --- */
15
+ :root {
16
+ --glass-bg: rgba(255, 255, 255, 0.07);
17
+ --glass-border: rgba(255, 255, 255, 0.15);
18
+ --glass-highlight: rgba(255, 255, 255, 0.25);
19
+ --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
20
+ --message-me: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
21
+ --message-other: rgba(255, 255, 255, 0.15);
22
+ --text-main: #ffffff;
23
+ --text-muted: rgba(255, 255, 255, 0.7);
24
+ --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
25
+ }
26
+
27
+ * {
28
+ box-sizing: border-box;
29
+ margin: 0;
30
+ padding: 0;
31
+ -webkit-tap-highlight-color: transparent;
32
+ font-family: 'Vazirmatn', sans-serif;
33
+ }
34
+
35
+ body {
36
+ height: 100vh;
37
+ width: 100vw;
38
+ overflow: hidden;
39
+ background: radial-gradient(circle at 10% 20%, rgb(69, 42, 122) 0%, rgb(26, 26, 46) 90%);
40
+ color: var(--text-main);
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ }
45
+
46
+ /* --- 2. GLASS UTILITIES --- */
47
+ .glass-panel {
48
+ background: var(--glass-bg);
49
+ backdrop-filter: blur(16px);
50
+ -webkit-backdrop-filter: blur(16px);
51
+ border: 1px solid var(--glass-border);
52
+ box-shadow: var(--shadow-soft);
53
+ }
54
+
55
+ .glass-button {
56
+ background: rgba(255, 255, 255, 0.1);
57
+ border: 1px solid rgba(255, 255, 255, 0.2);
58
+ color: white;
59
+ cursor: pointer;
60
+ transition: all 0.2s ease;
61
+ display: flex;
62
+ align-items: center;
63
+ justify-content: center;
64
+ }
65
+
66
+ .glass-button:hover {
67
+ background: rgba(255, 255, 255, 0.2);
68
+ transform: translateY(-1px);
69
+ box-shadow: 0 4px 12px rgba(0,0,0,0.2);
70
+ }
71
+
72
+ .glass-button:active {
73
+ transform: scale(0.95);
74
+ }
75
+
76
+ .glass-input {
77
+ background: rgba(0, 0, 0, 0.2);
78
+ border: 1px solid rgba(255, 255, 255, 0.1);
79
+ color: white;
80
+ padding: 12px 16px;
81
+ border-radius: 24px;
82
+ outline: none;
83
+ transition: all 0.3s;
84
+ width: 100%;
85
+ }
86
+
87
+ .glass-input:focus {
88
+ background: rgba(0, 0, 0, 0.4);
89
+ border-color: rgba(255, 255, 255, 0.3);
90
+ box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
91
+ }
92
+
93
+ /* --- 3. LAYOUT --- */
94
+ #app-container {
95
+ width: 100%;
96
+ height: 100%;
97
+ max-width: 1400px;
98
+ display: flex;
99
+ position: relative;
100
+ }
101
+
102
+ /* Sidebar */
103
+ #sidebar {
104
+ width: 320px;
105
+ height: 100%;
106
+ display: flex;
107
+ flex-direction: column;
108
+ border-left: 1px solid var(--glass-border);
109
+ z-index: 20;
110
+ transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
111
+ }
112
+
113
+ .sidebar-header {
114
+ padding: 20px;
115
+ border-bottom: 1px solid var(--glass-border);
116
+ display: flex;
117
+ justify-content: space-between;
118
+ align-items: center;
119
+ }
120
+
121
+ .room-list {
122
+ flex: 1;
123
+ overflow-y: auto;
124
+ padding: 10px;
125
+ }
126
+
127
+ .room-item {
128
+ padding: 15px;
129
+ margin-bottom: 8px;
130
+ border-radius: 16px;
131
+ cursor: pointer;
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 12px;
135
+ transition: all 0.2s;
136
+ border: 1px solid transparent;
137
+ }
138
+
139
+ .room-item:hover {
140
+ background: rgba(255, 255, 255, 0.05);
141
+ }
142
+
143
+ .room-item.active {
144
+ background: rgba(255, 255, 255, 0.1);
145
+ border-color: var(--glass-highlight);
146
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
147
+ }
148
+
149
+ .room-avatar {
150
+ width: 48px;
151
+ height: 48px;
152
+ border-radius: 50%;
153
+ background: var(--primary-gradient);
154
+ display: flex;
155
+ align-items: center;
156
+ justify-content: center;
157
+ font-weight: bold;
158
+ font-size: 1.2rem;
159
+ box-shadow: 0 4px 10px rgba(0,0,0,0.2);
160
+ }
161
+
162
+ /* Main Chat Area */
163
+ #main-chat {
164
+ flex: 1;
165
+ display: flex;
166
+ flex-direction: column;
167
+ position: relative;
168
+ background: rgba(0,0,0,0.1); /* Slightly darker for depth */
169
+ }
170
+
171
+ .chat-header {
172
+ height: 70px;
173
+ padding: 0 24px;
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: space-between;
177
+ border-bottom: 1px solid var(--glass-border);
178
+ background: rgba(255, 255, 255, 0.03);
179
+ }
180
+
181
+ .chat-messages {
182
+ flex: 1;
183
+ overflow-y: auto;
184
+ padding: 24px;
185
+ display: flex;
186
+ flex-direction: column;
187
+ gap: 16px;
188
+ scroll-behavior: smooth;
189
+ }
190
+
191
+ /* Message Bubbles */
192
+ .message-wrapper {
193
+ display: flex;
194
+ width: 100%;
195
+ animation: messagePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
196
+ }
197
+
198
+ .message-wrapper.me {
199
+ justify-content: flex-start; /* RTL: Me is on right visually, but flex-start in RTL context */
200
+ flex-direction: row-reverse;
201
+ }
202
+
203
+ .message-wrapper.other {
204
+ justify-content: flex-start;
205
+ }
206
+
207
+ .message-bubble {
208
+ max-width: 70%;
209
+ padding: 12px 18px;
210
+ line-height: 1.5;
211
+ position: relative;
212
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
213
+ font-size: 0.95rem;
214
+ }
215
+
216
+ .message-bubble.me {
217
+ background: var(--message-me);
218
+ border-radius: 20px 20px 4px 20px;
219
+ color: white;
220
+ }
221
+
222
+ .message-bubble.other {
223
+ background: var(--message-other);
224
+ backdrop-filter: blur(10px);
225
+ border: 1px solid rgba(255,255,255,0.1);
226
+ border-radius: 20px 20px 20px 4px;
227
+ color: var(--text-main);
228
+ }
229
+
230
+ .message-time {
231
+ font-size: 0.7rem;
232
+ opacity: 0.7;
233
+ margin-top: 6px;
234
+ display: block;
235
+ text-align: left;
236
+ }
237
+
238
+ /* Input Area */
239
+ .chat-input-area {
240
+ padding: 20px 24px;
241
+ border-top: 1px solid var(--glass-border);
242
+ display: flex;
243
+ gap: 12px;
244
+ align-items: center;
245
+ background: rgba(0,0,0,0.2);
246
+ }
247
+
248
+ .icon-btn {
249
+ width: 44px;
250
+ height: 44px;
251
+ border-radius: 50%;
252
+ font-size: 1.2rem;
253
+ }
254
+
255
+ .send-btn {
256
+ background: var(--primary-gradient);
257
+ border: none;
258
+ width: 48px;
259
+ height: 48px;
260
+ border-radius: 50%;
261
+ color: white;
262
+ font-size: 1.2rem;
263
+ cursor: pointer;
264
+ transition: transform 0.2s;
265
+ box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
266
+ }
267
+
268
+ .send-btn:hover {
269
+ transform: scale(1.05);
270
+ }
271
+
272
+ .send-btn:active {
273
+ transform: scale(0.95);
274
+ }
275
+
276
+ /* --- 4. MODALS & OVERLAYS --- */
277
+ .modal-overlay {
278
+ position: fixed;
279
+ inset: 0;
280
+ background: rgba(0,0,0,0.6);
281
+ backdrop-filter: blur(5px);
282
+ z-index: 100;
283
+ display: flex;
284
+ align-items: center;
285
+ justify-content: center;
286
+ opacity: 0;
287
+ pointer-events: none;
288
+ transition: opacity 0.3s;
289
+ }
290
+
291
+ .modal-overlay.active {
292
+ opacity: 1;
293
+ pointer-events: auto;
294
+ }
295
+
296
+ .modal-content {
297
+ width: 90%;
298
+ max-width: 400px;
299
+ padding: 24px;
300
+ border-radius: 24px;
301
+ transform: scale(0.9);
302
+ transition: transform 0.3s;
303
+ }
304
+
305
+ .modal-overlay.active .modal-content {
306
+ transform: scale(1);
307
+ }
308
+
309
+ /* Sticker Picker */
310
+ .sticker-panel {
311
+ position: absolute;
312
+ bottom: 90px;
313
+ left: 24px;
314
+ right: 24px;
315
+ background: rgba(20, 20, 35, 0.95);
316
+ backdrop-filter: blur(20px);
317
+ border: 1px solid var(--glass-border);
318
+ border-radius: 20px;
319
+ padding: 15px;
320
+ display: grid;
321
+ grid-template-columns: repeat(6, 1fr);
322
+ gap: 10px;
323
+ max-height: 250px;
324
+ overflow-y: auto;
325
+ box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
326
+ opacity: 0;
327
+ transform: translateY(20px);
328
+ pointer-events: none;
329
+ transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
330
+ z-index: 50;
331
+ }
332
+
333
+ .sticker-panel.open {
334
+ opacity: 1;
335
+ transform: translateY(0);
336
+ pointer-events: auto;
337
+ }
338
+
339
+ .sticker-item {
340
+ font-size: 1.8rem;
341
+ text-align: center;
342
+ cursor: pointer;
343
+ padding: 5px;
344
+ border-radius: 8px;
345
+ transition: background 0.2s;
346
+ }
347
+ .sticker-item:hover { background: rgba(255,255,255,0.1); }
348
+
349
+ /* --- 5. ANIMATIONS --- */
350
+ @keyframes messagePop {
351
+ 0% { opacity: 0; transform: scale(0.8) translateY(20px); }
352
+ 100% { opacity: 1; transform: scale(1) translateY(0); }
353
+ }
354
+
355
+ @keyframes fadeIn {
356
+ from { opacity: 0; }
357
+ to { opacity: 1; }
358
+ }
359
+
360
+ /* --- 6. RESPONSIVE --- */
361
+ @media (max-width: 768px) {
362
+ #sidebar {
363
+ position: absolute;
364
+ right: 0;
365
+ top: 0;
366
+ bottom: 0;
367
+ width: 80%;
368
+ transform: translateX(100%);
369
+ background: rgba(20, 20, 40, 0.95); /* Solid-ish on mobile for readability */
370
+ }
371
+ #sidebar.open {
372
+ transform: translateX(0);
373
+ }
374
+ .mobile-overlay {
375
+ position: fixed;
376
+ inset: 0;
377
+ background: rgba(0,0,0,0.5);
378
+ z-index: 15;
379
+ opacity: 0;
380
+ pointer-events: none;
381
+ transition: opacity 0.3s;
382
+ }
383
+ .mobile-overlay.active {
384
+ opacity: 1;
385
+ pointer-events: auto;
386
+ }
387
+ .chat-header {
388
+ padding: 0 16px;
389
+ }
390
+ .chat-messages {
391
+ padding: 16px;
392
+ }
393
+ }
394
+
395
+ /* Scrollbar */
396
+ ::-webkit-scrollbar { width: 6px; }
397
+ ::-webkit-scrollbar-track { background: transparent; }
398
+ ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
399
+ ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
400
+
401
+ </style>
402
+ </head>
403
+ <body>
404
+
405
+ <div id="app-container">
406
+ <!-- Sidebar -->
407
+ <aside id="sidebar" class="glass-panel">
408
+ <div class="sidebar-header">
409
+ <h2 style="font-weight: 500; display:flex; align-items:center; gap:10px;">
410
+ <span style="font-size:1.5rem;">💬</span> گفتگوها
411
+ </h2>
412
+ <button class="glass-button icon-btn" onclick="openModal()" title="گفتگوی جدید">
413
+ <span>+</span>
414
+ </button>
415
+ </div>
416
+
417
+ <div class="room-list" id="roomList">
418
+ <!-- Rooms injected by JS -->
419
+ </div>
420
+
421
+ <div style="padding: 20px; border-top: 1px solid var(--glass-border);">
422
+ <div style="display:flex; align-items:center; gap: 12px; opacity: 0.8;">
423
+ <div style="width: 36px; height: 36px; border-radius: 50%; background: #333; display:flex; align-items:center; justify-content:center; border: 2px solid rgba(255,255,255,0.2);">
424
+ 👤
425
+ </div>
426
+ <div style="font-size: 0.9rem;">
427
+ <div style="font-weight: bold;">کاربر مهمان</div>
428
+ <div style="font-size: 0.75rem; opacity: 0.7;">آنلاین</div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </aside>
433
+
434
+ <!-- Mobile Overlay -->
435
+ <div id="mobileOverlay" class="mobile-overlay" onclick="toggleSidebar()"></div>
436
+
437
+ <!-- Main Chat -->
438
+ <main id="main-chat">
439
+ <header class="chat-header glass-panel" style="border-top:none; border-right:none; border-left:none;">
440
+ <div style="display:flex; align-items:center; gap: 15px;">
441
+ <button class="glass-button icon-btn" style="display:none;" id="menuBtn" onclick="toggleSidebar()">
442
+ ☰
443
+ </button>
444
+ <div>
445
+ <h3 id="currentRoomTitle" style="font-weight: 500; margin-bottom: 2px;">عمومی</h3>
446
+ <span id="currentRoomStatus" style="font-size: 0.75rem; opacity: 0.7;">۱۲ عضو آنلاین</span>
447
+ </div>
448
+ </div>
449
+ <div style="display:flex; gap: 10px;">
450
+ <button class="glass-button icon-btn">⋮</button>
451
+ </div>
452
+ </header>
453
+
454
+ <div class="chat-messages" id="chatMessages">
455
+ <!-- Messages injected by JS -->
456
+ </div>
457
+
458
+ <!-- Sticker Panel -->
459
+ <div id="stickerPanel" class="sticker-panel">
460
+ <div class="sticker-item" onclick="sendSticker('😂')">😂</div>
461
+ <div class="sticker-item" onclick="sendSticker('❤️')">❤️</div>
462
+ <div class="sticker-item" onclick="sendSticker('🔥')">🔥</div>
463
+ <div class="sticker-item" onclick="sendSticker('👍')">👍</div>
464
+ <div class="sticker-item" onclick="sendSticker('🎉')">🎉</div>
465
+ <div class="sticker-item" onclick="sendSticker('🤔')">🤔</div>
466
+ <div class="sticker-item" onclick="sendSticker('😭')">😭</div>
467
+ <div class="sticker-item" onclick="sendSticker('😎')">😎</div>
468
+ <div class="sticker-item" onclick="sendSticker('🥳')">🥳</div>
469
+ <div class="sticker-item" onclick="sendSticker('🤯')">🤯</div>
470
+ <div class="sticker-item" onclick="sendSticker('👀')">👀</div>
471
+ <div class="sticker-item" onclick="sendSticker('🌈')">🌈</div>
472
+ </div>
473
+
474
+ <div class="chat-input-area">
475
+ <button class="glass-button icon-btn" onclick="toggleStickers()" id="stickerBtn">😊</button>
476
+ <input type="text" id="messageInput" class="glass-input" placeholder="پیام خود را بنویسید..." onkeypress="handleKeyPress(event)">
477
+ <button class="send-btn" onclick="sendMessage()">
478
+ ➤
479
+ </button>
480
+ </div>
481
+ </main>
482
+ </div>
483
+
484
+ <!-- New Room Modal -->
485
+ <div id="newRoomModal" class="modal-overlay">
486
+ <div class="modal-content glass-panel">
487
+ <h3 style="margin-bottom: 20px; text-align: center;">گفتگوی جدید</h3>
488
+ <input type="text" id="newRoomName" class="glass-input" placeholder="نام گفتگو..." style="margin-bottom: 15px;">
489
+ <div style="display:flex; gap: 10px;">
490
+ <button class="glass-button" style="flex:1; padding: 12px; border-radius: 12px;" onclick="closeModal()">انصراف</button>
491
+ <button class="send-btn" style="flex:1; border-radius: 12px; width: auto;" onclick="createRoom()">ایجاد</button>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <script>
497
+ // --- STATE MANAGEMENT ---
498
+ const state = {
499
+ rooms: [
500
+ { id: 1, name: 'عمومی', avatar: '🌐', messages: [
501
+ { id: 1, text: 'سلام به همه! 👋', sender: 'other', time: '10:00' },
502
+ { id: 2, text: 'سلام، حالتون چطوره؟', sender: 'me', time: '10:05' }
503
+ ]},
504
+ { id: 2, name: 'طراحی UI', avatar: '🎨', messages: [
505
+ { id: 1, text: 'این رنگ جدید عالیه!', sender: 'other', time: '09:30' }
506
+ ]},
507
+ { id: 3, name: 'پروژه مخفی', avatar: '🚀', messages: []}
508
+ ],
509
+ activeRoomId: 1,
510
+ showStickers: false
511
+ };
512
+
513
+ // --- DOM ELEMENTS ---
514
+ const roomListEl = document.getElementById('roomList');
515
+ const chatMessagesEl = document.getElementById('chatMessages');
516
+ const messageInput = document.getElementById('messageInput');
517
+ const currentRoomTitle = document.getElementById('currentRoomTitle');
518
+ const stickerPanel = document.getElementById('stickerPanel');
519
+ const modal = document.getElementById('newRoomModal');
520
+ const sidebar = document.getElementById('sidebar');
521
+ const mobileOverlay = document.getElementById('mobileOverlay');
522
+ const menuBtn = document.getElementById('menuBtn');
523
+
524
+ // --- INITIALIZATION ---
525
+ function init() {
526
+ renderRooms();
527
+ loadRoom(state.activeRoomId);
528
+
529
+ // Check mobile
530
+ if(window.innerWidth <= 768) {
531
+ menuBtn.style.display = 'flex';
532
+ }
533
+ window.addEventListener('resize', () => {
534
+ menuBtn.style.display = window.innerWidth <= 768 ? 'flex' : 'none';
535
+ if(window.innerWidth > 768) {
536
+ sidebar.classList.remove('open');
537
+ mobileOverlay.classList.remove('active');
538
+ }
539
+ });
540
+ }
541
+
542
+ // --- RENDER FUNCTIONS ---
543
+ function renderRooms() {
544
+ roomListEl.innerHTML = '';
545
+ state.rooms.forEach(room => {
546
+ const isActive = room.id === state.activeRoomId;
547
+ const div = document.createElement('div');
548
+ div.className = `room-item glass-panel ${isActive ? 'active' : ''}`;
549
+ div.onclick = () => loadRoom(room.id);
550
+
551
+ // Get last message preview
552
+ const lastMsg = room.messages.length > 0 ? room.messages[room.messages.length-1].text : 'بدون پیام...';
553
+
554
+ div.innerHTML = `
555
+ <div class="room-avatar">${room.avatar}</div>
556
+ <div style="flex: 1; overflow: hidden;">
557
+ <div style="display:flex; justify-content:space-between; margin-bottom: 4px;">
558
+ <span style="font-weight: 600;">${room.name}</span>
559
+ <span style="font-size: 0.7rem; opacity: 0.6;">${room.messages.length > 0 ? room.messages[room.messages.length-1].time : ''}</span>
560
+ </div>
561
+ <div style="font-size: 0.8rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
562
+ ${lastMsg}
563
+ </div>
564
+ </div>
565
+ `;
566
+ roomListEl.appendChild(div);
567
+ });
568
+ }
569
+
570
+ function loadRoom(id) {
571
+ state.activeRoomId = id;
572
+ const room = state.rooms.find(r => r.id === id);
573
+
574
+ // Update Header
575
+ currentRoomTitle.innerText = room.name;
576
+
577
+ // Render Messages
578
+ chatMessagesEl.innerHTML = '';
579
+ room.messages.forEach(msg => appendMessageToDOM(msg));
580
+
581
+ // Scroll to bottom
582
+ scrollToBottom();
583
+
584
+ // Update Sidebar UI
585
+ renderRooms();
586
+
587
+ // Close mobile sidebar if open
588
+ if(window.innerWidth <= 768) {
589
+ toggleSidebar();
590
+ }
591
+ }
592
+
593
+ function appendMessageToDOM(msg) {
594
+ const wrapper = document.createElement('div');
595
+ wrapper.className = `message-wrapper ${msg.sender}`;
596
+
597
+ const bubble = document.createElement('div');
598
+ bubble.className = `message-bubble ${msg.sender}`;
599
+
600
+ // Check if text is emoji only (simple check)
601
+ const isEmoji = /^(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])+$/.test(msg.text);
602
+
603
+ if(isEmoji) {
604
+ bubble.style.fontSize = '2.5rem';
605
+ bubble.style.background = 'transparent';
606
+ bubble.style.boxShadow = 'none';
607
+ bubble.style.padding = '0';
608
+ }
609
+
610
+ bubble.innerHTML = `
611
+ ${msg.text}
612
+ <span class="message-time">${msg.time}</span>
613
+ `;
614
+
615
+ wrapper.appendChild(bubble);
616
+ chatMessagesEl.appendChild(wrapper);
617
+ scrollToBottom();
618
+ }
619
+
620
+ // --- ACTIONS ---
621
+ function sendMessage() {
622
+ const text = messageInput.value.trim();
623
+ if(!text) return;
624
+
625
+ const newMsg = {
626
+ id: Date.now(),
627
+ text: text,
628
+ sender: 'me',
629
+ time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
630
+ };
631
+
632
+ // Add to state
633
+ const room = state.rooms.find(r => r.id === state.activeRoomId);
634
+ room.messages.push(newMsg);
635
+
636
+ // Update UI
637
+ appendMessageToDOM(newMsg);
638
+ messageInput.value = '';
639
+ renderRooms(); // Update preview in sidebar
640
+
641
+ // Simulate Reply
642
+ setTimeout(() => {
643
+ const replyMsg = {
644
+ id: Date.now() + 1,
645
+ text: 'پیام شما دریافت شد ✅',
646
+ sender: 'other',
647
+ time: new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
648
+ };
649
+ room.messages.push(replyMsg);
650
+ appendMessageToDOM(replyMsg);
651
+ renderRooms();
652
+ }, 1500);
653
+ }
654
+
655
+ function sendSticker(emoji) {
656
+ messageInput.value = emoji;
657
+ toggleStickers();
658
+ sendMessage();
659
+ }
660
+
661
+ function handleKeyPress(e) {
662
+ if(e.key === 'Enter') sendMessage();
663
+ }
664
+
665
+ function scrollToBottom() {
666
+ chatMessagesEl.scrollTop = chatMessagesEl.scrollHeight;
667
+ }
668
+
669
+ function toggleStickers() {
670
+ state.showStickers = !state.showStickers;
671
+ if(state.showStickers) {
672
+ stickerPanel.classList.add('open');
673
+ document.getElementById('stickerBtn').style.background = 'rgba(255,255,255,0.3)';
674
+ } else {
675
+ stickerPanel.classList.remove('open');
676
+ document.getElementById('stickerBtn').style.background = '';
677
+ }
678
+ }
679
+
680
+ // --- MODAL LOGIC ---
681
+ function openModal() {
682
+ modal.classList.add('active');
683
+ document.getElementById('newRoomName').focus();
684
+ }
685
+
686
+ function closeModal() {
687
+ modal.classList.remove('active');
688
+ document.getElementById('newRoomName').value = '';
689
+ }
690
+
691
+ function createRoom() {
692
+ const name = document.getElementById('newRoomName').value.trim();
693
+ if(name) {
694
+ const newRoom = {
695
+ id: Date.now(),
696
+ name: name,
697
+ avatar: '💬',
698
+ messages: []
699
+ };
700
+ state.rooms.unshift(newRoom); // Add to top
701
+ renderRooms();
702
+ loadRoom(newRoom.id);
703
+ closeModal();
704
+ }
705
+ }
706
+
707
+ // --- SIDEBAR LOGIC ---
708
+ function toggleSidebar() {
709
+ sidebar.classList.toggle('open');
710
+ mobileOverlay.classList.toggle('active');
711
+ }
712
+
713
+ // Close sticker panel when clicking outside
714
+ document.addEventListener('click', (e) => {
715
+ if(!e.target.closest('.chat-input-area') && !e.target.closest('.sticker-panel')) {
716
+ stickerPanel.classList.remove('open');
717
+ state.showStickers = false;
718
+ document.getElementById('stickerBtn').style.background = '';
719
+ }
720
+ });
721
+
722
+ // Run
723
+ init();
724
+
725
+ </script>
726
+ </body>
727
+ </html>