Hugging Face's logo

Spaces:
shivam9980
/
demo
Running

App Files Community
shivam9980 commited on
Commit
65adec4
·
verified ·
1 Parent(s): ba4fc98

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +339 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Demo
3
- emoji: 🐢
4
- colorFrom: green
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: demo
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
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,339 @@
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>Minimalist Analytics Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ @keyframes fadeIn {
12
+ from { opacity: 0; transform: translateY(10px); }
13
+ to { opacity: 1; transform: translateY(0); }
14
+ }
15
+
16
+ .animate-fade-in {
17
+ animation: fadeIn 0.5s ease-out forwards;
18
+ }
19
+
20
+ .delay-100 { animation-delay: 0.1s; }
21
+ .delay-200 { animation-delay: 0.2s; }
22
+ .delay-300 { animation-delay: 0.3s; }
23
+ .delay-400 { animation-delay: 0.4s; }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
28
+ }
29
+
30
+ .transition-all {
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .smooth-render {
35
+ opacity: 0;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50 font-sans">
40
+ <div class="min-h-screen">
41
+ <!-- Header -->
42
+ <header class="bg-white shadow-sm">
43
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
44
+ <h1 class="text-xl font-semibold text-gray-800">Analytics Dashboard</h1>
45
+ <div class="flex items-center space-x-4">
46
+ <div class="relative">
47
+ <button id="user-menu-button" class="flex items-center space-x-2 focus:outline-none">
48
+ <span class="text-gray-600">Admin</span>
49
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center">
50
+ <i class="fas fa-user text-indigo-600"></i>
51
+ </div>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </header>
57
+
58
+ <!-- Main Content -->
59
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
60
+ <!-- Stats Cards -->
61
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
62
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition-all smooth-render animate-fade-in delay-100">
63
+ <div class="flex items-center justify-between">
64
+ <div>
65
+ <p class="text-sm font-medium text-gray-500">Total Users</p>
66
+ <p class="text-3xl font-semibold text-gray-800 mt-2">1,248</p>
67
+ <p class="text-sm text-green-500 mt-1 flex items-center">
68
+ <i class="fas fa-arrow-up mr-1"></i> 12.5% from last month
69
+ </p>
70
+ </div>
71
+ <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
72
+ <i class="fas fa-users text-blue-500 text-xl"></i>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition-all smooth-render animate-fade-in delay-200">
78
+ <div class="flex items-center justify-between">
79
+ <div>
80
+ <p class="text-sm font-medium text-gray-500">Active Sessions</p>
81
+ <p class="text-3xl font-semibold text-gray-800 mt-2">342</p>
82
+ <p class="text-sm text-green-500 mt-1 flex items-center">
83
+ <i class="fas fa-arrow-up mr-1"></i> 8.2% from yesterday
84
+ </p>
85
+ </div>
86
+ <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center">
87
+ <i class="fas fa-signal text-green-500 text-xl"></i>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition-all smooth-render animate-fade-in delay-300">
93
+ <div class="flex items-center justify-between">
94
+ <div>
95
+ <p class="text-sm font-medium text-gray-500">Avg. Session</p>
96
+ <p class="text-3xl font-semibold text-gray-800 mt-2">4m 32s</p>
97
+ <p class="text-sm text-red-500 mt-1 flex items-center">
98
+ <i class="fas fa-arrow-down mr-1"></i> 1.3% from last week
99
+ </p>
100
+ </div>
101
+ <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center">
102
+ <i class="fas fa-clock text-purple-500 text-xl"></i>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition-all smooth-render animate-fade-in delay-400">
108
+ <div class="flex items-center justify-between">
109
+ <div>
110
+ <p class="text-sm font-medium text-gray-500">Bounce Rate</p>
111
+ <p class="text-3xl font-semibold text-gray-800 mt-2">28.6%</p>
112
+ <p class="text-sm text-green-500 mt-1 flex items-center">
113
+ <i class="fas fa-arrow-down mr-1"></i> 2.4% improvement
114
+ </p>
115
+ </div>
116
+ <div class="w-12 h-12 rounded-full bg-yellow-50 flex items-center justify-center">
117
+ <i class="fas fa-chart-pie text-yellow-500 text-xl"></i>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Charts Section -->
124
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
125
+ <!-- Main Chart -->
126
+ <div class="bg-white p-6 rounded-xl shadow-sm lg:col-span-2 smooth-render animate-fade-in">
127
+ <div class="flex justify-between items-center mb-6">
128
+ <h2 class="text-lg font-semibold text-gray-800">User Activity</h2>
129
+ <div class="flex space-x-2">
130
+ <button class="px-3 py-1 text-sm rounded-md bg-indigo-50 text-indigo-600">Week</button>
131
+ <button class="px-3 py-1 text-sm rounded-md text-gray-600 hover:bg-gray-100">Month</button>
132
+ <button class="px-3 py-1 text-sm rounded-md text-gray-600 hover:bg-gray-100">Year</button>
133
+ </div>
134
+ </div>
135
+ <div class="h-80">
136
+ <canvas id="mainChart"></canvas>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- Pie Chart -->
141
+ <div class="bg-white p-6 rounded-xl shadow-sm smooth-render animate-fade-in">
142
+ <h2 class="text-lg font-semibold text-gray-800 mb-6">Traffic Sources</h2>
143
+ <div class="h-64">
144
+ <canvas id="pieChart"></canvas>
145
+ </div>
146
+ <div class="mt-4 grid grid-cols-2 gap-2">
147
+ <div class="flex items-center">
148
+ <div class="w-3 h-3 rounded-full bg-indigo-500 mr-2"></div>
149
+ <span class="text-sm text-gray-600">Direct</span>
150
+ </div>
151
+ <div class="flex items-center">
152
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
153
+ <span class="text-sm text-gray-600">Organic</span>
154
+ </div>
155
+ <div class="flex items-center">
156
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
157
+ <span class="text-sm text-gray-600">Referral</span>
158
+ </div>
159
+ <div class="flex items-center">
160
+ <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
161
+ <span class="text-sm text-gray-600">Social</span>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Recent Activity -->
168
+ <div class="bg-white p-6 rounded-xl shadow-sm smooth-render animate-fade-in">
169
+ <h2 class="text-lg font-semibold text-gray-800 mb-6">Recent Activity</h2>
170
+ <div class="space-y-4">
171
+ <div class="flex items-start pb-4 border-b border-gray-100">
172
+ <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-4">
173
+ <i class="fas fa-user-plus text-blue-500"></i>
174
+ </div>
175
+ <div>
176
+ <p class="text-sm font-medium text-gray-800">New user registered</p>
177
+ <p class="text-xs text-gray-500 mt-1">John Doe - 2 hours ago</p>
178
+ </div>
179
+ </div>
180
+ <div class="flex items-start pb-4 border-b border-gray-100">
181
+ <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
182
+ <i class="fas fa-shopping-cart text-green-500"></i>
183
+ </div>
184
+ <div>
185
+ <p class="text-sm font-medium text-gray-800">New purchase</p>
186
+ <p class="text-xs text-gray-500 mt-1">Order #1234 - 4 hours ago</p>
187
+ </div>
188
+ </div>
189
+ <div class="flex items-start pb-4 border-b border-gray-100">
190
+ <div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center mr-4">
191
+ <i class="fas fa-comment text-purple-500"></i>
192
+ </div>
193
+ <div>
194
+ <p class="text-sm font-medium text-gray-800">New feedback received</p>
195
+ <p class="text-xs text-gray-500 mt-1">"Great service!" - 6 hours ago</p>
196
+ </div>
197
+ </div>
198
+ <div class="flex items-start">
199
+ <div class="w-10 h-10 rounded-full bg-yellow-50 flex items-center justify-center mr-4">
200
+ <i class="fas fa-exclamation-triangle text-yellow-500"></i>
201
+ </div>
202
+ <div>
203
+ <p class="text-sm font-medium text-gray-800">Server warning</p>
204
+ <p class="text-xs text-gray-500 mt-1">High CPU usage detected - 8 hours ago</p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </main>
210
+ </div>
211
+
212
+ <script>
213
+ document.addEventListener('DOMContentLoaded', function() {
214
+ // Main Chart (Line Chart)
215
+ const mainCtx = document.getElementById('mainChart').getContext('2d');
216
+ const mainChart = new Chart(mainCtx, {
217
+ type: 'line',
218
+ data: {
219
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
220
+ datasets: [
221
+ {
222
+ label: 'Active Users',
223
+ data: [450, 520, 480, 560, 610, 700, 750],
224
+ borderColor: '#6366F1',
225
+ backgroundColor: 'rgba(99, 102, 241, 0.05)',
226
+ borderWidth: 2,
227
+ tension: 0.3,
228
+ fill: true
229
+ },
230
+ {
231
+ label: 'New Users',
232
+ data: [200, 220, 250, 280, 300, 350, 400],
233
+ borderColor: '#10B981',
234
+ backgroundColor: 'rgba(16, 185, 129, 0.05)',
235
+ borderWidth: 2,
236
+ tension: 0.3,
237
+ fill: true
238
+ }
239
+ ]
240
+ },
241
+ options: {
242
+ responsive: true,
243
+ maintainAspectRatio: false,
244
+ plugins: {
245
+ legend: {
246
+ position: 'top',
247
+ labels: {
248
+ usePointStyle: true,
249
+ padding: 20
250
+ }
251
+ },
252
+ tooltip: {
253
+ mode: 'index',
254
+ intersect: false,
255
+ backgroundColor: '#1F2937',
256
+ titleFont: { size: 14 },
257
+ bodyFont: { size: 12 },
258
+ padding: 12,
259
+ cornerRadius: 8
260
+ }
261
+ },
262
+ scales: {
263
+ y: {
264
+ beginAtZero: true,
265
+ grid: {
266
+ drawBorder: false,
267
+ color: 'rgba(0, 0, 0, 0.05)'
268
+ },
269
+ ticks: {
270
+ stepSize: 100
271
+ }
272
+ },
273
+ x: {
274
+ grid: {
275
+ display: false,
276
+ drawBorder: false
277
+ }
278
+ }
279
+ }
280
+ }
281
+ });
282
+
283
+ // Pie Chart
284
+ const pieCtx = document.getElementById('pieChart').getContext('2d');
285
+ const pieChart = new Chart(pieCtx, {
286
+ type: 'doughnut',
287
+ data: {
288
+ labels: ['Direct', 'Organic', 'Referral', 'Social'],
289
+ datasets: [{
290
+ data: [35, 25, 20, 20],
291
+ backgroundColor: [
292
+ '#6366F1',
293
+ '#10B981',
294
+ '#F59E0B',
295
+ '#8B5CF6'
296
+ ],
297
+ borderWidth: 0,
298
+ borderRadius: 4
299
+ }]
300
+ },
301
+ options: {
302
+ responsive: true,
303
+ maintainAspectRatio: false,
304
+ cutout: '70%',
305
+ plugins: {
306
+ legend: {
307
+ display: false
308
+ },
309
+ tooltip: {
310
+ backgroundColor: '#1F2937',
311
+ bodyFont: { size: 12 },
312
+ padding: 12,
313
+ cornerRadius: 8
314
+ }
315
+ }
316
+ }
317
+ });
318
+
319
+ // Add hover effects to all cards
320
+ const cards = document.querySelectorAll('.card-hover');
321
+ cards.forEach(card => {
322
+ card.addEventListener('mouseenter', () => {
323
+ card.classList.add('shadow-lg');
324
+ });
325
+ card.addEventListener('mouseleave', () => {
326
+ card.classList.remove('shadow-lg');
327
+ });
328
+ });
329
+
330
+ // Make all smooth-render elements visible
331
+ setTimeout(() => {
332
+ document.querySelectorAll('.smooth-render').forEach(el => {
333
+ el.style.opacity = '1';
334
+ });
335
+ }, 50);
336
+ });
337
+ </script>
338
+ <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=shivam9980/demo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
339
+ </html>