Hugging Face's logo

Spaces:
manyone
/
manyone-space
Running

App Files Community
manyone commited on
Commit
39524b7
·
verified ·
1 Parent(s): 0f23996

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +595 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Manyone Space
3
- emoji: 😻
4
- colorFrom: blue
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: manyone-space
3
+ emoji: 🐳
4
+ colorFrom: pink
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,595 @@
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>Task Manager</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
+ .kanban-column {
11
+ min-height: 300px;
12
+ background-color: #f3f4f6;
13
+ border-radius: 0.5rem;
14
+ padding: 1rem;
15
+ }
16
+ .task-card {
17
+ transition: all 0.3s ease;
18
+ cursor: grab;
19
+ }
20
+ .task-card:active {
21
+ cursor: grabbing;
22
+ }
23
+ .task-card.dragging {
24
+ opacity: 0.5;
25
+ transform: scale(1.05);
26
+ }
27
+ .kanban-column.highlight {
28
+ background-color: #e5e7eb;
29
+ }
30
+ .view-option.active {
31
+ background-color: #3b82f6;
32
+ color: white;
33
+ }
34
+ .category-work { border-left: 4px solid #3b82f6; }
35
+ .category-errand { border-left: 4px solid #10b981; }
36
+ .category-home { border-left: 4px solid #f59e0b; }
37
+ .category-social { border-left: 4px solid #8b5cf6; }
38
+ .status-todo { background-color: #f3f4f6; }
39
+ .status-in-progress { background-color: #bfdbfe; }
40
+ .status-done { background-color: #dcfce7; }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-100 min-h-screen">
44
+ <div class="container mx-auto px-4 py-8">
45
+ <header class="mb-8">
46
+ <h1 class="text-3xl font-bold text-gray-800">Task Manager</h1>
47
+ <p class="text-gray-600">Organize your tasks efficiently</p>
48
+ </header>
49
+
50
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
51
+ <div class="flex justify-between items-center mb-6">
52
+ <div class="flex space-x-2">
53
+ <button id="list-view-btn" class="view-option active px-4 py-2 rounded-lg border border-gray-300">
54
+ <i class="fas fa-list mr-2"></i>List View
55
+ </button>
56
+ <button id="kanban-view-btn" class="view-option px-4 py-2 rounded-lg border border-gray-300">
57
+ <i class="fas fa-columns mr-2"></i>Kanban Board
58
+ </button>
59
+ <button id="card-view-btn" class="view-option px-4 py-2 rounded-lg border border-gray-300">
60
+ <i class="fas fa-grip mr-2"></i>Card View
61
+ </button>
62
+ </div>
63
+ <button id="add-task-btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
64
+ <i class="fas fa-plus mr-2"></i>Add Task
65
+ </button>
66
+ </div>
67
+
68
+ <div class="mb-6 flex flex-wrap gap-4">
69
+ <div>
70
+ <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Category</label>
71
+ <select id="category-filter" class="border border-gray-300 rounded-md px-3 py-2 w-full">
72
+ <option value="all">All Categories</option>
73
+ <option value="work">Work</option>
74
+ <option value="errand">Errand</option>
75
+ <option value="home">Home</option>
76
+ <option value="social">Social</option>
77
+ </select>
78
+ </div>
79
+ <div>
80
+ <label class="block text-sm font-medium text-gray-700 mb-1">Filter by Status</label>
81
+ <select id="status-filter" class="border border-gray-300 rounded-md px-3 py-2 w-full">
82
+ <option value="all">All Statuses</option>
83
+ <option value="to-do">To Do</option>
84
+ <option value="in-progress">In Progress</option>
85
+ <option value="done">Done</option>
86
+ </select>
87
+ </div>
88
+ <div id="kanban-grouping-controls" class="hidden">
89
+ <label class="block text-sm font-medium text-gray-700 mb-1">Group By</label>
90
+ <select id="kanban-group-by" class="border border-gray-300 rounded-md px-3 py-2 w-full">
91
+ <option value="status">Status</option>
92
+ <option value="category">Category</option>
93
+ </select>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- List View -->
98
+ <div id="list-view" class="view-content">
99
+ <table class="min-w-full divide-y divide-gray-200">
100
+ <thead class="bg-gray-50">
101
+ <tr>
102
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th>
103
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
104
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
105
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
106
+ </tr>
107
+ </thead>
108
+ <tbody id="task-list" class="bg-white divide-y divide-gray-200">
109
+ <!-- Tasks will be populated here -->
110
+ </tbody>
111
+ </table>
112
+ </div>
113
+
114
+ <!-- Kanban View -->
115
+ <div id="kanban-view" class="view-content hidden">
116
+ <div id="kanban-board" class="grid grid-cols-1 md:grid-cols-3 gap-4">
117
+ <!-- Kanban columns will be populated here -->
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Card View -->
122
+ <div id="card-view" class="view-content hidden">
123
+ <div id="card-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
124
+ <!-- Cards will be populated here -->
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Add/Edit Task Modal -->
131
+ <div id="task-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
132
+ <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
133
+ <div class="flex justify-between items-center mb-4">
134
+ <h3 id="modal-title" class="text-xl font-semibold text-gray-800">Add New Task</h3>
135
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
136
+ <i class="fas fa-times"></i>
137
+ </button>
138
+ </div>
139
+ <form id="task-form">
140
+ <input type="hidden" id="task-id">
141
+ <div class="mb-4">
142
+ <label for="task-description" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
143
+ <textarea id="task-description" rows="3" class="border border-gray-300 rounded-md px-3 py-2 w-full" required></textarea>
144
+ </div>
145
+ <div class="grid grid-cols-2 gap-4 mb-4">
146
+ <div>
147
+ <label for="task-category" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
148
+ <select id="task-category" class="border border-gray-300 rounded-md px-3 py-2 w-full" required>
149
+ <option value="work">Work</option>
150
+ <option value="errand">Errand</option>
151
+ <option value="home">Home</option>
152
+ <option value="social">Social</option>
153
+ </select>
154
+ </div>
155
+ <div>
156
+ <label for="task-status" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
157
+ <select id="task-status" class="border border-gray-300 rounded-md px-3 py-2 w-full" required>
158
+ <option value="to-do">To Do</option>
159
+ <option value="in-progress">In Progress</option>
160
+ <option value="done">Done</option>
161
+ </select>
162
+ </div>
163
+ </div>
164
+ <div class="flex justify-end space-x-3">
165
+ <button type="button" id="cancel-task" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
166
+ Cancel
167
+ </button>
168
+ <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
169
+ Save Task
170
+ </button>
171
+ </div>
172
+ </form>
173
+ </div>
174
+ </div>
175
+
176
+ <script>
177
+ // Sample initial tasks
178
+ let tasks = [
179
+ { id: 1, description: "Complete project report", category: "work", status: "in-progress" },
180
+ { id: 2, description: "Buy groceries", category: "errand", status: "to-do" },
181
+ { id: 3, description: "Call mom", category: "social", status: "to-do" },
182
+ { id: 4, description: "Fix leaking faucet", category: "home", status: "done" },
183
+ { id: 5, description: "Prepare presentation for meeting", category: "work", status: "to-do" },
184
+ { id: 6, description: "Go to the gym", category: "social", status: "in-progress" },
185
+ { id: 7, description: "Pay electricity bill", category: "errand", status: "to-do" },
186
+ { id: 8, description: "Organize closet", category: "home", status: "to-do" },
187
+ { id: 9, description: "Team lunch", category: "social", status: "done" },
188
+ { id: 10, description: "Review code changes", category: "work", status: "in-progress" },
189
+ { id: 11, description: "Pick up dry cleaning", category: "errand", status: "done" },
190
+ { id: 12, description: "Water plants", category: "home", status: "to-do" }
191
+ ];
192
+
193
+ // DOM elements
194
+ const listView = document.getElementById('list-view');
195
+ const kanbanView = document.getElementById('kanban-view');
196
+ const cardView = document.getElementById('card-view');
197
+ const listViewBtn = document.getElementById('list-view-btn');
198
+ const kanbanViewBtn = document.getElementById('kanban-view-btn');
199
+ const cardViewBtn = document.getElementById('card-view-btn');
200
+ const taskList = document.getElementById('task-list');
201
+ const kanbanBoard = document.getElementById('kanban-board');
202
+ const cardContainer = document.getElementById('card-container');
203
+ const addTaskBtn = document.getElementById('add-task-btn');
204
+ const taskModal = document.getElementById('task-modal');
205
+ const closeModal = document.getElementById('close-modal');
206
+ const cancelTask = document.getElementById('cancel-task');
207
+ const taskForm = document.getElementById('task-form');
208
+ const modalTitle = document.getElementById('modal-title');
209
+ const taskIdInput = document.getElementById('task-id');
210
+ const taskDescription = document.getElementById('task-description');
211
+ const taskCategory = document.getElementById('task-category');
212
+ const taskStatus = document.getElementById('task-status');
213
+ const categoryFilter = document.getElementById('category-filter');
214
+ const statusFilter = document.getElementById('status-filter');
215
+ const kanbanGroupingControls = document.getElementById('kanban-grouping-controls');
216
+ const kanbanGroupBy = document.getElementById('kanban-group-by');
217
+
218
+ // View management
219
+ function showView(view) {
220
+ document.querySelectorAll('.view-content').forEach(v => v.classList.add('hidden'));
221
+ document.querySelectorAll('.view-option').forEach(btn => btn.classList.remove('active'));
222
+
223
+ view.classList.remove('hidden');
224
+
225
+ if (view === listView) {
226
+ listViewBtn.classList.add('active');
227
+ kanbanGroupingControls.classList.add('hidden');
228
+ renderListView();
229
+ } else if (view === kanbanView) {
230
+ kanbanViewBtn.classList.add('active');
231
+ kanbanGroupingControls.classList.remove('hidden');
232
+ renderKanbanView();
233
+ } else if (view === cardView) {
234
+ cardViewBtn.classList.add('active');
235
+ kanbanGroupingControls.classList.add('hidden');
236
+ renderCardView();
237
+ }
238
+ }
239
+
240
+ // Render functions
241
+ function renderListView() {
242
+ const filteredTasks = filterTasks();
243
+ taskList.innerHTML = '';
244
+
245
+ filteredTasks.forEach(task => {
246
+ const row = document.createElement('tr');
247
+ row.className = `status-${task.status.replace(' ', '-')}`;
248
+
249
+ row.innerHTML = `
250
+ <td class="px-6 py-4 whitespace-nowrap">
251
+ <div class="text-sm font-medium text-gray-900">${task.description}</div>
252
+ </td>
253
+ <td class="px-6 py-4 whitespace-nowrap">
254
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
255
+ ${getCategoryColorClass(task.category)}">
256
+ ${capitalizeFirstLetter(task.category)}
257
+ </span>
258
+ </td>
259
+ <td class="px-6 py-4 whitespace-nowrap">
260
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
261
+ ${getStatusColorClass(task.status)}">
262
+ ${capitalizeFirstLetter(task.status.replace('-', ' '))}
263
+ </span>
264
+ </td>
265
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
266
+ <button class="edit-task text-blue-600 hover:text-blue-900 mr-3" data-id="${task.id}">
267
+ <i class="fas fa-edit"></i>
268
+ </button>
269
+ <button class="delete-task text-red-600 hover:text-red-900" data-id="${task.id}">
270
+ <i class="fas fa-trash"></i>
271
+ </button>
272
+ </td>
273
+ `;
274
+
275
+ taskList.appendChild(row);
276
+ });
277
+
278
+ // Add event listeners to edit and delete buttons
279
+ document.querySelectorAll('.edit-task').forEach(btn => {
280
+ btn.addEventListener('click', (e) => editTask(e.target.closest('button').dataset.id));
281
+ });
282
+
283
+ document.querySelectorAll('.delete-task').forEach(btn => {
284
+ btn.addEventListener('click', (e) => deleteTask(e.target.closest('button').dataset.id));
285
+ });
286
+ }
287
+
288
+ function renderKanbanView() {
289
+ const groupBy = kanbanGroupBy.value;
290
+ const filteredTasks = filterTasks();
291
+
292
+ // Define groups based on selection
293
+ let groups = [];
294
+ if (groupBy === 'status') {
295
+ groups = ['to-do', 'in-progress', 'done'];
296
+ } else {
297
+ groups = ['work', 'errand', 'home', 'social'];
298
+ }
299
+
300
+ kanbanBoard.innerHTML = '';
301
+
302
+ groups.forEach(group => {
303
+ const columnTasks = filteredTasks.filter(task =>
304
+ groupBy === 'status' ? task.status === group : task.category === group
305
+ );
306
+
307
+ const column = document.createElement('div');
308
+ column.className = 'kanban-column';
309
+ column.dataset.group = group;
310
+
311
+ const columnTitle = document.createElement('h3');
312
+ columnTitle.className = 'text-lg font-semibold mb-4';
313
+ columnTitle.textContent = capitalizeFirstLetter(group.replace('-', ' '));
314
+
315
+ column.appendChild(columnTitle);
316
+
317
+ const tasksContainer = document.createElement('div');
318
+ tasksContainer.className = 'space-y-3';
319
+
320
+ columnTasks.forEach(task => {
321
+ const taskCard = document.createElement('div');
322
+ taskCard.className = `task-card p-3 rounded-md shadow-sm bg-white ${groupBy === 'category' ? `category-${task.category}` : ''}`;
323
+ taskCard.draggable = true;
324
+ taskCard.dataset.id = task.id;
325
+
326
+ taskCard.innerHTML = `
327
+ <div class="text-sm mb-2">${task.description}</div>
328
+ <div class="flex justify-between items-center text-xs">
329
+ <span class="px-2 py-1 rounded-full ${groupBy === 'status' ? getCategoryColorClass(task.category) : getStatusColorClass(task.status)}">
330
+ ${capitalizeFirstLetter(groupBy === 'status' ? task.category : task.status.replace('-', ' '))}
331
+ </span>
332
+ <div>
333
+ <button class="edit-task text-blue-600 hover:text-blue-900 mr-2" data-id="${task.id}">
334
+ <i class="fas fa-edit"></i>
335
+ </button>
336
+ <button class="delete-task text-red-600 hover:text-red-900" data-id="${task.id}">
337
+ <i class="fas fa-trash"></i>
338
+ </button>
339
+ </div>
340
+ </div>
341
+ `;
342
+
343
+ tasksContainer.appendChild(taskCard);
344
+ });
345
+
346
+ column.appendChild(tasksContainer);
347
+ kanbanBoard.appendChild(column);
348
+ });
349
+
350
+ // Add event listeners to edit and delete buttons
351
+ document.querySelectorAll('.edit-task').forEach(btn => {
352
+ btn.addEventListener('click', (e) => editTask(e.target.closest('button').dataset.id));
353
+ });
354
+
355
+ document.querySelectorAll('.delete-task').forEach(btn => {
356
+ btn.addEventListener('click', (e) => deleteTask(e.target.closest('button').dataset.id));
357
+ });
358
+
359
+ // Setup drag and drop
360
+ setupDragAndDrop();
361
+ }
362
+
363
+ function renderCardView() {
364
+ const filteredTasks = filterTasks();
365
+ cardContainer.innerHTML = '';
366
+
367
+ filteredTasks.forEach(task => {
368
+ const card = document.createElement('div');
369
+ card.className = `task-card p-4 rounded-lg shadow-sm bg-white ${getStatusClass(task.status)} category-${task.category}`;
370
+
371
+ card.innerHTML = `
372
+ <div class="text-sm mb-3">${task.description}</div>
373
+ <div class="flex justify-between items-center text-xs">
374
+ <span class="px-2 py-1 rounded-full ${getCategoryColorClass(task.category)}">
375
+ ${capitalizeFirstLetter(task.category)}
376
+ </span>
377
+ <span class="px-2 py-1 rounded-full ${getStatusColorClass(task.status)}">
378
+ ${capitalizeFirstLetter(task.status.replace('-', ' '))}
379
+ </span>
380
+ </div>
381
+ <div class="mt-3 flex justify-end space-x-2">
382
+ <button class="edit-task text-blue-600 hover:text-blue-900" data-id="${task.id}">
383
+ <i class="fas fa-edit"></i>
384
+ </button>
385
+ <button class="delete-task text-red-600 hover:text-red-900" data-id="${task.id}">
386
+ <i class="fas fa-trash"></i>
387
+ </button>
388
+ </div>
389
+ `;
390
+
391
+ cardContainer.appendChild(card);
392
+ });
393
+
394
+ // Add event listeners to edit and delete buttons
395
+ document.querySelectorAll('.edit-task').forEach(btn => {
396
+ btn.addEventListener('click', (e) => editTask(e.target.closest('button').dataset.id));
397
+ });
398
+
399
+ document.querySelectorAll('.delete-task').forEach(btn => {
400
+ btn.addEventListener('click', (e) => deleteTask(e.target.closest('button').dataset.id));
401
+ });
402
+ }
403
+
404
+ // Task CRUD operations
405
+ function addTask(task) {
406
+ task.id = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
407
+ tasks.push(task);
408
+ renderCurrentView();
409
+ }
410
+
411
+ function updateTask(updatedTask) {
412
+ const index = tasks.findIndex(t => t.id === parseInt(updatedTask.id));
413
+ if (index !== -1) {
414
+ tasks[index] = updatedTask;
415
+ renderCurrentView();
416
+ }
417
+ }
418
+
419
+ function deleteTask(id) {
420
+ if (confirm('Are you sure you want to delete this task?')) {
421
+ tasks = tasks.filter(task => task.id !== parseInt(id));
422
+ renderCurrentView();
423
+ }
424
+ }
425
+
426
+ function editTask(id) {
427
+ const task = tasks.find(t => t.id === parseInt(id));
428
+ if (task) {
429
+ modalTitle.textContent = 'Edit Task';
430
+ taskIdInput.value = task.id;
431
+ taskDescription.value = task.description;
432
+ taskCategory.value = task.category;
433
+ taskStatus.value = task.status;
434
+ showModal();
435
+ }
436
+ }
437
+
438
+ // Modal functions
439
+ function showModal() {
440
+ taskModal.classList.remove('hidden');
441
+ }
442
+
443
+ function hideModal() {
444
+ taskModal.classList.add('hidden');
445
+ taskForm.reset();
446
+ taskIdInput.value = '';
447
+ }
448
+
449
+ // Helper functions
450
+ function filterTasks() {
451
+ const category = categoryFilter.value;
452
+ const status = statusFilter.value;
453
+
454
+ return tasks.filter(task => {
455
+ const categoryMatch = category === 'all' || task.category === category;
456
+ const statusMatch = status === 'all' || task.status === status.replace(' ', '-');
457
+ return categoryMatch && statusMatch;
458
+ });
459
+ }
460
+
461
+ function getCategoryColorClass(category) {
462
+ switch(category) {
463
+ case 'work': return 'bg-blue-100 text-blue-800';
464
+ case 'errand': return 'bg-green-100 text-green-800';
465
+ case 'home': return 'bg-yellow-100 text-yellow-800';
466
+ case 'social': return 'bg-purple-100 text-purple-800';
467
+ default: return 'bg-gray-100 text-gray-800';
468
+ }
469
+ }
470
+
471
+ function getStatusColorClass(status) {
472
+ switch(status) {
473
+ case 'to-do': return 'bg-gray-100 text-gray-800';
474
+ case 'in-progress': return 'bg-blue-100 text-blue-800';
475
+ case 'done': return 'bg-green-100 text-green-800';
476
+ default: return 'bg-gray-100 text-gray-800';
477
+ }
478
+ }
479
+
480
+ function getStatusClass(status) {
481
+ return `status-${status.replace(' ', '-')}`;
482
+ }
483
+
484
+ function capitalizeFirstLetter(string) {
485
+ return string.charAt(0).toUpperCase() + string.slice(1);
486
+ }
487
+
488
+ function renderCurrentView() {
489
+ if (!listView.classList.contains('hidden')) {
490
+ renderListView();
491
+ } else if (!kanbanView.classList.contains('hidden')) {
492
+ renderKanbanView();
493
+ } else if (!cardView.classList.contains('hidden')) {
494
+ renderCardView();
495
+ }
496
+ }
497
+
498
+ // Drag and drop functionality
499
+ function setupDragAndDrop() {
500
+ const taskCards = document.querySelectorAll('.task-card');
501
+ const kanbanColumns = document.querySelectorAll('.kanban-column');
502
+
503
+ let draggedItem = null;
504
+
505
+ taskCards.forEach(card => {
506
+ card.addEventListener('dragstart', (e) => {
507
+ draggedItem = card;
508
+ setTimeout(() => {
509
+ card.classList.add('dragging');
510
+ }, 0);
511
+ });
512
+
513
+ card.addEventListener('dragend', () => {
514
+ card.classList.remove('dragging');
515
+ draggedItem = null;
516
+ });
517
+ });
518
+
519
+ kanbanColumns.forEach(column => {
520
+ column.addEventListener('dragover', (e) => {
521
+ e.preventDefault();
522
+ column.classList.add('highlight');
523
+ });
524
+
525
+ column.addEventListener('dragleave', () => {
526
+ column.classList.remove('highlight');
527
+ });
528
+
529
+ column.addEventListener('drop', (e) => {
530
+ e.preventDefault();
531
+ column.classList.remove('highlight');
532
+
533
+ if (draggedItem) {
534
+ const taskId = parseInt(draggedItem.dataset.id);
535
+ const newGroup = column.dataset.group;
536
+ const groupBy = kanbanGroupBy.value;
537
+
538
+ const task = tasks.find(t => t.id === taskId);
539
+ if (task) {
540
+ if (groupBy === 'status') {
541
+ task.status = newGroup;
542
+ } else {
543
+ task.category = newGroup;
544
+ }
545
+
546
+ renderKanbanView();
547
+ }
548
+ }
549
+ });
550
+ });
551
+ }
552
+
553
+ // Event listeners
554
+ listViewBtn.addEventListener('click', () => showView(listView));
555
+ kanbanViewBtn.addEventListener('click', () => showView(kanbanView));
556
+ cardViewBtn.addEventListener('click', () => showView(cardView));
557
+
558
+ addTaskBtn.addEventListener('click', () => {
559
+ modalTitle.textContent = 'Add New Task';
560
+ taskIdInput.value = '';
561
+ taskForm.reset();
562
+ showModal();
563
+ });
564
+
565
+ closeModal.addEventListener('click', hideModal);
566
+ cancelTask.addEventListener('click', hideModal);
567
+
568
+ taskForm.addEventListener('submit', (e) => {
569
+ e.preventDefault();
570
+
571
+ const taskData = {
572
+ id: taskIdInput.value ? parseInt(taskIdInput.value) : null,
573
+ description: taskDescription.value,
574
+ category: taskCategory.value,
575
+ status: taskStatus.value
576
+ };
577
+
578
+ if (taskData.id) {
579
+ updateTask(taskData);
580
+ } else {
581
+ addTask(taskData);
582
+ }
583
+
584
+ hideModal();
585
+ });
586
+
587
+ categoryFilter.addEventListener('change', renderCurrentView);
588
+ statusFilter.addEventListener('change', renderCurrentView);
589
+ kanbanGroupBy.addEventListener('change', renderKanbanView);
590
+
591
+ // Initialize
592
+ showView(listView);
593
+ </script>
594
+ <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=manyone/manyone-space" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
595
+ </html>