Hugging Face's logo

Spaces:
samirerty
/
anycoder-70d45f77
Running

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

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +684 -15
index.html CHANGED
@@ -1,17 +1,686 @@
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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>GlassChat iOS</title>
7
+
8
+ <!-- Google Fonts: Vazirmatn (for Persian support) and Inter -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Vazirmatn:wght@300;400;500;700&display=swap" rel="stylesheet">
10
+
11
+ <!-- FontAwesome CDN (Replacing truncated base64 to ensure icons work) -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+
14
+ <style>
15
+ /* =========================================
16
+ USER PROVIDED CSS & UTILITIES
17
+ ========================================= */
18
+
19
+ /* Tailwind Base Reset */
20
+ *, ::before, ::after {
21
+ box-sizing: border-box;
22
+ border-width: 0;
23
+ border-style: solid;
24
+ border-color: #e5e7eb;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Inter', 'Vazirmatn', 'Tahoma', sans-serif;
29
+ background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
30
+ background-attachment: fixed;
31
+ -webkit-tap-highlight-color: transparent;
32
+ margin: 0;
33
+ padding: 0;
34
+ color: white;
35
+ height: 100vh;
36
+ overflow: hidden;
37
+ }
38
+
39
+ /* Glassmorphism Core */
40
+ .glass-panel {
41
+ background: rgba(255, 255, 255, 0.08);
42
+ backdrop-filter: blur(16px);
43
+ -webkit-backdrop-filter: blur(16px);
44
+ border: 1px solid rgba(255, 255, 255, 0.15);
45
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
46
+ }
47
+
48
+ .input-minimal {
49
+ background: rgba(0, 0, 0, 0.2);
50
+ border: 1px solid rgba(255, 255, 255, 0.1);
51
+ color: white;
52
+ transition: all 0.3s;
53
+ }
54
+
55
+ .input-minimal:focus {
56
+ background: rgba(0, 0, 0, 0.3);
57
+ border-color: rgba(255, 255, 255, 0.4);
58
+ outline: none;
59
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
60
+ }
61
+
62
+ .input-minimal::placeholder {
63
+ color: rgba(255, 255, 255, 0.5);
64
+ }
65
+
66
+ /* Message Bubbles */
67
+ .message-bubble-me {
68
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
69
+ border-radius: 18px 18px 4px 18px;
70
+ box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
71
+ border: 1px solid rgba(255, 255, 255, 0.1);
72
+ }
73
+
74
+ .message-bubble-other {
75
+ background: rgba(255, 255, 255, 0.12);
76
+ border-radius: 18px 18px 18px 4px;
77
+ border: 1px solid rgba(255, 255, 255, 0.05);
78
+ }
79
+
80
+ /* Animations */
81
+ .fade-in { animation: fadeIn 0.4s ease-out forwards; }
82
+
83
+ @keyframes fadeIn {
84
+ from { opacity: 0; transform: translateY(10px); }
85
+ to { opacity: 1; transform: translateY(0); }
86
+ }
87
+
88
+ .message-enter {
89
+ animation: messagePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
90
+ }
91
+
92
+ @keyframes messagePop {
93
+ 0% { opacity: 0; transform: scale(0.85) translateY(20px); }
94
+ 100% { opacity: 1; transform: scale(1) translateY(0); }
95
+ }
96
+
97
+ /* Utility Classes Mapping */
98
+ .hidden { display: none !important; }
99
+ .flex { display: flex; }
100
+ .items-center { align-items: center; }
101
+ .justify-center { justify-content: center; }
102
+ .justify-between { justify-content: space-between; }
103
+ .flex-col { flex-direction: column; }
104
+ .flex-row { flex-direction: row; }
105
+ .flex-1 { flex: 1; }
106
+ .w-full { width: 100%; }
107
+ .h-full { height: 100%; }
108
+ .h-screen { height: 100vh; }
109
+ .p-4 { padding: 1rem; }
110
+ .p-6 { padding: 1.5rem; }
111
+ .px-4 { padding-left: 1rem; padding-right: 1rem; }
112
+ .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
113
+ .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
114
+ .m-0 { margin: 0; }
115
+ .mb-2 { margin-bottom: 0.5rem; }
116
+ .mb-4 { margin-bottom: 1rem; }
117
+ .rounded-lg { border-radius: 0.5rem; }
118
+ .rounded-xl { border-radius: 0.75rem; }
119
+ .rounded-2xl { border-radius: 1rem; }
120
+ .rounded-full { border-radius: 9999px; }
121
+ .text-center { text-align: center; }
122
+ .text-white { color: white; }
123
+ .text-gray-300 { color: rgba(255,255,255, 0.7); }
124
+ .text-sm { font-size: 0.875rem; }
125
+ .text-xs { font-size: 0.75rem; }
126
+ .text-lg { font-size: 1.125rem; }
127
+ .text-xl { font-size: 1.25rem; }
128
+ .font-bold { font-weight: bold; }
129
+ .font-medium { font-weight: 500; }
130
+ .cursor-pointer { cursor: pointer; }
131
+ .transition-all { transition: all 0.3s ease; }
132
+ .absolute { position: absolute; }
133
+ .relative { position: relative; }
134
+ .fixed { position: fixed; }
135
+ .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
136
+ .top-0 { top: 0; }
137
+ .bottom-0 { bottom: 0; }
138
+ .left-0 { left: 0; }
139
+ .right-0 { right: 0; }
140
+ .z-50 { z-index: 50; }
141
+ .z-40 { z-index: 40; }
142
+ .z-30 { z-index: 30; }
143
+ .bg-white { background-color: white; }
144
+ .bg-blue-600 { background-color: #2563eb; }
145
+ .bg-slate-900 { background-color: #0f172a; }
146
+ .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
147
+ .border { border-width: 1px; }
148
+ .border-t { border-top-width: 1px; }
149
+ .border-b { border-bottom-width: 1px; }
150
+ .border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
151
+ .overflow-hidden { overflow: hidden; }
152
+ .overflow-y-auto { overflow-y: auto; }
153
+ .gap-2 { gap: 0.5rem; }
154
+ .gap-3 { gap: 0.75rem; }
155
+ .gap-4 { gap: 1rem; }
156
+ .space-y-2 > * + * { margin-top: 0.5rem; }
157
+ .space-y-3 > * + * { margin-top: 0.75rem; }
158
+ .space-y-4 > * + * { margin-top: 1rem; }
159
+
160
+ /* Custom Scrollbar */
161
+ ::-webkit-scrollbar { width: 5px; }
162
+ ::-webkit-scrollbar-track { background: transparent; }
163
+ ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
164
+ ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
165
+
166
+ /* =========================================
167
+ LAYOUT & RESPONSIVE
168
+ ========================================= */
169
+
170
+ .app-container {
171
+ display: flex;
172
+ height: 100vh;
173
+ width: 100vw;
174
+ overflow: hidden;
175
+ }
176
+
177
+ /* Sidebar Styles */
178
+ .sidebar {
179
+ width: 320px;
180
+ display: flex;
181
+ flex-direction: column;
182
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
183
+ background: rgba(20, 20, 40, 0.4);
184
+ backdrop-filter: blur(20px);
185
+ z-index: 20;
186
+ transition: transform 0.3s ease;
187
+ }
188
+
189
+ .chat-list-item {
190
+ padding: 1rem;
191
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
192
+ cursor: pointer;
193
+ transition: background 0.2s;
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 1rem;
197
+ }
198
+
199
+ .chat-list-item:hover, .chat-list-item.active {
200
+ background: rgba(255, 255, 255, 0.1);
201
+ }
202
+
203
+ .avatar {
204
+ width: 48px;
205
+ height: 48px;
206
+ border-radius: 50%;
207
+ object-fit: cover;
208
+ border: 2px solid rgba(255, 255, 255, 0.2);
209
+ }
210
+
211
+ .status-dot {
212
+ width: 12px;
213
+ height: 12px;
214
+ background-color: #10b981;
215
+ border: 2px solid #1e1b4b;
216
+ border-radius: 50%;
217
+ position: absolute;
218
+ bottom: 0;
219
+ right: 0;
220
+ }
221
+
222
+ .avatar-container {
223
+ position: relative;
224
+ }
225
+
226
+ /* Main Chat Area */
227
+ .main-chat {
228
+ flex: 1;
229
+ display: flex;
230
+ flex-direction: column;
231
+ position: relative;
232
+ background: rgba(0,0,0,0.2);
233
+ }
234
+
235
+ .chat-header {
236
+ padding: 1rem 1.5rem;
237
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
238
+ background: rgba(30, 27, 75, 0.6);
239
+ backdrop-filter: blur(20px);
240
+ display: flex;
241
+ justify-content: space-between;
242
+ align-items: center;
243
+ }
244
+
245
+ .messages-container {
246
+ flex: 1;
247
+ padding: 1.5rem;
248
+ overflow-y: auto;
249
+ display: flex;
250
+ flex-direction: column;
251
+ gap: 1rem;
252
+ }
253
+
254
+ .input-area {
255
+ padding: 1rem;
256
+ background: rgba(30, 27, 75, 0.8);
257
+ backdrop-filter: blur(20px);
258
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
259
+ }
260
+
261
+ /* Sticker Picker */
262
+ .sticker-picker {
263
+ position: absolute;
264
+ bottom: 90px;
265
+ left: 20px;
266
+ right: 20px;
267
+ background: rgba(20, 20, 35, 0.95);
268
+ backdrop-filter: blur(25px);
269
+ border-radius: 20px;
270
+ padding: 15px;
271
+ display: grid;
272
+ grid-template-columns: repeat(6, 1fr);
273
+ gap: 10px;
274
+ max-height: 220px;
275
+ overflow-y: auto;
276
+ border: 1px solid rgba(255, 255, 255, 0.1);
277
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
278
+ z-index: 30;
279
+ transform-origin: bottom left;
280
+ transition: all 0.2s ease;
281
+ }
282
+
283
+ .sticker-picker.hidden {
284
+ transform: scale(0.9) translateY(20px);
285
+ opacity: 0;
286
+ pointer-events: none;
287
+ }
288
+
289
+ .sticker-item {
290
+ font-size: 28px;
291
+ display: flex;
292
+ align-items: center;
293
+ justify-content: center;
294
+ padding: 8px;
295
+ border-radius: 12px;
296
+ cursor: pointer;
297
+ transition: transform 0.1s;
298
+ }
299
+
300
+ .sticker-item:active { transform: scale(0.9); }
301
+
302
+ /* Mobile Responsive Logic */
303
+ .mobile-menu-btn { display: none; }
304
+ .sidebar-overlay { display: none; }
305
+
306
+ @media (max-width: 768px) {
307
+ .sidebar {
308
+ position: fixed;
309
+ top: 0;
310
+ right: 0;
311
+ height: 100vh;
312
+ width: 85%;
313
+ max-width: 320px;
314
+ transform: translateX(100%);
315
+ box-shadow: -10px 0 30px rgba(0,0,0,0.5);
316
+ }
317
+
318
+ .sidebar.open {
319
+ transform: translateX(0);
320
+ }
321
+
322
+ .sidebar-overlay {
323
+ display: block;
324
+ position: fixed;
325
+ inset: 0;
326
+ background: rgba(0, 0, 0, 0.6);
327
+ backdrop-filter: blur(4px);
328
+ z-index: 15;
329
+ opacity: 0;
330
+ pointer-events: none;
331
+ transition: opacity 0.3s;
332
+ }
333
+
334
+ .sidebar-overlay.active {
335
+ opacity: 1;
336
+ pointer-events: auto;
337
+ }
338
+
339
+ .mobile-menu-btn {
340
+ display: flex;
341
+ align-items: center;
342
+ justify-content: center;
343
+ width: 40px;
344
+ height: 40px;
345
+ border-radius: 50%;
346
+ background: rgba(255,255,255,0.1);
347
+ cursor: pointer;
348
+ }
349
+
350
+ .main-chat { width: 100%; }
351
+ }
352
+
353
+ /* Link Style */
354
+ .anycoder-link {
355
+ color: rgba(255,255,255,0.5);
356
+ text-decoration: none;
357
+ font-size: 0.75rem;
358
+ transition: color 0.3s;
359
+ }
360
+ .anycoder-link:hover { color: white; }
361
+ </style>
362
+ </head>
363
+ <body>
364
+
365
+ <div class="app-container">
366
+
367
+ <!-- Mobile Sidebar Overlay -->
368
+ <div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
369
+
370
+ <!-- Sidebar -->
371
+ <aside class="sidebar glass-panel" id="sidebar">
372
+ <!-- Sidebar Header -->
373
+ <div class="p-4 border-b border-white/10 flex justify-between items-center">
374
+ <div class="flex items-center gap-2">
375
+ <i class="fa-solid fa-comments text-blue-400 text-xl"></i>
376
+ <h2 class="text-lg font-bold">Messages</h2>
377
+ </div>
378
+ <div class="flex gap-3 text-gray-300">
379
+ <i class="fa-solid fa-pen-to-square cursor-pointer hover:text-white transition-all"></i>
380
+ <i class="fa-solid fa-gear cursor-pointer hover:text-white transition-all"></i>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Search -->
385
+ <div class="p-4">
386
+ <div class="relative">
387
+ <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
388
+ <input type="text" placeholder="Search" class="w-full bg-white/5 border border-white/10 rounded-full py-2 pl-9 pr-4 text-sm text-white focus:outline-none focus:border-blue-400/50 transition-all">
389
+ </div>
390
+ </div>
391
+
392
+ <!-- Chat List -->
393
+ <div class="flex-1 overflow-y-auto" id="chatList">
394
+ <!-- Chat Item 1 -->
395
+ <div class="chat-list-item active" onclick="selectChat(0)">
396
+ <div class="avatar-container">
397
+ <img src="https://picsum.photos/seed/sarah/100/100" class="avatar" alt="User">
398
+ <div class="status-dot"></div>
399
+ </div>
400
+ <div class="flex-1 overflow-hidden">
401
+ <div class="flex justify-between items-center mb-1">
402
+ <h3 class="font-medium text-sm truncate">Sarah Connor</h3>
403
+ <span class="text-xs text-gray-400">10:42 AM</span>
404
+ </div>
405
+ <p class="text-xs text-gray-400 truncate">Are we still meeting for coffee?</p>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Chat Item 2 -->
410
+ <div class="chat-list-item" onclick="selectChat(1)">
411
+ <div class="avatar-container">
412
+ <img src="https://picsum.photos/seed/john/100/100" class="avatar" alt="User">
413
+ </div>
414
+ <div class="flex-1 overflow-hidden">
415
+ <div class="flex justify-between items-center mb-1">
416
+ <h3 class="font-medium text-sm truncate">John Wick</h3>
417
+ <span class="text-xs text-gray-400">Yesterday</span>
418
+ </div>
419
+ <p class="text-xs text-gray-400 truncate">I'll be back.</p>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- Chat Item 3 -->
424
+ <div class="chat-list-item" onclick="selectChat(2)">
425
+ <div class="avatar-container">
426
+ <img src="https://picsum.photos/seed/ellon/100/100" class="avatar" alt="User">
427
+ <div class="status-dot" style="background-color: #f59e0b;"></div>
428
+ </div>
429
+ <div class="flex-1 overflow-hidden">
430
+ <div class="flex justify-between items-center mb-1">
431
+ <h3 class="font-medium text-sm truncate">Ellon Musk</h3>
432
+ <span class="text-xs text-gray-400">Mon</span>
433
+ </div>
434
+ <p class="text-xs text-gray-400 truncate">Sending you the designs now.</p>
435
+ </div>
436
+ </div>
437
+
438
+ <!-- Chat Item 4 -->
439
+ <div class="chat-list-item" onclick="selectChat(3)">
440
+ <div class="avatar-container">
441
+ <img src="https://picsum.photos/seed/alex/100/100" class="avatar" alt="User">
442
+ <div class="status-dot"></div>
443
+ </div>
444
+ <div class="flex-1 overflow-hidden">
445
+ <div class="flex justify-between items-center mb-1">
446
+ <h3 class="font-medium text-sm truncate">Alex Designer</h3>
447
+ <span class="text-xs text-gray-400">Sun</span>
448
+ </div>
449
+ <p class="text-xs text-gray-400 truncate">Check out this new glass effect!</p>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <!-- User Profile (Bottom Sidebar) -->
455
+ <div class="p-4 border-t border-white/10 flex items-center gap-3 cursor-pointer hover:bg-white/5 transition-all">
456
+ <img src="https://picsum.photos/seed/me/100/100" class="w-10 h-10 rounded-full border border-white/20">
457
+ <div class="flex-1">
458
+ <h4 class="text-sm font-medium">My Account</h4>
459
+ <p class="text-xs text-gray-400">Online</p>
460
+ </div>
461
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
462
+ Built with anycoder
463
+ </a>
464
+ </div>
465
+ </aside>
466
+
467
+ <!-- Main Chat Area -->
468
+ <main class="main-chat">
469
+
470
+ <!-- Chat Header -->
471
+ <header class="chat-header">
472
+ <div class="flex items-center gap-3">
473
+ <div class="mobile-menu-btn" onclick="toggleSidebar()">
474
+ <i class="fa-solid fa-bars text-white"></i>
475
+ </div>
476
+ <div class="relative">
477
+ <img src="https://picsum.photos/seed/sarah/100/100" id="currentChatAvatar" class="w-10 h-10 rounded-full border border-white/20">
478
+ <div class="status-dot" id="currentChatStatus"></div>
479
+ </div>
480
+ <div>
481
+ <h2 class="font-bold text-base leading-tight" id="currentChatName">Sarah Connor</h2>
482
+ <p class="text-xs text-gray-400">Typing...</p>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="flex gap-4 text-gray-300">
487
+ <i class="fa-solid fa-phone cursor-pointer hover:text-white transition-all"></i>
488
+ <i class="fa-solid fa-video cursor-pointer hover:text-white transition-all"></i>
489
+ <i class="fa-solid fa-circle-info cursor-pointer hover:text-white transition-all"></i>
490
+ </div>
491
+ </header>
492
+
493
+ <!-- Messages List -->
494
+ <div class="messages-container" id="messagesContainer">
495
+ <div class="text-center text-xs text-gray-500 my-4">Today</div>
496
+
497
+ <!-- Message Received -->
498
+ <div class="flex items-end gap-2 message-enter">
499
+ <img src="https://picsum.photos/seed/sarah/100/100" class="w-8 h-8 rounded-full mb-1">
500
+ <div class="message-bubble-other p-4 max-w-[75%]">
501
+ <p class="text-sm">Hey! Have you seen the new designs?</p>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Message Sent -->
506
+ <div class="flex items-end gap-2 justify-end message-enter" style="animation-delay: 0.1s;">
507
+ <div class="message-bubble-me p-4 max-w-[75%]">
508
+ <p class="text-sm">Yes, they look amazing! I love the glassmorphism style.</p>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Message Received -->
513
+ <div class="flex items-end gap-2 message-enter" style="animation-delay: 0.2s;">
514
+ <img src="https://picsum.photos/seed/sarah/100/100" class="w-8 h-8 rounded-full mb-1">
515
+ <div class="message-bubble-other p-4 max-w-[75%]">
516
+ <p class="text-sm">Great! Are we still meeting for coffee? ☕️</p>
517
+ </div>
518
+ </div>
519
+ </div>
520
+
521
+ <!-- Sticker Picker Overlay -->
522
+ <div class="sticker-picker hidden" id="stickerPicker">
523
+ <div class="sticker-item" onclick="sendSticker('😀')">😀</div>
524
+ <div class="sticker-item" onclick="sendSticker('😂')">😂</div>
525
+ <div class="sticker-item" onclick="sendSticker('😍')">😍</div>
526
+ <div class="sticker-item" onclick="sendSticker('🤔')">🤔</div>
527
+ <div class="sticker-item" onclick="sendSticker('👍')">👍</div>
528
+ <div class="sticker-item" onclick="sendSticker('🔥')">🔥</div>
529
+ <div class="sticker-item" onclick="sendSticker('❤️')">❤️</div>
530
+ <div class="sticker-item" onclick="sendSticker('🎉')">🎉</div>
531
+ <div class="sticker-item" onclick="sendSticker('🚀')">🚀</div>
532
+ <div class="sticker-item" onclick="sendSticker('💯')">💯</div>
533
+ <div class="sticker-item" onclick="sendSticker('🤖')">🤖</div>
534
+ <div class="sticker-item" onclick="sendSticker('💤')">💤</div>
535
+ </div>
536
+
537
+ <!-- Input Area -->
538
+ <div class="input-area">
539
+ <div class="flex items-center gap-3">
540
+ <div class="cursor-pointer text-gray-400 hover:text-yellow-400 transition-all text-xl" onclick="toggleStickers()">
541
+ <i class="fa-regular fa-face-smile"></i>
542
+ </div>
543
+ <div class="flex-1 relative">
544
+ <input type="text" id="messageInput" class="input-minimal w-full rounded-full py-3 px-5 text-sm" placeholder="Type a message..." autocomplete="off">
545
+ <i class="fa-solid fa-paperclip absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-white"></i>
546
+ </div>
547
+ <button id="sendBtn" class="bg-blue-600 hover:bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center transition-all shadow-lg shadow-blue-600/30">
548
+ <i class="fa-solid fa-paper-plane text-sm"></i>
549
+ </button>
550
+ </div>
551
+ </div>
552
+
553
+ </main>
554
+ </div>
555
+
556
+ <script>
557
+ // DOM Elements
558
+ const messageInput = document.getElementById('messageInput');
559
+ const sendBtn = document.getElementById('sendBtn');
560
+ const messagesContainer = document.getElementById('messagesContainer');
561
+ const stickerPicker = document.getElementById('stickerPicker');
562
+ const sidebar = document.getElementById('sidebar');
563
+ const sidebarOverlay = document.getElementById('sidebarOverlay');
564
+ const chatListItems = document.querySelectorAll('.chat-list-item');
565
+ const currentChatName = document.getElementById('currentChatName');
566
+ const currentChatAvatar = document.getElementById('currentChatAvatar');
567
+
568
+ // Chat Data
569
+ const chats = [
570
+ { name: "Sarah Connor", avatar: "https://picsum.photos/seed/sarah/100/100" },
571
+ { name: "John Wick", avatar: "https://picsum.photos/seed/john/100/100" },
572
+ { name: "Ellon Musk", avatar: "https://picsum.photos/seed/ellon/100/100" },
573
+ { name: "Alex Designer", avatar: "https://picsum.photos/seed/alex/100/100" }
574
+ ];
575
+
576
+ // Functions
577
+ function toggleSidebar() {
578
+ sidebar.classList.toggle('open');
579
+ sidebarOverlay.classList.toggle('active');
580
+ }
581
+
582
+ function toggleStickers() {
583
+ stickerPicker.classList.toggle('hidden');
584
+ }
585
+
586
+ function scrollToBottom() {
587
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
588
+ }
589
+
590
+ function createMessageElement(content, isMe = true, isSticker = false) {
591
+ const wrapper = document.createElement('div');
592
+ wrapper.className = `flex items-end gap-2 message-enter ${isMe ? 'justify-end' : ''}`;
593
+
594
+ let innerHTML = '';
595
+
596
+ if (isMe) {
597
+ innerHTML = `
598
+ <div class="message-bubble-me p-4 max-w-[75%] ${isSticker ? 'bg-transparent !border-0 !shadow-none !bg-none' : ''}">
599
+ ${isSticker ? `<span style="font-size: 3rem;">${content}</span>` : `<p class="text-sm">${content}</p>`}
600
+ </div>
601
+ `;
602
+ } else {
603
+ innerHTML = `
604
+ <img src="${currentChatAvatar.src}" class="w-8 h-8 rounded-full mb-1">
605
+ <div class="message-bubble-other p-4 max-w-[75%] ${isSticker ? 'bg-transparent !border-0 !shadow-none' : ''}">
606
+ ${isSticker ? `<span style="font-size: 3rem;">${content}</span>` : `<p class="text-sm">${content}</p>`}
607
+ </div>
608
+ `;
609
+ }
610
+
611
+ wrapper.innerHTML = innerHTML;
612
+ return wrapper;
613
+ }
614
+
615
+ function sendMessage() {
616
+ const text = messageInput.value.trim();
617
+ if (text) {
618
+ const msgEl = createMessageElement(text, true);
619
+ messagesContainer.appendChild(msgEl);
620
+ messageInput.value = '';
621
+ scrollToBottom();
622
+
623
+ // Simulate Reply
624
+ setTimeout(() => {
625
+ const replyEl = createMessageElement("That sounds great! 👍", false);
626
+ messagesContainer.appendChild(replyEl);
627
+ scrollToBottom();
628
+ }, 1500);
629
+ }
630
+ }
631
+
632
+ function sendSticker(emoji) {
633
+ const msgEl = createMessageElement(emoji, true, true);
634
+ messagesContainer.appendChild(msgEl);
635
+ stickerPicker.classList.add('hidden');
636
+ scrollToBottom();
637
+ }
638
+
639
+ function selectChat(index) {
640
+ // Update UI Active State
641
+ chatListItems.forEach(item => item.classList.remove('active'));
642
+ chatListItems[index].classList.add('active');
643
+
644
+ // Update Header Info
645
+ currentChatName.textContent = chats[index].name;
646
+ currentChatAvatar.src = chats[index].avatar;
647
+
648
+ // Clear current messages (simulation)
649
+ messagesContainer.innerHTML = `
650
+ <div class="text-center text-xs text-gray-500 my-4">Today</div>
651
+ <div class="flex items-center gap-2 justify-center opacity-50 my-10">
652
+ <img src="${chats[index].avatar}" class="w-16 h-16 rounded-full border-2 border-white/10">
653
+ </div>
654
+ <div class="text-center text-sm text-gray-300 mb-4">
655
+ Start of conversation with <br> <strong>${chats[index].name}</strong>
656
+ </div>
657
+ `;
658
+
659
+ // Close sidebar on mobile after selection
660
+ if (window.innerWidth <= 768) {
661
+ toggleSidebar();
662
+ }
663
+ }
664
+
665
+ // Event Listeners
666
+ sendBtn.addEventListener('click', sendMessage);
667
+
668
+ messageInput.addEventListener('keypress', (e) => {
669
+ if (e.key === 'Enter') {
670
+ sendMessage();
671
+ }
672
+ });
673
+
674
+ // Close sticker picker if clicking outside
675
+ document.addEventListener('click', (e) => {
676
+ if (!stickerPicker.contains(e.target) && !e.target.closest('.fa-face-smile')) {
677
+ stickerPicker.classList.add('hidden');
678
+ }
679
+ });
680
+
681
+ // Initial Scroll
682
+ scrollToBottom();
683
+
684
+ </script>
685
+ </body>
686
+ </html>