Hugging Face's logo

Spaces:
samirerty
/
anycoder-b6fc935a
Running

App Files Community
samirerty commited on
Commit
821df27
·
verified ·
1 Parent(s): 21d320c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +752 -19
index.html CHANGED
@@ -1,19 +1,752 @@
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>چت روم مینیمال</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ @font-face {
10
+ font-family: 'Vazirmatn';
11
+ src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
12
+ font-weight: normal;
13
+ font-style: normal;
14
+ }
15
+
16
+ :root {
17
+ --primary-color: #4361ee;
18
+ --secondary-color: #3a0ca3;
19
+ --accent-color: #f72585;
20
+ --bg-color: rgba(255, 255, 255, 0.15);
21
+ --text-color: #fff;
22
+ --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
23
+ --border: 1px solid rgba(255, 255, 255, 0.18);
24
+ --blur: blur(10px);
25
+ }
26
+
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ font-family: 'Vazirmatn', sans-serif;
32
+ }
33
+
34
+ body {
35
+ background: linear-gradient(135deg, #3a0ca3, #4361ee);
36
+ color: var(--text-color);
37
+ min-height: 100vh;
38
+ padding: 20px;
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ .header {
43
+ display: flex;
44
+ justify-content: space-between;
45
+ align-items: center;
46
+ margin-bottom: 20px;
47
+ }
48
+
49
+ .logo {
50
+ font-size: 1.5rem;
51
+ font-weight: bold;
52
+ }
53
+
54
+ .built-with {
55
+ font-size: 0.8rem;
56
+ color: rgba(255, 255, 255, 0.7);
57
+ text-decoration: none;
58
+ }
59
+
60
+ .container {
61
+ display: flex;
62
+ flex-direction: column;
63
+ gap: 20px;
64
+ max-width: 1200px;
65
+ margin: 0 auto;
66
+ }
67
+
68
+ .glass-card {
69
+ background: var(--bg-color);
70
+ backdrop-filter: var(--blur);
71
+ -webkit-backdrop-filter: var(--blur);
72
+ border-radius: 15px;
73
+ padding: 20px;
74
+ box-shadow: var(--shadow);
75
+ border: var(--border);
76
+ }
77
+
78
+ .auth-section {
79
+ display: flex;
80
+ flex-direction: column;
81
+ gap: 15px;
82
+ }
83
+
84
+ .auth-title {
85
+ font-size: 1.2rem;
86
+ margin-bottom: 10px;
87
+ }
88
+
89
+ .input-group {
90
+ display: flex;
91
+ flex-direction: column;
92
+ gap: 5px;
93
+ }
94
+
95
+ label {
96
+ font-size: 0.9rem;
97
+ }
98
+
99
+ input {
100
+ background: rgba(255, 255, 255, 0.2);
101
+ border: none;
102
+ border-radius: 8px;
103
+ padding: 12px 15px;
104
+ color: var(--text-color);
105
+ font-size: 1rem;
106
+ }
107
+
108
+ input::placeholder {
109
+ color: rgba(255, 255, 255, 0.6);
110
+ }
111
+
112
+ button {
113
+ background: var(--accent-color);
114
+ color: white;
115
+ border: none;
116
+ border-radius: 8px;
117
+ padding: 12px;
118
+ font-size: 1rem;
119
+ cursor: pointer;
120
+ transition: all 0.3s ease;
121
+ }
122
+
123
+ button:hover {
124
+ transform: translateY(-2px);
125
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
126
+ }
127
+
128
+ .rooms-section {
129
+ display: none;
130
+ }
131
+
132
+ .rooms-header {
133
+ display: flex;
134
+ justify-content: space-between;
135
+ align-items: center;
136
+ margin-bottom: 15px;
137
+ }
138
+
139
+ .room-list {
140
+ display: grid;
141
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
142
+ gap: 15px;
143
+ }
144
+
145
+ .room-card {
146
+ background: rgba(255, 255, 255, 0.1);
147
+ border-radius: 10px;
148
+ padding: 15px;
149
+ cursor: pointer;
150
+ transition: all 0.3s ease;
151
+ }
152
+
153
+ .room-card:hover {
154
+ background: rgba(255, 255, 255, 0.2);
155
+ transform: translateY(-3px);
156
+ }
157
+
158
+ .room-name {
159
+ font-weight: bold;
160
+ margin-bottom: 5px;
161
+ }
162
+
163
+ .room-members {
164
+ font-size: 0.8rem;
165
+ color: rgba(255, 255, 255, 0.7);
166
+ }
167
+
168
+ .chat-section {
169
+ display: none;
170
+ flex-direction: column;
171
+ height: 70vh;
172
+ }
173
+
174
+ .chat-header {
175
+ display: flex;
176
+ justify-content: space-between;
177
+ align-items: center;
178
+ padding-bottom: 15px;
179
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
180
+ margin-bottom: 15px;
181
+ }
182
+
183
+ .chat-messages {
184
+ flex: 1;
185
+ overflow-y: auto;
186
+ padding: 10px;
187
+ display: flex;
188
+ flex-direction: column;
189
+ gap: 15px;
190
+ }
191
+
192
+ .message {
193
+ max-width: 70%;
194
+ padding: 12px 15px;
195
+ border-radius: 12px;
196
+ position: relative;
197
+ }
198
+
199
+ .received {
200
+ align-self: flex-start;
201
+ background: rgba(255, 255, 255, 0.1);
202
+ border-bottom-right-radius: 0;
203
+ }
204
+
205
+ .sent {
206
+ align-self: flex-end;
207
+ background: var(--accent-color);
208
+ border-bottom-left-radius: 0;
209
+ }
210
+
211
+ .message-sender {
212
+ font-size: 0.8rem;
213
+ font-weight: bold;
214
+ margin-bottom: 5px;
215
+ }
216
+
217
+ .message-content {
218
+ word-break: break-word;
219
+ }
220
+
221
+ .message-time {
222
+ font-size: 0.7rem;
223
+ opacity: 0.7;
224
+ text-align: left;
225
+ margin-top: 5px;
226
+ }
227
+
228
+ .message-actions {
229
+ position: absolute;
230
+ top: -25px;
231
+ right: 0;
232
+ background: rgba(0, 0, 0, 0.7);
233
+ border-radius: 20px;
234
+ padding: 5px 10px;
235
+ display: none;
236
+ gap: 10px;
237
+ }
238
+
239
+ .message:hover .message-actions {
240
+ display: flex;
241
+ }
242
+
243
+ .message-action {
244
+ color: white;
245
+ font-size: 0.8rem;
246
+ cursor: pointer;
247
+ }
248
+
249
+ .chat-input {
250
+ display: flex;
251
+ gap: 10px;
252
+ margin-top: 15px;
253
+ }
254
+
255
+ .chat-input input {
256
+ flex: 1;
257
+ }
258
+
259
+ .reactions {
260
+ display: flex;
261
+ gap: 5px;
262
+ margin-top: 5px;
263
+ }
264
+
265
+ .reaction {
266
+ font-size: 0.9rem;
267
+ cursor: pointer;
268
+ transition: all 0.2s ease;
269
+ }
270
+
271
+ .reaction:hover {
272
+ transform: scale(1.2);
273
+ }
274
+
275
+ .reply-preview {
276
+ background: rgba(255, 255, 255, 0.1);
277
+ border-radius: 8px;
278
+ padding: 8px;
279
+ margin-bottom: 10px;
280
+ border-right: 3px solid var(--accent-color);
281
+ display: none;
282
+ }
283
+
284
+ .reply-close {
285
+ cursor: pointer;
286
+ margin-left: 5px;
287
+ }
288
+
289
+ .modal {
290
+ position: fixed;
291
+ top: 0;
292
+ left: 0;
293
+ right: 0;
294
+ bottom: 0;
295
+ background: rgba(0, 0, 0, 0.5);
296
+ display: none;
297
+ justify-content: center;
298
+ align-items: center;
299
+ z-index: 100;
300
+ }
301
+
302
+ .modal-content {
303
+ background: var(--bg-color);
304
+ backdrop-filter: var(--blur);
305
+ -webkit-backdrop-filter: var(--blur);
306
+ border-radius: 15px;
307
+ padding: 20px;
308
+ width: 90%;
309
+ max-width: 400px;
310
+ box-shadow: var(--shadow);
311
+ border: var(--border);
312
+ }
313
+
314
+ .modal-header {
315
+ display: flex;
316
+ justify-content: space-between;
317
+ align-items: center;
318
+ margin-bottom: 15px;
319
+ }
320
+
321
+ .modal-close {
322
+ cursor: pointer;
323
+ font-size: 1.5rem;
324
+ }
325
+
326
+ .emoji-picker {
327
+ display: grid;
328
+ grid-template-columns: repeat(6, 1fr);
329
+ gap: 10px;
330
+ margin-top: 15px;
331
+ }
332
+
333
+ .emoji {
334
+ font-size: 1.5rem;
335
+ cursor: pointer;
336
+ text-align: center;
337
+ transition: all 0.2s ease;
338
+ }
339
+
340
+ .emoji:hover {
341
+ transform: scale(1.2);
342
+ }
343
+
344
+ @media (max-width: 768px) {
345
+ .room-list {
346
+ grid-template-columns: 1fr;
347
+ }
348
+
349
+ .message {
350
+ max-width: 85%;
351
+ }
352
+
353
+ .chat-section {
354
+ height: 65vh;
355
+ }
356
+ }
357
+ </style>
358
+ </head>
359
+ <body>
360
+ <div class="container">
361
+ <div class="header">
362
+ <div class="logo">چت روم مینیمال</div>
363
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a>
364
+ </div>
365
+
366
+ <!-- Authentication Section -->
367
+ <div class="glass-card auth-section" id="authSection">
368
+ <h2 class="auth-title">ورود به چت روم</h2>
369
+ <div class="input-group">
370
+ <label for="phone">شماره موبایل</label>
371
+ <input type="tel" id="phone" placeholder="09xxxxxxxxx">
372
+ </div>
373
+ <button id="loginBtn">دریافت کد تأیید</button>
374
+ </div>
375
+
376
+ <!-- Rooms Section -->
377
+ <div class="glass-card rooms-section" id="roomsSection">
378
+ <div class="rooms-header">
379
+ <h2>اتاق‌های چت</h2>
380
+ <button id="createRoomBtn">اتاق جدید</button>
381
+ </div>
382
+ <div class="room-list" id="roomList">
383
+ <!-- Rooms will be added here dynamically -->
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Chat Section -->
388
+ <div class="glass-card chat-section" id="chatSection">
389
+ <div class="chat-header">
390
+ <h2 id="currentRoomName">اتاق عمومی</h2>
391
+ <button id="leaveRoomBtn">خروج از اتاق</button>
392
+ </div>
393
+
394
+ <div class="reply-preview" id="replyPreview">
395
+ <span id="replyContent"></span>
396
+ <span class="reply-close" id="closeReply">&times;</span>
397
+ </div>
398
+
399
+ <div class="chat-messages" id="chatMessages">
400
+ <!-- Messages will be added here dynamically -->
401
+ </div>
402
+
403
+ <div class="chat-input">
404
+ <input type="text" id="messageInput" placeholder="پیام خود را بنویسید...">
405
+ <button id="sendMessageBtn">ارسال</button>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Create Room Modal -->
411
+ <div class="modal" id="createRoomModal">
412
+ <div class="modal-content">
413
+ <div class="modal-header">
414
+ <h3>ایجاد اتاق جدید</h3>
415
+ <span class="modal-close" id="closeCreateRoomModal">&times;</span>
416
+ </div>
417
+ <div class="input-group">
418
+ <label for="roomName">نام اتاق</label>
419
+ <input type="text" id="roomName" placeholder="نام اتاق را وارد کنید">
420
+ </div>
421
+ <button id="confirmCreateRoom">ایجاد اتاق</button>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Emoji Reaction Modal -->
426
+ <div class="modal" id="emojiModal">
427
+ <div class="modal-content">
428
+ <div class="modal-header">
429
+ <h3>واکنش خود را انتخاب کنید</h3>
430
+ <span class="modal-close" id="closeEmojiModal">&times;</span>
431
+ </div>
432
+ <div class="emoji-picker">
433
+ <div class="emoji" data-emoji="❤️">❤️</div>
434
+ <div class="emoji" data-emoji="😂">😂</div>
435
+ <div class="emoji" data-emoji="😮">😮</div>
436
+ <div class="emoji" data-emoji="😢">😢</div>
437
+ <div class="emoji" data-emoji="👍">👍</div>
438
+ <div class="emoji" data-emoji="👎">👎</div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <script>
444
+ // DOM Elements
445
+ const authSection = document.getElementById('authSection');
446
+ const roomsSection = document.getElementById('roomsSection');
447
+ const chatSection = document.getElementById('chatSection');
448
+ const roomList = document.getElementById('roomList');
449
+ const chatMessages = document.getElementById('chatMessages');
450
+ const messageInput = document.getElementById('messageInput');
451
+ const sendMessageBtn = document.getElementById('sendMessageBtn');
452
+ const loginBtn = document.getElementById('loginBtn');
453
+ const createRoomBtn = document.getElementById('createRoomBtn');
454
+ const leaveRoomBtn = document.getElementById('leaveRoomBtn');
455
+ const currentRoomName = document.getElementById('currentRoomName');
456
+ const createRoomModal = document.getElementById('createRoomModal');
457
+ const closeCreateRoomModal = document.getElementById('closeCreateRoomModal');
458
+ const confirmCreateRoom = document.getElementById('confirmCreateRoom');
459
+ const roomNameInput = document.getElementById('roomName');
460
+ const replyPreview = document.getElementById('replyPreview');
461
+ const replyContent = document.getElementById('replyContent');
462
+ const closeReply = document.getElementById('closeReply');
463
+ const emojiModal = document.getElementById('emojiModal');
464
+ const closeEmojiModal = document.getElementById('closeEmojiModal');
465
+
466
+ // State
467
+ let currentUser = null;
468
+ let currentRoom = null;
469
+ let rooms = [];
470
+ let replyingToMessage = null;
471
+
472
+ // Sample data for demo
473
+ const sampleRooms = [
474
+ { id: '1', name: 'اتاق عمومی', members: 12 },
475
+ { id: '2', name: 'گروه دوستان', members: 5 },
476
+ { id: '3', name: 'پروژه جدید', members: 3 }
477
+ ];
478
+
479
+ const sampleMessages = {
480
+ '1': [
481
+ { id: '101', sender: 'کاربر ۱', content: 'سلام به همه!', time: '10:30', reactions: {} },
482
+ { id: '102', sender: 'کاربر ۲', content: 'سلام دوستان! چطورید؟', time: '10:32', reactions: {} },
483
+ { id: '103', sender: 'کاربر ۳', content: 'خوبم ممنون! پروژه چطور پیش میره؟', time: '10:35', reactions: {} }
484
+ ],
485
+ '2': [
486
+ { id: '201', sender: 'علی', content: 'امشب بریم سینما؟', time: '18:20', reactions: {} },
487
+ { id: '202', sender: 'رضا', content: 'چه فیلمی؟', time: '18:22', reactions: {} }
488
+ ],
489
+ '3': [
490
+ { id: '301', sender: 'مدیر پروژه', content: 'تسک‌های این هفته رو بررسی کنید', time: '09:15', reactions: {} },
491
+ { id: '302', sender: 'برنامه‌نویس', content: 'من بخش بک‌اند رو تموم کردم', time: '11:40', reactions: {} }
492
+ ]
493
+ };
494
+
495
+ // Initialize the app
496
+ function initApp() {
497
+ // Load sample rooms
498
+ rooms = [...sampleRooms];
499
+
500
+ // Event listeners
501
+ loginBtn.addEventListener('click', handleLogin);
502
+ createRoomBtn.addEventListener('click', () => createRoomModal.style.display = 'flex');
503
+ closeCreateRoomModal.addEventListener('click', () => createRoomModal.style.display = 'none');
504
+ confirmCreateRoom.addEventListener('click', createNewRoom);
505
+ leaveRoomBtn.addEventListener('click', leaveRoom);
506
+ sendMessageBtn.addEventListener('click', sendMessage);
507
+ messageInput.addEventListener('keypress', (e) => {
508
+ if (e.key === 'Enter') sendMessage();
509
+ });
510
+ closeReply.addEventListener('click', cancelReply);
511
+ closeEmojiModal.addEventListener('click', () => emojiModal.style.display = 'none');
512
+
513
+ // For demo purposes, we'll simulate a logged in user
514
+ // In a real app, you would have proper authentication
515
+ setTimeout(() => {
516
+ currentUser = { name: 'کاربر مهمان', phone: '09123456789' };
517
+ authSection.style.display = 'none';
518
+ roomsSection.style.display = 'block';
519
+ renderRooms();
520
+ }, 1000);
521
+ }
522
+
523
+ // Handle login
524
+ function handleLogin() {
525
+ const phone = document.getElementById('phone').value;
526
+ if (!phone || phone.length < 10) {
527
+ alert('لطفاً شماره موبایل معتبر وارد کنید');
528
+ return;
529
+ }
530
+
531
+ // In a real app, you would send this to your backend for verification
532
+ console.log('Login with phone:', phone);
533
+
534
+ // Simulate sending verification code
535
+ alert(`کد تأیید به شماره ${phone} ارسال شد`);
536
+
537
+ // For demo, we'll just proceed after a delay
538
+ setTimeout(() => {
539
+ currentUser = { name: 'کاربر مهمان', phone };
540
+ authSection.style.display = 'none';
541
+ roomsSection.style.display = 'block';
542
+ renderRooms();
543
+ }, 2000);
544
+ }
545
+
546
+ // Render rooms list
547
+ function renderRooms() {
548
+ roomList.innerHTML = '';
549
+
550
+ rooms.forEach(room => {
551
+ const roomCard = document.createElement('div');
552
+ roomCard.className = 'room-card';
553
+ roomCard.innerHTML = `
554
+ <div class="room-name">${room.name}</div>
555
+ <div class="room-members">${room.members} عضو</div>
556
+ `;
557
+ roomCard.addEventListener('click', () => joinRoom(room));
558
+ roomList.appendChild(roomCard);
559
+ });
560
+ }
561
+
562
+ // Create new room
563
+ function createNewRoom() {
564
+ const name = roomNameInput.value.trim();
565
+ if (!name) {
566
+ alert('لطفاً نام اتاق را وارد کنید');
567
+ return;
568
+ }
569
+
570
+ if (rooms.length >= 3) {
571
+ alert('شما نمی‌توانید بیش از ۳ اتاق ایجاد کنید');
572
+ return;
573
+ }
574
+
575
+ const newRoom = {
576
+ id: Date.now().toString(),
577
+ name,
578
+ members: 1
579
+ };
580
+
581
+ rooms.push(newRoom);
582
+ sampleMessages[newRoom.id] = [];
583
+ renderRooms();
584
+ roomNameInput.value = '';
585
+ createRoomModal.style.display = 'none';
586
+ }
587
+
588
+ // Join a room
589
+ function joinRoom(room) {
590
+ currentRoom = room;
591
+ roomsSection.style.display = 'none';
592
+ chatSection.style.display = 'flex';
593
+ currentRoomName.textContent = room.name;
594
+
595
+ // Clear chat messages
596
+ chatMessages.innerHTML = '';
597
+
598
+ // Load messages for this room
599
+ const messages = sampleMessages[room.id] || [];
600
+ messages.forEach(message => {
601
+ addMessageToChat(message, false);
602
+ });
603
+ }
604
+
605
+ // Leave current room
606
+ function leaveRoom() {
607
+ currentRoom = null;
608
+ chatSection.style.display = 'none';
609
+ roomsSection.style.display = 'block';
610
+ replyPreview.style.display = 'none';
611
+ replyingToMessage = null;
612
+ }
613
+
614
+ // Send message
615
+ function sendMessage() {
616
+ const content = messageInput.value.trim();
617
+ if (!content) return;
618
+
619
+ const message = {
620
+ id: Date.now().toString(),
621
+ sender: currentUser.name,
622
+ content,
623
+ time: new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' }),
624
+ reactions: {},
625
+ replyTo: replyingToMessage ? replyingToMessage.id : null
626
+ };
627
+
628
+ // Add to sample messages (in a real app, this would go to your backend)
629
+ sampleMessages[currentRoom.id].push(message);
630
+
631
+ // Add to UI
632
+ addMessageToChat(message, true);
633
+
634
+ // Clear input and reset reply
635
+ messageInput.value = '';
636
+ cancelReply();
637
+
638
+ // Scroll to bottom
639
+ chatMessages.scrollTop = chatMessages.scrollHeight;
640
+ }
641
+
642
+ // Add message to chat UI
643
+ function addMessageToChat(message, isSent) {
644
+ const messageDiv = document.createElement('div');
645
+ messageDiv.className = `message ${isSent ? 'sent' : 'received'}`;
646
+ messageDiv.dataset.id = message.id;
647
+
648
+ let replyContent = '';
649
+ if (message.replyTo) {
650
+ const repliedMessage = sampleMessages[currentRoom.id].find(m => m.id === message.replyTo);
651
+ if (repliedMessage) {
652
+ replyContent = `پاسخ به ${repliedMessage.sender}: ${repliedMessage.content.substring(0, 30)}${repliedMessage.content.length > 30 ? '...' : ''}`;
653
+ }
654
+ }
655
+
656
+ messageDiv.innerHTML = `
657
+ <div class="message-sender">${message.sender}</div>
658
+ ${replyContent ? `<div class="reply-indicator">${replyContent}</div>` : ''}
659
+ <div class="message-content">${message.content}</div>
660
+ <div class="message-time">${message.time}</div>
661
+ <div class="message-actions">
662
+ <span class="message-action reply-btn">پاسخ</span>
663
+ <span class="message-action react-btn">واکنش</span>
664
+ ${isSent ? '<span class="message-action delete-btn">حذف</span>' : ''}
665
+ </div>
666
+ ${Object.keys(message.reactions).length > 0 ?
667
+ `<div class="reactions">${Object.entries(message.reactions).map(([emoji, count]) =>
668
+ `${emoji} ${count > 1 ? count : ''}`).join(' ')}</div>` : ''}
669
+ `;
670
+
671
+ chatMessages.appendChild(messageDiv);
672
+
673
+ // Add event listeners for message actions
674
+ const replyBtn = messageDiv.querySelector('.reply-btn');
675
+ const reactBtn = messageDiv.querySelector('.react-btn');
676
+ const deleteBtn = messageDiv.querySelector('.delete-btn');
677
+
678
+ replyBtn?.addEventListener('click', () => replyToMessage(message));
679
+ reactBtn?.addEventListener('click', () => showEmojiPicker(message));
680
+ deleteBtn?.addEventListener('click', () => deleteMessage(message));
681
+ }
682
+
683
+ // Reply to a message
684
+ function replyToMessage(message) {
685
+ replyingToMessage = message;
686
+ replyContent.textContent = `${message.sender}: ${message.content.substring(0, 50)}${message.content.length > 50 ? '...' : ''}`;
687
+ replyPreview.style.display = 'block';
688
+ messageInput.focus();
689
+ }
690
+
691
+ // Cancel reply
692
+ function cancelReply() {
693
+ replyingToMessage = null;
694
+ replyPreview.style.display = 'none';
695
+ }
696
+
697
+ // Show emoji picker
698
+ function showEmojiPicker(message) {
699
+ emojiModal.style.display = 'flex';
700
+
701
+ // Add event listeners to emoji buttons
702
+ const emojis = document.querySelectorAll('.emoji');
703
+ emojis.forEach(emoji => {
704
+ emoji.onclick = () => {
705
+ addReaction(message, emoji.dataset.emoji);
706
+ emojiModal.style.display = 'none';
707
+ };
708
+ });
709
+ }
710
+
711
+ // Add reaction to message
712
+ function addReaction(message, emoji) {
713
+ if (!message.reactions[emoji]) {
714
+ message.reactions[emoji] = 0;
715
+ }
716
+ message.reactions[emoji]++;
717
+
718
+ // Update UI
719
+ const messageDiv = document.querySelector(`.message[data-id="${message.id}"]`);
720
+ if (messageDiv) {
721
+ const reactionsDiv = messageDiv.querySelector('.reactions');
722
+ if (reactionsDiv) {
723
+ reactionsDiv.innerHTML = Object.entries(message.reactions).map(([e, count]) =>
724
+ `${e} ${count > 1 ? count : ''}`).join(' ');
725
+ } else {
726
+ const newReactionsDiv = document.createElement('div');
727
+ newReactionsDiv.className = 'reactions';
728
+ newReactionsDiv.innerHTML = `${emoji} 1`;
729
+ messageDiv.appendChild(newReactionsDiv);
730
+ }
731
+ }
732
+ }
733
+
734
+ // Delete message
735
+ function deleteMessage(message) {
736
+ if (confirm('آیا مطمئنید می‌خواهید این پیام را حذف کنید؟')) {
737
+ const index = sampleMessages[currentRoom.id].findIndex(m => m.id === message.id);
738
+ if (index !== -1) {
739
+ sampleMessages[currentRoom.id].splice(index, 1);
740
+ const messageDiv = document.querySelector(`.message[data-id="${message.id}"]`);
741
+ if (messageDiv) {
742
+ messageDiv.remove();
743
+ }
744
+ }
745
+ }
746
+ }
747
+
748
+ // Initialize the app when DOM is loaded
749
+ document.addEventListener('DOMContentLoaded', initApp);
750
+ </script>
751
+ </body>
752
+ </html>