Hugging Face's logo

Spaces:
cozen
/
chitchat-connect
Running

App Files Community
cozen commited on
Commit
49eae8b
·
verified ·
1 Parent(s): 7f146a8

Generate a whatsapp like app

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +244 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Chitchat Connect
3
- emoji: 🐢
4
- colorFrom: green
5
- colorTo: purple
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: ChitChat Connect 🚀
3
+ colorFrom: gray
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,245 @@
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>ChitChat Connect</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#25D366',
17
+ secondary: '#128C7E',
18
+ accent: '#34B7F1',
19
+ background: '#e5ddd5'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .chat-bubble {
27
+ max-width: 70%;
28
+ border-radius: 1.125rem;
29
+ position: relative;
30
+ }
31
+ .chat-bubble:before {
32
+ content: '';
33
+ position: absolute;
34
+ width: 0;
35
+ height: 0;
36
+ bottom: 0;
37
+ border: 0.5rem solid transparent;
38
+ }
39
+ .sent {
40
+ background-color: #DCF8C6;
41
+ align-self: flex-end;
42
+ }
43
+ .sent:before {
44
+ right: -0.5rem;
45
+ border-left-color: #DCF8C6;
46
+ border-right: 0;
47
+ }
48
+ .received {
49
+ background-color: white;
50
+ align-self: flex-start;
51
+ }
52
+ .received:before {
53
+ left: -0.5rem;
54
+ border-right-color: white;
55
+ border-left: 0;
56
+ }
57
+ .chat-container {
58
+ background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
59
+ }
60
+ @media (max-width: 768px) {
61
+ .sidebar {
62
+ transform: translateX(-100%);
63
+ transition: transform 0.3s ease;
64
+ }
65
+ .sidebar.active {
66
+ transform: translateX(0);
67
+ }
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="bg-gray-100 h-screen overflow-hidden">
72
+ <div class="flex h-full">
73
+ <!-- Sidebar -->
74
+ <div class="sidebar w-1/3 md:w-1/4 lg:w-1/5 bg-white border-r border-gray-200 flex flex-col absolute md:relative z-10 h-full">
75
+ <!-- Header -->
76
+ <div class="bg-primary p-4 text-white flex justify-between items-center">
77
+ <div class="flex items-center space-x-3">
78
+ <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full" alt="Profile">
79
+ <span class="font-semibold">My Profile</span>
80
+ </div>
81
+ <div class="flex space-x-4">
82
+ <i data-feather="search" class="cursor-pointer"></i>
83
+ <i data-feather="more-vertical" class="cursor-pointer"></i>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Search -->
88
+ <div class="p-3 border-b border-gray-200">
89
+ <div class="relative">
90
+ <input type="text" placeholder="Search or start new chat" class="w-full bg-gray-100 rounded-lg py-2 px-4 pl-10 focus:outline-none">
91
+ <i data-feather="search" class="absolute left-3 top-3 text-gray-500"></i>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Chats List -->
96
+ <div class="flex-1 overflow-y-auto">
97
+ <div class="flex items-center p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
98
+ <img src="http://static.photos/people/200x200/2" class="w-12 h-12 rounded-full mr-3" alt="Chat">
99
+ <div class="flex-1">
100
+ <div class="flex justify-between items-center">
101
+ <span class="font-semibold">John Doe</span>
102
+ <span class="text-xs text-gray-500">10:30 AM</span>
103
+ </div>
104
+ <p class="text-sm text-gray-500 truncate">Hey, how are you doing?</p>
105
+ </div>
106
+ </div>
107
+ <div class="flex items-center p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer">
108
+ <img src="http://static.photos/people/200x200/3" class="w-12 h-12 rounded-full mr-3" alt="Chat">
109
+ <div class="flex-1">
110
+ <div class="flex justify-between items-center">
111
+ <span class="font-semibold">Jane Smith</span>
112
+ <span class="text-xs text-gray-500">Yesterday</span>
113
+ </div>
114
+ <p class="text-sm text-gray-500 truncate">Let's meet tomorrow</p>
115
+ </div>
116
+ </div>
117
+ <div class="flex items-center p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer bg-gray-100">
118
+ <img src="http://static.photos/people/200x200/4" class="w-12 h-12 rounded-full mr-3" alt="Chat">
119
+ <div class="flex-1">
120
+ <div class="flex justify-between items-center">
121
+ <span class="font-semibold">Work Group</span>
122
+ <span class="text-xs text-gray-500">Monday</span>
123
+ </div>
124
+ <p class="text-sm text-gray-500 truncate">Alice: I've sent the files</p>
125
+ </div>
126
+ </div>
127
+ <!-- More chats... -->
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Main Chat Area -->
132
+ <div class="flex-1 flex flex-col h-full">
133
+ <!-- Chat Header -->
134
+ <div class="bg-secondary p-4 text-white flex justify-between items-center">
135
+ <div class="flex items-center space-x-3">
136
+ <i data-feather="menu" class="cursor-pointer md:hidden" id="menuToggle"></i>
137
+ <img src="http://static.photos/people/200x200/4" class="w-10 h-10 rounded-full" alt="Profile">
138
+ <span class="font-semibold">Work Group</span>
139
+ </div>
140
+ <div class="flex space-x-4">
141
+ <i data-feather="search" class="cursor-pointer"></i>
142
+ <i data-feather="phone" class="cursor-pointer"></i>
143
+ <i data-feather="video" class="cursor-pointer"></i>
144
+ <i data-feather="more-vertical" class="cursor-pointer"></i>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Messages -->
149
+ <div class="flex-1 overflow-y-auto p-4 chat-container">
150
+ <div class="flex flex-col space-y-2">
151
+ <!-- Date separator -->
152
+ <div class="text-center text-xs text-gray-500 my-4">
153
+ TODAY
154
+ </div>
155
+
156
+ <!-- Received message -->
157
+ <div class="flex items-start space-x-2">
158
+ <img src="http://static.photos/people/200x200/5" class="w-8 h-8 rounded-full mt-1" alt="Sender">
159
+ <div>
160
+ <div class="text-xs text-gray-500 mb-1">Alice, 10:30 AM</div>
161
+ <div class="chat-bubble received px-4 py-2">
162
+ Hey team, I've uploaded the project files to the shared drive.
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Sent message -->
168
+ <div class="flex justify-end">
169
+ <div class="chat-bubble sent px-4 py-2">
170
+ Thanks Alice! I'll review them shortly.
171
+ <div class="text-xs text-gray-500 text-right mt-1">10:32 AM</div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Received message -->
176
+ <div class="flex items-start space-x-2">
177
+ <img src="http://static.photos/people/200x200/6" class="w-8 h-8 rounded-full mt-1" alt="Sender">
178
+ <div>
179
+ <div class="text-xs text-gray-500 mb-1">Bob, 10:35 AM</div>
180
+ <div class="chat-bubble received px-4 py-2">
181
+ I noticed some issues in the design. Should we schedule a call to discuss?
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Sent message -->
187
+ <div class="flex justify-end">
188
+ <div class="chat-bubble sent px-4 py-2">
189
+ Sure, how about 2 PM today?
190
+ <div class="text-xs text-gray-500 text-right mt-1">10:36 AM</div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- More messages... -->
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Message Input -->
199
+ <div class="bg-white p-3 border-t border-gray-200">
200
+ <div class="flex items-center space-x-2">
201
+ <i data-feather="smile" class="text-gray-500 cursor-pointer"></i>
202
+ <i data-feather="paperclip" class="text-gray-500 cursor-pointer"></i>
203
+ <input type="text" placeholder="Type a message" class="flex-1 border border-gray-300 rounded-full py-2 px-4 focus:outline-none">
204
+ <button class="bg-primary text-white p-2 rounded-full">
205
+ <i data-feather="send" class="w-5 h-5"></i>
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <script>
213
+ // Feather icons
214
+ feather.replace();
215
+
216
+ // Mobile menu toggle
217
+ document.getElementById('menuToggle').addEventListener('click', function() {
218
+ document.querySelector('.sidebar').classList.toggle('active');
219
+ });
220
+
221
+ // Simulate sending a message
222
+ document.querySelector('button').addEventListener('click', function() {
223
+ const input = document.querySelector('input');
224
+ if (input.value.trim() !== '') {
225
+ const messagesContainer = document.querySelector('.flex-1.overflow-y-auto');
226
+ const now = new Date();
227
+ const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
228
+
229
+ const messageDiv = document.createElement('div');
230
+ messageDiv.className = 'flex justify-end';
231
+ messageDiv.innerHTML = `
232
+ <div class="chat-bubble sent px-4 py-2">
233
+ ${input.value}
234
+ <div class="text-xs text-gray-500 text-right mt-1">${timeString}</div>
235
+ </div>
236
+ `;
237
+
238
+ messagesContainer.querySelector('.flex.flex-col.space-y-2').appendChild(messageDiv);
239
+ input.value = '';
240
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
241
+ }
242
+ });
243
+ </script>
244
+ </body>
245
  </html>