Hugging Face's logo

Spaces:
agentpx
/
dashboard
Running

App Files Community
agentpx commited on
Commit
1665104
·
verified ·
1 Parent(s): 3613f74

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +389 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dashboard
3
- emoji: 📊
4
- colorFrom: indigo
5
- colorTo: indigo
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: dashboard
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
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,389 @@
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
+ <style>
10
+ /* Custom CSS for elements Tailwind can't easily handle */
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
13
+ }
14
+ .card-hover:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
17
+ }
18
+ .sidebar {
19
+ transition: all 0.3s ease;
20
+ }
21
+ .chart-container {
22
+ position: relative;
23
+ height: 300px;
24
+ }
25
+ @media (max-width: 768px) {
26
+ .sidebar {
27
+ transform: translateX(-100%);
28
+ position: absolute;
29
+ z-index: 10;
30
+ }
31
+ .sidebar.active {
32
+ transform: translateX(0);
33
+ }
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-100 font-sans">
38
+ <div class="flex h-screen overflow-hidden">
39
+ <!-- Sidebar -->
40
+ <div class="sidebar bg-white w-64 flex-shrink-0 shadow-lg">
41
+ <div class="p-4 gradient-bg text-white">
42
+ <h1 class="text-2xl font-bold">DashboardPro</h1>
43
+ <p class="text-sm opacity-80">Welcome back, Admin</p>
44
+ </div>
45
+ <nav class="mt-6">
46
+ <div class="px-4">
47
+ <div class="py-2 px-3 flex items-center rounded-lg bg-indigo-100 text-indigo-700">
48
+ <i class="fas fa-tachometer-alt mr-3"></i>
49
+ <span>Dashboard</span>
50
+ </div>
51
+ <div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1">
52
+ <i class="fas fa-chart-line mr-3 text-gray-500"></i>
53
+ <span>Analytics</span>
54
+ </div>
55
+ <div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1">
56
+ <i class="fas fa-users mr-3 text-gray-500"></i>
57
+ <span>Users</span>
58
+ </div>
59
+ <div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1">
60
+ <i class="fas fa-cog mr-3 text-gray-500"></i>
61
+ <span>Settings</span>
62
+ </div>
63
+ <div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1">
64
+ <i class="fas fa-envelope mr-3 text-gray-500"></i>
65
+ <span>Messages</span>
66
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">5</span>
67
+ </div>
68
+ </div>
69
+ </nav>
70
+ <div class="absolute bottom-0 w-full p-4 border-t">
71
+ <div class="flex items-center">
72
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full">
73
+ <div class="ml-3">
74
+ <p class="text-sm font-medium">Sarah Johnson</p>
75
+ <p class="text-xs text-gray-500">Admin</p>
76
+ </div>
77
+ <button class="ml-auto text-gray-500 hover:text-gray-700">
78
+ <i class="fas fa-sign-out-alt"></i>
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Main Content -->
85
+ <div class="flex-1 flex flex-col overflow-hidden">
86
+ <!-- Top Navigation -->
87
+ <header class="bg-white shadow-sm z-10">
88
+ <div class="flex items-center justify-between px-6 py-4">
89
+ <div class="flex items-center">
90
+ <button id="sidebarToggle" class="md:hidden mr-4 text-gray-500 hover:text-gray-700">
91
+ <i class="fas fa-bars text-xl"></i>
92
+ </button>
93
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard Overview</h2>
94
+ </div>
95
+ <div class="flex items-center space-x-4">
96
+ <div class="relative">
97
+ <button class="text-gray-500 hover:text-gray-700">
98
+ <i class="fas fa-bell text-xl"></i>
99
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
100
+ </button>
101
+ </div>
102
+ <div class="relative">
103
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
104
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </header>
109
+
110
+ <!-- Main Content Area -->
111
+ <main class="flex-1 overflow-y-auto p-6">
112
+ <!-- Stats Cards -->
113
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
114
+ <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">
115
+ <div class="flex items-center justify-between">
116
+ <div>
117
+ <p class="text-gray-500 text-sm">Total Revenue</p>
118
+ <h3 class="text-2xl font-bold mt-1">$24,780</h3>
119
+ <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12.5% from last month</p>
120
+ </div>
121
+ <div class="bg-indigo-100 p-3 rounded-full text-indigo-700">
122
+ <i class="fas fa-dollar-sign text-xl"></i>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">
127
+ <div class="flex items-center justify-between">
128
+ <div>
129
+ <p class="text-gray-500 text-sm">New Users</p>
130
+ <h3 class="text-2xl font-bold mt-1">1,254</h3>
131
+ <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 8.2% from last month</p>
132
+ </div>
133
+ <div class="bg-blue-100 p-3 rounded-full text-blue-700">
134
+ <i class="fas fa-users text-xl"></i>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">
139
+ <div class="flex items-center justify-between">
140
+ <div>
141
+ <p class="text-gray-500 text-sm">Active Projects</p>
142
+ <h3 class="text-2xl font-bold mt-1">42</h3>
143
+ <p class="text-red-500 text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 3.1% from last month</p>
144
+ </div>
145
+ <div class="bg-purple-100 p-3 rounded-full text-purple-700">
146
+ <i class="fas fa-project-diagram text-xl"></i>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300">
151
+ <div class="flex items-center justify-between">
152
+ <div>
153
+ <p class="text-gray-500 text-sm">Conversion Rate</p>
154
+ <h3 class="text-2xl font-bold mt-1">3.6%</h3>
155
+ <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 1.8% from last month</p>
156
+ </div>
157
+ <div class="bg-green-100 p-3 rounded-full text-green-700">
158
+ <i class="fas fa-percentage text-xl"></i>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Charts Row -->
165
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
166
+ <!-- Main Chart -->
167
+ <div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2">
168
+ <div class="flex items-center justify-between mb-4">
169
+ <h3 class="text-lg font-semibold">Revenue Overview</h3>
170
+ <div class="flex space-x-2">
171
+ <button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-full">Monthly</button>
172
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full">Weekly</button>
173
+ <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full">Daily</button>
174
+ </div>
175
+ </div>
176
+ <div class="chart-container">
177
+ <canvas id="mainChart"></canvas>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Pie Chart -->
182
+ <div class="bg-white rounded-xl shadow-md p-6">
183
+ <h3 class="text-lg font-semibold mb-4">Traffic Sources</h3>
184
+ <div class="chart-container">
185
+ <canvas id="pieChart"></canvas>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Recent Activity & Projects -->
191
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
192
+ <!-- Recent Activity -->
193
+ <div class="bg-white rounded-xl shadow-md p-6">
194
+ <h3 class="text-lg font-semibold mb-4">Recent Activity</h3>
195
+ <div class="space-y-4">
196
+ <div class="flex items-start">
197
+ <div class="bg-indigo-100 p-2 rounded-full text-indigo-700 mr-3">
198
+ <i class="fas fa-user-plus"></i>
199
+ </div>
200
+ <div>
201
+ <p class="font-medium">New user registered</p>
202
+ <p class="text-sm text-gray-500">John Doe just signed up as a new member</p>
203
+ <p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
204
+ </div>
205
+ </div>
206
+ <div class="flex items-start">
207
+ <div class="bg-green-100 p-2 rounded-full text-green-700 mr-3">
208
+ <i class="fas fa-shopping-cart"></i>
209
+ </div>
210
+ <div>
211
+ <p class="font-medium">New order received</p>
212
+ <p class="text-sm text-gray-500">Order #3245 for $125.00</p>
213
+ <p class="text-xs text-gray-400 mt-1">25 minutes ago</p>
214
+ </div>
215
+ </div>
216
+ <div class="flex items-start">
217
+ <div class="bg-blue-100 p-2 rounded-full text-blue-700 mr-3">
218
+ <i class="fas fa-ticket-alt"></i>
219
+ </div>
220
+ <div>
221
+ <p class="font-medium">New support ticket</p>
222
+ <p class="text-sm text-gray-500">Ticket #4567 from Sarah Miller</p>
223
+ <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
224
+ </div>
225
+ </div>
226
+ <div class="flex items-start">
227
+ <div class="bg-purple-100 p-2 rounded-full text-purple-700 mr-3">
228
+ <i class="fas fa-credit-card"></i>
229
+ </div>
230
+ <div>
231
+ <p class="font-medium">Payment processed</p>
232
+ <p class="text-sm text-gray-500">Payment of $45.00 from Robert Johnson</p>
233
+ <p class="text-xs text-gray-400 mt-1">3 hours ago</p>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Projects -->
240
+ <div class="bg-white rounded-xl shadow-md p-6">
241
+ <div class="flex items-center justify-between mb-4">
242
+ <h3 class="text-lg font-semibold">Active Projects</h3>
243
+ <button class="text-indigo-600 hover:text-indigo-800">View All</button>
244
+ </div>
245
+ <div class="space-y-4">
246
+ <div class="border-b pb-4">
247
+ <div class="flex items-center justify-between mb-2">
248
+ <h4 class="font-medium">Website Redesign</h4>
249
+ <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">In Progress</span>
250
+ </div>
251
+ <p class="text-sm text-gray-600 mb-3">Complete redesign of company website with modern UI/UX</p>
252
+ <div class="flex items-center justify-between">
253
+ <div class="flex -space-x-2">
254
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Team member">
255
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team member">
256
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Team member">
257
+ </div>
258
+ <span class="text-xs text-gray-500">Due in 5 days</span>
259
+ </div>
260
+ </div>
261
+ <div class="border-b pb-4">
262
+ <div class="flex items-center justify-between mb-2">
263
+ <h4 class="font-medium">Mobile App Development</h4>
264
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">On Track</span>
265
+ </div>
266
+ <p class="text-sm text-gray-600 mb-3">Development of cross-platform mobile application</p>
267
+ <div class="flex items-center justify-between">
268
+ <div class="flex -space-x-2">
269
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Team member">
270
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Team member">
271
+ </div>
272
+ <span class="text-xs text-gray-500">Due in 12 days</span>
273
+ </div>
274
+ </div>
275
+ <div>
276
+ <div class="flex items-center justify-between mb-2">
277
+ <h4 class="font-medium">Marketing Campaign</h4>
278
+ <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Planning</span>
279
+ </div>
280
+ <p class="text-sm text-gray-600 mb-3">Q3 marketing campaign for new product launch</p>
281
+ <div class="flex items-center justify-between">
282
+ <div class="flex -space-x-2">
283
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/56.jpg" alt="Team member">
284
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/67.jpg" alt="Team member">
285
+ <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Team member">
286
+ </div>
287
+ <span class="text-xs text-gray-500">Due in 3 weeks</span>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </main>
294
+ </div>
295
+ </div>
296
+
297
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
298
+ <script>
299
+ // Toggle sidebar on mobile
300
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
301
+ document.querySelector('.sidebar').classList.toggle('active');
302
+ });
303
+
304
+ // Main Chart
305
+ const mainCtx = document.getElementById('mainChart').getContext('2d');
306
+ const mainChart = new Chart(mainCtx, {
307
+ type: 'line',
308
+ data: {
309
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
310
+ datasets: [{
311
+ label: 'Revenue',
312
+ data: [6500, 5900, 8000, 8100, 8600, 9250, 10200],
313
+ borderColor: '#667eea',
314
+ backgroundColor: 'rgba(102, 126, 234, 0.1)',
315
+ borderWidth: 2,
316
+ fill: true,
317
+ tension: 0.4
318
+ }]
319
+ },
320
+ options: {
321
+ responsive: true,
322
+ maintainAspectRatio: false,
323
+ plugins: {
324
+ legend: {
325
+ display: false
326
+ }
327
+ },
328
+ scales: {
329
+ y: {
330
+ beginAtZero: false,
331
+ grid: {
332
+ drawBorder: false
333
+ }
334
+ },
335
+ x: {
336
+ grid: {
337
+ display: false
338
+ }
339
+ }
340
+ }
341
+ }
342
+ });
343
+
344
+ // Pie Chart
345
+ const pieCtx = document.getElementById('pieChart').getContext('2d');
346
+ const pieChart = new Chart(pieCtx, {
347
+ type: 'doughnut',
348
+ data: {
349
+ labels: ['Direct', 'Organic', 'Referral', 'Social'],
350
+ datasets: [{
351
+ data: [35, 25, 20, 20],
352
+ backgroundColor: [
353
+ '#667eea',
354
+ '#4c51bf',
355
+ '#7f9cf5',
356
+ '#a3bffa'
357
+ ],
358
+ borderWidth: 0
359
+ }]
360
+ },
361
+ options: {
362
+ responsive: true,
363
+ maintainAspectRatio: false,
364
+ cutout: '70%',
365
+ plugins: {
366
+ legend: {
367
+ position: 'bottom',
368
+ labels: {
369
+ boxWidth: 12,
370
+ padding: 20
371
+ }
372
+ }
373
+ }
374
+ }
375
+ });
376
+
377
+ // Card hover effect
378
+ const cards = document.querySelectorAll('.card-hover');
379
+ cards.forEach(card => {
380
+ card.addEventListener('mouseenter', () => {
381
+ card.classList.add('shadow-lg');
382
+ });
383
+ card.addEventListener('mouseleave', () => {
384
+ card.classList.remove('shadow-lg');
385
+ });
386
+ });
387
+ </script>
388
+ <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=agentpx/dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
389
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ test