Hugging Face's logo

Spaces:
MoiMoi-01
/
project-manager
Running

App Files Community
MoiMoi-01 commited on
Commit
ab3ac32
·
verified ·
1 Parent(s): 6cb60c5

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +823 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Project Manager
3
- emoji: 🦀
4
  colorFrom: pink
5
- colorTo: yellow
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: project-manager
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: green
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,823 @@
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>Project Manager - Card View</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
+ .card-hover {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .status-badge {
18
+ position: absolute;
19
+ top: -10px;
20
+ right: -10px;
21
+ border-radius: 9999px;
22
+ padding: 0.25rem 0.5rem;
23
+ font-size: 0.75rem;
24
+ font-weight: 600;
25
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
26
+ }
27
+ .tag-pill {
28
+ transition: all 0.2s ease;
29
+ }
30
+ .tag-pill:hover {
31
+ transform: scale(1.05);
32
+ }
33
+ .fade-in {
34
+ animation: fadeIn 0.3s ease-in-out;
35
+ }
36
+ @keyframes fadeIn {
37
+ from { opacity: 0; transform: translateY(10px); }
38
+ to { opacity: 1; transform: translateY(0); }
39
+ }
40
+ .modal-overlay {
41
+ background-color: rgba(0, 0, 0, 0.5);
42
+ backdrop-filter: blur(4px);
43
+ }
44
+ .form-input:focus {
45
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50 min-h-screen">
50
+ <div class="container mx-auto px-4 py-8">
51
+ <!-- Header -->
52
+ <header class="flex flex-col md:flex-row justify-between items-center mb-8">
53
+ <div>
54
+ <h1 class="text-3xl font-bold text-gray-800">Project Manager</h1>
55
+ <p class="text-gray-600">Track and manage your projects</p>
56
+ </div>
57
+ <button id="addProjectBtn" class="mt-4 md:mt-0 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center transition-colors">
58
+ <i class="fas fa-plus mr-2"></i> Add Project
59
+ </button>
60
+ </header>
61
+
62
+ <!-- Filter Controls -->
63
+ <div class="mb-8 bg-white p-4 rounded-lg shadow-sm">
64
+ <div class="flex flex-wrap items-center gap-4">
65
+ <div class="flex-1 min-w-[200px]">
66
+ <label for="statusFilter" class="block text-sm font-medium text-gray-700 mb-1">Status</label>
67
+ <select id="statusFilter" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
68
+ <option value="all">All Statuses</option>
69
+ <option value="Not Started">Not Started</option>
70
+ <option value="In Progress">In Progress</option>
71
+ <option value="Completed">Completed</option>
72
+ <option value="On Hold">On Hold</option>
73
+ </select>
74
+ </div>
75
+ <div class="flex-1 min-w-[200px]">
76
+ <label for="tagFilter" class="block text-sm font-medium text-gray-700 mb-1">Tags</label>
77
+ <select id="tagFilter" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
78
+ <option value="all">All Tags</option>
79
+ <!-- Tags will be populated dynamically -->
80
+ </select>
81
+ </div>
82
+ <div class="flex items-end">
83
+ <button id="resetFilters" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md transition-colors">
84
+ Reset Filters
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Projects Grid -->
91
+ <div id="projectsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
92
+ <!-- Project cards will be inserted here dynamically -->
93
+ </div>
94
+
95
+ <!-- Empty State -->
96
+ <div id="emptyState" class="hidden text-center py-12">
97
+ <div class="mx-auto max-w-md">
98
+ <i class="fas fa-folder-open text-5xl text-gray-300 mb-4"></i>
99
+ <h3 class="text-xl font-medium text-gray-700 mb-2">No projects found</h3>
100
+ <p class="text-gray-500 mb-4">Add a new project or adjust your filters</p>
101
+ <button id="addProjectBtnEmpty" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg inline-flex items-center transition-colors">
102
+ <i class="fas fa-plus mr-2"></i> Add Project
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Add/Edit Project Modal -->
109
+ <div id="projectModal" class="fixed inset-0 z-50 hidden">
110
+ <div class="modal-overlay absolute inset-0"></div>
111
+ <div class="flex items-center justify-center min-h-screen">
112
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
113
+ <div class="p-6">
114
+ <div class="flex justify-between items-center mb-4">
115
+ <h3 id="modalTitle" class="text-xl font-bold text-gray-800">Add New Project</h3>
116
+ <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
117
+ <i class="fas fa-times"></i>
118
+ </button>
119
+ </div>
120
+
121
+ <form id="projectForm" class="space-y-4">
122
+ <input type="hidden" id="projectId">
123
+
124
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
125
+ <div>
126
+ <label for="projectName" class="block text-sm font-medium text-gray-700 mb-1">Project Name *</label>
127
+ <input type="text" id="projectName" required class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500">
128
+ </div>
129
+
130
+ <div>
131
+ <label for="projectStatus" class="block text-sm font-medium text-gray-700 mb-1">Status *</label>
132
+ <select id="projectStatus" required class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-500">
133
+ <option value="Not Started">Not Started</option>
134
+ <option value="In Progress">In Progress</option>
135
+ <option value="Completed">Completed</option>
136
+ <option value="On Hold">On Hold</option>
137
+ </select>
138
+ </div>
139
+ </div>
140
+
141
+ <div>
142
+ <label for="projectImage" class="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
143
+ <input type="url" id="projectImage" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500">
144
+ </div>
145
+
146
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
147
+ <div>
148
+ <label for="projectDateRange" class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
149
+ <input type="text" id="projectDateRange" placeholder="e.g. Jan 2023 - Mar 2023" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500">
150
+ </div>
151
+
152
+ <div>
153
+ <label for="projectTechnologies" class="block text-sm font-medium text-gray-700 mb-1">Technologies (comma separated)</label>
154
+ <input type="text" id="projectTechnologies" placeholder="e.g. React, Node.js, MongoDB" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500">
155
+ </div>
156
+ </div>
157
+
158
+ <div>
159
+ <label for="projectDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label>
160
+ <textarea id="projectDescription" rows="3" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"></textarea>
161
+ </div>
162
+
163
+ <div>
164
+ <label for="projectTags" class="block text-sm font-medium text-gray-700 mb-1">Tags (comma separated)</label>
165
+ <input type="text" id="projectTags" placeholder="e.g. web, mobile, api" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500">
166
+ </div>
167
+
168
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
169
+ <div>
170
+ <label for="projectGithub" class="block text-sm font-medium text-gray-700 mb-1">GitHub Link</label>
171
+ <input type="url" id="projectGithub" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500">
172
+ </div>
173
+
174
+ <div>
175
+ <label for="projectDemo" class="block text-sm font-medium text-gray-700 mb-1">Demo Link</label>
176
+ <input type="url" id="projectDemo" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500">
177
+ </div>
178
+
179
+ <div>
180
+ <label for="projectReadme" class="block text-sm font-medium text-gray-700 mb-1">README Link</label>
181
+ <input type="url" id="projectReadme" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500">
182
+ </div>
183
+ </div>
184
+
185
+ <div>
186
+ <label for="projectNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
187
+ <textarea id="projectNotes" rows="3" class="w-full border border-gray-300 rounded-md py-2 px-3 form-input focus:outline-none focus:border-blue-500"></textarea>
188
+ </div>
189
+
190
+ <div class="flex justify-end space-x-3 pt-4">
191
+ <button type="button" id="cancelModalBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
192
+ Cancel
193
+ </button>
194
+ <button type="submit" id="saveProjectBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
195
+ Save Project
196
+ </button>
197
+ </div>
198
+ </form>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Project Details Modal -->
205
+ <div id="detailsModal" class="fixed inset-0 z-50 hidden">
206
+ <div class="modal-overlay absolute inset-0"></div>
207
+ <div class="flex items-center justify-center min-h-screen">
208
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
209
+ <div class="p-6">
210
+ <div class="flex justify-between items-center mb-4">
211
+ <h3 id="detailsTitle" class="text-xl font-bold text-gray-800">Project Details</h3>
212
+ <button id="closeDetailsBtn" class="text-gray-500 hover:text-gray-700">
213
+ <i class="fas fa-times"></i>
214
+ </button>
215
+ </div>
216
+
217
+ <div id="detailsContent" class="space-y-4">
218
+ <!-- Details will be populated here -->
219
+ </div>
220
+
221
+ <div class="flex justify-end space-x-3 pt-6">
222
+ <button id="editDetailsBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
223
+ Edit Project
224
+ </button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Delete Confirmation Modal -->
232
+ <div id="deleteModal" class="fixed inset-0 z-50 hidden">
233
+ <div class="modal-overlay absolute inset-0"></div>
234
+ <div class="flex items-center justify-center min-h-screen">
235
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md m-4">
236
+ <div class="p-6">
237
+ <div class="flex justify-between items-center mb-4">
238
+ <h3 class="text-xl font-bold text-gray-800">Confirm Deletion</h3>
239
+ <button id="closeDeleteBtn" class="text-gray-500 hover:text-gray-700">
240
+ <i class="fas fa-times"></i>
241
+ </button>
242
+ </div>
243
+
244
+ <p id="deleteMessage" class="text-gray-700 mb-6">Are you sure you want to delete this project?</p>
245
+
246
+ <div class="flex justify-end space-x-3">
247
+ <button id="cancelDeleteBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
248
+ Cancel
249
+ </button>
250
+ <button id="confirmDeleteBtn" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors">
251
+ Delete
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <script>
260
+ // Sample initial data
261
+ let projects = [
262
+ {
263
+ id: "1",
264
+ name: "E-commerce Website",
265
+ image_link: "https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
266
+ date_range: "Mar 2023 - Jun 2023",
267
+ description: "A full-featured e-commerce platform with product listings, cart functionality, and payment processing.",
268
+ tags: ["web", "ecommerce", "react"],
269
+ github_link: "https://github.com/example/ecommerce",
270
+ demo_link: "https://ecommerce.example.com",
271
+ readme_link: "https://github.com/example/ecommerce/blob/main/README.md",
272
+ status: "Completed",
273
+ technologies: ["React", "Node.js", "MongoDB", "Stripe"],
274
+ notes: "The project was completed on time and under budget. Customer satisfaction was high.",
275
+ created_at: "2023-03-15T10:00:00Z",
276
+ updated_at: "2023-06-20T14:30:00Z"
277
+ },
278
+ {
279
+ id: "2",
280
+ name: "Mobile Task Manager",
281
+ image_link: "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
282
+ date_range: "Jul 2023 - Present",
283
+ description: "A cross-platform mobile application for task management with sync across devices.",
284
+ tags: ["mobile", "productivity", "react-native"],
285
+ github_link: "https://github.com/example/task-manager",
286
+ demo_link: "",
287
+ readme_link: "https://github.com/example/task-manager/blob/main/README.md",
288
+ status: "In Progress",
289
+ technologies: ["React Native", "Firebase", "Redux"],
290
+ notes: "Currently working on the offline sync functionality. Expected completion in Q4 2023.",
291
+ created_at: "2023-07-01T09:15:00Z",
292
+ updated_at: "2023-08-10T16:45:00Z"
293
+ },
294
+ {
295
+ id: "3",
296
+ name: "API Service",
297
+ image_link: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80",
298
+ date_range: "",
299
+ description: "Backend API service for data processing and integration with third-party services.",
300
+ tags: ["api", "backend", "node"],
301
+ github_link: "https://github.com/example/api-service",
302
+ demo_link: "",
303
+ readme_link: "",
304
+ status: "On Hold",
305
+ technologies: ["Node.js", "Express", "PostgreSQL"],
306
+ notes: "Project put on hold due to shifting priorities. Will revisit in Q1 2024.",
307
+ created_at: "2023-05-10T14:20:00Z",
308
+ updated_at: "2023-08-01T11:10:00Z"
309
+ }
310
+ ];
311
+
312
+ // DOM Elements
313
+ const projectsContainer = document.getElementById('projectsContainer');
314
+ const emptyState = document.getElementById('emptyState');
315
+ const addProjectBtn = document.getElementById('addProjectBtn');
316
+ const addProjectBtnEmpty = document.getElementById('addProjectBtnEmpty');
317
+ const statusFilter = document.getElementById('statusFilter');
318
+ const tagFilter = document.getElementById('tagFilter');
319
+ const resetFilters = document.getElementById('resetFilters');
320
+
321
+ // Modal Elements
322
+ const projectModal = document.getElementById('projectModal');
323
+ const modalTitle = document.getElementById('modalTitle');
324
+ const projectForm = document.getElementById('projectForm');
325
+ const projectId = document.getElementById('projectId');
326
+ const projectName = document.getElementById('projectName');
327
+ const projectImage = document.getElementById('projectImage');
328
+ const projectDateRange = document.getElementById('projectDateRange');
329
+ const projectDescription = document.getElementById('projectDescription');
330
+ const projectTags = document.getElementById('projectTags');
331
+ const projectGithub = document.getElementById('projectGithub');
332
+ const projectDemo = document.getElementById('projectDemo');
333
+ const projectReadme = document.getElementById('projectReadme');
334
+ const projectStatus = document.getElementById('projectStatus');
335
+ const projectTechnologies = document.getElementById('projectTechnologies');
336
+ const projectNotes = document.getElementById('projectNotes');
337
+ const closeModalBtn = document.getElementById('closeModalBtn');
338
+ const cancelModalBtn = document.getElementById('cancelModalBtn');
339
+ const saveProjectBtn = document.getElementById('saveProjectBtn');
340
+
341
+ // Details Modal Elements
342
+ const detailsModal = document.getElementById('detailsModal');
343
+ const detailsTitle = document.getElementById('detailsTitle');
344
+ const detailsContent = document.getElementById('detailsContent');
345
+ const closeDetailsBtn = document.getElementById('closeDetailsBtn');
346
+ const editDetailsBtn = document.getElementById('editDetailsBtn');
347
+
348
+ // Delete Modal Elements
349
+ const deleteModal = document.getElementById('deleteModal');
350
+ const deleteMessage = document.getElementById('deleteMessage');
351
+ const closeDeleteBtn = document.getElementById('closeDeleteBtn');
352
+ const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
353
+ const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
354
+
355
+ // State
356
+ let currentProjectId = null;
357
+ let allTags = [];
358
+
359
+ // Initialize the app
360
+ function init() {
361
+ renderProjects();
362
+ setupEventListeners();
363
+ updateTagFilterOptions();
364
+ }
365
+
366
+ // Render all projects
367
+ function renderProjects() {
368
+ projectsContainer.innerHTML = '';
369
+
370
+ const statusFilterValue = statusFilter.value;
371
+ const tagFilterValue = tagFilter.value;
372
+
373
+ let filteredProjects = projects;
374
+
375
+ // Apply status filter
376
+ if (statusFilterValue !== 'all') {
377
+ filteredProjects = filteredProjects.filter(project => project.status === statusFilterValue);
378
+ }
379
+
380
+ // Apply tag filter
381
+ if (tagFilterValue !== 'all') {
382
+ filteredProjects = filteredProjects.filter(project =>
383
+ project.tags && project.tags.includes(tagFilterValue)
384
+ );
385
+ }
386
+
387
+ if (filteredProjects.length === 0) {
388
+ emptyState.classList.remove('hidden');
389
+ projectsContainer.classList.add('hidden');
390
+ } else {
391
+ emptyState.classList.add('hidden');
392
+ projectsContainer.classList.remove('hidden');
393
+
394
+ filteredProjects.forEach(project => {
395
+ const projectCard = createProjectCard(project);
396
+ projectsContainer.appendChild(projectCard);
397
+ });
398
+ }
399
+ }
400
+
401
+ // Create a project card element
402
+ function createProjectCard(project) {
403
+ const card = document.createElement('div');
404
+ card.className = 'bg-white rounded-lg shadow-md overflow-hidden card-hover fade-in relative';
405
+ card.dataset.id = project.id;
406
+
407
+ // Status badge with color coding
408
+ let statusColor = 'bg-gray-500'; // Default for unknown status
409
+ if (project.status === 'Not Started') statusColor = 'bg-gray-500';
410
+ else if (project.status === 'In Progress') statusColor = 'bg-yellow-500';
411
+ else if (project.status === 'Completed') statusColor = 'bg-green-500';
412
+ else if (project.status === 'On Hold') statusColor = 'bg-red-500';
413
+
414
+ // Card content
415
+ card.innerHTML = `
416
+ <div class="relative">
417
+ ${project.image_link ?
418
+ `<img src="${project.image_link}" alt="${project.name}" class="w-full h-48 object-cover">` :
419
+ `<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
420
+ <i class="fas fa-image text-4xl text-gray-400"></i>
421
+ </div>`
422
+ }
423
+ <span class="status-badge ${statusColor} text-white">${project.status}</span>
424
+ </div>
425
+
426
+ <div class="p-4">
427
+ <h3 class="text-lg font-semibold text-gray-800 mb-1 truncate">${project.name}</h3>
428
+
429
+ ${project.date_range ?
430
+ `<p class="text-sm text-gray-500 mb-2 flex items-center">
431
+ <i class="fas fa-calendar-alt mr-2"></i>${project.date_range}
432
+ </p>` : ''
433
+ }
434
+
435
+ <p class="text-gray-600 text-sm mb-3 line-clamp-2">${project.description || 'No description available'}</p>
436
+
437
+ ${project.tags && project.tags.length > 0 ?
438
+ `<div class="flex flex-wrap gap-2 mb-4">
439
+ ${project.tags.map(tag => `
440
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full tag-pill">${tag}</span>
441
+ `).join('')}
442
+ </div>` : ''
443
+ }
444
+
445
+ <div class="flex justify-between items-center border-t pt-3">
446
+ <div class="flex space-x-2">
447
+ ${project.github_link ? `
448
+ <a href="${project.github_link}" target="_blank" class="text-gray-500 hover:text-gray-700 transition-colors" title="GitHub">
449
+ <i class="fab fa-github"></i>
450
+ </a>
451
+ ` : ''}
452
+
453
+ ${project.demo_link ? `
454
+ <a href="${project.demo_link}" target="_blank" class="text-gray-500 hover:text-gray-700 transition-colors" title="Live Demo">
455
+ <i class="fas fa-external-link-alt"></i>
456
+ </a>
457
+ ` : ''}
458
+
459
+ ${project.readme_link ? `
460
+ <a href="${project.readme_link}" target="_blank" class="text-gray-500 hover:text-gray-700 transition-colors" title="README">
461
+ <i class="fas fa-book"></i>
462
+ </a>
463
+ ` : ''}
464
+ </div>
465
+
466
+ <div class="flex space-x-2">
467
+ <button class="text-gray-500 hover:text-blue-500 transition-colors edit-btn" title="Edit">
468
+ <i class="fas fa-edit"></i>
469
+ </button>
470
+ <button class="text-gray-500 hover:text-red-500 transition-colors delete-btn" title="Delete">
471
+ <i class="fas fa-trash"></i>
472
+ </button>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ `;
477
+
478
+ // Add click event for viewing details
479
+ card.addEventListener('click', (e) => {
480
+ // Don't open details if clicking on edit/delete buttons or links
481
+ if (e.target.closest('.edit-btn, .delete-btn, a')) {
482
+ return;
483
+ }
484
+ openDetailsModal(project.id);
485
+ });
486
+
487
+ // Add edit and delete button events
488
+ const editBtn = card.querySelector('.edit-btn');
489
+ const deleteBtn = card.querySelector('.delete-btn');
490
+
491
+ editBtn.addEventListener('click', (e) => {
492
+ e.stopPropagation();
493
+ openEditModal(project.id);
494
+ });
495
+
496
+ deleteBtn.addEventListener('click', (e) => {
497
+ e.stopPropagation();
498
+ openDeleteModal(project.id);
499
+ });
500
+
501
+ return card;
502
+ }
503
+
504
+ // Open the add project modal
505
+ function openAddModal() {
506
+ projectForm.reset();
507
+ projectId.value = '';
508
+ modalTitle.textContent = 'Add New Project';
509
+ projectModal.classList.remove('hidden');
510
+ }
511
+
512
+ // Open the edit project modal
513
+ function openEditModal(id) {
514
+ const project = projects.find(p => p.id === id);
515
+ if (!project) return;
516
+
517
+ currentProjectId = id;
518
+
519
+ // Populate form fields
520
+ projectId.value = project.id;
521
+ projectName.value = project.name || '';
522
+ projectImage.value = project.image_link || '';
523
+ projectDateRange.value = project.date_range || '';
524
+ projectDescription.value = project.description || '';
525
+ projectTags.value = project.tags ? project.tags.join(', ') : '';
526
+ projectGithub.value = project.github_link || '';
527
+ projectDemo.value = project.demo_link || '';
528
+ projectReadme.value = project.readme_link || '';
529
+ projectStatus.value = project.status || 'Not Started';
530
+ projectTechnologies.value = project.technologies ? project.technologies.join(', ') : '';
531
+ projectNotes.value = project.notes || '';
532
+
533
+ modalTitle.textContent = 'Edit Project';
534
+ projectModal.classList.remove('hidden');
535
+ }
536
+
537
+ // Open the project details modal
538
+ function openDetailsModal(id) {
539
+ const project = projects.find(p => p.id === id);
540
+ if (!project) return;
541
+
542
+ currentProjectId = id;
543
+
544
+ detailsTitle.textContent = project.name;
545
+
546
+ // Format dates
547
+ const createdDate = project.created_at ? new Date(project.created_at).toLocaleDateString() : 'Unknown';
548
+ const updatedDate = project.updated_at ? new Date(project.updated_at).toLocaleDateString() : 'Unknown';
549
+
550
+ // Create details content
551
+ detailsContent.innerHTML = `
552
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
553
+ <div class="space-y-4">
554
+ ${project.image_link ? `
555
+ <div class="rounded-lg overflow-hidden">
556
+ <img src="${project.image_link}" alt="${project.name}" class="w-full h-auto max-h-48 object-cover">
557
+ </div>
558
+ ` : ''}
559
+
560
+ <div class="bg-gray-50 p-4 rounded-lg">
561
+ <h4 class="font-medium text-gray-800 mb-2">Quick Info</h4>
562
+ <div class="space-y-2">
563
+ ${project.status ? `
564
+ <div class="flex items-center">
565
+ <span class="inline-block w-3 h-3 rounded-full mr-2 ${getStatusColorClass(project.status)}"></span>
566
+ <span class="text-sm text-gray-700">Status: ${project.status}</span>
567
+ </div>
568
+ ` : ''}
569
+
570
+ ${project.date_range ? `
571
+ <div class="flex items-center text-sm text-gray-700">
572
+ <i class="fas fa-calendar-alt mr-2 text-gray-500"></i>
573
+ <span>${project.date_range}</span>
574
+ </div>
575
+ ` : ''}
576
+
577
+ <div class="flex items-center text-sm text-gray-700">
578
+ <i class="fas fa-calendar-plus mr-2 text-gray-500"></i>
579
+ <span>Created: ${createdDate}</span>
580
+ </div>
581
+
582
+ <div class="flex items-center text-sm text-gray-700">
583
+ <i class="fas fa-calendar-check mr-2 text-gray-500"></i>
584
+ <span>Last Updated: ${updatedDate}</span>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+
590
+ <div class="space-y-4">
591
+ ${project.description ? `
592
+ <div>
593
+ <h4 class="font-medium text-gray-800 mb-1">Description</h4>
594
+ <p class="text-gray-700">${project.description}</p>
595
+ </div>
596
+ ` : ''}
597
+
598
+ ${project.technologies && project.technologies.length > 0 ? `
599
+ <div>
600
+ <h4 class="font-medium text-gray-800 mb-1">Technologies</h4>
601
+ <div class="flex flex-wrap gap-2">
602
+ ${project.technologies.map(tech => `
603
+ <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">${tech}</span>
604
+ `).join('')}
605
+ </div>
606
+ </div>
607
+ ` : ''}
608
+
609
+ ${project.tags && project.tags.length > 0 ? `
610
+ <div>
611
+ <h4 class="font-medium text-gray-800 mb-1">Tags</h4>
612
+ <div class="flex flex-wrap gap-2">
613
+ ${project.tags.map(tag => `
614
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">${tag}</span>
615
+ `).join('')}
616
+ </div>
617
+ </div>
618
+ ` : ''}
619
+
620
+ ${project.notes ? `
621
+ <div>
622
+ <h4 class="font-medium text-gray-800 mb-1">Notes</h4>
623
+ <p class="text-gray-700 whitespace-pre-line">${project.notes}</p>
624
+ </div>
625
+ ` : ''}
626
+ </div>
627
+ </div>
628
+
629
+ <div class="pt-4 border-t">
630
+ <h4 class="font-medium text-gray-800 mb-2">Links</h4>
631
+ <div class="flex flex-wrap gap-4">
632
+ ${project.github_link ? `
633
+ <a href="${project.github_link}" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
634
+ <i class="fab fa-github mr-2"></i> GitHub Repository
635
+ </a>
636
+ ` : ''}
637
+
638
+ ${project.demo_link ? `
639
+ <a href="${project.demo_link}" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
640
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
641
+ </a>
642
+ ` : ''}
643
+
644
+ ${project.readme_link ? `
645
+ <a href="${project.readme_link}" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800 transition-colors">
646
+ <i class="fas fa-book mr-2"></i> README
647
+ </a>
648
+ ` : ''}
649
+
650
+ ${!project.github_link && !project.demo_link && !project.readme_link ? `
651
+ <span class="text-gray-500">No links available</span>
652
+ ` : ''}
653
+ </div>
654
+ </div>
655
+ `;
656
+
657
+ detailsModal.classList.remove('hidden');
658
+ }
659
+
660
+ // Open the delete confirmation modal
661
+ function openDeleteModal(id) {
662
+ currentProjectId = id;
663
+ const project = projects.find(p => p.id === id);
664
+
665
+ if (project) {
666
+ deleteMessage.textContent = `Are you sure you want to delete "${project.name}"? This action cannot be undone.`;
667
+ } else {
668
+ deleteMessage.textContent = 'Are you sure you want to delete this project?';
669
+ }
670
+
671
+ deleteModal.classList.remove('hidden');
672
+ }
673
+
674
+ // Close all modals
675
+ function closeAllModals() {
676
+ projectModal.classList.add('hidden');
677
+ detailsModal.classList.add('hidden');
678
+ deleteModal.classList.add('hidden');
679
+ currentProjectId = null;
680
+ }
681
+
682
+ // Save project (add or edit)
683
+ function saveProject(e) {
684
+ e.preventDefault();
685
+
686
+ // Validate required fields
687
+ if (!projectName.value.trim()) {
688
+ alert('Project name is required');
689
+ return;
690
+ }
691
+
692
+ // Get form values
693
+ const id = projectId.value || generateId();
694
+ const now = new Date().toISOString();
695
+
696
+ const projectData = {
697
+ id,
698
+ name: projectName.value.trim(),
699
+ image_link: projectImage.value.trim(),
700
+ date_range: projectDateRange.value.trim(),
701
+ description: projectDescription.value.trim(),
702
+ tags: projectTags.value ? projectTags.value.split(',').map(tag => tag.trim()).filter(tag => tag) : [],
703
+ github_link: projectGithub.value.trim(),
704
+ demo_link: projectDemo.value.trim(),
705
+ readme_link: projectReadme.value.trim(),
706
+ status: projectStatus.value,
707
+ technologies: projectTechnologies.value ? projectTechnologies.value.split(',').map(tech => tech.trim()).filter(tech => tech) : [],
708
+ notes: projectNotes.value.trim(),
709
+ updated_at: now
710
+ };
711
+
712
+ // If new project, set created_at
713
+ if (!projectId.value) {
714
+ projectData.created_at = now;
715
+ } else {
716
+ // For existing projects, preserve created_at
717
+ const existingProject = projects.find(p => p.id === projectId.value);
718
+ if (existingProject) {
719
+ projectData.created_at = existingProject.created_at;
720
+ } else {
721
+ projectData.created_at = now;
722
+ }
723
+ }
724
+
725
+ // Update or add the project
726
+ if (projectId.value) {
727
+ // Edit existing project
728
+ const index = projects.findIndex(p => p.id === projectId.value);
729
+ if (index !== -1) {
730
+ projects[index] = projectData;
731
+ }
732
+ } else {
733
+ // Add new project
734
+ projects.push(projectData);
735
+ }
736
+
737
+ // Update UI
738
+ renderProjects();
739
+ updateTagFilterOptions();
740
+ closeAllModals();
741
+ }
742
+
743
+ // Delete project
744
+ function deleteProject() {
745
+ projects = projects.filter(p => p.id !== currentProjectId);
746
+ renderProjects();
747
+ updateTagFilterOptions();
748
+ closeAllModals();
749
+ }
750
+
751
+ // Generate a unique ID
752
+ function generateId() {
753
+ return Date.now().toString(36) + Math.random().toString(36).substr(2);
754
+ }
755
+
756
+ // Get status color class
757
+ function getStatusColorClass(status) {
758
+ switch (status) {
759
+ case 'Not Started': return 'bg-gray-500';
760
+ case 'In Progress': return 'bg-yellow-500';
761
+ case 'Completed': return 'bg-green-500';
762
+ case 'On Hold': return 'bg-red-500';
763
+ default: return 'bg-gray-500';
764
+ }
765
+ }
766
+
767
+ // Update tag filter options
768
+ function updateTagFilterOptions() {
769
+ // Collect all unique tags from projects
770
+ const tagsSet = new Set();
771
+ projects.forEach(project => {
772
+ if (project.tags) {
773
+ project.tags.forEach(tag => tagsSet.add(tag));
774
+ }
775
+ });
776
+
777
+ allTags = Array.from(tagsSet).sort();
778
+
779
+ // Update tag filter dropdown
780
+ tagFilter.innerHTML = `
781
+ <option value="all">All Tags</option>
782
+ ${allTags.map(tag => `<option value="${tag}">${tag}</option>`).join('')}
783
+ `;
784
+ }
785
+
786
+ // Set up event listeners
787
+ function setupEventListeners() {
788
+ // Add project buttons
789
+ addProjectBtn.addEventListener('click', openAddModal);
790
+ addProjectBtnEmpty.addEventListener('click', openAddModal);
791
+
792
+ // Filter controls
793
+ statusFilter.addEventListener('change', renderProjects);
794
+ tagFilter.addEventListener('change', renderProjects);
795
+ resetFilters.addEventListener('click', () => {
796
+ statusFilter.value = 'all';
797
+ tagFilter.value = 'all';
798
+ renderProjects();
799
+ });
800
+
801
+ // Modal buttons
802
+ closeModalBtn.addEventListener('click', closeAllModals);
803
+ cancelModalBtn.addEventListener('click', closeAllModals);
804
+ projectForm.addEventListener('submit', saveProject);
805
+
806
+ // Details modal buttons
807
+ closeDetailsBtn.addEventListener('click', closeAllModals);
808
+ editDetailsBtn.addEventListener('click', () => {
809
+ closeAllModals();
810
+ openEditModal(currentProjectId);
811
+ });
812
+
813
+ // Delete modal buttons
814
+ closeDeleteBtn.addEventListener('click', closeAllModals);
815
+ cancelDeleteBtn.addEventListener('click', closeAllModals);
816
+ confirmDeleteBtn.addEventListener('click', deleteProject);
817
+ }
818
+
819
+ // Initialize the app when DOM is loaded
820
+ document.addEventListener('DOMContentLoaded', init);
821
+ </script>
822
+ <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=MoiMoi-01/project-manager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
823
+ </html>
prompts.txt ADDED
File without changes