Hugging Face's logo

Spaces:
Jasonbourn1996itsme
/
gold
Running

App Files Community
Jasonbourn1996itsme commited on
Commit
910bc43
·
verified ·
1 Parent(s): a4aadd8

Show me ui - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +475 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Gold
3
- emoji: 🏢
4
  colorFrom: red
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: gold
3
+ emoji: 🐳
4
  colorFrom: red
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,475 @@
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>Modern Dashboard UI</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
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 50: '#f0f9ff',
17
+ 100: '#e0f2fe',
18
+ 500: '#3b82f6',
19
+ 600: '#2563eb',
20
+ 700: '#1d4ed8',
21
+ },
22
+ dark: {
23
+ 800: '#1e293b',
24
+ 900: '#0f172a',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ .gradient-bg {
33
+ background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
34
+ }
35
+ .card-hover:hover {
36
+ transform: translateY(-5px);
37
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
38
+ }
39
+ .sidebar {
40
+ transition: all 0.3s ease;
41
+ }
42
+ @media (max-width: 768px) {
43
+ .sidebar {
44
+ transform: translateX(-100%);
45
+ }
46
+ .sidebar.open {
47
+ transform: translateX(0);
48
+ }
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
53
+ <div class="flex h-screen overflow-hidden">
54
+ <!-- Mobile menu button -->
55
+ <button id="mobile-menu-button" class="md:hidden fixed top-4 left-4 z-50 p-2 rounded-md bg-white dark:bg-dark-800 shadow-lg">
56
+ <i class="fas fa-bars text-gray-800 dark:text-gray-200"></i>
57
+ </button>
58
+
59
+ <!-- Sidebar -->
60
+ <div id="sidebar" class="sidebar w-64 bg-white dark:bg-dark-800 shadow-lg fixed h-full z-40">
61
+ <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
62
+ <div class="flex items-center space-x-2">
63
+ <div class="w-8 h-8 rounded-full gradient-bg flex items-center justify-center text-white">
64
+ <i class="fas fa-rocket"></i>
65
+ </div>
66
+ <span class="font-bold text-lg">DashboardPro</span>
67
+ </div>
68
+ <button id="close-sidebar" class="md:hidden p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
69
+ <i class="fas fa-times"></i>
70
+ </button>
71
+ </div>
72
+
73
+ <div class="p-4">
74
+ <div class="mb-6">
75
+ <div class="relative">
76
+ <input type="text" placeholder="Search..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 border-none focus:ring-2 focus:ring-primary-500">
77
+ <i class="fas fa-search absolute left-3 top-3 text-gray-500"></i>
78
+ </div>
79
+ </div>
80
+
81
+ <nav>
82
+ <div class="space-y-1">
83
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-primary-100 dark:bg-gray-700 text-primary-700 dark:text-white">
84
+ <i class="fas fa-home w-5"></i>
85
+ <span>Dashboard</span>
86
+ </a>
87
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
88
+ <i class="fas fa-chart-line w-5"></i>
89
+ <span>Analytics</span>
90
+ </a>
91
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
92
+ <i class="fas fa-envelope w-5"></i>
93
+ <span>Messages</span>
94
+ <span class="ml-auto bg-primary-500 text-white text-xs px-2 py-1 rounded-full">5</span>
95
+ </a>
96
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
97
+ <i class="fas fa-users w-5"></i>
98
+ <span>Team</span>
99
+ </a>
100
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
101
+ <i class="fas fa-cog w-5"></i>
102
+ <span>Settings</span>
103
+ </a>
104
+ </div>
105
+
106
+ <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-700">
107
+ <h3 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-3">Projects</h3>
108
+ <div class="space-y-1">
109
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
110
+ <div class="w-2 h-2 rounded-full bg-green-500"></div>
111
+ <span>Website Redesign</span>
112
+ </a>
113
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
114
+ <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
115
+ <span>Mobile App</span>
116
+ </a>
117
+ <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
118
+ <div class="w-2 h-2 rounded-full bg-red-500"></div>
119
+ <span>Marketing</span>
120
+ </a>
121
+ </div>
122
+ </div>
123
+ </nav>
124
+ </div>
125
+
126
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200 dark:border-gray-700">
127
+ <div class="flex items-center space-x-3">
128
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full">
129
+ <div class="flex-1">
130
+ <p class="font-medium">Sarah Johnson</p>
131
+ <p class="text-xs text-gray-500">Admin</p>
132
+ </div>
133
+ <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
134
+ <i class="fas fa-moon dark:hidden"></i>
135
+ <i class="fas fa-sun hidden dark:block"></i>
136
+ </button>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Main content -->
142
+ <div class="flex-1 overflow-auto ml-0 md:ml-64 transition-all duration-300">
143
+ <header class="bg-white dark:bg-dark-800 shadow-sm p-4">
144
+ <div class="flex justify-between items-center">
145
+ <h1 class="text-2xl font-bold">Dashboard Overview</h1>
146
+ <div class="flex items-center space-x-4">
147
+ <div class="relative">
148
+ <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
149
+ <i class="fas fa-bell"></i>
150
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
151
+ </button>
152
+ </div>
153
+ <div class="hidden md:flex items-center space-x-2">
154
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full">
155
+ <span>Sarah Johnson</span>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </header>
160
+
161
+ <main class="p-4">
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 dark:bg-dark-800 rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
165
+ <div class="flex items-center justify-between">
166
+ <div>
167
+ <p class="text-gray-500 dark:text-gray-400">Total Revenue</p>
168
+ <h3 class="text-2xl font-bold mt-1">$24,780</h3>
169
+ <p class="text-sm text-green-500 mt-2">
170
+ <i class="fas fa-arrow-up mr-1"></i> 12.5% from last month
171
+ </p>
172
+ </div>
173
+ <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400">
174
+ <i class="fas fa-dollar-sign text-xl"></i>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
180
+ <div class="flex items-center justify-between">
181
+ <div>
182
+ <p class="text-gray-500 dark:text-gray-400">New Users</p>
183
+ <h3 class="text-2xl font-bold mt-1">1,254</h3>
184
+ <p class="text-sm text-red-500 mt-2">
185
+ <i class="fas fa-arrow-down mr-1"></i> 3.2% from last month
186
+ </p>
187
+ </div>
188
+ <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
189
+ <i class="fas fa-users text-xl"></i>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
195
+ <div class="flex items-center justify-between">
196
+ <div>
197
+ <p class="text-gray-500 dark:text-gray-400">Active Projects</p>
198
+ <h3 class="text-2xl font-bold mt-1">18</h3>
199
+ <p class="text-sm text-green-500 mt-2">
200
+ <i class="fas fa-arrow-up mr-1"></i> 2 new this week
201
+ </p>
202
+ </div>
203
+ <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400">
204
+ <i class="fas fa-tasks text-xl"></i>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-sm p-6 card-hover transition-all duration-300">
210
+ <div class="flex items-center justify-between">
211
+ <div>
212
+ <p class="text-gray-500 dark:text-gray-400">Tasks Completed</p>
213
+ <h3 class="text-2xl font-bold mt-1">87%</h3>
214
+ <p class="text-sm text-green-500 mt-2">
215
+ <i class="fas fa-arrow-up mr-1"></i> 5% from last week
216
+ </p>
217
+ </div>
218
+ <div class="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center text-yellow-600 dark:text-yellow-400">
219
+ <i class="fas fa-check-circle text-xl"></i>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Charts and Tables -->
226
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
227
+ <div class="lg:col-span-2 bg-white dark:bg-dark-800 rounded-xl shadow-sm p-6">
228
+ <div class="flex items-center justify-between mb-6">
229
+ <h2 class="text-lg font-semibold">Revenue Overview</h2>
230
+ <div class="flex space-x-2">
231
+ <button class="px-3 py-1 text-sm rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-400">Month</button>
232
+ <button class="px-3 py-1 text-sm rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">Week</button>
233
+ <button class="px-3 py-1 text-sm rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">Day</button>
234
+ </div>
235
+ </div>
236
+ <div class="h-64">
237
+ <!-- Chart placeholder -->
238
+ <div class="w-full h-full flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-lg">
239
+ <p class="text-gray-500">Chart will appear here</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-sm p-6">
245
+ <h2 class="text-lg font-semibold mb-6">Recent Activity</h2>
246
+ <div class="space-y-4">
247
+ <div class="flex items-start">
248
+ <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 mr-3 mt-1">
249
+ <i class="fas fa-file-invoice text-sm"></i>
250
+ </div>
251
+ <div>
252
+ <p class="font-medium">New invoice received</p>
253
+ <p class="text-sm text-gray-500 dark:text-gray-400">From BluePrint Inc. for $2,500</p>
254
+ <p class="text-xs text-gray-400 mt-1">10 minutes ago</p>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="flex items-start">
259
+ <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400 mr-3 mt-1">
260
+ <i class="fas fa-check-circle text-sm"></i>
261
+ </div>
262
+ <div>
263
+ <p class="font-medium">Project completed</p>
264
+ <p class="text-sm text-gray-500 dark:text-gray-400">Website redesign signed off</p>
265
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="flex items-start">
270
+ <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 mr-3 mt-1">
271
+ <i class="fas fa-user-plus text-sm"></i>
272
+ </div>
273
+ <div>
274
+ <p class="font-medium">New team member</p>
275
+ <p class="text-sm text-gray-500 dark:text-gray-400">Michael joined the marketing team</p>
276
+ <p class="text-xs text-gray-400 mt-1">Yesterday</p>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="flex items-start">
281
+ <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center text-yellow-600 dark:text-yellow-400 mr-3 mt-1">
282
+ <i class="fas fa-exclamation-triangle text-sm"></i>
283
+ </div>
284
+ <div>
285
+ <p class="font-medium">Server issue</p>
286
+ <p class="text-sm text-gray-500 dark:text-gray-400">High CPU usage detected</p>
287
+ <p class="text-xs text-gray-400 mt-1">2 days ago</p>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Projects Table -->
295
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-sm overflow-hidden">
296
+ <div class="p-6">
297
+ <div class="flex items-center justify-between mb-6">
298
+ <h2 class="text-lg font-semibold">Active Projects</h2>
299
+ <button class="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg text-sm font-medium transition-colors">
300
+ <i class="fas fa-plus mr-2"></i> Add Project
301
+ </button>
302
+ </div>
303
+
304
+ <div class="overflow-x-auto">
305
+ <table class="w-full">
306
+ <thead>
307
+ <tr class="text-left text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
308
+ <th class="pb-3 font-medium">Project</th>
309
+ <th class="pb-3 font-medium">Team</th>
310
+ <th class="pb-3 font-medium">Status</th>
311
+ <th class="pb-3 font-medium">Progress</th>
312
+ <th class="pb-3 font-medium">Due Date</th>
313
+ <th class="pb-3 font-medium">Actions</th>
314
+ </tr>
315
+ </thead>
316
+ <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
317
+ <tr>
318
+ <td class="py-4">
319
+ <div class="flex items-center">
320
+ <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 mr-3">
321
+ <i class="fas fa-globe text-sm"></i>
322
+ </div>
323
+ <span class="font-medium">Website Redesign</span>
324
+ </div>
325
+ </td>
326
+ <td class="py-4">
327
+ <div class="flex -space-x-2">
328
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
329
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
330
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
331
+ </div>
332
+ </td>
333
+ <td class="py-4">
334
+ <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">On Track</span>
335
+ </td>
336
+ <td class="py-4">
337
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
338
+ <div class="bg-green-500 h-2 rounded-full" style="width: 75%"></div>
339
+ </div>
340
+ <span class="text-xs text-gray-500 dark:text-gray-400 mt-1">75% complete</span>
341
+ </td>
342
+ <td class="py-4">
343
+ <span>Jun 15, 2023</span>
344
+ </td>
345
+ <td class="py-4">
346
+ <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
347
+ <i class="fas fa-ellipsis-h"></i>
348
+ </button>
349
+ </td>
350
+ </tr>
351
+
352
+ <tr>
353
+ <td class="py-4">
354
+ <div class="flex items-center">
355
+ <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 mr-3">
356
+ <i class="fas fa-mobile-alt text-sm"></i>
357
+ </div>
358
+ <span class="font-medium">Mobile App</span>
359
+ </div>
360
+ </td>
361
+ <td class="py-4">
362
+ <div class="flex -space-x-2">
363
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
364
+ <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
365
+ </div>
366
+ </td>
367
+ <td class="py-4">
368
+ <span class="px-3 py-1 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400">Delayed</span>
369
+ </td>
370
+ <td class="py-4">
371
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
372
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%"></div>
373
+ </div>
374
+ <span class="text-xs text-gray-500 dark:text-gray-400 mt-1">45% complete</span>
375
+ </td>
376
+ <td class="py-4">
377
+ <span>Jul 2, 2023</span>
378
+ </td>
379
+ <td class="py-4">
380
+ <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
381
+ <i class="fas fa-ellipsis-h"></i>
382
+ </button>
383
+ </td>
384
+ </tr>
385
+
386
+ <tr>
387
+ <td class="py-4">
388
+ <div class="flex items-center">
389
+ <div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-red-600 dark:text-red-400 mr-3">
390
+ <i class="fas fa-bullhorn text-sm"></i>
391
+ </div>
392
+ <span class="font-medium">Marketing Campaign</span>
393
+ </div>
394
+ </td>
395
+ <td class="py-4">
396
+ <div class="flex -space-x-2">
397
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
398
+ <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
399
+ <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
400
+ <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-dark-800">
401
+ </div>
402
+ </td>
403
+ <td class="py-4">
404
+ <span class="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400">In Review</span>
405
+ </td>
406
+ <td class="py-4">
407
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
408
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 90%"></div>
409
+ </div>
410
+ <span class="text-xs text-gray-500 dark:text-gray-400 mt-1">90% complete</span>
411
+ </td>
412
+ <td class="py-4">
413
+ <span>May 28, 2023</span>
414
+ </td>
415
+ <td class="py-4">
416
+ <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
417
+ <i class="fas fa-ellipsis-h"></i>
418
+ </button>
419
+ </td>
420
+ </tr>
421
+ </tbody>
422
+ </table>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </main>
427
+ </div>
428
+ </div>
429
+
430
+ <script>
431
+ // Toggle dark mode
432
+ const themeToggle = document.getElementById('theme-toggle');
433
+ themeToggle.addEventListener('click', () => {
434
+ document.documentElement.classList.toggle('dark');
435
+ localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
436
+ });
437
+
438
+ // Check for saved theme preference
439
+ if (localStorage.getItem('darkMode') === 'true') {
440
+ document.documentElement.classList.add('dark');
441
+ }
442
+
443
+ // Mobile menu toggle
444
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
445
+ const closeSidebar = document.getElementById('close-sidebar');
446
+ const sidebar = document.getElementById('sidebar');
447
+
448
+ mobileMenuButton.addEventListener('click', () => {
449
+ sidebar.classList.add('open');
450
+ });
451
+
452
+ closeSidebar.addEventListener('click', () => {
453
+ sidebar.classList.remove('open');
454
+ });
455
+
456
+ // Close sidebar when clicking outside on mobile
457
+ document.addEventListener('click', (e) => {
458
+ if (window.innerWidth <= 768 && !sidebar.contains(e.target) && e.target !== mobileMenuButton) {
459
+ sidebar.classList.remove('open');
460
+ }
461
+ });
462
+
463
+ // Card hover effect
464
+ const cards = document.querySelectorAll('.card-hover');
465
+ cards.forEach(card => {
466
+ card.addEventListener('mouseenter', () => {
467
+ card.classList.add('shadow-lg');
468
+ });
469
+ card.addEventListener('mouseleave', () => {
470
+ card.classList.remove('shadow-lg');
471
+ });
472
+ });
473
+ </script>
474
+ <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=Jasonbourn1996itsme/gold" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
475
+ </html>