Hugging Face's logo

Spaces:
mvbhr
/
taskflow-dashboard
Running

App Files Community
mvbhr commited on
Commit
73fcbbc
·
verified ·
1 Parent(s): 81a8ad1

criar a lista de projects

Browse files
Files changed (1) hide show
  1. projects.html +310 -0
projects.html ADDED
@@ -0,0 +1,310 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Projects - TaskFlow</title>
8
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #f9fafb;
16
+ }
17
+ .card-hover:hover {
18
+ transform: translateY(-5px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .status-active {
22
+ background-color: #dcfce7;
23
+ color: #166534;
24
+ }
25
+ .status-completed {
26
+ background-color: #dbeafe;
27
+ color: #1e40af;
28
+ }
29
+ .status-paused {
30
+ background-color: #fef3c7;
31
+ color: #92400e;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50">
36
+ <!-- Navigation -->
37
+ <nav class="bg-white shadow-sm">
38
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
39
+ <div class="flex justify-between h-16">
40
+ <div class="flex items-center">
41
+ <div class="flex-shrink-0 flex items-center">
42
+ <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center">
43
+ <i data-feather="layers" class="text-white"></i>
44
+ </div>
45
+ <span class="ml-2 text-xl font-bold text-gray-900">TaskFlow</span>
46
+ </div>
47
+ <div class="hidden md:ml-6 md:flex md:space-x-8">
48
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
49
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
50
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
51
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
52
+ </div>
53
+ </div>
54
+ <div class="flex items-center">
55
+ <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
56
+ <i data-feather="bell"></i>
57
+ </button>
58
+ <div class="ml-3 relative">
59
+ <div class="flex items-center space-x-3 cursor-pointer">
60
+ <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
61
+ <span class="text-indigo-800 font-medium">U</span>
62
+ </div>
63
+ <span class="text-sm font-medium text-gray-700">User</span>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </nav>
70
+
71
+ <!-- Main Content -->
72
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
73
+ <!-- Header -->
74
+ <div class="mb-8">
75
+ <div class="flex justify-between items-center">
76
+ <div>
77
+ <h1 class="text-3xl font-bold text-gray-900">Projects</h1>
78
+ <p class="mt-2 text-gray-600">Manage all your projects in one place</p>
79
+ </div>
80
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none">
81
+ <i data-feather="plus" class="mr-2 h-4 w-4"></i>
82
+ New Project
83
+ </button>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Filters -->
88
+ <div class="mb-6 flex flex-wrap gap-2">
89
+ <button class="px-3 py-1 text-sm rounded-full bg-indigo-100 text-indigo-800">All Projects</button>
90
+ <button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">Active</button>
91
+ <button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">Completed</button>
92
+ <button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">Paused</button>
93
+ </div>
94
+
95
+ <!-- Projects Grid -->
96
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
97
+ <!-- Project Card 1 -->
98
+ <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
99
+ <div class="p-6">
100
+ <div class="flex justify-between items-start">
101
+ <div>
102
+ <h3 class="text-lg font-medium text-gray-900">Website Redesign</h3>
103
+ <p class="mt-1 text-sm text-gray-500">Complete overhaul of company website</p>
104
+ </div>
105
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-active">
106
+ Active
107
+ </span>
108
+ </div>
109
+ <div class="mt-4">
110
+ <div class="flex items-center text-sm text-gray-500">
111
+ <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i>
112
+ Due: Jun 30, 2023
113
+ </div>
114
+ <div class="mt-2 flex items-center">
115
+ <div class="flex -space-x-2">
116
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/1" alt="">
117
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/2" alt="">
118
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/3" alt="">
119
+ </div>
120
+ <span class="ml-2 text-sm text-gray-500">+2 more</span>
121
+ </div>
122
+ </div>
123
+ <div class="mt-4">
124
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
125
+ <span>Progress</span>
126
+ <span>75%</span>
127
+ </div>
128
+ <div class="w-full bg-gray-200 rounded-full h-2">
129
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 75%"></div>
130
+ </div>
131
+ </div>
132
+ <div class="mt-4 flex justify-between">
133
+ <span class="text-sm text-gray-500">12 tasks</span>
134
+ <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View details</a>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Project Card 2 -->
140
+ <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
141
+ <div class="p-6">
142
+ <div class="flex justify-between items-start">
143
+ <div>
144
+ <h3 class="text-lg font-medium text-gray-900">Mobile App Development</h3>
145
+ <p class="mt-1 text-sm text-gray-500">Native iOS and Android application</p>
146
+ </div>
147
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-active">
148
+ Active
149
+ </span>
150
+ </div>
151
+ <div class="mt-4">
152
+ <div class="flex items-center text-sm text-gray-500">
153
+ <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i>
154
+ Due: Aug 15, 2023
155
+ </div>
156
+ <div class="mt-2 flex items-center">
157
+ <div class="flex -space-x-2">
158
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/4" alt="">
159
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/5" alt="">
160
+ </div>
161
+ <span class="ml-2 text-sm text-gray-500">+3 more</span>
162
+ </div>
163
+ </div>
164
+ <div class="mt-4">
165
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
166
+ <span>Progress</span>
167
+ <span>45%</span>
168
+ </div>
169
+ <div class="w-full bg-gray-200 rounded-full h-2">
170
+ <div class="bg-green-600 h-2 rounded-full" style="width: 45%"></div>
171
+ </div>
172
+ </div>
173
+ <div class="mt-4 flex justify-between">
174
+ <span class="text-sm text-gray-500">24 tasks</span>
175
+ <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View details</a>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Project Card 3 -->
181
+ <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
182
+ <div class="p-6">
183
+ <div class="flex justify-between items-start">
184
+ <div>
185
+ <h3 class="text-lg font-medium text-gray-900">Marketing Campaign</h3>
186
+ <p class="mt-1 text-sm text-gray-500">Q3 product launch campaign</p>
187
+ </div>
188
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-completed">
189
+ Completed
190
+ </span>
191
+ </div>
192
+ <div class="mt-4">
193
+ <div class="flex items-center text-sm text-gray-500">
194
+ <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i>
195
+ Completed: May 20, 2023
196
+ </div>
197
+ <div class="mt-2 flex items-center">
198
+ <div class="flex -space-x-2">
199
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/6" alt="">
200
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/7" alt="">
201
+ </div>
202
+ <span class="ml-2 text-sm text-gray-500">+1 more</span>
203
+ </div>
204
+ </div>
205
+ <div class="mt-4">
206
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
207
+ <span>Progress</span>
208
+ <span>100%</span>
209
+ </div>
210
+ <div class="w-full bg-gray-200 rounded-full h-2">
211
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 100%"></div>
212
+ </div>
213
+ </div>
214
+ <div class="mt-4 flex justify-between">
215
+ <span class="text-sm text-gray-500">8 tasks</span>
216
+ <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View details</a>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Project Card 4 -->
222
+ <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
223
+ <div class="p-6">
224
+ <div class="flex justify-between items-start">
225
+ <div>
226
+ <h3 class="text-lg font-medium text-gray-900">Client Onboarding</h3>
227
+ <p class="mt-1 text-sm text-gray-500">Streamline new client integration process</p>
228
+ </div>
229
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-paused">
230
+ Paused
231
+ </span>
232
+ </div>
233
+ <div class="mt-4">
234
+ <div class="flex items-center text-sm text-gray-500">
235
+ <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i>
236
+ Due: Jul 10, 2023
237
+ </div>
238
+ <div class="mt-2 flex items-center">
239
+ <div class="flex -space-x-2">
240
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/8" alt="">
241
+ </div>
242
+ <span class="ml-2 text-sm text-gray-500">+0 more</span>
243
+ </div>
244
+ </div>
245
+ <div class="mt-4">
246
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
247
+ <span>Progress</span>
248
+ <span>30%</span>
249
+ </div>
250
+ <div class="w-full bg-gray-200 rounded-full h-2">
251
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 30%"></div>
252
+ </div>
253
+ </div>
254
+ <div class="mt-4 flex justify-between">
255
+ <span class="text-sm text-gray-500">6 tasks</span>
256
+ <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View details</a>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Project Card 5 -->
262
+ <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
263
+ <div class="p-6">
264
+ <div class="flex justify-between items-start">
265
+ <div>
266
+ <h3 class="text-lg font-medium text-gray-900">E-commerce Platform</h3>
267
+ <p class="mt-1 text-sm text-gray-500">Custom online store solution</p>
268
+ </div>
269
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-active">
270
+ Active
271
+ </span>
272
+ </div>
273
+ <div class="mt-4">
274
+ <div class="flex items-center text-sm text-gray-500">
275
+ <i data-feather="calendar" class="mr-1.5 h-4 w-4"></i>
276
+ Due: Sep 30, 2023
277
+ </div>
278
+ <div class="mt-2 flex items-center">
279
+ <div class="flex -space-x-2">
280
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/9" alt="">
281
+ <img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="http://static.photos/people/320x240/10" alt="">
282
+ </div>
283
+ <span class="ml-2 text-sm text-gray-500">+4 more</span>
284
+ </div>
285
+ </div>
286
+ <div class="mt-4">
287
+ <div class="flex justify-between text-sm text-gray-500 mb-1">
288
+ <span>Progress</span>
289
+ <span>20%</span>
290
+ </div>
291
+ <div class="w-full bg-gray-200 rounded-full h-2">
292
+ <div class="bg-red-600 h-2 rounded-full" style="width: 20%"></div>
293
+ </div>
294
+ </div>
295
+ <div class="mt-4 flex justify-between">
296
+ <span class="text-sm text-gray-500">18 tasks</span>
297
+ <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">View details</a>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Project Card 6 -->
303
+ <div class="bg-white rounded-lg shadow overflow-hidden card-hover">
304
+ <div class="p-6">
305
+ <div class="flex justify-between items-start">
306
+ <div>
307
+ <h3 class="text-lg font-medium text-gray-900">Data Migration</h3>
308
+ <p class="mt-1 text-sm text-gray-500">Migrate legacy systems to cloud</p>
309
+ </div>
310
+ <span class="inline-flex