Hugging Face's logo

Spaces:
mvbhr
/
taskflow-dashboard
Running

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

criar a página de Tasks

Browse files
Files changed (3) hide show
  1. index.html +3 -3
  2. projects.html +2 -2
  3. tasks.html +314 -0
index.html CHANGED
@@ -45,11 +45,11 @@
45
  </div>
46
  <div class="hidden md:ml-6 md:flex md:space-x-8">
47
  <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
48
- <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">Projects</a>
49
- <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>
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">Calendar</a>
51
  </div>
52
- </div>
53
  <div class="flex items-center">
54
  <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
55
  <i data-feather="bell"></i>
 
45
  </div>
46
  <div class="hidden md:ml-6 md:flex md:space-x-8">
47
  <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
48
+ <a href="projects.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">Projects</a>
49
+ <a href="tasks.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">Tasks</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">Calendar</a>
51
  </div>
52
+ </div>
53
  <div class="flex items-center">
54
  <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
55
  <i data-feather="bell"></i>
projects.html CHANGED
@@ -47,10 +47,10 @@
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>
 
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="tasks.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">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>
tasks.html ADDED
@@ -0,0 +1,314 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Tasks - TaskFlow</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f9fafb;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .priority-high {
21
+ background-color: #fee2e2;
22
+ color: #dc2626;
23
+ }
24
+ .priority-medium {
25
+ background-color: #fef3c7;
26
+ color: #d97706;
27
+ }
28
+ .priority-low {
29
+ background-color: #dcfce7;
30
+ color: #16a34a;
31
+ }
32
+ .status-todo {
33
+ background-color: #f3f4f6;
34
+ color: #374151;
35
+ }
36
+ .status-in-progress {
37
+ background-color: #dbeafe;
38
+ color: #1e40af;
39
+ }
40
+ .status-completed {
41
+ background-color: #dcfce7;
42
+ color: #166534;
43
+ }
44
+ .progress-bar {
45
+ transition: width 0.5s ease-in-out;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50">
50
+ <!-- Navigation -->
51
+ <nav class="bg-white shadow-sm">
52
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
53
+ <div class="flex justify-between h-16">
54
+ <div class="flex items-center">
55
+ <div class="flex-shrink-0 flex items-center">
56
+ <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center">
57
+ <i data-feather="layers" class="text-white"></i>
58
+ </div>
59
+ <span class="ml-2 text-xl font-bold text-gray-900">TaskFlow</span>
60
+ </div>
61
+ <div class="hidden md:ml-6 md:flex md:space-x-8">
62
+ <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>
63
+ <a href="projects.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">Projects</a>
64
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
65
+ <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>
66
+ </div>
67
+ </div>
68
+ <div class="flex items-center">
69
+ <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
70
+ <i data-feather="bell"></i>
71
+ </button>
72
+ <div class="ml-3 relative">
73
+ <div class="flex items-center space-x-3 cursor-pointer">
74
+ <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
75
+ <span class="text-indigo-800 font-medium">U</span>
76
+ </div>
77
+ <span class="text-sm font-medium text-gray-700">User</span>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+ </nav>
84
+
85
+ <!-- Main Content -->
86
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
87
+ <!-- Header -->
88
+ <div class="mb-8">
89
+ <div class="flex justify-between items-center">
90
+ <div>
91
+ <h1 class="text-3xl font-bold text-gray-900">Tasks</h1>
92
+ <p class="mt-2 text-gray-600">Manage your tasks and track progress</p>
93
+ </div>
94
+ <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">
95
+ <i data-feather="plus" class="mr-2 h-4 w-4"></i>
96
+ New Task
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Filters and Search -->
102
+ <div class="mb-6 flex flex-col sm:flex-row gap-4">
103
+ <div class="flex-1">
104
+ <input type="text" placeholder="Search tasks..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
105
+ </div>
106
+ <div class="flex gap-2">
107
+ <select class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
108
+ <option>All Status</option>
109
+ <option>To Do</option>
110
+ <option>In Progress</option>
111
+ <option>Completed</option>
112
+ </select>
113
+ <select class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
114
+ <option>All Priority</option>
115
+ <option>High</option>
116
+ <option>Medium</option>
117
+ <option>Low</option>
118
+ </select>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Tasks List -->
123
+ <div class="bg-white shadow rounded-lg overflow-hidden">
124
+ <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
125
+ <h3 class="text-lg leading-6 font-medium text-gray-900">All Tasks</h3>
126
+ </div>
127
+ <ul class="divide-y divide-gray-200">
128
+ <!-- Task 1 -->
129
+ <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 transition-colors duration-150">
130
+ <div class="flex items-center justify-between">
131
+ <div class="flex items-center">
132
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
133
+ <div class="ml-3">
134
+ <p class="text-sm font-medium text-gray-900">Design homepage layout</p>
135
+ <p class="text-sm text-gray-500">Website Redesign</p>
136
+ </div>
137
+ </div>
138
+ <div class="flex items-center space-x-4">
139
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium priority-high">
140
+ High
141
+ </span>
142
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-todo">
143
+ To Do
144
+ </span>
145
+ <span class="text-sm text-gray-500">Due: Tomorrow</span>
146
+ </div>
147
+ </div>
148
+ </li>
149
+
150
+ <!-- Task 2 -->
151
+ <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 transition-colors duration-150">
152
+ <div class="flex items-center justify-between">
153
+ <div class="flex items-center">
154
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
155
+ <div class="ml-3">
156
+ <p class="text-sm font-medium text-gray-900">API integration testing</p>
157
+ <p class="text-sm text-gray-500">Mobile App Development</p>
158
+ </div>
159
+ </div>
160
+ <div class="flex items-center space-x-4">
161
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium priority-medium">
162
+ Medium
163
+ </span>
164
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-in-progress">
165
+ In Progress
166
+ </span>
167
+ <span class="text-sm text-gray-500">Due: Jun 15</span>
168
+ </div>
169
+ </div>
170
+ </li>
171
+
172
+ <!-- Task 3 -->
173
+ <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 transition-colors duration-150">
174
+ <div class="flex items-center justify-between">
175
+ <div class="flex items-center">
176
+ <input type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
177
+ <div class="ml-3">
178
+ <p class="text-sm font-medium text-gray-900">Create social media assets</p>
179
+ <p class="text-sm text-gray-500">Marketing Campaign</p>
180
+ </div>
181
+ </div>
182
+ <div class="flex items-center space-x-4">
183
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium priority-low">
184
+ Low
185
+ </span>
186
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-completed">
187
+ Completed
188
+ </span>
189
+ <span class="text-sm text-gray-500">Completed: May 20</span>
190
+ </div>
191
+ </div>
192
+ </li>
193
+
194
+ <!-- Task 4 -->
195
+ <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 transition-colors duration-150">
196
+ <div class="flex items-center justify-between">
197
+ <div class="flex items-center">
198
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
199
+ <div class="ml-3">
200
+ <p class="text-sm font-medium text-gray-900">Client onboarding documentation</p>
201
+ <p class="text-sm text-gray-500">Client Onboarding</p>
202
+ </div>
203
+ </div>
204
+ <div class="flex items-center space-x-4">
205
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium priority-medium">
206
+ Medium
207
+ </span>
208
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-todo">
209
+ To Do
210
+ </span>
211
+ <span class="text-sm text-gray-500">Due: Jun 25</span>
212
+ </div>
213
+ </div>
214
+ </li>
215
+
216
+ <!-- Task 5 -->
217
+ <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 transition-colors duration-150">
218
+ <div class="flex items-center justify-between">
219
+ <div class="flex items-center">
220
+ <input type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
221
+ <div class="ml-3">
222
+ <p class="text-sm font-medium text-gray-900">Database optimization</p>
223
+ <p class="text-sm text-gray-500">E-commerce Platform</p>
224
+ </div>
225
+ </div>
226
+ <div class="flex items-center space-x-4">
227
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium priority-high">
228
+ High
229
+ </span>
230
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-in-progress">
231
+ In Progress
232
+ </span>
233
+ <span class="text-sm text-gray-500">Due: Jun 20</span>
234
+ </div>
235
+ </div>
236
+ </li>
237
+ </ul>
238
+ <div class="px-4 py-4 sm:px-6 bg-gray-50 text-center">
239
+ <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Load more tasks</a>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Task Stats -->
244
+ <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
245
+ <div class="bg-white overflow-hidden shadow rounded-lg">
246
+ <div class="px-4 py-5 sm:p-6">
247
+ <div class="flex items-center">
248
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
249
+ <i data-feather="check-square" class="h-6 w-6 text-indigo-600"></i>
250
+ </div>
251
+ <div class="ml-5 w-0 flex-1">
252
+ <dl>
253
+ <dt class="text-sm font-medium text-gray-500 truncate">Total Tasks</dt>
254
+ <dd class="flex items-baseline">
255
+ <div class="text-2xl font-semibold text-gray-900">42</div>
256
+ </dd>
257
+ </dl>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="bg-white overflow-hidden shadow rounded-lg">
263
+ <div class="px-4 py-5 sm:p-6">
264
+ <div class="flex items-center">
265
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
266
+ <i data-feather="check-circle" class="h-6 w-6 text-green-600"></i>
267
+ </div>
268
+ <div class="ml-5 w-0 flex-1">
269
+ <dl>
270
+ <dt class="text-sm font-medium text-gray-500 truncate">Completed</dt>
271
+ <dd class="flex items-baseline">
272
+ <div class="text-2xl font-semibold text-gray-900">24</div>
273
+ </dd>
274
+ </dl>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="bg-white overflow-hidden shadow rounded-lg">
280
+ <div class="px-4 py-5 sm:p-6">
281
+ <div class="flex items-center">
282
+ <div class="flex-shrink-0 bg-red-100 rounded-md p-3">
283
+ <i data-feather="clock" class="h-6 w-6 text-red-600"></i>
284
+ </div>
285
+ <div class="ml-5 w-0 flex-1">
286
+ <dl>
287
+ <dt class="text-sm font-medium text-gray-500 truncate">Overdue</dt>
288
+ <dd class="flex items-baseline">
289
+ <div class="text-2xl font-semibold text-gray-900">3</div>
290
+ </dd>
291
+ </dl>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </main>
297
+
298
+ <script>
299
+ feather.replace();
300
+
301
+ // Animate progress bars on load
302
+ document.addEventListener('DOMContentLoaded', function() {
303
+ const progressBars = document.querySelectorAll('.progress-bar');
304
+ progressBars.forEach(bar => {
305
+ const width = bar.style.width;
306
+ bar.style.width = '0';
307
+ setTimeout(() => {
308
+ bar.style.width = width;
309
+ }, 300);
310
+ });
311
+ });
312
+ </script>
313
+ </body>
314
+ </html>