Hugging Face's logo

Spaces:
ShaunyBoy
/
cartelspace
Running

App Files Community
ShaunyBoy commited on
Commit
cd4169b
·
verified ·
1 Parent(s): 2f13cfe

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +628 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cartelspace
3
- emoji: 🌖
4
- colorFrom: yellow
5
- colorTo: red
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: cartelspace
3
+ emoji: 🐳
4
+ colorFrom: gray
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,628 @@
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>Neon Task Dashboard</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #6366f1;
14
+ --secondary: #8b5cf6;
15
+ --accent: #ec4899;
16
+ --dark: #1e293b;
17
+ --light: #f8fafc;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: #0f172a;
23
+ color: var(--light);
24
+ }
25
+
26
+ .gradient-bg {
27
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
28
+ }
29
+
30
+ .task-card {
31
+ background: rgba(30, 41, 59, 0.7);
32
+ backdrop-filter: blur(10px);
33
+ border: 1px solid rgba(255, 255, 255, 0.1);
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .task-card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
40
+ border-color: var(--primary);
41
+ }
42
+
43
+ .progress-bar {
44
+ height: 6px;
45
+ background: rgba(255, 255, 255, 0.1);
46
+ }
47
+
48
+ .progress-fill {
49
+ height: 100%;
50
+ background: linear-gradient(90deg, var(--primary), var(--accent));
51
+ transition: width 0.5s ease;
52
+ }
53
+
54
+ .neon-text {
55
+ text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
56
+ }
57
+
58
+ .sidebar {
59
+ background: rgba(15, 23, 42, 0.8);
60
+ backdrop-filter: blur(10px);
61
+ }
62
+
63
+ .sidebar-item:hover {
64
+ background: rgba(99, 102, 241, 0.2);
65
+ }
66
+
67
+ .sidebar-item.active {
68
+ background: rgba(99, 102, 241, 0.3);
69
+ border-left: 3px solid var(--primary);
70
+ }
71
+
72
+ @keyframes pulse {
73
+ 0%, 100% {
74
+ opacity: 1;
75
+ }
76
+ 50% {
77
+ opacity: 0.5;
78
+ }
79
+ }
80
+
81
+ .animate-pulse {
82
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
83
+ }
84
+
85
+ .checkbox:checked {
86
+ background-color: var(--primary);
87
+ border-color: var(--primary);
88
+ }
89
+
90
+ .checkbox:checked ~ .checkmark {
91
+ opacity: 1;
92
+ }
93
+ </style>
94
+ </head>
95
+ <body class="min-h-screen flex">
96
+ <!-- Sidebar -->
97
+ <div class="sidebar w-64 h-full fixed hidden md:flex flex-col p-4 space-y-4">
98
+ <div class="flex items-center space-x-3 p-3">
99
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
100
+ <i class="fas fa-rocket text-xl"></i>
101
+ </div>
102
+ <h1 class="text-xl font-bold">TaskFlow</h1>
103
+ </div>
104
+
105
+ <div class="mt-8">
106
+ <div class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
107
+ <i class="fas fa-home"></i>
108
+ <span>Dashboard</span>
109
+ </div>
110
+ <div class="sidebar-item flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
111
+ <i class="fas fa-tasks"></i>
112
+ <span>My Tasks</span>
113
+ </div>
114
+ <div class="sidebar-item flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
115
+ <i class="fas fa-calendar-alt"></i>
116
+ <span>Calendar</span>
117
+ </div>
118
+ <div class="sidebar-item flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
119
+ <i class="fas fa-chart-line"></i>
120
+ <span>Analytics</span>
121
+ </div>
122
+ <div class="sidebar-item flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
123
+ <i class="fas fa-cog"></i>
124
+ <span>Settings</span>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="mt-auto p-4 gradient-bg rounded-lg">
129
+ <h3 class="font-semibold mb-2">Upgrade to Pro</h3>
130
+ <p class="text-sm opacity-80 mb-3">Unlock all features and unlimited tasks</p>
131
+ <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-medium text-sm">Upgrade Now</button>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Main Content -->
136
+ <div class="flex-1 md:ml-64 p-6">
137
+ <!-- Mobile Header -->
138
+ <div class="md:hidden flex justify-between items-center mb-6">
139
+ <button id="menu-toggle" class="text-white">
140
+ <i class="fas fa-bars text-xl"></i>
141
+ </button>
142
+ <div class="flex items-center space-x-3">
143
+ <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white">
144
+ <i class="fas fa-user text-sm"></i>
145
+ </div>
146
+ </div>
147
+ </div>
148
+
149
+ <!-- Header -->
150
+ <div class="flex justify-between items-center mb-8">
151
+ <div>
152
+ <h1 class="text-3xl font-bold neon-text">Dashboard</h1>
153
+ <p class="text-slate-400">Welcome back, Alex! Here's what's happening today.</p>
154
+ </div>
155
+ <div class="flex items-center space-x-4">
156
+ <div class="relative">
157
+ <input type="text" placeholder="Search tasks..." class="bg-slate-800 rounded-full py-2 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
158
+ <i class="fas fa-search absolute left-3 top-2.5 text-slate-500"></i>
159
+ </div>
160
+ <button class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
161
+ <i class="fas fa-plus"></i>
162
+ </button>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Stats Cards -->
167
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
168
+ <div class="task-card rounded-xl p-6">
169
+ <div class="flex justify-between items-start">
170
+ <div>
171
+ <p class="text-slate-400">Total Tasks</p>
172
+ <h2 class="text-3xl font-bold mt-1">24</h2>
173
+ </div>
174
+ <div class="w-12 h-12 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400">
175
+ <i class="fas fa-tasks text-xl"></i>
176
+ </div>
177
+ </div>
178
+ <div class="mt-4">
179
+ <div class="progress-bar rounded-full overflow-hidden">
180
+ <div class="progress-fill w-3/4"></div>
181
+ </div>
182
+ <p class="text-xs text-slate-400 mt-1">18 completed</p>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="task-card rounded-xl p-6">
187
+ <div class="flex justify-between items-start">
188
+ <div>
189
+ <p class="text-slate-400">Overdue</p>
190
+ <h2 class="text-3xl font-bold mt-1">3</h2>
191
+ </div>
192
+ <div class="w-12 h-12 rounded-full bg-red-900/30 flex items-center justify-center text-red-400">
193
+ <i class="fas fa-exclamation text-xl"></i>
194
+ </div>
195
+ </div>
196
+ <div class="mt-4">
197
+ <div class="progress-bar rounded-full overflow-hidden">
198
+ <div class="progress-fill w-1/4 bg-red-500"></div>
199
+ </div>
200
+ <p class="text-xs text-slate-400 mt-1">1 completed</p>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="task-card rounded-xl p-6">
205
+ <div class="flex justify-between items-start">
206
+ <div>
207
+ <p class="text-slate-400">Today</p>
208
+ <h2 class="text-3xl font-bold mt-1">5</h2>
209
+ </div>
210
+ <div class="w-12 h-12 rounded-full bg-green-900/30 flex items-center justify-center text-green-400">
211
+ <i class="fas fa-calendar-day text-xl"></i>
212
+ </div>
213
+ </div>
214
+ <div class="mt-4">
215
+ <div class="progress-bar rounded-full overflow-hidden">
216
+ <div class="progress-fill w-2/5 bg-green-500"></div>
217
+ </div>
218
+ <p class="text-xs text-slate-400 mt-1">2 completed</p>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="task-card rounded-xl p-6">
223
+ <div class="flex justify-between items-start">
224
+ <div>
225
+ <p class="text-slate-400">Upcoming</p>
226
+ <h2 class="text-3xl font-bold mt-1">7</h2>
227
+ </div>
228
+ <div class="w-12 h-12 rounded-full bg-purple-900/30 flex items-center justify-center text-purple-400">
229
+ <i class="fas fa-calendar-alt text-xl"></i>
230
+ </div>
231
+ </div>
232
+ <div class="mt-4">
233
+ <div class="progress-bar rounded-full overflow-hidden">
234
+ <div class="progress-fill w-1/5 bg-purple-500"></div>
235
+ </div>
236
+ <p class="text-xs text-slate-400 mt-1">0 completed</p>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Tasks Section -->
242
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
243
+ <!-- Todo Column -->
244
+ <div class="task-card rounded-xl p-6">
245
+ <div class="flex justify-between items-center mb-6">
246
+ <h2 class="font-bold text-lg">To Do</h2>
247
+ <span class="text-xs bg-indigo-900/30 text-indigo-400 px-2 py-1 rounded-full">5 tasks</span>
248
+ </div>
249
+
250
+ <div class="space-y-4">
251
+ <!-- Task Item -->
252
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700/50">
253
+ <div class="flex items-start space-x-3">
254
+ <div class="relative">
255
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0">
256
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-0 pointer-events-none">
257
+ <i class="fas fa-check"></i>
258
+ </span>
259
+ </div>
260
+ <div class="flex-1">
261
+ <h3 class="font-medium">Design new dashboard</h3>
262
+ <p class="text-xs text-slate-400 mt-1">Due tomorrow</p>
263
+ <div class="flex items-center mt-2 space-x-2">
264
+ <span class="text-xs px-2 py-0.5 bg-indigo-900/30 text-indigo-400 rounded-full">Design</span>
265
+ <span class="text-xs px-2 py-0.5 bg-slate-700 text-slate-400 rounded-full">High</span>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Task Item -->
272
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700/50">
273
+ <div class="flex items-start space-x-3">
274
+ <div class="relative">
275
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0">
276
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-0 pointer-events-none">
277
+ <i class="fas fa-check"></i>
278
+ </span>
279
+ </div>
280
+ <div class="flex-1">
281
+ <h3 class="font-medium">Team meeting</h3>
282
+ <p class="text-xs text-slate-400 mt-1">Today, 2:00 PM</p>
283
+ <div class="flex items-center mt-2 space-x-2">
284
+ <span class="text-xs px-2 py-0.5 bg-purple-900/30 text-purple-400 rounded-full">Meeting</span>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Task Item -->
291
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-red-900/50">
292
+ <div class="flex items-start space-x-3">
293
+ <div class="relative">
294
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0">
295
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-0 pointer-events-none">
296
+ <i class="fas fa-check"></i>
297
+ </span>
298
+ </div>
299
+ <div class="flex-1">
300
+ <h3 class="font-medium">Submit monthly report</h3>
301
+ <p class="text-xs text-red-400 mt-1">Overdue by 2 days</p>
302
+ <div class="flex items-center mt-2 space-x-2">
303
+ <span class="text-xs px-2 py-0.5 bg-red-900/30 text-red-400 rounded-full">Urgent</span>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Add Task Button -->
310
+ <button class="w-full flex items-center justify-center space-x-2 text-slate-400 hover:text-white py-3 rounded-lg border border-dashed border-slate-700 mt-2">
311
+ <i class="fas fa-plus"></i>
312
+ <span>Add Task</span>
313
+ </button>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- In Progress Column -->
318
+ <div class="task-card rounded-xl p-6">
319
+ <div class="flex justify-between items-center mb-6">
320
+ <h2 class="font-bold text-lg">In Progress</h2>
321
+ <span class="text-xs bg-amber-900/30 text-amber-400 px-2 py-1 rounded-full">3 tasks</span>
322
+ </div>
323
+
324
+ <div class="space-y-4">
325
+ <!-- Task Item -->
326
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700/50">
327
+ <div class="flex items-start space-x-3">
328
+ <div class="relative">
329
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0">
330
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-0 pointer-events-none">
331
+ <i class="fas fa-check"></i>
332
+ </span>
333
+ </div>
334
+ <div class="flex-1">
335
+ <h3 class="font-medium">Develop new API endpoints</h3>
336
+ <p class="text-xs text-slate-400 mt-1">Due in 3 days</p>
337
+ <div class="flex items-center mt-2 space-x-2">
338
+ <span class="text-xs px-2 py-0.5 bg-blue-900/30 text-blue-400 rounded-full">Development</span>
339
+ <span class="text-xs px-2 py-0.5 bg-slate-700 text-slate-400 rounded-full">Medium</span>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <!-- Task Item -->
346
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700/50">
347
+ <div class="flex items-start space-x-3">
348
+ <div class="relative">
349
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0">
350
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-0 pointer-events-none">
351
+ <i class="fas fa-check"></i>
352
+ </span>
353
+ </div>
354
+ <div class="flex-1">
355
+ <h3 class="font-medium">User testing session</h3>
356
+ <p class="text-xs text-slate-400 mt-1">Tomorrow, 10:00 AM</p>
357
+ <div class="flex items-center mt-2 space-x-2">
358
+ <span class="text-xs px-2 py-0.5 bg-green-900/30 text-green-400 rounded-full">Research</span>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Task Item -->
365
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700/50">
366
+ <div class="flex items-start space-x-3">
367
+ <div class="relative">
368
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0">
369
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-0 pointer-events-none">
370
+ <i class="fas fa-check"></i>
371
+ </span>
372
+ </div>
373
+ <div class="flex-1">
374
+ <h3 class="font-medium">Update documentation</h3>
375
+ <p class="text-xs text-slate-400 mt-1">Due in 5 days</p>
376
+ <div class="flex items-center mt-2 space-x-2">
377
+ <span class="text-xs px-2 py-0.5 bg-slate-700 text-slate-400 rounded-full">Low</span>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Add Task Button -->
384
+ <button class="w-full flex items-center justify-center space-x-2 text-slate-400 hover:text-white py-3 rounded-lg border border-dashed border-slate-700 mt-2">
385
+ <i class="fas fa-plus"></i>
386
+ <span>Add Task</span>
387
+ </button>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Completed Column -->
392
+ <div class="task-card rounded-xl p-6">
393
+ <div class="flex justify-between items-center mb-6">
394
+ <h2 class="font-bold text-lg">Completed</h2>
395
+ <span class="text-xs bg-green-900/30 text-green-400 px-2 py-1 rounded-full">8 tasks</span>
396
+ </div>
397
+
398
+ <div class="space-y-4">
399
+ <!-- Task Item -->
400
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700/50 opacity-70">
401
+ <div class="flex items-start space-x-3">
402
+ <div class="relative">
403
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0" checked>
404
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-100 pointer-events-none">
405
+ <i class="fas fa-check"></i>
406
+ </span>
407
+ </div>
408
+ <div class="flex-1">
409
+ <h3 class="font-medium line-through">Fix login bug</h3>
410
+ <p class="text-xs text-slate-400 mt-1">Completed yesterday</p>
411
+ <div class="flex items-center mt-2 space-x-2">
412
+ <span class="text-xs px-2 py-0.5 bg-blue-900/30 text-blue-400 rounded-full">Bug</span>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <!-- Task Item -->
419
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700/50 opacity-70">
420
+ <div class="flex items-start space-x-3">
421
+ <div class="relative">
422
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0" checked>
423
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-100 pointer-events-none">
424
+ <i class="fas fa-check"></i>
425
+ </span>
426
+ </div>
427
+ <div class="flex-1">
428
+ <h3 class="font-medium line-through">Client presentation</h3>
429
+ <p class="text-xs text-slate-400 mt-1">Completed 2 days ago</p>
430
+ <div class="flex items-center mt-2 space-x-2">
431
+ <span class="text-xs px-2 py-0.5 bg-purple-900/30 text-purple-400 rounded-full">Presentation</span>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <!-- Task Item -->
438
+ <div class="bg-slate-800/50 rounded-lg p-4 border border-slate-700/50 opacity-70">
439
+ <div class="flex items-start space-x-3">
440
+ <div class="relative">
441
+ <input type="checkbox" class="checkbox appearance-none w-5 h-5 border border-slate-500 rounded-md cursor-pointer checked:border-0" checked>
442
+ <span class="checkmark absolute left-1 top-0.5 text-white text-xs opacity-100 pointer-events-none">
443
+ <i class="fas fa-check"></i>
444
+ </span>
445
+ </div>
446
+ <div class="flex-1">
447
+ <h3 class="font-medium line-through">Update dependencies</h3>
448
+ <p class="text-xs text-slate-400 mt-1">Completed last week</p>
449
+ <div class="flex items-center mt-2 space-x-2">
450
+ <span class="text-xs px-2 py-0.5 bg-slate-700 text-slate-400 rounded-full">Maintenance</span>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- View All Button -->
457
+ <button class="w-full flex items-center justify-center space-x-2 text-slate-400 hover:text-white py-3 rounded-lg border border-dashed border-slate-700 mt-2">
458
+ <span>View All Completed</span>
459
+ <i class="fas fa-chevron-down"></i>
460
+ </button>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Recent Activity -->
466
+ <div class="task-card rounded-xl p-6 mt-8">
467
+ <div class="flex justify-between items-center mb-6">
468
+ <h2 class="font-bold text-lg">Recent Activity</h2>
469
+ <button class="text-sm text-indigo-400">View All</button>
470
+ </div>
471
+
472
+ <div class="space-y-4">
473
+ <!-- Activity Item -->
474
+ <div class="flex items-start space-x-4 p-3 hover:bg-slate-800/50 rounded-lg transition-colors">
475
+ <div class="w-10 h-10 rounded-full bg-indigo-900/30 flex items-center justify-center text-indigo-400">
476
+ <i class="fas fa-check"></i>
477
+ </div>
478
+ <div class="flex-1">
479
+ <p class="text-sm"><span class="font-medium">You</span> completed <span class="font-medium">"Fix login bug"</span></p>
480
+ <p class="text-xs text-slate-400 mt-1">2 hours ago</p>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Activity Item -->
485
+ <div class="flex items-start space-x-4 p-3 hover:bg-slate-800/50 rounded-lg transition-colors">
486
+ <div class="w-10 h-10 rounded-full bg-blue-900/30 flex items-center justify-center text-blue-400">
487
+ <i class="fas fa-comment"></i>
488
+ </div>
489
+ <div class="flex-1">
490
+ <p class="text-sm"><span class="font-medium">Sarah</span> commented on <span class="font-medium">"Design new dashboard"</span></p>
491
+ <p class="text-xs text-slate-400 mt-1">5 hours ago</p>
492
+ </div>
493
+ </div>
494
+
495
+ <!-- Activity Item -->
496
+ <div class="flex items-start space-x-4 p-3 hover:bg-slate-800/50 rounded-lg transition-colors">
497
+ <div class="w-10 h-10 rounded-full bg-purple-900/30 flex items-center justify-center text-purple-400">
498
+ <i class="fas fa-plus"></i>
499
+ </div>
500
+ <div class="flex-1">
501
+ <p class="text-sm"><span class="font-medium">You</span> created a new task <span class="font-medium">"Team meeting"</span></p>
502
+ <p class="text-xs text-slate-400 mt-1">Yesterday</p>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Activity Item -->
507
+ <div class="flex items-start space-x-4 p-3 hover:bg-slate-800/50 rounded-lg transition-colors">
508
+ <div class="w-10 h-10 rounded-full bg-green-900/30 flex items-center justify-center text-green-400">
509
+ <i class="fas fa-check-double"></i>
510
+ </div>
511
+ <div class="flex-1">
512
+ <p class="text-sm"><span class="font-medium">Mark</span> completed <span class="font-medium">"Update documentation"</span></p>
513
+ <p class="text-xs text-slate-400 mt-1">2 days ago</p>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Mobile Menu (hidden by default) -->
521
+ <div id="mobile-menu" class="fixed inset-0 bg-black/80 z-50 hidden">
522
+ <div class="w-4/5 h-full bg-slate-900 p-4">
523
+ <div class="flex justify-between items-center mb-8">
524
+ <div class="flex items-center space-x-3">
525
+ <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white">
526
+ <i class="fas fa-rocket"></i>
527
+ </div>
528
+ <h1 class="text-xl font-bold">TaskFlow</h1>
529
+ </div>
530
+ <button id="close-menu" class="text-white">
531
+ <i class="fas fa-times text-xl"></i>
532
+ </button>
533
+ </div>
534
+
535
+ <div class="space-y-2">
536
+ <div class="sidebar-item active flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
537
+ <i class="fas fa-home"></i>
538
+ <span>Dashboard</span>
539
+ </div>
540
+ <div class="sidebar-item flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
541
+ <i class="fas fa-tasks"></i>
542
+ <span>My Tasks</span>
543
+ </div>
544
+ <div class="sidebar-item flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
545
+ <i class="fas fa-calendar-alt"></i>
546
+ <span>Calendar</span>
547
+ </div>
548
+ <div class="sidebar-item flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
549
+ <i class="fas fa-chart-line"></i>
550
+ <span>Analytics</span>
551
+ </div>
552
+ <div class="sidebar-item flex items-center space-x-3 p-3 rounded-lg cursor-pointer">
553
+ <i class="fas fa-cog"></i>
554
+ <span>Settings</span>
555
+ </div>
556
+ </div>
557
+
558
+ <div class="mt-auto p-4 gradient-bg rounded-lg">
559
+ <h3 class="font-semibold mb-2">Upgrade to Pro</h3>
560
+ <p class="text-sm opacity-80 mb-3">Unlock all features and unlimited tasks</p>
561
+ <button class="w-full bg-white text-indigo-600 py-2 rounded-lg font-medium text-sm">Upgrade Now</button>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <script>
567
+ // Mobile menu toggle
568
+ const menuToggle = document.getElementById('menu-toggle');
569
+ const closeMenu = document.getElementById('close-menu');
570
+ const mobileMenu = document.getElementById('mobile-menu');
571
+
572
+ menuToggle.addEventListener('click', () => {
573
+ mobileMenu.classList.remove('hidden');
574
+ });
575
+
576
+ closeMenu.addEventListener('click', () => {
577
+ mobileMenu.classList.add('hidden');
578
+ });
579
+
580
+ // Checkbox functionality
581
+ document.querySelectorAll('.checkbox').forEach(checkbox => {
582
+ checkbox.addEventListener('change', function() {
583
+ const taskItem = this.closest('.bg-slate-800/50');
584
+ if (this.checked) {
585
+ taskItem.classList.add('opacity-70');
586
+ const title = taskItem.querySelector('h3');
587
+ if (title) {
588
+ title.classList.add('line-through');
589
+ }
590
+ } else {
591
+ taskItem.classList.remove('opacity-70');
592
+ const title = taskItem.querySelector('h3');
593
+ if (title) {
594
+ title.classList.remove('line-through');
595
+ }
596
+ }
597
+ });
598
+ });
599
+
600
+ // Sidebar item active state
601
+ document.querySelectorAll('.sidebar-item').forEach(item => {
602
+ item.addEventListener('click', function() {
603
+ document.querySelectorAll('.sidebar-item').forEach(i => {
604
+ i.classList.remove('active');
605
+ });
606
+ this.classList.add('active');
607
+
608
+ // Close mobile menu if open
609
+ if (mobileMenu.classList.contains('hidden') === false) {
610
+ mobileMenu.classList.add('hidden');
611
+ }
612
+ });
613
+ });
614
+
615
+ // Animate progress bars on page load
616
+ document.addEventListener('DOMContentLoaded', () => {
617
+ const progressBars = document.querySelectorAll('.progress-fill');
618
+ progressBars.forEach(bar => {
619
+ const width = bar.style.width;
620
+ bar.style.width = '0';
621
+ setTimeout(() => {
622
+ bar.style.width = width;
623
+ }, 300);
624
+ });
625
+ });
626
+ </script>
627
+ <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=ShaunyBoy/cartelspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
628
+ </html>
prompts.txt ADDED
File without changes