leroyfal commited on
Commit
366ebb8
·
verified ·
1 Parent(s): e1b696d

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +946 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Taskflow
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: gray
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: taskflow
3
+ emoji: 🐳
4
+ colorFrom: pink
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,946 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TaskFlow - Gestion de Projets Collaboratifs</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
+ /* Custom CSS for elements that can't be easily styled with Tailwind */
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .task-card:hover {
15
+ transform: translateY(-2px);
16
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .kanban-column {
19
+ min-height: 500px;
20
+ }
21
+ /* Animation for notifications */
22
+ @keyframes fadeIn {
23
+ from { opacity: 0; transform: translateY(10px); }
24
+ to { opacity: 1; transform: translateY(0); }
25
+ }
26
+ .notification {
27
+ animation: fadeIn 0.3s ease-out;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50 font-sans">
32
+ <!-- App Container -->
33
+ <div class="flex h-screen overflow-hidden">
34
+ <!-- Sidebar Navigation -->
35
+ <div class="sidebar bg-indigo-700 text-white w-64 flex-shrink-0 hidden md:block">
36
+ <div class="p-4 flex items-center space-x-2 border-b border-indigo-600">
37
+ <i class="fas fa-tasks text-2xl"></i>
38
+ <h1 class="text-xl font-bold">TaskFlow</h1>
39
+ </div>
40
+ <nav class="p-4">
41
+ <div class="mb-8">
42
+ <h2 class="text-xs uppercase tracking-wider text-indigo-300 mb-4">Menu Principal</h2>
43
+ <ul class="space-y-2">
44
+ <li>
45
+ <a href="#" class="flex items-center space-x-2 p-2 rounded bg-indigo-800">
46
+ <i class="fas fa-home w-5"></i>
47
+ <span>Tableau de bord</span>
48
+ </a>
49
+ </li>
50
+ <li>
51
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-800">
52
+ <i class="fas fa-project-diagram w-5"></i>
53
+ <span>Mes projets</span>
54
+ </a>
55
+ </li>
56
+ <li>
57
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-800">
58
+ <i class="fas fa-tasks w-5"></i>
59
+ <span>Mes tâches</span>
60
+ </a>
61
+ </li>
62
+ <li>
63
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-800">
64
+ <i class="fas fa-calendar-alt w-5"></i>
65
+ <span>Calendrier</span>
66
+ </a>
67
+ </li>
68
+ </ul>
69
+ </div>
70
+ <div>
71
+ <h2 class="text-xs uppercase tracking-wider text-indigo-300 mb-4">Équipes</h2>
72
+ <ul class="space-y-2">
73
+ <li>
74
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-800">
75
+ <div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center text-xs">D</div>
76
+ <span>Développement</span>
77
+ </a>
78
+ </li>
79
+ <li>
80
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-800">
81
+ <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-xs">M</div>
82
+ <span>Marketing</span>
83
+ </a>
84
+ </li>
85
+ <li>
86
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-800">
87
+ <div class="w-5 h-5 rounded-full bg-purple-500 flex items-center justify-center text-xs">V</div>
88
+ <span>Ventes</span>
89
+ </a>
90
+ </li>
91
+ </ul>
92
+ </div>
93
+ </nav>
94
+ </div>
95
+
96
+ <!-- Main Content Area -->
97
+ <div class="flex-1 flex flex-col overflow-hidden">
98
+ <!-- Top Navigation Bar -->
99
+ <header class="bg-white border-b border-gray-200 flex items-center justify-between p-4">
100
+ <div class="flex items-center space-x-4">
101
+ <button class="md:hidden text-gray-600">
102
+ <i class="fas fa-bars text-xl"></i>
103
+ </button>
104
+ <h2 class="text-xl font-semibold text-gray-800">Tableau de bord</h2>
105
+ </div>
106
+
107
+ <div class="flex items-center space-x-4">
108
+ <div class="relative">
109
+ <button class="p-2 rounded-full hover:bg-gray-100">
110
+ <i class="fas fa-bell text-gray-600"></i>
111
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
112
+ </button>
113
+ <!-- Notifications dropdown -->
114
+ <div class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg z-10">
115
+ <div class="p-4 border-b">
116
+ <h3 class="font-medium">Notifications</h3>
117
+ </div>
118
+ <div class="max-h-60 overflow-y-auto">
119
+ <div class="notification p-3 border-b hover:bg-gray-50">
120
+ <p class="text-sm">Nouveau commentaire sur la tâche "Refonte UI"</p>
121
+ <p class="text-xs text-gray-500 mt-1">Il y a 2 minutes</p>
122
+ </div>
123
+ <div class="notification p-3 border-b hover:bg-gray-50">
124
+ <p class="text-sm">Marie a terminé la tâche "Tests unitaires"</p>
125
+ <p class="text-xs text-gray-500 mt-1">Il y a 1 heure</p>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <div class="relative">
132
+ <button class="flex items-center space-x-2">
133
+ <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white">JD</div>
134
+ <span class="hidden md:inline">John Doe</span>
135
+ <i class="fas fa-chevron-down text-xs hidden md:inline"></i>
136
+ </button>
137
+ <!-- User dropdown -->
138
+ <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
139
+ <div class="py-1">
140
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profil</a>
141
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Paramètres</a>
142
+ <div class="border-t border-gray-100"></div>
143
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Déconnexion</a>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </header>
149
+
150
+ <!-- Main Content -->
151
+ <main class="flex-1 overflow-auto p-6 bg-gray-50">
152
+ <!-- Dashboard Overview -->
153
+ <div class="mb-8">
154
+ <div class="flex justify-between items-center mb-6">
155
+ <h2 class="text-2xl font-bold text-gray-800">Vue d'ensemble</h2>
156
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 flex items-center space-x-2">
157
+ <i class="fas fa-plus"></i>
158
+ <span>Nouveau projet</span>
159
+ </button>
160
+ </div>
161
+
162
+ <!-- Stats Cards -->
163
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
164
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
165
+ <div class="flex items-center justify-between">
166
+ <div>
167
+ <p class="text-gray-500 text-sm">Projets actifs</p>
168
+ <h3 class="text-2xl font-bold mt-1">12</h3>
169
+ </div>
170
+ <div class="p-3 rounded-full bg-indigo-50 text-indigo-600">
171
+ <i class="fas fa-project-diagram"></i>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
176
+ <div class="flex items-center justify-between">
177
+ <div>
178
+ <p class="text-gray-500 text-sm">Tâches en cours</p>
179
+ <h3 class="text-2xl font-bold mt-1">28</h3>
180
+ </div>
181
+ <div class="p-3 rounded-full bg-blue-50 text-blue-600">
182
+ <i class="fas fa-tasks"></i>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
187
+ <div class="flex items-center justify-between">
188
+ <div>
189
+ <p class="text-gray-500 text-sm">Tâches en retard</p>
190
+ <h3 class="text-2xl font-bold mt-1">3</h3>
191
+ </div>
192
+ <div class="p-3 rounded-full bg-red-50 text-red-600">
193
+ <i class="fas fa-exclamation-circle"></i>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
198
+ <div class="flex items-center justify-between">
199
+ <div>
200
+ <p class="text-gray-500 text-sm">Membres d'équipe</p>
201
+ <h3 class="text-2xl font-bold mt-1">24</h3>
202
+ </div>
203
+ <div class="p-3 rounded-full bg-green-50 text-green-600">
204
+ <i class="fas fa-users"></i>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Projects Section -->
212
+ <div class="mb-8">
213
+ <div class="flex justify-between items-center mb-6">
214
+ <h2 class="text-2xl font-bold text-gray-800">Mes projets récents</h2>
215
+ <a href="#" class="text-indigo-600 hover:text-indigo-800">Voir tout</a>
216
+ </div>
217
+
218
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
219
+ <!-- Project Card 1 -->
220
+ <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
221
+ <div class="p-6">
222
+ <div class="flex justify-between items-start">
223
+ <div>
224
+ <h3 class="font-bold text-lg mb-1">Refonte du site web</h3>
225
+ <p class="text-gray-500 text-sm">Développement</p>
226
+ </div>
227
+ <div class="dropdown relative">
228
+ <button class="text-gray-400 hover:text-gray-600">
229
+ <i class="fas fa-ellipsis-h"></i>
230
+ </button>
231
+ </div>
232
+ </div>
233
+ <p class="text-gray-600 mt-4 text-sm">Refonte complète du site web avec nouvelle UI/UX et intégration CMS</p>
234
+
235
+ <div class="mt-6">
236
+ <div class="flex justify-between text-sm text-gray-500 mb-2">
237
+ <span>Progression</span>
238
+ <span>65%</span>
239
+ </div>
240
+ <div class="w-full bg-gray-200 rounded-full h-2">
241
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 65%"></div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="mt-6 flex justify-between items-center">
246
+ <div class="flex -space-x-2">
247
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
248
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
249
+ <div class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium">+3</div>
250
+ </div>
251
+ <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-600 rounded-full">En cours</span>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Project Card 2 -->
257
+ <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
258
+ <div class="p-6">
259
+ <div class="flex justify-between items-start">
260
+ <div>
261
+ <h3 class="font-bold text-lg mb-1">Campagne marketing</h3>
262
+ <p class="text-gray-500 text-sm">Marketing</p>
263
+ </div>
264
+ <div class="dropdown relative">
265
+ <button class="text-gray-400 hover:text-gray-600">
266
+ <i class="fas fa-ellipsis-h"></i>
267
+ </button>
268
+ </div>
269
+ </div>
270
+ <p class="text-gray-600 mt-4 text-sm">Lancement de la nouvelle campagne publicitaire pour le produit X</p>
271
+
272
+ <div class="mt-6">
273
+ <div class="flex justify-between text-sm text-gray-500 mb-2">
274
+ <span>Progression</span>
275
+ <span>30%</span>
276
+ </div>
277
+ <div class="w-full bg-gray-200 rounded-full h-2">
278
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 30%"></div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="mt-6 flex justify-between items-center">
283
+ <div class="flex -space-x-2">
284
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
285
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
286
+ </div>
287
+ <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">En attente</span>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Project Card 3 -->
293
+ <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
294
+ <div class="p-6">
295
+ <div class="flex justify-between items-start">
296
+ <div>
297
+ <h3 class="font-bold text-lg mb-1">Migration serveur</h3>
298
+ <p class="text-gray-500 text-sm">IT</p>
299
+ </div>
300
+ <div class="dropdown relative">
301
+ <button class="text-gray-400 hover:text-gray-600">
302
+ <i class="fas fa-ellipsis-h"></i>
303
+ </button>
304
+ </div>
305
+ </div>
306
+ <p class="text-gray-600 mt-4 text-sm">Migration des serveurs vers le nouveau datacenter</p>
307
+
308
+ <div class="mt-6">
309
+ <div class="flex justify-between text-sm text-gray-500 mb-2">
310
+ <span>Progression</span>
311
+ <span>90%</span>
312
+ </div>
313
+ <div class="w-full bg-gray-200 rounded-full h-2">
314
+ <div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="mt-6 flex justify-between items-center">
319
+ <div class="flex -space-x-2">
320
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar">
321
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/64.jpg" alt="Avatar">
322
+ </div>
323
+ <span class="text-xs px-2 py-1 bg-green-50 text-green-600 rounded-full">Presque terminé</span>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Tasks Section -->
331
+ <div>
332
+ <div class="flex justify-between items-center mb-6">
333
+ <h2 class="text-2xl font-bold text-gray-800">Mes tâches</h2>
334
+ <div class="flex space-x-2">
335
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-50">Aujourd'hui</button>
336
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm hover:bg-gray-50">Cette semaine</button>
337
+ <button class="px-3 py-1 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700">+ Nouvelle tâche</button>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Task View Tabs -->
342
+ <div class="mb-6 border-b border-gray-200">
343
+ <nav class="-mb-px flex space-x-8">
344
+ <a href="#" class="border-indigo-500 text-indigo-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Tableau Kanban</a>
345
+ <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Liste</a>
346
+ <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">Calendrier</a>
347
+ </nav>
348
+ </div>
349
+
350
+ <!-- Kanban Board -->
351
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
352
+ <!-- To Do Column -->
353
+ <div class="kanban-column bg-gray-50 p-4 rounded-lg border border-gray-200">
354
+ <div class="flex justify-between items-center mb-4">
355
+ <h3 class="font-medium text-gray-700">À faire (5)</h3>
356
+ <button class="text-gray-400 hover:text-gray-600">
357
+ <i class="fas fa-plus"></i>
358
+ </button>
359
+ </div>
360
+
361
+ <!-- Task Cards -->
362
+ <div class="space-y-4">
363
+ <!-- Task Card 1 -->
364
+ <div class="task-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 cursor-move">
365
+ <div class="flex justify-between items-start">
366
+ <div>
367
+ <h4 class="font-medium">Concevoir maquettes UI</h4>
368
+ <p class="text-sm text-gray-500 mt-1">Refonte du site web</p>
369
+ </div>
370
+ <div class="dropdown relative">
371
+ <button class="text-gray-400 hover:text-gray-600">
372
+ <i class="fas fa-ellipsis-h"></i>
373
+ </button>
374
+ </div>
375
+ </div>
376
+ <div class="mt-4 flex items-center justify-between">
377
+ <div class="flex items-center space-x-2">
378
+ <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-600 rounded-full">Design</span>
379
+ <span class="text-xs text-gray-500">28 Juin</span>
380
+ </div>
381
+ <div class="w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs">JD</div>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Task Card 2 -->
386
+ <div class="task-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 cursor-move">
387
+ <div class="flex justify-between items-start">
388
+ <div>
389
+ <h4 class="font-medium">Rédiger brief créatif</h4>
390
+ <p class="text-sm text-gray-500 mt-1">Campagne marketing</p>
391
+ </div>
392
+ <div class="dropdown relative">
393
+ <button class="text-gray-400 hover:text-gray-600">
394
+ <i class="fas fa-ellipsis-h"></i>
395
+ </button>
396
+ </div>
397
+ </div>
398
+ <div class="mt-4 flex items-center justify-between">
399
+ <div class="flex items-center space-x-2">
400
+ <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">Marketing</span>
401
+ <span class="text-xs text-gray-500">30 Juin</span>
402
+ </div>
403
+ <div class="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center text-white text-xs">MP</div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- In Progress Column -->
410
+ <div class="kanban-column bg-gray-50 p-4 rounded-lg border border-gray-200">
411
+ <div class="flex justify-between items-center mb-4">
412
+ <h3 class="font-medium text-gray-700">En cours (3)</h3>
413
+ <button class="text-gray-400 hover:text-gray-600">
414
+ <i class="fas fa-plus"></i>
415
+ </button>
416
+ </div>
417
+
418
+ <!-- Task Cards -->
419
+ <div class="space-y-4">
420
+ <!-- Task Card 1 -->
421
+ <div class="task-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 cursor-move">
422
+ <div class="flex justify-between items-start">
423
+ <div>
424
+ <h4 class="font-medium">Développer API</h4>
425
+ <p class="text-sm text-gray-500 mt-1">Refonte du site web</p>
426
+ </div>
427
+ <div class="dropdown relative">
428
+ <button class="text-gray-400 hover:text-gray-600">
429
+ <i class="fas fa-ellipsis-h"></i>
430
+ </button>
431
+ </div>
432
+ </div>
433
+ <div class="mt-4 flex items-center justify-between">
434
+ <div class="flex items-center space-x-2">
435
+ <span class="text-xs px-2 py-1 bg-green-50 text-green-600 rounded-full">Développement</span>
436
+ <span class="text-xs text-gray-500">25 Juin</span>
437
+ </div>
438
+ <div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs">AL</div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Task Card 2 -->
443
+ <div class="task-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 cursor-move">
444
+ <div class="flex justify-between items-start">
445
+ <div>
446
+ <h4 class="font-medium">Tests unitaires</h4>
447
+ <p class="text-sm text-gray-500 mt-1">Migration serveur</p>
448
+ </div>
449
+ <div class="dropdown relative">
450
+ <button class="text-gray-400 hover:text-gray-600">
451
+ <i class="fas fa-ellipsis-h"></i>
452
+ </button>
453
+ </div>
454
+ </div>
455
+ <div class="mt-4 flex items-center justify-between">
456
+ <div class="flex items-center space-x-2">
457
+ <span class="text-xs px-2 py-1 bg-yellow-50 text-yellow-600 rounded-full">Tests</span>
458
+ <span class="text-xs text-gray-500">27 Juin</span>
459
+ </div>
460
+ <div class="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center text-white text-xs">SM</div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- Done Column -->
467
+ <div class="kanban-column bg-gray-50 p-4 rounded-lg border border-gray-200">
468
+ <div class="flex justify-between items-center mb-4">
469
+ <h3 class="font-medium text-gray-700">Terminé (7)</h3>
470
+ <button class="text-gray-400 hover:text-gray-600">
471
+ <i class="fas fa-plus"></i>
472
+ </button>
473
+ </div>
474
+
475
+ <!-- Task Cards -->
476
+ <div class="space-y-4">
477
+ <!-- Task Card 1 -->
478
+ <div class="task-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 cursor-move opacity-70">
479
+ <div class="flex justify-between items-start">
480
+ <div>
481
+ <h4 class="font-medium">Réunion de lancement</h4>
482
+ <p class="text-sm text-gray-500 mt-1">Campagne marketing</p>
483
+ </div>
484
+ <div class="dropdown relative">
485
+ <button class="text-gray-400 hover:text-gray-600">
486
+ <i class="fas fa-ellipsis-h"></i>
487
+ </button>
488
+ </div>
489
+ </div>
490
+ <div class="mt-4 flex items-center justify-between">
491
+ <div class="flex items-center space-x-2">
492
+ <span class="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded-full">Réunion</span>
493
+ <span class="text-xs text-gray-500">20 Juin</span>
494
+ </div>
495
+ <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-white text-xs">TM</div>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- Task Card 2 -->
500
+ <div class="task-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 cursor-move opacity-70">
501
+ <div class="flex justify-between items-start">
502
+ <div>
503
+ <h4 class="font-medium">Configurer serveurs</h4>
504
+ <p class="text-sm text-gray-500 mt-1">Migration serveur</p>
505
+ </div>
506
+ <div class="dropdown relative">
507
+ <button class="text-gray-400 hover:text-gray-600">
508
+ <i class="fas fa-ellipsis-h"></i>
509
+ </button>
510
+ </div>
511
+ </div>
512
+ <div class="mt-4 flex items-center justify-between">
513
+ <div class="flex items-center space-x-2">
514
+ <span class="text-xs px-2 py-1 bg-purple-50 text-purple-600 rounded-full">IT</span>
515
+ <span class="text-xs text-gray-500">22 Juin</span>
516
+ </div>
517
+ <div class="w-6 h-6 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs">DL</div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </main>
525
+ </div>
526
+ </div>
527
+
528
+ <!-- Modals -->
529
+ <!-- New Project Modal -->
530
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="newProjectModal">
531
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
532
+ <div class="p-6">
533
+ <div class="flex justify-between items-center mb-4">
534
+ <h3 class="text-lg font-semibold">Nouveau projet</h3>
535
+ <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('newProjectModal')">
536
+ <i class="fas fa-times"></i>
537
+ </button>
538
+ </div>
539
+ <form>
540
+ <div class="mb-4">
541
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="project-name">Nom du projet</label>
542
+ <input class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" id="project-name" type="text" placeholder="Ex: Refonte du site web">
543
+ </div>
544
+ <div class="mb-4">
545
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="project-team">Équipe</label>
546
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" id="project-team">
547
+ <option>Sélectionner une équipe</option>
548
+ <option>Développement</option>
549
+ <option>Marketing</option>
550
+ <option>Ventes</option>
551
+ </select>
552
+ </div>
553
+ <div class="mb-4">
554
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="project-description">Description</label>
555
+ <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" id="project-description" rows="3" placeholder="Décrivez le projet..."></textarea>
556
+ </div>
557
+ <div class="flex justify-end space-x-3">
558
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" onclick="closeModal('newProjectModal')">Annuler</button>
559
+ <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Créer</button>
560
+ </div>
561
+ </form>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <!-- New Task Modal -->
567
+ <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="newTaskModal">
568
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
569
+ <div class="p-6">
570
+ <div class="flex justify-between items-center mb-4">
571
+ <h3 class="text-lg font-semibold">Nouvelle tâche</h3>
572
+ <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('newTaskModal')">
573
+ <i class="fas fa-times"></i>
574
+ </button>
575
+ </div>
576
+ <form>
577
+ <div class="mb-4">
578
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="task-name">Nom de la tâche</label>
579
+ <input class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" id="task-name" type="text" placeholder="Ex: Concevoir maquettes UI">
580
+ </div>
581
+ <div class="mb-4">
582
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="task-project">Projet</label>
583
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" id="task-project">
584
+ <option>Sélectionner un projet</option>
585
+ <option>Refonte du site web</option>
586
+ <option>Campagne marketing</option>
587
+ <option>Migration serveur</option>
588
+ </select>
589
+ </div>
590
+ <div class="grid grid-cols-2 gap-4 mb-4">
591
+ <div>
592
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="task-due">Échéance</label>
593
+ <input class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" id="task-due" type="date">
594
+ </div>
595
+ <div>
596
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="task-priority">Priorité</label>
597
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" id="task-priority">
598
+ <option>Normale</option>
599
+ <option>Haute</option>
600
+ <option>Urgente</option>
601
+ </select>
602
+ </div>
603
+ </div>
604
+ <div class="mb-4">
605
+ <label class="block text-gray-700 text-sm font-medium mb-2" for="task-assignee">Assigner à</label>
606
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" id="task-assignee">
607
+ <option>Sélectionner un membre</option>
608
+ <option>John Doe</option>
609
+ <option>Marie Petit</option>
610
+ <option>Alex Lambert</option>
611
+ <option>Sophie Martin</option>
612
+ </select>
613
+ </div>
614
+ <div class="flex justify-end space-x-3">
615
+ <button type="button" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" onclick="closeModal('newTaskModal')">Annuler</button>
616
+ <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Créer</button>
617
+ </div>
618
+ </form>
619
+ </div>
620
+ </div>
621
+ </div>
622
+
623
+ <!-- JavaScript -->
624
+ <script>
625
+ // Mock data for the application
626
+ const projects = [
627
+ {
628
+ id: 1,
629
+ name: "Refonte du site web",
630
+ team: "Développement",
631
+ description: "Refonte complète du site web avec nouvelle UI/UX et intégration CMS",
632
+ progress: 65,
633
+ status: "En cours",
634
+ members: ["JD", "AL", "SM", "+3"],
635
+ dueDate: "15/08/2023"
636
+ },
637
+ {
638
+ id: 2,
639
+ name: "Campagne marketing",
640
+ team: "Marketing",
641
+ description: "Lancement de la nouvelle campagne publicitaire pour le produit X",
642
+ progress: 30,
643
+ status: "En attente",
644
+ members: ["MP", "TM"],
645
+ dueDate: "30/09/2023"
646
+ },
647
+ {
648
+ id: 3,
649
+ name: "Migration serveur",
650
+ team: "IT",
651
+ description: "Migration des serveurs vers le nouveau datacenter",
652
+ progress: 90,
653
+ status: "Presque terminé",
654
+ members: ["DL", "AL"],
655
+ dueDate: "25/06/2023"
656
+ }
657
+ ];
658
+
659
+ const tasks = [
660
+ {
661
+ id: 1,
662
+ name: "Concevoir maquettes UI",
663
+ project: "Refonte du site web",
664
+ dueDate: "28/06/2023",
665
+ priority: "Haute",
666
+ assignee: "JD",
667
+ status: "À faire",
668
+ tags: ["Design"]
669
+ },
670
+ {
671
+ id: 2,
672
+ name: "Rédiger brief créatif",
673
+ project: "Campagne marketing",
674
+ dueDate: "30/06/2023",
675
+ priority: "Normale",
676
+ assignee: "MP",
677
+ status: "À faire",
678
+ tags: ["Marketing"]
679
+ },
680
+ {
681
+ id: 3,
682
+ name: "Développer API",
683
+ project: "Refonte du site web",
684
+ dueDate: "25/06/2023",
685
+ priority: "Haute",
686
+ assignee: "AL",
687
+ status: "En cours",
688
+ tags: ["Développement"]
689
+ },
690
+ {
691
+ id: 4,
692
+ name: "Tests unitaires",
693
+ project: "Migration serveur",
694
+ dueDate: "27/06/2023",
695
+ priority: "Normale",
696
+ assignee: "SM",
697
+ status: "En cours",
698
+ tags: ["Tests"]
699
+ },
700
+ {
701
+ id: 5,
702
+ name: "Réunion de lancement",
703
+ project: "Campagne marketing",
704
+ dueDate: "20/06/2023",
705
+ priority: "Normale",
706
+ assignee: "TM",
707
+ status: "Terminé",
708
+ tags: ["Réunion"]
709
+ },
710
+ {
711
+ id: 6,
712
+ name: "Configurer serveurs",
713
+ project: "Migration serveur",
714
+ dueDate: "22/06/2023",
715
+ priority: "Urgente",
716
+ assignee: "DL",
717
+ status: "Terminé",
718
+ tags: ["IT"]
719
+ }
720
+ ];
721
+
722
+ // DOM Ready
723
+ document.addEventListener('DOMContentLoaded', function() {
724
+ // Initialize drag and drop for kanban board
725
+ initKanbanDragDrop();
726
+
727
+ // Add event listeners for buttons that open modals
728
+ document.querySelectorAll('[data-modal-target]').forEach(button => {
729
+ button.addEventListener('click', function() {
730
+ const modalId = this.getAttribute('data-modal-target');
731
+ openModal(modalId);
732
+ });
733
+ });
734
+
735
+ // Close modal when clicking on overlay
736
+ document.querySelectorAll('.modal-overlay').forEach(overlay => {
737
+ overlay.addEventListener('click', function() {
738
+ const modalId = this.getAttribute('data-modal');
739
+ closeModal(modalId);
740
+ });
741
+ });
742
+
743
+ // Initialize dropdown menus
744
+ initDropdowns();
745
+ });
746
+
747
+ // Modal functions
748
+ function openModal(modalId) {
749
+ document.getElementById(modalId).classList.remove('hidden');
750
+ }
751
+
752
+ function closeModal(modalId) {
753
+ document.getElementById(modalId).classList.add('hidden');
754
+ }
755
+
756
+ // Initialize kanban drag and drop functionality
757
+ function initKanbanDragDrop() {
758
+ const taskCards = document.querySelectorAll('.task-card');
759
+ const columns = document.querySelectorAll('.kanban-column');
760
+
761
+ taskCards.forEach(task => {
762
+ task.addEventListener('dragstart', dragStart);
763
+ task.addEventListener('dragend', dragEnd);
764
+ });
765
+
766
+ columns.forEach(column => {
767
+ column.addEventListener('dragover', dragOver);
768
+ column.addEventListener('dragenter', dragEnter);
769
+ column.addEventListener('dragleave', dragLeave);
770
+ column.addEventListener('drop', dragDrop);
771
+ });
772
+
773
+ function dragStart() {
774
+ this.classList.add('dragging');
775
+ setTimeout(() => this.classList.add('invisible'), 0);
776
+ }
777
+
778
+ function dragEnd() {
779
+ this.classList.remove('dragging', 'invisible');
780
+ }
781
+
782
+ function dragOver(e) {
783
+ e.preventDefault();
784
+ }
785
+
786
+ function dragEnter(e) {
787
+ e.preventDefault();
788
+ this.classList.add('bg-indigo-50', 'border-indigo-200');
789
+ }
790
+
791
+ function dragLeave() {
792
+ this.classList.remove('bg-indigo-50', 'border-indigo-200');
793
+ }
794
+
795
+ function dragDrop() {
796
+ this.classList.remove('bg-indigo-50', 'border-indigo-200');
797
+ const draggingTask = document.querySelector('.dragging');
798
+ this.querySelector('.space-y-4').appendChild(draggingTask);
799
+
800
+ // Here you would update the task status in your database
801
+ // based on which column it was dropped into
802
+ }
803
+ }
804
+
805
+ // Initialize dropdown menus
806
+ function initDropdowns() {
807
+ document.querySelectorAll('.dropdown button').forEach(button => {
808
+ button.addEventListener('click', function(e) {
809
+ e.stopPropagation();
810
+ const dropdown = this.parentElement;
811
+ const menu = dropdown.querySelector('.dropdown-menu');
812
+
813
+ // Close all other dropdowns first
814
+ document.querySelectorAll('.dropdown-menu').forEach(m => {
815
+ if (m !== menu) m.classList.add('hidden');
816
+ });
817
+
818
+ // Toggle current dropdown
819
+ menu.classList.toggle('hidden');
820
+ });
821
+ });
822
+
823
+ // Close dropdowns when clicking elsewhere
824
+ document.addEventListener('click', function() {
825
+ document.querySelectorAll('.dropdown-menu').forEach(menu => {
826
+ menu.classList.add('hidden');
827
+ });
828
+ });
829
+ }
830
+
831
+ // Function to load projects into the UI
832
+ function loadProjects() {
833
+ const projectsContainer = document.querySelector('#projects-container');
834
+
835
+ projects.forEach(project => {
836
+ const projectCard = document.createElement('div');
837
+ projectCard.className = 'bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden';
838
+ projectCard.innerHTML = `
839
+ <div class="p-6">
840
+ <div class="flex justify-between items-start">
841
+ <div>
842
+ <h3 class="font-bold text-lg mb-1">${project.name}</h3>
843
+ <p class="text-gray-500 text-sm">${project.team}</p>
844
+ </div>
845
+ <div class="dropdown relative">
846
+ <button class="text-gray-400 hover:text-gray-600">
847
+ <i class="fas fa-ellipsis-h"></i>
848
+ </button>
849
+ <div class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
850
+ <div class="py-1">
851
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Modifier</a>
852
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Supprimer</a>
853
+ </div>
854
+ </div>
855
+ </div>
856
+ </div>
857
+ <p class="text-gray-600 mt-4 text-sm">${project.description}</p>
858
+
859
+ <div class="mt-6">
860
+ <div class="flex justify-between text-sm text-gray-500 mb-2">
861
+ <span>Progression</span>
862
+ <span>${project.progress}%</span>
863
+ </div>
864
+ <div class="w-full bg-gray-200 rounded-full h-2">
865
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: ${project.progress}%"></div>
866
+ </div>
867
+ </div>
868
+
869
+ <div class="mt-6 flex justify-between items-center">
870
+ <div class="flex -space-x-2">
871
+ ${project.members.map(member =>
872
+ `<div class="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium">${member}</div>`
873
+ ).join('')}
874
+ </div>
875
+ <span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-600 rounded-full">${project.status}</span>
876
+ </div>
877
+ </div>
878
+ `;
879
+
880
+ projectsContainer.appendChild(projectCard);
881
+ });
882
+ }
883
+
884
+ // Function to load tasks into the kanban board
885
+ function loadTasks() {
886
+ const todoColumn = document.querySelector('#todo-column .task-list');
887
+ const inProgressColumn = document.querySelector('#in-progress-column .task-list');
888
+ const doneColumn = document.querySelector('#done-column .task-list');
889
+
890
+ tasks.forEach(task => {
891
+ const taskCard = document.createElement('div');
892
+ taskCard.className = 'task-card bg-white p-4 rounded-lg shadow-sm border border-gray-200 cursor-move';
893
+ taskCard.draggable = true;
894
+ taskCard.innerHTML = `
895
+ <div class="flex justify-between items-start">
896
+ <div>
897
+ <h4 class="font-medium">${task.name}</h4>
898
+ <p class="text-sm text-gray-500 mt-1">${task.project}</p>
899
+ </div>
900
+ <div class="dropdown relative">
901
+ <button class="text-gray-400 hover:text-gray-600">
902
+ <i class="fas fa-ellipsis-h"></i>
903
+ </button>
904
+ <div class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10">
905
+ <div class="py-1">
906
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Modifier</a>
907
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Supprimer</a>
908
+ </div>
909
+ </div>
910
+ </div>
911
+ </div>
912
+ <div class="mt-4 flex items-center justify-between">
913
+ <div class="flex items-center space-x-2">
914
+ ${task.tags.map(tag =>
915
+ `<span class="text-xs px-2 py-1 bg-indigo-50 text-indigo-600 rounded-full">${tag}</span>`
916
+ ).join('')}
917
+ <span class="text-xs text-gray-500">${task.dueDate}</span>
918
+ </div>
919
+ <div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center text-white text-xs">${task.assignee}</div>
920
+ </div>
921
+ `;
922
+
923
+ if (task.status === 'À faire') {
924
+ todoColumn.appendChild(taskCard);
925
+ } else if (task.status === 'En cours') {
926
+ inProgressColumn.appendChild(taskCard);
927
+ taskCard.querySelector('span').className = 'text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full';
928
+ } else if (task.status === 'Terminé') {
929
+ doneColumn.appendChild(taskCard);
930
+ taskCard.classList.add('opacity-70');
931
+ taskCard.querySelector('span').className = 'text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded-full';
932
+ }
933
+ });
934
+ }
935
+
936
+ // Initialize the app
937
+ function initApp() {
938
+ loadProjects();
939
+ loadTasks();
940
+ }
941
+
942
+ // Run the app
943
+ initApp();
944
+ </script>
945
+ <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=leroyfal/taskflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
946
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Je souhaite que tu agisses comme un développeur expert en applications web no-code. Ta tâche est de générer une application web complète de gestion de projet collaborative, inspirée de l’outil ASANA, destinée à des équipes professionnelles. Contexte : L’application doit permettre à plusieurs utilisateurs de créer, organiser et suivre des projets et des tâches, d’assigner des responsabilités, de définir des échéances, de collaborer via des commentaires, et de visualiser l’avancement sous forme de tableaux Kanban, listes et calendriers. Fonctionnalités principales attendues : – Tableau de bord avec vue globale des projets et tâches – Création, édition et suppression de projets et tâches – Assignation de tâches à des membres de l’équipe – Gestion des statuts (à faire, en cours, terminé) – Vues multiples : Kanban, liste, calendrier – Système de commentaires et notifications internes – Gestion des utilisateurs avec rôles (admin, membre) – Authentification sécurisée (connexion/inscription) – Responsive design (desktop et mobile) – Interface moderne, intuitive et professionnelle, inspirée de l’UX d’ASANA Contraintes techniques : – Utilise HTML, CSS (idéalement Tailwind CSS ou équivalent), JavaScript – Structure le code pour permettre une évolution future (ajout de modules, intégrations externes) – Prévois un système de navigation clair (menu latéral, barre supérieure) – Gère les données en local (mockup) ou propose une structure facilement connectable à une base de données Génère tout le code nécessaire (HTML, CSS, JS) dans un seul fichier, prêt à être utilisé, avec des commentaires pour faciliter la personnalisation. Indique clairement les sections du code (frontend, logique, styles). Si tu as besoin de faire des choix UX/UI, privilégie la simplicité, la clarté et l’ergonomie pour un usage professionnel.