Hugging Face's logo

Spaces:
nmtalhp
/
hmm
Running

App Files Community
nmtalhp commited on
Commit
92239b0
·
verified ·
1 Parent(s): cd6dfd0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +566 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hmm
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: hmm
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,566 @@
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>Data Analytics Dashboard</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ /* Custom scrollbar */
12
+ ::-webkit-scrollbar {
13
+ width: 8px;
14
+ height: 8px;
15
+ }
16
+ ::-webkit-scrollbar-track {
17
+ background: #f1f1f1;
18
+ }
19
+ ::-webkit-scrollbar-thumb {
20
+ background: #888;
21
+ border-radius: 4px;
22
+ }
23
+ ::-webkit-scrollbar-thumb:hover {
24
+ background: #555;
25
+ }
26
+
27
+ /* Custom animations */
28
+ @keyframes fadeIn {
29
+ from { opacity: 0; transform: translateY(10px); }
30
+ to { opacity: 1; transform: translateY(0); }
31
+ }
32
+
33
+ .animate-fade-in {
34
+ animation: fadeIn 0.5s ease-out forwards;
35
+ }
36
+
37
+ /* Dashboard card hover effect */
38
+ .dashboard-card:hover {
39
+ transform: translateY(-5px);
40
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
41
+ }
42
+
43
+ /* Dark mode styles */
44
+ .dark .dark\:bg-gray-800 {
45
+ background-color: #1e293b !important;
46
+ }
47
+ .dark .dark\:text-white {
48
+ color: #fff !important;
49
+ }
50
+ .dark .dark\:bg-gray-700 {
51
+ background-color: #334155 !important;
52
+ }
53
+ .dark .dark\:text-gray-300 {
54
+ color: #d1d5db !important;
55
+ }
56
+ .dark .dark\:border-gray-600 {
57
+ border-color: #4b5563 !important;
58
+ }
59
+ </style>
60
+ </head>
61
+ <body class="bg-gray-100 text-gray-800 transition-colors duration-300">
62
+ <!-- Navigation Sidebar -->
63
+ <div class="fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-50 transition-all duration-300 ease-in-out transform -translate-x-full md:translate-x-0" id="sidebar">
64
+ <div class="flex items-center justify-between p-4 border-b">
65
+ <h1 class="text-xl font-bold text-blue-600 flex items-center">
66
+ <i class="fas fa-chart-line mr-2"></i> DataAnalyticsPro
67
+ </h1>
68
+ <button id="close-sidebar" class="md:hidden text-gray-500 hover:text-gray-700">
69
+ <i class="fas fa-times"></i>
70
+ </button>
71
+ </div>
72
+ <nav class="p-4">
73
+ <div class="mb-6">
74
+ <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</h2>
75
+ <ul>
76
+ <li class="mb-1">
77
+ <a href="#" class="flex items-center p-2 text-blue-600 rounded-lg bg-blue-50">
78
+ <i class="fas fa-chart-pie mr-3"></i>
79
+ <span>Dashboard</span>
80
+ </a>
81
+ </li>
82
+ <li class="mb-1">
83
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
84
+ <i class="fas fa-database mr-3"></i>
85
+ <span>Data Sources</span>
86
+ </a>
87
+ </li>
88
+ <li class="mb-1">
89
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
90
+ <i class="fas fa-chart-bar mr-3"></i>
91
+ <span>Reports</span>
92
+ </a>
93
+ </li>
94
+ <li class="mb-1">
95
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
96
+ <i class="fas fa-users-cog mr-3"></i>
97
+ <span>User Management</span>
98
+ </a>
99
+ </li>
100
+ <li class="mb-1">
101
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
102
+ <i class="fas fa-cog mr-3"></i>
103
+ <span>Settings</span>
104
+ </a>
105
+ </li>
106
+ </ul>
107
+ </div>
108
+ <div>
109
+ <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Tools</h2>
110
+ <ul>
111
+ <li class="mb-1">
112
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
113
+ <i class="fas fa-file-import mr-3"></i>
114
+ <span>Data Import</span>
115
+ </a>
116
+ </li>
117
+ <li class="mb-1">
118
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
119
+ <i class="fas fa-file-export mr-3"></i>
120
+ <span>Data Export</span>
121
+ </a>
122
+ </li>
123
+ <li class="mb-1">
124
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
125
+ <i class="fas fa-shield-alt mr-3"></i>
126
+ <span>Security</span>
127
+ </a>
128
+ </li>
129
+ <li class="mb-1">
130
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
131
+ <i class="fas fa-plug mr-3"></i>
132
+ <span>Integrations</span>
133
+ </a>
134
+ </li>
135
+ </ul>
136
+ </div>
137
+ </nav>
138
+ </div>
139
+
140
+ <!-- Main Content -->
141
+ <div class="md:ml-64 transition-all duration-300">
142
+ <!-- Top Navigation -->
143
+ <header class="bg-white shadow-sm sticky top-0 z-40">
144
+ <div class="flex items-center justify-between px-4 py-3">
145
+ <div class="flex items-center">
146
+ <button id="open-sidebar" class="mr-4 text-gray-500 hover:text-gray-700 md:hidden">
147
+ <i class="fas fa-bars"></i>
148
+ </button>
149
+ <h2 class="text-xl font-semibold">Dashboard</h2>
150
+ </div>
151
+ <div class="flex items-center space-x-4">
152
+ <div class="relative">
153
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
154
+ <i class="fas fa-bell"></i>
155
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
156
+ </button>
157
+ </div>
158
+ <div class="relative">
159
+ <button id="theme-toggle" class="text-gray-500 hover:text-gray-700 focus:outline-none">
160
+ <i class="fas fa-moon" id="theme-icon"></i>
161
+ </button>
162
+ </div>
163
+ <div class="flex items-center">
164
+ <img src="https://ui-avatars.com/api/?name=John+Doe&background=4f46e5&color=fff" alt="User" class="w-8 h-8 rounded-full">
165
+ <span class="ml-2 text-sm font-medium hidden md:inline">John Doe</span>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Secondary Navigation -->
171
+ <nav class="flex overflow-x-auto whitespace-nowrap px-4 border-t">
172
+ <a href="#" class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600">Overview</a>
173
+ <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Analytics</a>
174
+ <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Reports</a>
175
+ <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Alerts</a>
176
+ <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Export</a>
177
+ <a href="#" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Settings</a>
178
+ </nav>
179
+ </header>
180
+
181
+ <!-- Main Content Area -->
182
+ <main class="p-4">
183
+ <!-- Date and Quick Actions -->
184
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
185
+ <div>
186
+ <h1 class="text-2xl font-bold mb-2">Welcome back, John!</h1>
187
+ <p class="text-gray-600">Today is <span id="current-date" class="font-medium">March 15, 2024</span></p>
188
+ </div>
189
+ <div class="mt-4 md:mt-0 flex space-x-2">
190
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
191
+ <i class="fas fa-file-export mr-2"></i> Export Report
192
+ </button>
193
+ <button class="px-4 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center">
194
+ <i class="fas fa-filter mr-2"></i> Filters
195
+ </button>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- KPI Cards -->
200
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
201
+ <div class="bg-white rounded-xl shadow-sm p-6 dashboard-card transition-all duration-300 animate-fade-in">
202
+ <div class="flex items-start justify-between">
203
+ <div>
204
+ <p class="text-sm font-medium text-gray-500">Total Revenue</p>
205
+ <h3 class="text-2xl font-bold mt-1">$48,245</h3>
206
+ <p class="text-xs mt-2"><span class="text-green-500">+12.5%</span> from last month</p>
207
+ </div>
208
+ <div class="p-3 rounded-lg bg-blue-100 text-blue-600">
209
+ <i class="fas fa-dollar-sign"></i>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ <div class="bg-white rounded-xl shadow-sm p-6 dashboard-card transition-all duration-300 animate-fade-in" style="animation-delay: 0.1s">
214
+ <div class="flex items-start justify-between">
215
+ <div>
216
+ <p class="text-sm font-medium text-gray-500">Active Users</p>
217
+ <h3 class="text-2xl font-bold mt-1">1,243</h3>
218
+ <p class="text-xs mt-2"><span class="text-green-500">+8.2%</span> from last month</p>
219
+ </div>
220
+ <div class="p-3 rounded-lg bg-green-100 text-green-600">
221
+ <i class="fas fa-users"></i>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <div class="bg-white rounded-xl shadow-sm p-6 dashboard-card transition-all duration-300 animate-fade-in" style="animation-delay: 0.2s">
226
+ <div class="flex items-start justify-between">
227
+ <div>
228
+ <p class="text-sm font-medium text-gray-500">Conversion Rate</p>
229
+ <h3 class="text-2xl font-bold mt-1">3.65%</h3>
230
+ <p class="text-xs mt-2"><span class="text-red-500">-0.5%</span> from last month</p>
231
+ </div>
232
+ <div class="p-3 rounded-lg bg-purple-100 text-purple-600">
233
+ <i class="fas fa-chart-line"></i>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ <div class="bg-white rounded-xl shadow-sm p-6 dashboard-card transition-all duration-300 animate-fade-in" style="animation-delay: 0.3s">
238
+ <div class="flex items-start justify-between">
239
+ <div>
240
+ <p class="text-sm font-medium text-gray-500">Avg. Session</p>
241
+ <h3 class="text-2xl font-bold mt-1">4m 23s</h3>
242
+ <p class="text-xs mt-2"><span class="text-green-500">+1.2%</span> from last month</p>
243
+ </div>
244
+ <div class="p-3 rounded-lg bg-yellow-100 text-yellow-600">
245
+ <i class="fas fa-clock"></i>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Charts Section -->
252
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
253
+ <!-- Main Chart -->
254
+ <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
255
+ <div class="flex justify-between items-center mb-4">
256
+ <h3 class="font-semibold">Revenue Overview (Last 12 Months)</h3>
257
+ <select class="text-sm border border-gray-300 rounded-md px-3 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500">
258
+ <option>Last 7 days</option>
259
+ <option>Last 30 days</option>
260
+ <option selected>Last 12 months</option>
261
+ <option>All time</option>
262
+ </select>
263
+ </div>
264
+ <div class="h-80">
265
+ <canvas id="mainChart"></canvas>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Pie Chart -->
270
+ <div class="bg-white rounded-xl shadow-sm p-6">
271
+ <div class="flex justify-between items-center mb-4">
272
+ <h3 class="font-semibold">Traffic Sources (March 2024)</h3>
273
+ <button class="text-sm text-blue-600 hover:text-blue-800">View all</button>
274
+ </div>
275
+ <div class="h-80">
276
+ <canvas id="pieChart"></canvas>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Recent Activity and Data Table -->
282
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
283
+ <!-- Recent Activity -->
284
+ <div class="bg-white rounded-xl shadow-sm p-6">
285
+ <div class="flex justify-between items-center mb-4">
286
+ <h3 class="font-semibold">Recent Activity</h3>
287
+ <button class="text-sm text-blue-600 hover:text-blue-800">View all</button>
288
+ </div>
289
+ <div class="space-y-4">
290
+ <div class="flex items-start">
291
+ <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3">
292
+ <i class="fas fa-file-import"></i>
293
+ </div>
294
+ <div>
295
+ <p class="text-sm font-medium">Data import completed</p>
296
+ <p class="text-xs text-gray-500">10,245 records from sales.csv</p>
297
+ <p class="text-xs text-gray-400 mt-1">5 minutes ago</p>
298
+ </div>
299
+ </div>
300
+ <div class="flex items-start">
301
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
302
+ <i class="fas fa-user-plus"></i>
303
+ </div>
304
+ <div>
305
+ <p class="text-sm font-medium">New user registered</p>
306
+ <p class="text-xs text-gray-500">Sarah Johnson (Analyst)</p>
307
+ <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
308
+ </div>
309
+ </div>
310
+ <div class="flex items-start">
311
+ <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3">
312
+ <i class="fas fa-chart-bar"></i>
313
+ </div>
314
+ <div>
315
+ <p class="text-sm font-medium">Report generated</p>
316
+ <p class="text-xs text-gray-500">Quarterly sales analysis.pdf</p>
317
+ <p class="text-xs text-gray-400 mt-1">3 hours ago</p>
318
+ </div>
319
+ </div>
320
+ <div class="flex items-start">
321
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3">
322
+ <i class="fas fa-exclamation-triangle"></i>
323
+ </div>
324
+ <div>
325
+ <p class="text-sm font-medium">System alert</p>
326
+ <p class="text-xs text-gray-500">Unusual traffic spike detected</p>
327
+ <p class="text-xs text-gray-400 mt-1">Yesterday</p>
328
+ </div>
329
+ </div>
330
+ <div class="flex items-start">
331
+ <div class="p-2 rounded-full bg-red-100 text-red-600 mr-3">
332
+ <i class="fas fa-server"></i>
333
+ </div>
334
+ <div>
335
+ <p class="text-sm font-medium">Database backup</p>
336
+ <p class="text-xs text-gray-500">Nightly backup completed successfully</p>
337
+ <p class="text-xs text-gray-400 mt-1">Yesterday</p>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Data Table -->
344
+ <div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2">
345
+ <div class="flex justify-between items-center mb-4">
346
+ <h3 class="font-semibold">Recent Transactions (Last 7 days)</h3>
347
+ <button class="text-sm text-blue-600 hover:text-blue-800">View all</button>
348
+ </div>
349
+ <div class="overflow-x-auto">
350
+ <table class="min-w-full divide-y divide-gray-200">
351
+ <thead>
352
+ <tr>
353
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
354
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
355
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
356
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
357
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
358
+ <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
359
+ </tr>
360
+ </thead>
361
+ <tbody class="bg-white divide-y divide-gray-200">
362
+ <tr>
363
+ <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1053</td>
364
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Acme Inc.</td>
365
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 15, 2024</td>
366
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$1,245</td>
367
+ <td class="px-4 py-4 whitespace-nowrap">
368
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
369
+ </td>
370
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
371
+ <button class="text-blue-600 hover:text-blue-900">View</button>
372
+ </td>
373
+ </tr>
374
+ <tr>
375
+ <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1052</td>
376
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">TechCorp LLC</td>
377
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 15, 2024</td>
378
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$2,840</td>
379
+ <td class="px-4 py-4 whitespace-nowrap">
380
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Processing</span>
381
+ </td>
382
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
383
+ <button class="text-blue-600 hover:text-blue-900">View</button>
384
+ </td>
385
+ </tr>
386
+ <tr>
387
+ <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1051</td>
388
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Global Solutions</td>
389
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 14, 2024</td>
390
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$4,235</td>
391
+ <td class="px-4 py-4 whitespace-nowrap">
392
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
393
+ </td>
394
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
395
+ <button class="text-blue-600 hover:text-blue-900">View</button>
396
+ </td>
397
+ </tr>
398
+ <tr>
399
+ <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1050</td>
400
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Innovate Co</td>
401
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 13, 2024</td>
402
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$1,750</td>
403
+ <td class="px-4 py-4 whitespace-nowrap">
404
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
405
+ </td>
406
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
407
+ <button class="text-blue-600 hover:text-blue-900">View</button>
408
+ </td>
409
+ </tr>
410
+ <tr>
411
+ <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1049</td>
412
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">DataSystems Ltd</td>
413
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 12, 2024</td>
414
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">$3,150</td>
415
+ <td class="px-4 py-4 whitespace-nowrap">
416
+ <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Failed</span>
417
+ </td>
418
+ <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
419
+ <button class="text-blue-600 hover:text-blue-900">View</button>
420
+ </td>
421
+ </tr>
422
+ </tbody>
423
+ </table>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </main>
428
+ </div>
429
+
430
+ <script>
431
+ // Set current date
432
+ document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', {
433
+ year: 'numeric', month: 'long', day: 'numeric'
434
+ });
435
+
436
+ // Sidebar toggle for mobile
437
+ document.getElementById('open-sidebar').addEventListener('click', function() {
438
+ document.getElementById('sidebar').classList.remove('-translate-x-full');
439
+ });
440
+
441
+ document.getElementById('close-sidebar').addEventListener('click', function() {
442
+ document.getElementById('sidebar').classList.add('-translate-x-full');
443
+ });
444
+
445
+ // Dark mode toggle
446
+ document.getElementById('theme-toggle').addEventListener('click', function() {
447
+ document.documentElement.classList.toggle('dark');
448
+ const icon = document.getElementById('theme-icon');
449
+ if (document.documentElement.classList.contains('dark')) {
450
+ icon.classList.remove('fa-moon');
451
+ icon.classList.add('fa-sun');
452
+ } else {
453
+ icon.classList.remove('fa-sun');
454
+ icon.classList.add('fa-moon');
455
+ }
456
+ });
457
+
458
+ // Main Chart (Line Chart)
459
+ const mainCtx = document.getElementById('mainChart').getContext('2d');
460
+ const mainChart = new Chart(mainCtx, {
461
+ type: 'line',
462
+ data: {
463
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
464
+ datasets: [{
465
+ label: 'Revenue',
466
+ data: [12500, 18000, 22000, 25000, 28500, 31000, 36000, 42000, 48500, 40200, 38500, 48245],
467
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
468
+ borderColor: '#4f46e5',
469
+ borderWidth: 2,
470
+ tension: 0.3,
471
+ fill: true,
472
+ pointBackgroundColor: '#4f46e5',
473
+ pointRadius: 4,
474
+ pointHoverRadius: 6,
475
+ }]
476
+ },
477
+ options: {
478
+ responsive: true,
479
+ maintainAspectRatio: false,
480
+ plugins: {
481
+ legend: {
482
+ display: false
483
+ },
484
+ tooltip: {
485
+ backgroundColor: '#4f46e5',
486
+ padding: 12,
487
+ displayColors: false,
488
+ callbacks: {
489
+ label: function(context) {
490
+ return '$' + context.parsed.y.toLocaleString();
491
+ }
492
+ }
493
+ }
494
+ },
495
+ scales: {
496
+ y: {
497
+ beginAtZero: true,
498
+ grid: {
499
+ drawBorder: false,
500
+ },
501
+ ticks: {
502
+ callback: function(value) {
503
+ return '$' + value.toLocaleString();
504
+ }
505
+ }
506
+ },
507
+ x: {
508
+ grid: {
509
+ display: false
510
+ }
511
+ }
512
+ }
513
+ }
514
+ });
515
+
516
+ // Pie Chart (Doughnut)
517
+ const pieCtx = document.getElementById('pieChart').getContext('2d');
518
+ const pieChart = new Chart(pieCtx, {
519
+ type: 'doughnut',
520
+ data: {
521
+ labels: ['Direct', 'Organic Search', 'Social', 'Email', 'Referral'],
522
+ datasets: [{
523
+ data: [35, 30, 15, 12, 8],
524
+ backgroundColor: [
525
+ '#4f46e5',
526
+ '#10b981',
527
+ '#3b82f6',
528
+ '#f59e0b',
529
+ '#ef4444'
530
+ ],
531
+ borderWidth: 0,
532
+ borderRadius: 4,
533
+ }]
534
+ },
535
+ options: {
536
+ responsive: true,
537
+ maintainAspectRatio: false,
538
+ cutout: '70%',
539
+ plugins: {
540
+ legend: {
541
+ position: 'right',
542
+ labels: {
543
+ usePointStyle: true,
544
+ pointStyle: 'circle',
545
+ padding: 16
546
+ }
547
+ },
548
+ tooltip: {
549
+ callbacks: {
550
+ label: function(context) {
551
+ return context.label + ': ' + context.raw + '%';
552
+ }
553
+ }
554
+ }
555
+ }
556
+ }
557
+ });
558
+
559
+ // Animation for dashboard cards
560
+ const dashboardCards = document.querySelectorAll('.dashboard-card');
561
+ dashboardCards.forEach((card, index) => {
562
+ card.style.animationDelay = `${index * 0.1}s`;
563
+ });
564
+ </script>
565
+ <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=nmtalhp/hmm" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
566
+ </html>