Hugging Face's logo

Spaces:
BigVenom
/
big-venom-s-space
Running

App Files Community
BigVenom commited on
Commit
917822e
·
verified ·
1 Parent(s): 10dc075

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +429 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Big Venom S Space
3
- emoji: 🏃
4
- colorFrom: yellow
5
- colorTo: indigo
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: big-venom-s-space
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
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,429 @@
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" class="h-full">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LIFESTYLE - Secure Messaging App</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 50: '#f0fdfa',
16
+ 100: '#ccfbf1',
17
+ 200: '#99f6e4',
18
+ 300: '#5eead4',
19
+ 400: '#2dd4bf',
20
+ 500: '#14b8a6',
21
+ 600: '#0d9488',
22
+ 700: '#0f766e',
23
+ 800: '#115e59',
24
+ 900: '#134e4a',
25
+ },
26
+ secondary: {
27
+ 50: '#f0f9ff',
28
+ 100: '#e0f2fe',
29
+ 200: '#bae6fd',
30
+ 300: '#7dd3fc',
31
+ 400: '#38bdf8',
32
+ 500: '#0ea5e9',
33
+ 600: '#0284c7',
34
+ 700: '#0369a1',
35
+ 800: '#075985',
36
+ 900: '#0c4a6e',
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
42
+ </script>
43
+ <style>
44
+ .chat-bubble {
45
+ border-radius: 20px;
46
+ max-width: 70%;
47
+ word-wrap: break-word;
48
+ }
49
+ .chat-bubble.sent {
50
+ border-bottom-right-radius: 0;
51
+ }
52
+ .chat-bubble.received {
53
+ border-bottom-left-radius: 0;
54
+ }
55
+ .typing-indicator span {
56
+ display: inline-block;
57
+ width: 8px;
58
+ height: 8px;
59
+ border-radius: 50%;
60
+ background-color: #9ca3af;
61
+ margin: 0 2px;
62
+ animation: bounce 1.4s infinite ease-in-out;
63
+ }
64
+ .typing-indicator span:nth-child(2) {
65
+ animation-delay: 0.2s;
66
+ }
67
+ .typing-indicator span:nth-child(3) {
68
+ animation-delay: 0.4s;
69
+ }
70
+ @keyframes bounce {
71
+ 0%, 100% { transform: translateY(0); }
72
+ 50% { transform: translateY(-5px); }
73
+ }
74
+ .dark .dark\:bg-dark-primary {
75
+ background-color: #0f172a;
76
+ }
77
+ .dark .dark\:bg-dark-secondary {
78
+ background-color: #1e293b;
79
+ }
80
+ .dark .dark\:text-light {
81
+ color: #f8fafc;
82
+ }
83
+ .dark .dark\:border-dark {
84
+ border-color: #334155;
85
+ }
86
+ .dark .dark\:bg-dark-accent {
87
+ background-color: #0f766e;
88
+ }
89
+ .dark .dark\:bg-dark-input {
90
+ background-color: #1e293b;
91
+ }
92
+ .dark .dark\:text-muted {
93
+ color: #94a3b8;
94
+ }
95
+ .dark .dark\:hover\:bg-dark-hover:hover {
96
+ background-color: #334155;
97
+ }
98
+ .dark .dark\:bg-dark-card {
99
+ background-color: #1e293b;
100
+ }
101
+ .dark .dark\:bg-dark-header {
102
+ background-color: #0f172a;
103
+ }
104
+ .dark .dark\:border-dark-border {
105
+ border-color: #334155;
106
+ }
107
+ </style>
108
+ </head>
109
+ <body class="h-full bg-gray-50 dark:bg-dark-primary transition-colors duration-200">
110
+ <div class="flex h-screen overflow-hidden">
111
+ <!-- Sidebar -->
112
+ <div class="hidden md:flex md:flex-shrink-0">
113
+ <div class="flex flex-col w-20 bg-white dark:bg-dark-secondary border-r border-gray-200 dark:border-dark-border">
114
+ <div class="flex-1 flex flex-col items-center py-4">
115
+ <!-- App Logo -->
116
+ <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 text-white">
117
+ <i class="fas fa-comment-alt text-xl"></i>
118
+ </div>
119
+
120
+ <!-- Navigation Icons -->
121
+ <nav class="flex-1 mt-8 space-y-4 w-full px-2">
122
+ <a href="#" class="group flex items-center justify-center p-2 rounded-lg bg-primary-100 dark:bg-dark-accent text-primary-600 dark:text-white">
123
+ <i class="fas fa-comment-alt text-xl"></i>
124
+ </a>
125
+ <a href="#" class="group flex items-center justify-center p-2 rounded-lg text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
126
+ <i class="fas fa-phone-alt text-xl"></i>
127
+ </a>
128
+ <a href="#" class="group flex items-center justify-center p-2 rounded-lg text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
129
+ <i class="fas fa-users text-xl"></i>
130
+ </a>
131
+ <a href="#" class="group flex items-center justify-center p-2 rounded-lg text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
132
+ <i class="fas fa-cog text-xl"></i>
133
+ </a>
134
+ </nav>
135
+
136
+ <!-- Theme Toggle and Profile -->
137
+ <div class="flex-shrink-0 flex flex-col items-center space-y-4 pb-4">
138
+ <button id="theme-toggle" class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
139
+ <i class="fas fa-moon dark:hidden"></i>
140
+ <i class="fas fa-sun hidden dark:block"></i>
141
+ </button>
142
+ <div class="relative">
143
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
144
+ <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Contacts List -->
152
+ <div class="hidden md:flex md:flex-col w-80 border-r border-gray-200 dark:border-dark-border bg-white dark:bg-dark-secondary">
153
+ <div class="flex flex-col h-full">
154
+ <!-- Search Bar -->
155
+ <div class="p-4 border-b border-gray-200 dark:border-dark-border">
156
+ <div class="relative">
157
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
158
+ <i class="fas fa-search text-gray-400"></i>
159
+ </div>
160
+ <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-dark-border rounded-lg bg-gray-50 dark:bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Search">
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Second Number Banner -->
165
+ <div class="bg-gradient-to-r from-primary-500 to-secondary-500 text-white p-4 flex items-center justify-between">
166
+ <div>
167
+ <p class="text-sm font-medium">Your Second Number</p>
168
+ <p class="text-xs opacity-90">+1 (415) 555-0132</p>
169
+ </div>
170
+ <button class="text-xs bg-white text-primary-600 px-2 py-1 rounded-full font-medium">Change</button>
171
+ </div>
172
+
173
+ <!-- Contacts List -->
174
+ <div class="flex-1 overflow-y-auto">
175
+ <div class="divide-y divide-gray-200 dark:divide-dark-border">
176
+ <!-- Contact Item -->
177
+ <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer">
178
+ <div class="relative">
179
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
180
+ <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span>
181
+ </div>
182
+ <div class="flex-1 min-w-0">
183
+ <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Leslie Alexander</p>
184
+ <p class="text-xs text-gray-500 dark:text-muted truncate">Hey, how are you doing?</p>
185
+ </div>
186
+ <div class="flex flex-col items-end">
187
+ <span class="text-xs text-gray-500 dark:text-muted">2 min ago</span>
188
+ <span class="mt-1 inline-flex items-center justify-center h-5 w-5 rounded-full bg-primary-500 text-white text-xs">3</span>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- More contacts... -->
193
+ <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer">
194
+ <div class="relative">
195
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
196
+ <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-gray-300 ring-2 ring-white dark:ring-dark-secondary"></span>
197
+ </div>
198
+ <div class="flex-1 min-w-0">
199
+ <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Michael Foster</p>
200
+ <p class="text-xs text-gray-500 dark:text-muted truncate">Let's meet tomorrow</p>
201
+ </div>
202
+ <div class="flex flex-col items-end">
203
+ <span class="text-xs text-gray-500 dark:text-muted">1 hr ago</span>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer">
208
+ <div class="relative">
209
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
210
+ <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span>
211
+ </div>
212
+ <div class="flex-1 min-w-0">
213
+ <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Dries Vincent</p>
214
+ <p class="text-xs text-gray-500 dark:text-muted truncate">The project is due next week</p>
215
+ </div>
216
+ <div class="flex flex-col items-end">
217
+ <span class="text-xs text-gray-500 dark:text-muted">3 hrs ago</span>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer">
222
+ <div class="relative">
223
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
224
+ <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span>
225
+ </div>
226
+ <div class="flex-1 min-w-0">
227
+ <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Lindsay Walton</p>
228
+ <p class="text-xs text-gray-500 dark:text-muted truncate">Check out this link</p>
229
+ </div>
230
+ <div class="flex flex-col items-end">
231
+ <span class="text-xs text-gray-500 dark:text-muted">Yesterday</span>
232
+ <span class="mt-1 inline-flex items-center justify-center h-5 w-5 rounded-full bg-primary-500 text-white text-xs">1</span>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="p-4 flex items-center space-x-3 hover:bg-gray-50 dark:hover:bg-dark-hover cursor-pointer">
237
+ <div class="relative">
238
+ <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
239
+ <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-gray-300 ring-2 ring-white dark:ring-dark-secondary"></span>
240
+ </div>
241
+ <div class="flex-1 min-w-0">
242
+ <p class="text-sm font-medium text-gray-900 dark:text-light truncate">Courtney Henry</p>
243
+ <p class="text-xs text-gray-500 dark:text-muted truncate">Thanks for your help!</p>
244
+ </div>
245
+ <div class="flex flex-col items-end">
246
+ <span class="text-xs text-gray-500 dark:text-muted">2 days ago</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Main Chat Area -->
255
+ <div class="flex-1 flex flex-col overflow-hidden bg-gray-100 dark:bg-dark-secondary">
256
+ <!-- Chat Header -->
257
+ <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-dark-border bg-white dark:bg-dark-header">
258
+ <div class="flex items-center space-x-3">
259
+ <button class="md:hidden p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
260
+ <i class="fas fa-arrow-left"></i>
261
+ </button>
262
+ <div class="relative">
263
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
264
+ <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-dark-secondary"></span>
265
+ </div>
266
+ <div>
267
+ <p class="text-sm font-medium text-gray-900 dark:text-light">Leslie Alexander</p>
268
+ <p class="text-xs text-gray-500 dark:text-muted">Online</p>
269
+ </div>
270
+ </div>
271
+ <div class="flex items-center space-x-4">
272
+ <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
273
+ <i class="fas fa-phone-alt"></i>
274
+ </button>
275
+ <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
276
+ <i class="fas fa-video"></i>
277
+ </button>
278
+ <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
279
+ <i class="fas fa-info-circle"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Messages -->
285
+ <div class="flex-1 overflow-y-auto p-4 space-y-4">
286
+ <!-- Date Divider -->
287
+ <div class="flex items-center justify-center">
288
+ <span class="px-3 py-1 rounded-full text-xs bg-gray-200 dark:bg-dark-card text-gray-600 dark:text-muted">Today</span>
289
+ </div>
290
+
291
+ <!-- Received Message -->
292
+ <div class="flex items-start space-x-2">
293
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
294
+ <div>
295
+ <div class="bg-white dark:bg-dark-card text-gray-800 dark:text-light px-4 py-2 rounded-lg chat-bubble received shadow-sm">
296
+ Hey there! How are you doing?
297
+ </div>
298
+ <p class="text-xs text-gray-500 dark:text-muted mt-1">10:30 AM</p>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Sent Message -->
303
+ <div class="flex items-start justify-end space-x-2">
304
+ <div class="text-right">
305
+ <div class="bg-primary-500 text-white px-4 py-2 rounded-lg chat-bubble sent shadow-sm">
306
+ I'm good, thanks! Just working on that project we discussed.
307
+ </div>
308
+ <p class="text-xs text-gray-500 dark:text-muted mt-1">10:32 AM <i class="fas fa-check-double text-primary-400 ml-1"></i></p>
309
+ </div>
310
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
311
+ </div>
312
+
313
+ <!-- Received Message -->
314
+ <div class="flex items-start space-x-2">
315
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
316
+ <div>
317
+ <div class="bg-white dark:bg-dark-card text-gray-800 dark:text-light px-4 py-2 rounded-lg chat-bubble received shadow-sm">
318
+ Great! How's it coming along? Need any help?
319
+ </div>
320
+ <p class="text-xs text-gray-500 dark:text-muted mt-1">10:33 AM</p>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Sent Message with Image -->
325
+ <div class="flex items-start justify-end space-x-2">
326
+ <div class="text-right">
327
+ <div class="bg-primary-500 text-white px-4 py-2 rounded-lg chat-bubble sent shadow-sm">
328
+ Actually, I could use your input on something. Here's a screenshot:
329
+ </div>
330
+ <div class="mt-2 rounded-lg overflow-hidden shadow-sm">
331
+ <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Project screenshot" class="w-64 h-auto">
332
+ </div>
333
+ <p class="text-xs text-gray-500 dark:text-muted mt-1">10:35 AM <i class="fas fa-check-double text-primary-400 ml-1"></i></p>
334
+ </div>
335
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
336
+ </div>
337
+
338
+ <!-- Encryption Notice -->
339
+ <div class="flex items-center justify-center">
340
+ <span class="px-3 py-1 rounded-full text-xs bg-gray-200 dark:bg-dark-card text-gray-600 dark:text-muted flex items-center">
341
+ <i class="fas fa-lock text-primary-500 mr-1"></i> Messages are end-to-end encrypted
342
+ </span>
343
+ </div>
344
+
345
+ <!-- Typing Indicator -->
346
+ <div class="flex items-start space-x-2">
347
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
348
+ <div>
349
+ <div class="bg-white dark:bg-dark-card px-4 py-2 rounded-lg chat-bubble received shadow-sm">
350
+ <div class="typing-indicator">
351
+ <span></span>
352
+ <span></span>
353
+ <span></span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <!-- Message Input -->
361
+ <div class="p-4 border-t border-gray-200 dark:border-dark-border bg-white dark:bg-dark-header">
362
+ <div class="flex items-center space-x-2">
363
+ <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
364
+ <i class="fas fa-plus"></i>
365
+ </button>
366
+ <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
367
+ <i class="fas fa-image"></i>
368
+ </button>
369
+ <div class="flex-1">
370
+ <input type="text" class="block w-full px-4 py-2 border border-gray-300 dark:border-dark-border rounded-full bg-gray-50 dark:bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Type a message...">
371
+ </div>
372
+ <button class="p-2 rounded-full text-gray-600 dark:text-muted hover:bg-gray-100 dark:hover:bg-dark-hover">
373
+ <i class="fas fa-microphone"></i>
374
+ </button>
375
+ <button class="p-2 rounded-full bg-primary-500 text-white hover:bg-primary-600">
376
+ <i class="fas fa-paper-plane"></i>
377
+ </button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <script>
384
+ // Theme toggle functionality
385
+ const themeToggle = document.getElementById('theme-toggle');
386
+ const html = document.documentElement;
387
+
388
+ // Check for saved theme preference or use system preference
389
+ const savedTheme = localStorage.getItem('theme') ||
390
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
391
+
392
+ // Apply the saved theme
393
+ if (savedTheme === 'dark') {
394
+ html.classList.add('dark');
395
+ } else {
396
+ html.classList.remove('dark');
397
+ }
398
+
399
+ // Toggle theme on button click
400
+ themeToggle.addEventListener('click', () => {
401
+ html.classList.toggle('dark');
402
+ const theme = html.classList.contains('dark') ? 'dark' : 'light';
403
+ localStorage.setItem('theme', theme);
404
+ });
405
+
406
+ // Simulate typing indicator
407
+ setTimeout(() => {
408
+ const typingIndicator = document.querySelector('.typing-indicator').parentElement.parentElement;
409
+ typingIndicator.style.display = 'none';
410
+
411
+ // Add a new received message
412
+ const messagesContainer = document.querySelector('.overflow-y-auto');
413
+ const newMessage = document.createElement('div');
414
+ newMessage.className = 'flex items-start space-x-2';
415
+ newMessage.innerHTML = `
416
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
417
+ <div>
418
+ <div class="bg-white dark:bg-dark-card text-gray-800 dark:text-light px-4 py-2 rounded-lg chat-bubble received shadow-sm">
419
+ The design looks clean! Maybe we could add more contrast to the buttons?
420
+ </div>
421
+ <p class="text-xs text-gray-500 dark:text-muted mt-1">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
422
+ </div>
423
+ `;
424
+ messagesContainer.appendChild(newMessage);
425
+ messagesContainer.scrollTop = messagesContainer.scrollHeight;
426
+ }, 2000);
427
+ </script>
428
+ <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=BigVenom/big-venom-s-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
429
+ </html>
prompts.txt ADDED
File without changes