Hugging Face's logo

Spaces:
samirerty
/
anycoder-70d45f77
Running

App Files Community
samirerty commited on
Commit
f4e6f7f
·
verified ·
1 Parent(s): e9efc71

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +9 -820
index.html CHANGED
@@ -1,828 +1,17 @@
1
- <?php
2
- session_start();
3
-
4
- // Database configuration
5
- $db_host = 'localhost';
6
- $db_name = 'minimal_chat';
7
- $db_user = 'root';
8
- $db_pass = '';
9
-
10
- try {
11
- $pdo = new PDO(
12
- "mysql:host=$db_host;dbname=$db_name;charset=utf8mb4",
13
- $db_user,
14
- $db_pass,
15
- [
16
- PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
17
- PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
18
- PDO::ATTR_EMULATE_PREPARES => false
19
- ]
20
- );
21
- } catch (PDOException $e) {
22
- die("Connection failed: " . $e->getMessage());
23
- }
24
-
25
- // Get current user if logged in
26
- $currentUser = null;
27
- if (isset($_SESSION['user_id'])) {
28
- $stmt = $pdo->prepare("SELECT id, name, phone, avatar_color FROM users WHERE id = ?");
29
- $stmt->execute([$_SESSION['user_id']]);
30
- $currentUser = $stmt->fetch();
31
- }
32
-
33
- // Enhanced Stickers configuration with requested additions
34
- $stickers = [
35
- 'smile' => '😊', 'laugh' => '😂', 'heart' => '❤️', 'like' => '👍',
36
- 'dislike' => '👎', 'fire' => '🔥', 'clap' => '👏', 'party' => '🎉',
37
- 'star' => '⭐', 'cool' => '😎', 'think' => '🤔', 'sad' => '😢',
38
- 'angry' => '😠', 'wow' => '😲', 'ok' => '👌', 'pray' => '🙏',
39
- 'rocket' => '🚀', 'moon' => '🌙', 'sun' => '☀️', 'cloud' => '☁️',
40
- 'checkmark' => '✅', 'arrow' => '➡️', 'sparkles' => '✨', 'zap' => '⚡',
41
- 'rose' => '🌹', 'coffee' => '☕', 'music' => '🎵', 'book' => '📚'
42
- ];
43
- ?>
44
  <!DOCTYPE html>
45
  <html lang="fa" dir="rtl">
46
  <head>
47
  <meta charset="UTF-8">
48
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
49
- <title>پیام رسان مینیمال</title>
50
- <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
 
 
 
 
51
 
52
- <!-- Font Awesome Icons with requested additions -->
53
  <style>
 
54
  @font-face {
55
  font-family: 'FontAwesome';
56
- src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAA...") format('woff2');
57
- font-weight: normal;
58
- font-style: normal;
59
- }
60
-
61
- .fa {
62
- display: inline-block;
63
- font: normal normal normal 14px/1 FontAwesome;
64
- font-size: inherit;
65
- text-rendering: auto;
66
- -webkit-font-smoothing: antialiased;
67
- -moz-osx-font-smoothing: grayscale;
68
- }
69
-
70
- /* Existing Icons */
71
- .fa-comments:before { content: "\f086"; }
72
- .fa-plus:before { content: "\f067"; }
73
- .fa-arrow-right-from-bracket:before { content: "\f08b"; }
74
- .fa-bars:before { content: "\f0c9"; }
75
- .fa-arrow-right:before { content: "\f061"; }
76
- .fa-hashtag:before { content: "\f292"; }
77
- .fa-share-nodes:before { content: "\f1e0"; }
78
- .fa-paper-plane:before { content: "\f1d8"; }
79
- .fa-xmark:before { content: "\f00d"; }
80
- .fa-chevron-left:before { content: "\f053"; }
81
- .fa-check-circle:before { content: "\f058"; }
82
- .fa-exclamation-circle:before { content: "\f06a"; }
83
- .fa-info-circle:before { content: "\f05a"; }
84
- .fa-trash:before { content: "\f1f8"; }
85
- .fa-edit:before { content: "\f044"; }
86
- .fa-user:before { content: "\f007"; }
87
- .fa-image:before { content: "\f03e"; }
88
- .fa-smile:before { content: "\f118"; }
89
- .fa-save:before { content: "\f0c7"; }
90
- .fa-close:before { content: "\f00d"; }
91
- .fa-sticky-note:before { content: "\f249"; }
92
- .fa-users:before { content: "\f0c0"; }
93
- .fa-gear:before { content: "\f013"; }
94
- .fa-camera:before { content: "\f030"; }
95
-
96
- /* Requested New Icons */
97
- .fa-search:before { content: "\f002"; }
98
- .fa-bell:before { content: "\f0f3"; }
99
- .fa-check:before { content: "\f00c"; }
100
- .fa-arrow-left:before { content: "\f060"; }
101
- .fa-home:before { content: "\f015"; }
102
- .fa-ellipsis-v:before { content: "\f142"; }
103
- </style>
104
-
105
- <!-- Enhanced Glassmorphism CSS -->
106
- <style>
107
- /* CSS Variables for Glass Theme */
108
- :root {
109
- --glass-bg: rgba(255, 255, 255, 0.08);
110
- --glass-bg-hover: rgba(255, 255, 255, 0.12);
111
- --glass-bg-active: rgba(255, 255, 255, 0.15);
112
- --glass-border: rgba(255, 255, 255, 0.18);
113
- --glass-border-light: rgba(255, 255, 255, 0.08);
114
- --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
115
- --glass-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.2);
116
- --blur-amount: 16px;
117
- --blur-heavy: 24px;
118
- --gradient-start: #1e1b4b;
119
- --gradient-mid: #312e81;
120
- --gradient-end: #1e1b4b;
121
- --accent-blue: #3b82f6;
122
- --accent-indigo: #6366f1;
123
- --text-primary: rgba(255, 255, 255, 0.95);
124
- --text-secondary: rgba(255, 255, 255, 0.7);
125
- --text-muted: rgba(255, 255, 255, 0.5);
126
- }
127
-
128
- /* Reset and Base */
129
- *, ::before, ::after {
130
- box-sizing: border-box;
131
- border-width: 0;
132
- border-style: solid;
133
- border-color: #e5e7eb;
134
- }
135
-
136
- body {
137
- font-family: 'Vazirmatn', 'Tahoma', sans-serif;
138
- background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-mid) 50%, var(--gradient-end) 100%);
139
- background-attachment: fixed;
140
- -webkit-tap-highlight-color: transparent;
141
- margin: 0;
142
- padding: 0;
143
- color: var(--text-primary);
144
- overflow: hidden;
145
- }
146
-
147
- /* Enhanced Glass Panel - Multi-layered */
148
- .glass-panel {
149
- background: linear-gradient(135deg,
150
- rgba(255, 255, 255, 0.1) 0%,
151
- rgba(255, 255, 255, 0.05) 100%);
152
- backdrop-filter: blur(var(--blur-amount)) saturate(180%);
153
- -webkit-backdrop-filter: blur(var(--blur-amount)) saturate(180%);
154
- border: 1px solid var(--glass-border);
155
- box-shadow: var(--glass-shadow),
156
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
157
- position: relative;
158
- overflow: hidden;
159
- }
160
-
161
- .glass-panel::before {
162
- content: '';
163
- position: absolute;
164
- top: 0;
165
- left: 0;
166
- right: 0;
167
- bottom: 0;
168
- background: linear-gradient(135deg,
169
- rgba(255, 255, 255, 0.1) 0%,
170
- transparent 50%,
171
- rgba(255, 255, 255, 0.05) 100%);
172
- pointer-events: none;
173
- z-index: 0;
174
- }
175
-
176
- /* Glass Card - For modals and elevated surfaces */
177
- .glass-card {
178
- background: rgba(30, 27, 75, 0.6);
179
- backdrop-filter: blur(var(--blur-heavy)) saturate(200%);
180
- -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(200%);
181
- border: 1px solid var(--glass-border);
182
- border-radius: 1.5rem;
183
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
184
- inset 0 1px 1px rgba(255, 255, 255, 0.1);
185
- }
186
-
187
- /* Glass Button Variants */
188
- .glass-button {
189
- background: rgba(255, 255, 255, 0.1);
190
- backdrop-filter: blur(10px);
191
- border: 1px solid rgba(255, 255, 255, 0.2);
192
- color: white;
193
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
194
- position: relative;
195
- overflow: hidden;
196
- }
197
-
198
- .glass-button::before {
199
- content: '';
200
- position: absolute;
201
- top: 0;
202
- left: -100%;
203
- width: 100%;
204
- height: 100%;
205
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
206
- transition: left 0.5s;
207
- }
208
-
209
- .glass-button:hover {
210
- background: rgba(255, 255, 255, 0.2);
211
- border-color: rgba(255, 255, 255, 0.3);
212
- transform: translateY(-1px);
213
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
214
- }
215
-
216
- .glass-button:hover::before {
217
- left: 100%;
218
- }
219
-
220
- .glass-button:active {
221
- transform: translateY(0);
222
- background: rgba(255, 255, 255, 0.15);
223
- }
224
-
225
- /* Glass Input Fields */
226
- .input-minimal {
227
- background: rgba(255, 255, 255, 0.03);
228
- border: 1px solid transparent;
229
- border-bottom: 2px solid rgba(255, 255, 255, 0.15);
230
- transition: all 0.3s ease;
231
- backdrop-filter: blur(4px);
232
- }
233
-
234
- .input-minimal:focus {
235
- background: rgba(255, 255, 255, 0.08);
236
- border-color: rgba(255, 255, 255, 0.3);
237
- border-bottom-color: var(--accent-blue);
238
- box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
239
- outline: none;
240
- }
241
-
242
- /* Enhanced Message Bubbles with Glass Effect */
243
- .message-bubble-me {
244
- background: linear-gradient(135deg,
245
- rgba(59, 130, 246, 0.9) 0%,
246
- rgba(37, 99, 235, 0.9) 100%);
247
- backdrop-filter: blur(10px);
248
- border-radius: 20px 20px 4px 20px;
249
- border: 1px solid rgba(255, 255, 255, 0.2);
250
- box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3),
251
- inset 0 1px 0 rgba(255, 255, 255, 0.2);
252
- position: relative;
253
- }
254
-
255
- .message-bubble-other {
256
- background: rgba(255, 255, 255, 0.1);
257
- backdrop-filter: blur(10px);
258
- border-radius: 20px 20px 20px 4px;
259
- border: 1px solid rgba(255, 255, 255, 0.15);
260
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
261
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
262
- }
263
-
264
- /* Glass Avatar */
265
- .glass-avatar {
266
- background: linear-gradient(135deg,
267
- rgba(255, 255, 255, 0.15) 0%,
268
- rgba(255, 255, 255, 0.05) 100%);
269
- backdrop-filter: blur(10px);
270
- border: 2px solid rgba(255, 255, 255, 0.2);
271
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
272
- inset 0 2px 4px rgba(255, 255, 255, 0.1);
273
- }
274
-
275
- /* Icon Button Glass Style */
276
- .icon-button-glass {
277
- width: 40px;
278
- height: 40px;
279
- border-radius: 50%;
280
- background: rgba(255, 255, 255, 0.08);
281
- backdrop-filter: blur(10px);
282
- border: 1px solid rgba(255, 255, 255, 0.15);
283
- display: flex;
284
- align-items: center;
285
- justify-content: center;
286
- cursor: pointer;
287
- transition: all 0.3s ease;
288
- color: rgba(255, 255, 255, 0.8);
289
- }
290
-
291
- .icon-button-glass:hover {
292
- background: rgba(255, 255, 255, 0.2);
293
- border-color: rgba(255, 255, 255, 0.3);
294
- transform: scale(1.1) rotate(5deg);
295
- box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
296
- }
297
-
298
- /* Sticker Picker Enhanced */
299
- .sticker-picker {
300
- position: absolute;
301
- bottom: 80px;
302
- left: 10px;
303
- right: 10px;
304
- background: rgba(20, 20, 40, 0.85);
305
- backdrop-filter: blur(30px) saturate(180%);
306
- -webkit-backdrop-filter: blur(30px) saturate(180%);
307
- border-radius: 24px;
308
- padding: 20px;
309
- display: grid;
310
- grid-template-columns: repeat(6, 1fr);
311
- gap: 12px;
312
- max-height: 250px;
313
- overflow-y: auto;
314
- border: 1px solid rgba(255, 255, 255, 0.15);
315
- box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
316
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
317
- z-index: 100;
318
- }
319
-
320
- .sticker-item {
321
- width: 44px;
322
- height: 44px;
323
- display: flex;
324
- align-items: center;
325
- justify-content: center;
326
- font-size: 26px;
327
- cursor: pointer;
328
- border-radius: 12px;
329
- background: rgba(255, 255, 255, 0.05);
330
- border: 1px solid transparent;
331
- transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
332
- }
333
-
334
- .sticker-item:hover {
335
- background: rgba(255, 255, 255, 0.15);
336
- border-color: rgba(255, 255, 255, 0.3);
337
- transform: scale(1.2) translateY(-2px);
338
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
339
- }
340
-
341
- /* Animations */
342
- .fade-in {
343
- animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
344
- }
345
-
346
- @keyframes fadeIn {
347
- from {
348
- opacity: 0;
349
- transform: translateY(15px) scale(0.98);
350
- }
351
- to {
352
- opacity: 1;
353
- transform: translateY(0) scale(1);
354
- }
355
- }
356
-
357
- .message-enter {
358
- animation: messagePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
359
- }
360
-
361
- @keyframes messagePop {
362
- 0% {
363
- opacity: 0;
364
- transform: scale(0.6) translateY(30px) rotate(-5deg);
365
- }
366
- 70% {
367
- transform: scale(1.05) translateY(-5px) rotate(2deg);
368
- }
369
- 100% {
370
- opacity: 1;
371
- transform: scale(1) translateY(0) rotate(0);
372
- }
373
- }
374
-
375
- /* Shimmer Effect for Loading */
376
- .shimmer {
377
- background: linear-gradient(90deg,
378
- rgba(255,255,255,0) 0%,
379
- rgba(255,255,255,0.1) 50%,
380
- rgba(255,255,255,0) 100%);
381
- background-size: 200% 100%;
382
- animation: shimmer 2s infinite;
383
- }
384
-
385
- @keyframes shimmer {
386
- 0% { background-position: -200% 0; }
387
- 100% { background-position: 200% 0; }
388
- }
389
-
390
- /* Gradient Text */
391
- .gradient-text {
392
- background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
393
- -webkit-background-clip: text;
394
- -webkit-text-fill-color: transparent;
395
- background-clip: text;
396
- }
397
-
398
- /* Utility Classes */
399
- .hidden { display: none !important; }
400
- .flex { display: flex; }
401
- .items-center { align-items: center; }
402
- .justify-center { justify-content: center; }
403
- .justify-between { justify-content: space-between; }
404
- .flex-col { flex-direction: column; }
405
- .flex-row { flex-direction: row; }
406
- .flex-1 { flex: 1; }
407
- .w-full { width: 100%; }
408
- .h-full { height: 100%; }
409
- .h-screen { height: 100vh; }
410
- .p-4 { padding: 1rem; }
411
- .p-6 { padding: 1.5rem; }
412
- .m-0 { margin: 0; }
413
- .rounded-lg { border-radius: 0.5rem; }
414
- .rounded-xl { border-radius: 0.75rem; }
415
- .rounded-2xl { border-radius: 1rem; }
416
- .rounded-full { border-radius: 9999px; }
417
- .text-center { text-align: center; }
418
- .text-white { color: white; }
419
- .text-sm { font-size: 0.875rem; }
420
- .text-xs { font-size: 0.75rem; }
421
- .text-lg { font-size: 1.125rem; }
422
- .text-xl { font-size: 1.25rem; }
423
- .font-bold { font-weight: bold; }
424
- .font-medium { font-weight: 500; }
425
- .cursor-pointer { cursor: pointer; }
426
- .transition-all { transition: all 0.3s; }
427
- .absolute { position: absolute; }
428
- .relative { position: relative; }
429
- .fixed { position: fixed; }
430
- .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
431
- .top-0 { top: 0; }
432
- .bottom-0 { bottom: 0; }
433
- .left-0 { left: 0; }
434
- .right-0 { right: 0; }
435
- .z-50 { z-index: 50; }
436
- .z-40 { z-index: 40; }
437
- .z-30 { z-index: 30; }
438
- .bg-white { background-color: white; }
439
- .bg-blue-600 { background-color: #2563eb; }
440
- .bg-slate-900 { background-color: #0f172a; }
441
- .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
442
- .border { border-width: 1px; }
443
- .border-t { border-top-width: 1px; }
444
- .border-b { border-bottom-width: 1px; }
445
- .border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
446
- .overflow-hidden { overflow: hidden; }
447
- .overflow-y-auto { overflow-y: auto; }
448
- .gap-2 { gap: 0.5rem; }
449
- .gap-3 { gap: 0.75rem; }
450
- .space-y-2 > * + * { margin-top: 0.5rem; }
451
- .space-y-3 > * + * { margin-top: 0.75rem; }
452
- .space-y-4 > * + * { margin-top: 1rem; }
453
-
454
- /* Mobile Sidebar */
455
- @media (max-width: 768px) {
456
- .mobile-sidebar {
457
- position: fixed;
458
- top: 0;
459
- right: 0;
460
- height: 100vh;
461
- width: 85%;
462
- max-width: 320px;
463
- z-index: 40;
464
- transform: translateX(100%);
465
- transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
466
- box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
467
- }
468
- .mobile-sidebar.open {
469
- transform: translateX(0);
470
- }
471
- .sidebar-overlay {
472
- position: fixed;
473
- inset: 0;
474
- background: rgba(0, 0, 0, 0.6);
475
- backdrop-filter: blur(4px);
476
- z-index: 35;
477
- opacity: 0;
478
- pointer-events: none;
479
- transition: opacity 0.3s;
480
- }
481
- .sidebar-overlay.active {
482
- opacity: 1;
483
- pointer-events: auto;
484
- }
485
- }
486
-
487
- /* Desktop Styles */
488
- @media (min-width: 769px) {
489
- .mobile-sidebar {
490
- position: relative;
491
- transform: none;
492
- width: 320px;
493
- border-left: 1px solid rgba(255, 255, 255, 0.1);
494
- }
495
- }
496
-
497
- /* Enhanced Scrollbar */
498
- ::-webkit-scrollbar {
499
- width: 8px;
500
- height: 8px;
501
- }
502
- ::-webkit-scrollbar-track {
503
- background: rgba(255, 255, 255, 0.03);
504
- border-radius: 4px;
505
- }
506
- ::-webkit-scrollbar-thumb {
507
- background: rgba(255, 255, 255, 0.2);
508
- border-radius: 4px;
509
- border: 2px solid transparent;
510
- background-clip: padding-box;
511
- }
512
- ::-webkit-scrollbar-thumb:hover {
513
- background: rgba(255, 255, 255, 0.3);
514
- }
515
-
516
- /* Toast Notification Glass Style */
517
- .toast-glass {
518
- background: rgba(30, 27, 75, 0.9);
519
- backdrop-filter: blur(20px);
520
- border: 1px solid rgba(255, 255, 255, 0.2);
521
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
522
- }
523
-
524
- /* Room Item Hover Effect */
525
- .room-item {
526
- position: relative;
527
- overflow: hidden;
528
- transition: all 0.3s ease;
529
- }
530
-
531
- .room-item::before {
532
- content: '';
533
- position: absolute;
534
- left: 0;
535
- top: 0;
536
- bottom: 0;
537
- width: 3px;
538
- background: linear-gradient(to bottom, var(--accent-blue), var(--accent-indigo));
539
- opacity: 0;
540
- transition: opacity 0.3s;
541
- }
542
-
543
- .room-item:hover::before {
544
- opacity: 1;
545
- }
546
-
547
- /* Send Button Animation */
548
- .send-button {
549
- background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
550
- box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
551
- transition: all 0.3s ease;
552
- }
553
-
554
- .send-button:hover {
555
- transform: scale(1.1) rotate(-5deg);
556
- box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
557
- }
558
-
559
- .send-button:active {
560
- transform: scale(0.95);
561
- }
562
-
563
- /* Floating Animation */
564
- @keyframes float {
565
- 0%, 100% { transform: translateY(0px); }
566
- 50% { transform: translateY(-10px); }
567
- }
568
-
569
- .floating {
570
- animation: float 3s ease-in-out infinite;
571
- }
572
-
573
- /* Pulse Glow */
574
- @keyframes pulse-glow {
575
- 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
576
- 50% { box-shadow: 0 0 40px rgba(59, 130, 246, 0.6); }
577
- }
578
-
579
- .pulse-glow {
580
- animation: pulse-glow 2s infinite;
581
- }
582
- </style>
583
- </head>
584
-
585
- <body class="text-white h-screen overflow-hidden bg-slate-900">
586
-
587
- <!-- Toast Container -->
588
- <div id="toast-container" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 flex flex-col gap-2 w-full max-w-sm px-4 pointer-events-none">
589
- </div>
590
-
591
- <?php if (!$currentUser): ?>
592
- <!-- Auth View -->
593
- <div id="auth-view" class="h-full w-full flex items-center justify-center p-4 overflow-y-auto relative">
594
- <!-- Decorative Elements -->
595
- <div class="absolute top-20 left-20 w-72 h-72 bg-blue-500/20 rounded-full blur-3xl pointer-events-none"></div>
596
- <div class="absolute bottom-20 right-20 w-96 h-96 bg-indigo-500/20 rounded-full blur-3xl pointer-events-none"></div>
597
-
598
- <div class="glass-card p-6 md:p-8 rounded-2xl w-full max-w-md fade-in relative z-10">
599
- <div class="text-center mb-8">
600
- <div class="w-20 h-20 glass-avatar rounded-full mx-auto flex items-center justify-center mb-4 floating">
601
- <i class="fa fa-comments text-3xl gradient-text"></i>
602
- </div>
603
- <h1 class="text-3xl font-bold gradient-text mb-2">پیام رسان مینیمال</h1>
604
- <p class="text-white/60 text-sm">ورود به حساب کاربری</p>
605
- </div>
606
-
607
- <!-- Tabs -->
608
- <div class="flex gap-4 mb-8 border-b border-white/10 pb-1">
609
- <button onclick="switchAuthTab('login')" id="tab-login" class="flex-1 pb-3 text-sm font-medium border-b-2 border-white text-white transition-all">ورود</button>
610
- <button onclick="switchAuthTab('register')" id="tab-register" class="flex-1 pb-3 text-sm font-medium border-b-2 border-transparent text-white/50 transition-all hover:text-white/70">ثبت نام</button>
611
- </div>
612
-
613
- <!-- Login Form -->
614
- <form id="login-form" class="space-y-5" onsubmit="return handleLogin(event)">
615
- <div class="relative">
616
- <label class="block text-xs text-white/60 mb-2 flex items-center gap-2">
617
- <i class="fa fa-user text-xs"></i> شماره موبایل
618
- </label>
619
- <input type="tel" id="login-phone" placeholder="09123456789" class="w-full input-minimal py-3 px-4 text-white rounded-lg" required>
620
- </div>
621
- <div class="relative">
622
- <label class="block text-xs text-white/60 mb-2 flex items-center gap-2">
623
- <i class="fa fa-gear text-xs"></i> رمز عبور
624
- </label>
625
- <input type="password" id="login-password" placeholder="••••••••" class="w-full input-minimal py-3 px-4 text-white rounded-lg" required>
626
- </div>
627
- <button type="submit" class="w-full glass-button py-3 rounded-xl mt-6 font-bold text-white shadow-lg">
628
- ورود به حساب
629
- </button>
630
- </form>
631
-
632
- <!-- Register Form -->
633
- <form id="register-form" class="space-y-5 hidden" onsubmit="return handleRegister(event)">
634
- <div>
635
- <label class="block text-xs text-white/60 mb-2 flex items-center gap-2">
636
- <i class="fa fa-user text-xs"></i> نام کامل
637
- </label>
638
- <input type="text" id="reg-name" placeholder="نام شما" class="w-full input-minimal py-3 px-4 text-white rounded-lg" required>
639
- </div>
640
- <div>
641
- <label class="block text-xs text-white/60 mb-2 flex items-center gap-2">
642
- <i class="fa fa-bell text-xs"></i> شماره موبایل
643
- </label>
644
- <input type="tel" id="reg-phone" placeholder="09123456789" class="w-full input-minimal py-3 px-4 text-white rounded-lg" required>
645
- </div>
646
- <div>
647
- <label class="block text-xs text-white/60 mb-2 flex items-center gap-2">
648
- <i class="fa fa-check text-xs"></i> رمز عبور
649
- </label>
650
- <input type="password" id="reg-password" placeholder="حداقل ۴ کاراکتر" class="w-full input-minimal py-3 px-4 text-white rounded-lg" required>
651
- </div>
652
- <button type="submit" class="w-full glass-button py-3 rounded-xl mt-6 font-bold text-white shadow-lg pulse-glow">
653
- ثبت نام
654
- </button>
655
- </form>
656
- </div>
657
- </div>
658
-
659
- <?php else: ?>
660
- <!-- Dashboard View -->
661
- <div id="dashboard-view" class="h-full w-full flex">
662
-
663
- <!-- Sidebar -->
664
- <aside id="sidebar" class="mobile-sidebar glass-panel flex flex-col">
665
- <!-- Profile -->
666
- <div class="p-5 border-b border-white/10 flex items-center justify-between glass-panel">
667
- <div class="flex items-center gap-3 flex-1">
668
- <div class="w-12 h-12 glass-avatar rounded-full flex items-center justify-center text-blue-300 font-bold text-lg relative overflow-hidden">
669
- <span id="user-avatar-initial"><?php echo substr($currentUser['name'], 0, 1); ?></span>
670
- <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-slate-900"></div>
671
- </div>
672
- <div class="flex-1 min-w-0">
673
- <h2 id="user-name-display" class="font-bold text-sm truncate"><?php echo htmlspecialchars($currentUser['name']); ?></h2>
674
- <p id="user-phone-display" class="text-xs text-white/50"><?php echo htmlspecialchars($currentUser['phone']); ?></p>
675
- </div>
676
- </div>
677
- <button onclick="logout()" class="icon-button-glass">
678
- <i class="fa fa-arrow-right-from-bracket text-sm"></i>
679
- </button>
680
- </div>
681
-
682
- <!-- Create Room -->
683
- <div class="p-5 border-b border-white/10 glass-panel">
684
- <div class="flex justify-between items-center mb-4">
685
- <span class="text-xs font-medium text-white/70 flex items-center gap-2">
686
- <i class="fa fa-comments text-xs"></i> اتاق‌های من
687
- </span>
688
- <span id="room-count-badge" class="text-xs bg-white/10 px-3 py-1 rounded-full border border-white/10">۰/۳</span>
689
- </div>
690
- <button onclick="openCreateRoomModal()" id="btn-create-room" class="w-full py-3 border border-dashed border-white/30 rounded-xl text-sm text-white/80 hover:border-white/60 hover:text-white hover:bg-white/5 transition-all flex items-center justify-center gap-2">
691
- <i class="fa fa-plus"></i> اتاق جدید
692
- </button>
693
- <p id="room-limit-msg" class="text-xs text-red-400 mt-3 hidden flex items-center gap-1">
694
- <i class="fa fa-exclamation-circle"></i> حداکثر ۳ اتاق مجاز است
695
- </p>
696
- </div>
697
-
698
- <!-- Room List -->
699
- <div class="flex-1 overflow-y-auto p-3 space-y-2" id="room-list-container">
700
- <div class="text-center mt-8 text-white/30 text-sm">
701
- <i class="fa fa-comments text-4xl mb-3 opacity-30 block"></i>
702
- <p>اتاقی وجود ندارد</p>
703
- </div>
704
- </div>
705
- </aside>
706
-
707
- <!-- Main Content -->
708
- <main class="flex-1 flex flex-col h-full relative">
709
-
710
- <!-- Mobile Header -->
711
- <header class="h-16 glass-panel border-b border-white/10 flex items-center justify-between px-4 md:hidden">
712
- <button onclick="toggleSidebar()" class="icon-button-glass">
713
- <i class="fa fa-bars text-sm"></i>
714
- </button>
715
- <span class="text-sm font-medium text-white/80 flex items-center gap-2">
716
- <i class="fa fa-comments"></i> پیام رسان مینیمال
717
- </span>
718
- <div class="w-10"></div>
719
- </header>
720
-
721
- <!-- Desktop Header -->
722
- <header class="hidden md:flex h-16 glass-panel border-b border-white/10 items-center justify-between px-6">
723
- <div class="flex items-center gap-3">
724
- <i class="fa fa-home text-white/40"></i>
725
- <span class="text-sm font-medium text-white/60">داشبورد</span>
726
- </div>
727
- <div class="flex items-center gap-4">
728
- <button class="icon-button-glass">
729
- <i class="fa fa-search text-sm"></i>
730
- </button>
731
- <button class="icon-button-glass relative">
732
- <i class="fa fa-bell text-sm"></i>
733
- <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-[10px] flex items-center justify-center border-2 border-slate-900">3</span>
734
- </button>
735
- <div class="flex items-center gap-2 text-xs text-white/40 glass-button px-3 py-1.5 rounded-full">
736
- <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
737
- آنلاین
738
- </div>
739
- </div>
740
- </header>
741
-
742
- <!-- Welcome Screen -->
743
- <div id="welcome-screen" class="flex-1 flex flex-col items-center justify-center p-8 text-center relative overflow-hidden">
744
- <div class="absolute inset-0 overflow-hidden pointer-events-none">
745
- <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
746
- <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl"></div>
747
- </div>
748
-
749
- <div class="w-24 h-24 glass-avatar rounded-full flex items-center justify-center mb-6 floating relative z-10">
750
- <i class="fa fa-comments text-4xl text-white/60"></i>
751
- </div>
752
- <h2 class="text-2xl font-bold mb-3 relative z-10">به پیام رسان خوش آمدید</h2>
753
- <p class="text-white/50 text-sm max-w-md mb-8 relative z-10">اتاق جدید بسازید یا یکی را انتخاب کنید</p>
754
- <button onclick="openCreateRoomModal()" class="md:hidden glass-button px-8 py-3 rounded-full text-sm font-medium flex items-center gap-2 relative z-10">
755
- <i class="fa fa-plus"></i> ساخت اتاق جدید
756
- </button>
757
- </div>
758
-
759
- <!-- Chat Interface -->
760
- <div id="chat-interface" class="hidden absolute inset-0 bg-slate-900 flex flex-col">
761
- <!-- Chat Header -->
762
- <div class="h-16 glass-panel border-b border-white/10 flex items-center justify-between px-4">
763
- <div class="flex items-center gap-3 flex-1 min-w-0">
764
- <button onclick="closeChat()" class="md:hidden icon-button-glass mr-2">
765
- <i class="fa fa-arrow-right text-sm"></i>
766
- </button>
767
- <div class="w-10 h-10 glass-avatar rounded-full flex items-center justify-center shrink-0 cursor-pointer hover:scale-110 transition-transform" onclick="openRoomSettings()">
768
- <i class="fa fa-hashtag text-sm text-indigo-300"></i>
769
- </div>
770
- <div class="min-w-0 flex-1">
771
- <h3 id="chat-room-name" class="font-bold text-sm truncate">اتاق</h3>
772
- <span id="chat-user-count" class="text-xs text-white/50 flex items-center gap-1">
773
- <i class="fa fa-users text-[10px]"></i> ۲ عضو
774
- </span>
775
- </div>
776
- </div>
777
- <div class="flex items-center gap-2">
778
- <button onclick="copyRoomLink()" class="icon-button-glass" title="اشتراک گذاری">
779
- <i class="fa fa-share-nodes text-sm"></i>
780
- </button>
781
- <button onclick="deleteCurrentRoom()" class="icon-button-glass hover:border-red-400 hover:text-red-400" title="حذف اتاق">
782
- <i class="fa fa-trash text-sm"></i>
783
- </button>
784
- </div>
785
- </div>
786
-
787
- <!-- Messages -->
788
- <div id="messages-container" class="flex-1 overflow-y-auto p-4 space-y-4 relative">
789
- <div class="absolute inset-0 pointer-events-none opacity-30">
790
- <div class="absolute top-0 left-0 w-full h-20 bg-gradient-to-b from-slate-900 to-transparent"></div>
791
- </div>
792
- </div>
793
-
794
- <!-- Input Area -->
795
- <div class="p-4 glass-panel border-t border-white/10 relative">
796
- <!-- Sticker Picker (Hidden by default) -->
797
- <div id="sticker-picker" class="sticker-picker hidden">
798
- <?php foreach ($stickers as $key => $sticker): ?>
799
- <div class="sticker-item" onclick="addSticker('<?php echo $sticker; ?>')" title="<?php echo $key; ?>">
800
- <?php echo $sticker; ?>
801
- </div>
802
- <?php endforeach; ?>
803
- </div>
804
-
805
- <form onsubmit="return sendMessage(event)" class="flex gap-3 items-center">
806
- <button type="button" onclick="toggleStickerPicker()" class="icon-button-glass shrink-0">
807
- <i class="fa fa-smile text-lg"></i>
808
- </button>
809
- <div class="flex-1 relative">
810
- <input type="text" id="message-input" placeholder="پیام خود را بنویسید..."
811
- class="w-full bg-white/5 border border-white/10 rounded-2xl px-5 py-3 text-sm text-white placeholder-white/30 focus:outline-none focus:bg-white/10 focus:border-white/30 transition-all"
812
- autocomplete="off">
813
- </div>
814
- <button type="submit" class="send-button w-12 h-12 rounded-full flex items-center justify-center text-white shrink-0">
815
- <i class="fa fa-paper-plane text-sm"></i>
816
- </button>
817
- </form>
818
- </div>
819
- </div>
820
- </main>
821
- </div>
822
-
823
- <!-- Sidebar Overlay for Mobile -->
824
- <div id="sidebar-overlay" class="sidebar-overlay md:hidden" onclick="toggleSidebar()"></div>
825
-
826
- <!-- Create Room Modal -->
827
- <div id="create-room-modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
828
- <div class="glass-card w-full max-w-sm rounded-2xl
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
8
+ <!-- Vazirmatn Font -->
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@300;400;500;600;700&display=swap" rel="stylesheet">
12
 
 
13
  <style>
14
+ /* Font Awesome Icons as Data URL */
15
  @font-face {
16
  font-family: 'FontAwesome';
17
+ src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAQYsAA8AAAAAHcAAAQXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGiAGVgCCeguDAAE2AiQDgRAEIAWDCAcgGzQbI0HFbBxF3G4noipyQWJ8R//jCrhDD2w3NIXkq1bQkijy/6ckjWN79Lt7b4WSFEx1oDrdHCLoMh35PzV8fE29DqLryqz//zM5M0Q/VP4QqVQqSarUI9Vf4Qf4f39f1z/vG0nTNAIJhIQkJCHzH0IIIfR7CCGE0HrvvYfQW++9995777333nvvvYfQe++9hxB6CCGEEEIIIYQQQgghJCHzEEJIQhKSkIQkJCHzEEIIIYQQQgghhBBCCCGE0HvvIYQQQgghhBBCCCGEzEMIIQkhCUnIQxKSkIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQkhCSEJIQ