Hugging Face's logo

Spaces:
ALIMHGFY
/
chat-app
Running

App Files Community
ALIMHGFY commited on
Commit
d90d2da
·
verified ·
1 Parent(s): 5eebef1

lib/ ├── main.dart ├── models/ │ ├── message.dart │ ├── user.dart ├── services/ │ ├── auth_service.dart │ ├── chat_service.dart │ ├── notification_service.dart ├── screens/ │ ├── auth/ │ │ ├── login_screen.dart │ │ ├── register_screen.dart │ ├── chat/ │ │ ├── chat_list_screen.dart │ │ ├── chat_screen.dart │ ├── home_screen.dart │ ├── splash_screen.dart ├── widgets/ │ ├── chat_bubble.dart │ ├── custom_textfield.dart │ ├── user_tile.dart - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +311 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chat App
3
- emoji: ⚡
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: chat-app
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,311 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Flutter Chat App UI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .chat-container {
14
+ height: calc(100vh - 130px);
15
+ }
16
+ @media (max-width: 768px) {
17
+ .sidebar {
18
+ position: absolute;
19
+ left: -100%;
20
+ z-index: 50;
21
+ }
22
+ .sidebar.active {
23
+ left: 0;
24
+ }
25
+ }
26
+ .message-input:focus {
27
+ outline: none;
28
+ }
29
+ .chat-bubble {
30
+ max-width: 70%;
31
+ }
32
+ .chat-bubble.sent {
33
+ border-radius: 18px 4px 18px 18px;
34
+ }
35
+ .chat-bubble.received {
36
+ border-radius: 4px 18px 18px 18px;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-100 font-sans">
41
+ <div class="flex h-screen overflow-hidden">
42
+ <!-- Sidebar -->
43
+ <div class="sidebar w-80 bg-white shadow-lg">
44
+ <!-- Header -->
45
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center bg-indigo-600 text-white">
46
+ <h1 class="text-xl font-bold">Chat App</h1>
47
+ <button id="closeSidebar" class="md:hidden">
48
+ <i class="fas fa-times"></i>
49
+ </button>
50
+ </div>
51
+
52
+ <!-- User profile -->
53
+ <div class="p-4 border-b border-gray-200 flex items-center space-x-3">
54
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
55
+ <i class="fas fa-user text-indigo-600"></i>
56
+ </div>
57
+ <div>
58
+ <p class="font-medium">John Doe</p>
59
+ <p class="text-xs text-gray-500">Online</p>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- Navigation -->
64
+ <div class="p-2">
65
+ <a href="#" class="flex items-center p-2 rounded-lg text-indigo-600 bg-indigo-50">
66
+ <i class="fas fa-comment-dots mr-3"></i>
67
+ <span>Chats</span>
68
+ </a>
69
+ <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100">
70
+ <i class="fas fa-user-friends mr-3"></i>
71
+ <span>Contacts</span>
72
+ </a>
73
+ <a href="#" class="flex items-center p-2 rounded-lg text-gray-600 hover:bg-gray-100">
74
+ <i class="fas fa-cog mr-3"></i>
75
+ <span>Settings</span>
76
+ </a>
77
+ </div>
78
+
79
+ <!-- Chat list -->
80
+ <div class="overflow-y-auto" style="height: calc(100vh - 230px)">
81
+ <div class="p-2">
82
+ <div class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
83
+ <div class="relative">
84
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
85
+ <i class="fas fa-user text-purple-600"></i>
86
+ </div>
87
+ <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
88
+ </div>
89
+ <div class="ml-3 flex-1">
90
+ <div class="flex justify-between items-center">
91
+ <p class="font-medium">Sarah Johnson</p>
92
+ <span class="text-xs text-gray-500">2 min</span>
93
+ </div>
94
+ <p class="text-sm text-gray-500 truncate">Hey, how are you doing?</p>
95
+ </div>
96
+ </div>
97
+
98
+ <div class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
99
+ <div class="relative">
100
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
101
+ <i class="fas fa-user text-blue-600"></i>
102
+ </div>
103
+ <span class="absolute bottom-0 right-0 w-3 h-3 bg-gray-300 rounded-full border-2 border-white"></span>
104
+ </div>
105
+ <div class="ml-3 flex-1">
106
+ <div class="flex justify-between items-center">
107
+ <p class="font-medium">Mike Peterson</p>
108
+ <span class="text-xs text-gray-500">1 hr</span>
109
+ </div>
110
+ <p class="text-sm text-gray-500 truncate">Let's meet tomorrow</p>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="flex items-center p-2 rounded-lg hover:bg-gray-100 cursor-pointer">
115
+ <div class="relative">
116
+ <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
117
+ <i class="fas fa-user text-green-600"></i>
118
+ </div>
119
+ <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
120
+ </div>
121
+ <div class="ml-3 flex-1">
122
+ <div class="flex justify-between items-center">
123
+ <p class="font-medium">Emma Wilson</p>
124
+ <span class="text-xs text-gray-500">3 hr</span>
125
+ </div>
126
+ <p class="text-sm text-gray-500 truncate">Did you see the news?</p>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Main content -->
134
+ <div class="flex-1 flex flex-col">
135
+ <!-- Chat header -->
136
+ <div class="p-4 border-b border-gray-200 bg-white flex items-center justify-between">
137
+ <div class="flex items-center space-x-3">
138
+ <button id="toggleSidebar" class="md:hidden">
139
+ <i class="fas fa-bars"></i>
140
+ </button>
141
+ <div class="relative">
142
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
143
+ <i class="fas fa-user text-purple-600"></i>
144
+ </div>
145
+ <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
146
+ </div>
147
+ <div>
148
+ <p class="font-medium">Sarah Johnson</p>
149
+ <p class="text-xs text-gray-500">Online</p>
150
+ </div>
151
+ </div>
152
+ <div class="flex items-center space-x-4">
153
+ <button class="text-gray-600 hover:text-indigo-600">
154
+ <i class="fas fa-phone"></i>
155
+ </button>
156
+ <button class="text-gray-600 hover:text-indigo-600">
157
+ <i class="fas fa-video"></i>
158
+ </button>
159
+ <button class="text-gray-600 hover:text-indigo-600">
160
+ <i class="fas fa-ellipsis-v"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Chat messages -->
166
+ <div class="chat-container overflow-y-auto p-4 bg-gray-50">
167
+ <div class="space-y-3">
168
+ <!-- Date divider -->
169
+ <div class="flex items-center justify-center my-4">
170
+ <span class="px-3 py-1 bg-white rounded-full text-xs text-gray-500 shadow-sm">Today</span>
171
+ </div>
172
+
173
+ <!-- Received message -->
174
+ <div class="flex">
175
+ <div class="chat-bubble received bg-white p-3 shadow-sm">
176
+ <p>Hey there! How are you doing?</p>
177
+ <p class="text-right text-xs text-gray-400 mt-1">10:30 AM</p>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Sent message -->
182
+ <div class="flex justify-end">
183
+ <div class="chat-bubble sent bg-indigo-100 p-3 shadow-sm">
184
+ <p>I'm good, thanks! Just working on some projects.</p>
185
+ <p class="text-right text-xs text-gray-500 mt-1">10:32 AM</p>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Received message -->
190
+ <div class="flex">
191
+ <div class="chat-bubble received bg-white p-3 shadow-sm">
192
+ <p>That's great! Would you like to grab coffee later?</p>
193
+ <p class="text-right text-xs text-gray-400 mt-1">10:33 AM</p>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Sent message -->
198
+ <div class="flex justify-end">
199
+ <div class="chat-bubble sent bg-indigo-100 p-3 shadow-sm">
200
+ <p>Sure, how about 3pm at the usual place?</p>
201
+ <p class="text-right text-xs text-gray-500 mt-1">10:35 AM</p>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Received message -->
206
+ <div class="flex">
207
+ <div class="chat-bubble received bg-white p-3 shadow-sm">
208
+ <p>Perfect! See you then 😊</p>
209
+ <p class="text-right text-xs text-gray-400 mt-1">10:36 AM</p>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <!-- Message input -->
216
+ <div class="p-4 bg-white border-t border-gray-200">
217
+ <div class="flex items-center space-x-2">
218
+ <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-gray-200">
219
+ <i class="fas fa-plus"></i>
220
+ </button>
221
+ <div class="flex-1 relative">
222
+ <input type="text" placeholder="Type a message" class="message-input w-full py-2 px-4 bg-gray-100 rounded-full focus:bg-gray-200 focus:ring-2 focus:ring-indigo-200">
223
+ <button class="absolute right-3 top-2 text-gray-500 hover:text-indigo-600">
224
+ <i class="far fa-smile"></i>
225
+ </button>
226
+ </div>
227
+ <button class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white hover:bg-indigo-700">
228
+ <i class="fas fa-paper-plane"></i>
229
+ </button>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <script>
236
+ // Toggle sidebar on mobile
237
+ const toggleSidebar = document.getElementById('toggleSidebar');
238
+ const closeSidebar = document.getElementById('closeSidebar');
239
+ const sidebar = document.querySelector('.sidebar');
240
+
241
+ toggleSidebar.addEventListener('click', () => {
242
+ sidebar.classList.add('active');
243
+ });
244
+
245
+ closeSidebar.addEventListener('click', () => {
246
+ sidebar.classList.remove('active');
247
+ });
248
+
249
+ // Simulate sending a message
250
+ const messageInput = document.querySelector('.message-input');
251
+ const sendButton = document.querySelector('.fa-paper-plane').parentElement;
252
+ const chatContainer = document.querySelector('.chat-container');
253
+
254
+ sendButton.addEventListener('click', sendMessage);
255
+ messageInput.addEventListener('keypress', (e) => {
256
+ if (e.key === 'Enter') {
257
+ sendMessage();
258
+ }
259
+ });
260
+
261
+ function sendMessage() {
262
+ const message = messageInput.value.trim();
263
+ if (message) {
264
+ const now = new Date();
265
+ const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
266
+
267
+ const messageElement = document.createElement('div');
268
+ messageElement.className = 'flex justify-end';
269
+ messageElement.innerHTML = `
270
+ <div class="chat-bubble sent bg-indigo-100 p-3 shadow-sm">
271
+ <p>${message}</p>
272
+ <p class="text-right text-xs text-gray-500 mt-1">${timeString}</p>
273
+ </div>
274
+ `;
275
+
276
+ chatContainer.querySelector('.space-y-3').appendChild(messageElement);
277
+ messageInput.value = '';
278
+ chatContainer.scrollTop = chatContainer.scrollHeight;
279
+
280
+ // Simulate reply after 1 second
281
+ setTimeout(() => {
282
+ const replies = [
283
+ "That's interesting!",
284
+ "I see what you mean.",
285
+ "Let me think about that.",
286
+ "Sounds good to me!",
287
+ "What else is new?",
288
+ "I agree with you."
289
+ ];
290
+ const randomReply = replies[Math.floor(Math.random() * replies.length)];
291
+
292
+ const replyElement = document.createElement('div');
293
+ replyElement.className = 'flex';
294
+ replyElement.innerHTML = `
295
+ <div class="chat-bubble received bg-white p-3 shadow-sm">
296
+ <p>${randomReply}</p>
297
+ <p class="text-right text-xs text-gray-400 mt-1">${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</p>
298
+ </div>
299
+ `;
300
+
301
+ chatContainer.querySelector('.space-y-3').appendChild(replyElement);
302
+ chatContainer.scrollTop = chatContainer.scrollHeight;
303
+ }, 1000);
304
+ }
305
+ }
306
+
307
+ // Auto-scroll to bottom of chat
308
+ chatContainer.scrollTop = chatContainer.scrollHeight;
309
+ </script>
310
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ALIMHGFY/chat-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
311
+ </html>