Hugging Face's logo

Spaces:
mkv890
/
a-simple-task-manager
Running

App Files Community
mkv890 commited on
Commit
42d5bb3
·
verified ·
1 Parent(s): 355dff2

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +396 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: A Simple Task Manager
3
- emoji: 💻
4
- colorFrom: green
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: a-simple-task-manager
3
+ emoji: 🐳
4
+ colorFrom: blue
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,397 @@
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>TaskFlow | Smart Task Manager</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+ .task-card:hover {
18
+ transform: translateY(-2px);
19
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .category-pill {
22
+ transition: all 0.2s ease;
23
+ }
24
+ .category-pill:hover {
25
+ transform: scale(1.05);
26
+ }
27
+ #taskInput:focus {
28
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
29
+ }
30
+ .progress-ring__circle {
31
+ transition: stroke-dashoffset 0.5s;
32
+ transform: rotate(-90deg);
33
+ transform-origin: 50% 50%;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50">
38
+ <div class="min-h-screen flex flex-col">
39
+ <!-- Header -->
40
+ <header class="bg-white shadow-sm">
41
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
42
+ <div class="flex items-center space-x-2">
43
+ <i data-feather="check-circle" class="text-indigo-600 w-8 h-8"></i>
44
+ <h1 class="text-2xl font-bold text-gray-800">TaskFlow</h1>
45
+ </div>
46
+ <div class="flex items-center space-x-4">
47
+ <button class="p-2 rounded-full hover:bg-gray-100">
48
+ <i data-feather="bell" class="text-gray-600"></i>
49
+ </button>
50
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
51
+ <i data-feather="user" class="text-indigo-600 w-4 h-4"></i>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Main Content -->
58
+ <main class="flex-grow">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
60
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
61
+ <!-- Sidebar -->
62
+ <div class="lg:col-span-1 space-y-6">
63
+ <!-- Collapsible Sidebar Toggle -->
64
+ <button id="sidebarToggle" class="lg:hidden w-full mb-4 flex items-center justify-between px-4 py-2 bg-indigo-600 text-white rounded-lg">
65
+ <span>Toggle Sidebar</span>
66
+ <i data-feather="chevron-down" class="w-4 h-4"></i>
67
+ </button>
68
+
69
+ <!-- Add Task -->
70
+ <div class="bg-white rounded-xl shadow-sm p-6">
71
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Add New Task</h2>
72
+ <form id="taskForm">
73
+ <div class="mb-4">
74
+ <input type="text" id="taskInput" placeholder="What needs to be done?"
75
+ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
76
+ </div>
77
+ <div class="mb-4">
78
+ <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
79
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
80
+ <option>Work</option>
81
+ <option>Personal</option>
82
+ <option>Health</option>
83
+ <option>Learning</option>
84
+ <option>Other</option>
85
+ </select>
86
+ </div>
87
+ <div class="mb-4">
88
+ <label class="block text-sm font-medium text-gray-700 mb-1">Due Date</label>
89
+ <input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-2">
90
+ </div>
91
+ <div class="mb-4">
92
+ <label class="block text-sm font-medium text-gray-700 mb-1">Set Reminder</label>
93
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
94
+ <option>No reminder</option>
95
+ <option>5 minutes before</option>
96
+ <option>15 minutes before</option>
97
+ <option>30 minutes before</option>
98
+ <option>1 hour before</option>
99
+ <option>1 day before</option>
100
+ </select>
101
+ </div>
102
+ <div class="mb-4">
103
+ <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label>
104
+ <div class="flex space-x-2">
105
+ <button type="button" class="px-3 py-1 text-xs rounded-full bg-red-100 text-red-800">High</button>
106
+ <button type="button" class="px-3 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</button>
107
+ <button type="button" class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-800">Low</button>
108
+ </div>
109
+ </div>
110
+ <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition duration-200">
111
+ Add Task
112
+ </button>
113
+ </form>
114
+ </div>
115
+
116
+ <!-- Progress - Moved to collapsible section -->
117
+ <div id="progressSection" class="bg-white rounded-xl shadow-sm p-6 hidden lg:block">
118
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Your Progress</h2>
119
+ <div class="flex justify-center mb-4">
120
+ <div class="relative w-32 h-32">
121
+ <svg class="w-full h-full" viewBox="0 0 100 100">
122
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
123
+ <circle class="progress-ring__circle text-indigo-600" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="75.36" />
124
+ </svg>
125
+ <div class="absolute inset-0 flex items-center justify-center">
126
+ <span class="text-2xl font-bold text-gray-800">70%</span>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <div class="space-y-2">
131
+ <div class="flex justify-between text-sm">
132
+ <span class="text-gray-600">Completed</span>
133
+ <span class="font-medium">14 tasks</span>
134
+ </div>
135
+ <div class="flex justify-between text-sm">
136
+ <span class="text-gray-600">Pending</span>
137
+ <span class="font-medium">6 tasks</span>
138
+ </div>
139
+ <div class="flex justify-between text-sm">
140
+ <span class="text-gray-600">Overdue</span>
141
+ <span class="font-medium">2 tasks</span>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Categories - Moved to collapsible section -->
147
+ <div id="categoriesSection" class="bg-white rounded-xl shadow-sm p-6 hidden lg:block">
148
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">Categories</h2>
149
+ <div class="space-y-2">
150
+ <button class="category-pill w-full flex items-center justify-between px-4 py-2 bg-indigo-50 text-indigo-700 rounded-lg">
151
+ <span>All Tasks</span>
152
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">20</span>
153
+ </button>
154
+ <button class="category-pill w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 rounded-lg">
155
+ <span>Work</span>
156
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">8</span>
157
+ </button>
158
+ <button class="category-pill w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 rounded-lg">
159
+ <span>Personal</span>
160
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">5</span>
161
+ </button>
162
+ <button class="category-pill w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 rounded-lg">
163
+ <span>Health</span>
164
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">3</span>
165
+ </button>
166
+ <button class="category-pill w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 rounded-lg">
167
+ <span>Learning</span>
168
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">4</span>
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Main Content Area -->
175
+ <div class="lg:col-span-3 space-y-6">
176
+ <!-- View Toggles -->
177
+ <div class="bg-white rounded-xl shadow-sm p-4">
178
+ <div class="flex justify-between items-center">
179
+ <h2 class="text-xl font-semibold text-gray-800">Today's Tasks</h2>
180
+ <div class="flex space-x-2">
181
+ <button class="px-3 py-1 text-sm rounded-lg bg-indigo-600 text-white">Today</button>
182
+ <button class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50">Week</button>
183
+ <button class="px-3 py-1 text-sm rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-50">Month</button>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Task List -->
189
+ <div class="space-y-4">
190
+ <!-- Task Card -->
191
+ <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up">
192
+ <div class="flex items-start justify-between">
193
+ <div class="flex items-start space-x-4">
194
+ <div class="mt-1">
195
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
196
+ </div>
197
+ <div>
198
+ <h3 class="font-medium text-gray-800">Complete project proposal</h3>
199
+ <p class="text-sm text-gray-500 mt-1">Due today at 3:00 PM</p>
200
+ <div class="flex space-x-2 mt-2">
201
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Work</span>
202
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">High</span>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ <div class="flex space-x-2">
207
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
208
+ <i data-feather="edit-2" class="w-4 h-4"></i>
209
+ </button>
210
+ <button class="p-2 text-gray-400 hover:text-red-600">
211
+ <i data-feather="trash-2" class="w-4 h-4"></i>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Task Card -->
218
+ <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up">
219
+ <div class="flex items-start justify-between">
220
+ <div class="flex items-start space-x-4">
221
+ <div class="mt-1">
222
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
223
+ </div>
224
+ <div>
225
+ <h3 class="font-medium text-gray-800">Gym workout session</h3>
226
+ <p class="text-sm text-gray-500 mt-1">Due today at 6:00 PM</p>
227
+ <div class="flex space-x-2 mt-2">
228
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Health</span>
229
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</span>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ <div class="flex space-x-2">
234
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
235
+ <i data-feather="edit-2" class="w-4 h-4"></i>
236
+ </button>
237
+ <button class="p-2 text-gray-400 hover:text-red-600">
238
+ <i data-feather="trash-2" class="w-4 h-4"></i>
239
+ </button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <!-- Task Card -->
245
+ <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up">
246
+ <div class="flex items-start justify-between">
247
+ <div class="flex items-start space-x-4">
248
+ <div class="mt-1">
249
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500" checked>
250
+ </div>
251
+ <div>
252
+ <h3 class="font-medium text-gray-500 line-through">Morning meditation</h3>
253
+ <p class="text-sm text-gray-400 mt-1">Completed at 8:00 AM</p>
254
+ <div class="flex space-x-2 mt-2">
255
+ <span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Personal</span>
256
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Low</span>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="flex space-x-2">
261
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
262
+ <i data-feather="edit-2" class="w-4 h-4"></i>
263
+ </button>
264
+ <button class="p-2 text-gray-400 hover:text-red-600">
265
+ <i data-feather="trash-2" class="w-4 h-4"></i>
266
+ </button>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <!-- Task Card -->
272
+ <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up">
273
+ <div class="flex items-start justify-between">
274
+ <div class="flex items-start space-x-4">
275
+ <div class="mt-1">
276
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
277
+ </div>
278
+ <div>
279
+ <h3 class="font-medium text-gray-800">Learn React Hooks</h3>
280
+ <p class="text-sm text-gray-500 mt-1">Due tomorrow at 10:00 AM</p>
281
+ <div class="flex space-x-2 mt-2">
282
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Learning</span>
283
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</span>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ <div class="flex space-x-2">
288
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
289
+ <i data-feather="edit-2" class="w-4 h-4"></i>
290
+ </button>
291
+ <button class="p-2 text-gray-400 hover:text-red-600">
292
+ <i data-feather="trash-2" class="w-4 h-4"></i>
293
+ </button>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <!-- Task Card -->
299
+ <div class="task-card bg-white rounded-xl shadow-sm p-6 transition duration-200 cursor-pointer" data-aos="fade-up">
300
+ <div class="flex items-start justify-between">
301
+ <div class="flex items-start space-x-4">
302
+ <div class="mt-1">
303
+ <input type="checkbox" class="rounded text-indigo-600 focus:ring-indigo-500">
304
+ </div>
305
+ <div>
306
+ <h3 class="font-medium text-gray-800">Team meeting</h3>
307
+ <p class="text-sm text-red-500 mt-1">Overdue (Yesterday)</p>
308
+ <div class="flex space-x-2 mt-2">
309
+ <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Work</span>
310
+ <span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">High</span>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="flex space-x-2">
315
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
316
+ <i data-feather="edit-2" class="w-4 h-4"></i>
317
+ </button>
318
+ <button class="p-2 text-gray-400 hover:text-red-600">
319
+ <i data-feather="trash-2" class="w-4 h-4"></i>
320
+ </button>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </main>
329
+
330
+ <!-- Footer -->
331
+ <footer class="bg-white border-t border-gray-200 py-6">
332
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
333
+ <div class="flex flex-col md:flex-row justify-between items-center">
334
+ <p class="text-sm text-gray-500">© 2023 TaskFlow. All rights reserved.</p>
335
+ <div class="flex space-x-6 mt-4 md:mt-0">
336
+ <a href="#" class="text-gray-400 hover:text-gray-500">
337
+ <i data-feather="github" class="w-5 h-5"></i>
338
+ </a>
339
+ <a href="#" class="text-gray-400 hover:text-gray-500">
340
+ <i data-feather="twitter" class="w-5 h-5"></i>
341
+ </a>
342
+ <a href="#" class="text-gray-400 hover:text-gray-500">
343
+ <i data-feather="instagram" class="w-5 h-5"></i>
344
+ </a>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </footer>
349
+ </div>
350
+
351
+ <script>
352
+ AOS.init();
353
+ feather.replace();
354
+
355
+ // Progress circle animation
356
+ document.addEventListener('DOMContentLoaded', function() {
357
+ const circle = document.querySelector('.progress-ring__circle');
358
+ const radius = circle.r.baseVal.value;
359
+ const circumference = radius * 2 * Math.PI;
360
+
361
+ circle.style.strokeDasharray = `${circumference} ${circumference}`;
362
+ circle.style.strokeDashoffset = circumference;
363
+
364
+ const offset = circumference - (70 / 100) * circumference;
365
+ circle.style.strokeDashoffset = offset;
366
+ });
367
+
368
+ // Sidebar toggle functionality
369
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
370
+ const progressSection = document.getElementById('progressSection');
371
+ const categoriesSection = document.getElementById('categoriesSection');
372
+ const icon = this.querySelector('i');
373
+
374
+ if (progressSection.classList.contains('hidden')) {
375
+ progressSection.classList.remove('hidden');
376
+ categoriesSection.classList.remove('hidden');
377
+ icon.setAttribute('data-feather', 'chevron-up');
378
+ } else {
379
+ progressSection.classList.add('hidden');
380
+ categoriesSection.classList.add('hidden');
381
+ icon.setAttribute('data-feather', 'chevron-down');
382
+ }
383
+ feather.replace();
384
+ });
385
+
386
+ // Task form submission
387
+ document.getElementById('taskForm').addEventListener('submit', function(e) {
388
+ e.preventDefault();
389
+ const taskInput = document.getElementById('taskInput');
390
+ if (taskInput.value.trim() !== '') {
391
+ alert('Task added successfully!');
392
+ taskInput.value = '';
393
+ }
394
+ });
395
+ </script>
396
+ </body>
397
  </html>
prompts.txt ADDED
File without changes