Hugging Face's logo

Spaces:
Kenokasakasa
/
g
Running

App Files Community
Kenokasakasa commited on
Commit
d6978ff
·
verified ·
1 Parent(s): 80a1619

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +458 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: G
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: gray
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: g
3
+ emoji: 🐳
4
+ colorFrom: purple
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,458 @@
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>Futuristic 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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap');
11
+
12
+ :root {
13
+ --primary: #00f7ff;
14
+ --secondary: #ff00e6;
15
+ --dark: #0a0a1a;
16
+ --darker: #050510;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Roboto', sans-serif;
21
+ background-color: var(--darker);
22
+ color: white;
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ .orbitron {
27
+ font-family: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ .glow {
31
+ text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
32
+ }
33
+
34
+ .card-glow {
35
+ box-shadow: 0 0 15px rgba(0, 247, 255, 0.3);
36
+ }
37
+
38
+ .pulse {
39
+ animation: pulse 2s infinite;
40
+ }
41
+
42
+ @keyframes pulse {
43
+ 0% { opacity: 0.8; }
44
+ 50% { opacity: 1; }
45
+ 100% { opacity: 0.8; }
46
+ }
47
+
48
+ .gradient-border {
49
+ position: relative;
50
+ border-radius: 0.5rem;
51
+ }
52
+
53
+ .gradient-border::before {
54
+ content: '';
55
+ position: absolute;
56
+ inset: 0;
57
+ border-radius: 0.5rem;
58
+ padding: 2px;
59
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
60
+ -webkit-mask:
61
+ linear-gradient(#fff 0 0) content-box,
62
+ linear-gradient(#fff 0 0);
63
+ -webkit-mask-composite: xor;
64
+ mask-composite: exclude;
65
+ pointer-events: none;
66
+ }
67
+
68
+ .progress-bar {
69
+ height: 6px;
70
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
71
+ border-radius: 3px;
72
+ transition: width 0.5s ease;
73
+ }
74
+
75
+ .neon-btn {
76
+ background: rgba(0, 247, 255, 0.1);
77
+ border: 1px solid var(--primary);
78
+ color: var(--primary);
79
+ transition: all 0.3s;
80
+ }
81
+
82
+ .neon-btn:hover {
83
+ background: rgba(0, 247, 255, 0.3);
84
+ box-shadow: 0 0 10px var(--primary);
85
+ }
86
+
87
+ .grid-pattern {
88
+ background-image:
89
+ linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px),
90
+ linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px);
91
+ background-size: 20px 20px;
92
+ }
93
+ </style>
94
+ </head>
95
+ <body class="min-h-screen grid-pattern">
96
+ <div class="container mx-auto px-4 py-6">
97
+ <!-- Header -->
98
+ <header class="flex justify-between items-center mb-8">
99
+ <div>
100
+ <h1 class="orbitron text-3xl md:text-4xl font-bold glow">NEXUS<span class="text-purple-400">DASH</span></h1>
101
+ <p class="text-gray-400 text-sm">Real-time analytics dashboard</p>
102
+ </div>
103
+ <div class="flex items-center space-x-4">
104
+ <div class="relative">
105
+ <i class="fas fa-bell text-gray-400 text-xl cursor-pointer hover:text-white"></i>
106
+ <span class="absolute -top-1 -right-1 h-3 w-3 bg-red-500 rounded-full pulse"></span>
107
+ </div>
108
+ <div class="flex items-center space-x-2">
109
+ <div class="h-8 w-8 rounded-full bg-gradient-to-r from-cyan-500 to-purple-500 flex items-center justify-center">
110
+ <span class="text-xs font-bold">AD</span>
111
+ </div>
112
+ <span class="hidden md:block text-gray-300">Admin</span>
113
+ </div>
114
+ </div>
115
+ </header>
116
+
117
+ <!-- Main Dashboard -->
118
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-6">
119
+ <!-- Stats Cards -->
120
+ <div class="gradient-border bg-gray-900 p-5 rounded-lg">
121
+ <div class="flex justify-between items-start">
122
+ <div>
123
+ <p class="text-gray-400">Total Revenue</p>
124
+ <h3 class="orbitron text-2xl font-bold text-white mt-1">$48,520</h3>
125
+ <p class="text-green-400 text-sm mt-2 flex items-center">
126
+ <i class="fas fa-arrow-up mr-1"></i> 12.5% from last month
127
+ </p>
128
+ </div>
129
+ <div class="bg-gray-800 p-3 rounded-lg">
130
+ <i class="fas fa-dollar-sign text-cyan-300 text-xl"></i>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="gradient-border bg-gray-900 p-5 rounded-lg">
136
+ <div class="flex justify-between items-start">
137
+ <div>
138
+ <p class="text-gray-400">Active Users</p>
139
+ <h3 class="orbitron text-2xl font-bold text-white mt-1">1,284</h3>
140
+ <p class="text-green-400 text-sm mt-2 flex items-center">
141
+ <i class="fas fa-arrow-up mr-1"></i> 8.2% from last month
142
+ </p>
143
+ </div>
144
+ <div class="bg-gray-800 p-3 rounded-lg">
145
+ <i class="fas fa-users text-purple-300 text-xl"></i>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="gradient-border bg-gray-900 p-5 rounded-lg">
151
+ <div class="flex justify-between items-start">
152
+ <div>
153
+ <p class="text-gray-400">New Orders</p>
154
+ <h3 class="orbitron text-2xl font-bold text-white mt-1">324</h3>
155
+ <p class="text-red-400 text-sm mt-2 flex items-center">
156
+ <i class="fas fa-arrow-down mr-1"></i> 3.1% from last month
157
+ </p>
158
+ </div>
159
+ <div class="bg-gray-800 p-3 rounded-lg">
160
+ <i class="fas fa-shopping-cart text-yellow-300 text-xl"></i>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <div class="gradient-border bg-gray-900 p-5 rounded-lg">
166
+ <div class="flex justify-between items-start">
167
+ <div>
168
+ <p class="text-gray-400">Server Load</p>
169
+ <h3 class="orbitron text-2xl font-bold text-white mt-1">68%</h3>
170
+ <p class="text-orange-400 text-sm mt-2 flex items-center">
171
+ <i class="fas fa-exclamation-triangle mr-1"></i> Moderate
172
+ </p>
173
+ </div>
174
+ <div class="bg-gray-800 p-3 rounded-lg">
175
+ <i class="fas fa-server text-orange-300 text-xl"></i>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Main Content -->
182
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
183
+ <!-- Chart Section -->
184
+ <div class="lg:col-span-2 gradient-border bg-gray-900 p-5 rounded-lg">
185
+ <div class="flex justify-between items-center mb-6">
186
+ <h2 class="orbitron text-xl font-bold">Performance Metrics</h2>
187
+ <div class="flex space-x-2">
188
+ <button class="neon-btn px-3 py-1 rounded text-sm">Day</button>
189
+ <button class="bg-cyan-500 px-3 py-1 rounded text-sm text-white">Week</button>
190
+ <button class="neon-btn px-3 py-1 rounded text-sm">Month</button>
191
+ </div>
192
+ </div>
193
+ <div class="h-64">
194
+ <canvas id="performanceChart"></canvas>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Progress Section -->
199
+ <div class="gradient-border bg-gray-900 p-5 rounded-lg">
200
+ <h2 class="orbitron text-xl font-bold mb-6">Project Progress</h2>
201
+
202
+ <div class="mb-5">
203
+ <div class="flex justify-between mb-1">
204
+ <span class="text-sm text-gray-300">Dashboard UI</span>
205
+ <span class="text-sm text-gray-300">85%</span>
206
+ </div>
207
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
208
+ <div class="progress-bar h-1.5 rounded-full" style="width: 85%"></div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="mb-5">
213
+ <div class="flex justify-between mb-1">
214
+ <span class="text-sm text-gray-300">API Integration</span>
215
+ <span class="text-sm text-gray-300">62%</span>
216
+ </div>
217
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
218
+ <div class="progress-bar h-1.5 rounded-full" style="width: 62%"></div>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="mb-5">
223
+ <div class="flex justify-between mb-1">
224
+ <span class="text-sm text-gray-300">Database</span>
225
+ <span class="text-sm text-gray-300">45%</span>
226
+ </div>
227
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
228
+ <div class="progress-bar h-1.5 rounded-full" style="width: 45%"></div>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="mb-5">
233
+ <div class="flex justify-between mb-1">
234
+ <span class="text-sm text-gray-300">Testing</span>
235
+ <span class="text-sm text-gray-300">30%</span>
236
+ </div>
237
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
238
+ <div class="progress-bar h-1.5 rounded-full" style="width: 30%"></div>
239
+ </div>
240
+ </div>
241
+
242
+ <button class="w-full neon-btn py-2 rounded-lg mt-4 flex items-center justify-center">
243
+ <i class="fas fa-rocket mr-2"></i> Launch Project
244
+ </button>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Bottom Section -->
249
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
250
+ <!-- Recent Activity -->
251
+ <div class="lg:col-span-2 gradient-border bg-gray-900 p-5 rounded-lg">
252
+ <h2 class="orbitron text-xl font-bold mb-6">Recent Activity</h2>
253
+
254
+ <div class="space-y-4">
255
+ <div class="flex items-start">
256
+ <div class="bg-gray-800 p-2 rounded-full mr-3">
257
+ <i class="fas fa-user-plus text-purple-400"></i>
258
+ </div>
259
+ <div>
260
+ <p class="text-sm"><span class="font-medium text-white">New user</span> registered - John Doe</p>
261
+ <p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="flex items-start">
266
+ <div class="bg-gray-800 p-2 rounded-full mr-3">
267
+ <i class="fas fa-shopping-cart text-cyan-400"></i>
268
+ </div>
269
+ <div>
270
+ <p class="text-sm"><span class="font-medium text-white">New order</span> #ORD-4872 placed</p>
271
+ <p class="text-xs text-gray-400 mt-1">15 minutes ago</p>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="flex items-start">
276
+ <div class="bg-gray-800 p-2 rounded-full mr-3">
277
+ <i class="fas fa-bug text-red-400"></i>
278
+ </div>
279
+ <div>
280
+ <p class="text-sm"><span class="font-medium text-white">Bug reported</span> in dashboard UI</p>
281
+ <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
282
+ </div>
283
+ </div>
284
+
285
+ <div class="flex items-start">
286
+ <div class="bg-gray-800 p-2 rounded-full mr-3">
287
+ <i class="fas fa-server text-orange-400"></i>
288
+ </div>
289
+ <div>
290
+ <p class="text-sm"><span class="font-medium text-white">Server maintenance</span> scheduled</p>
291
+ <p class="text-xs text-gray-400 mt-1">3 hours ago</p>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="flex items-start">
296
+ <div class="bg-gray-800 p-2 rounded-full mr-3">
297
+ <i class="fas fa-code-branch text-green-400"></i>
298
+ </div>
299
+ <div>
300
+ <p class="text-sm"><span class="font-medium text-white">New feature</span> deployed - Dark mode</p>
301
+ <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- System Status -->
308
+ <div class="gradient-border bg-gray-900 p-5 rounded-lg">
309
+ <h2 class="orbitron text-xl font-bold mb-6">System Status</h2>
310
+
311
+ <div class="space-y-4">
312
+ <div class="flex justify-between items-center">
313
+ <div class="flex items-center">
314
+ <div class="h-3 w-3 rounded-full bg-green-500 mr-2 pulse"></div>
315
+ <span>Web Server</span>
316
+ </div>
317
+ <span class="text-sm text-gray-400">Online</span>
318
+ </div>
319
+
320
+ <div class="flex justify-between items-center">
321
+ <div class="flex items-center">
322
+ <div class="h-3 w-3 rounded-full bg-green-500 mr-2 pulse"></div>
323
+ <span>Database</span>
324
+ </div>
325
+ <span class="text-sm text-gray-400">Online</span>
326
+ </div>
327
+
328
+ <div class="flex justify-between items-center">
329
+ <div class="flex items-center">
330
+ <div class="h-3 w-3 rounded-full bg-green-500 mr-2 pulse"></div>
331
+ <span>API Service</span>
332
+ </div>
333
+ <span class="text-sm text-gray-400">Online</span>
334
+ </div>
335
+
336
+ <div class="flex justify-between items-center">
337
+ <div class="flex items-center">
338
+ <div class="h-3 w-3 rounded-full bg-yellow-500 mr-2 pulse"></div>
339
+ <span>Cache Server</span>
340
+ </div>
341
+ <span class="text-sm text-gray-400">Degraded</span>
342
+ </div>
343
+
344
+ <div class="flex justify-between items-center">
345
+ <div class="flex items-center">
346
+ <div class="h-3 w-3 rounded-full bg-green-500 mr-2 pulse"></div>
347
+ <span>Storage</span>
348
+ </div>
349
+ <span class="text-sm text-gray-400">65% used</span>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="mt-8">
354
+ <h3 class="orbitron text-lg font-medium mb-3">Quick Actions</h3>
355
+ <div class="grid grid-cols-2 gap-3">
356
+ <button class="neon-btn py-2 rounded-lg text-sm flex items-center justify-center">
357
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
358
+ </button>
359
+ <button class="neon-btn py-2 rounded-lg text-sm flex items-center justify-center">
360
+ <i class="fas fa-cog mr-1"></i> Settings
361
+ </button>
362
+ <button class="neon-btn py-2 rounded-lg text-sm flex items-center justify-center">
363
+ <i class="fas fa-shield-alt mr-1"></i> Security
364
+ </button>
365
+ <button class="neon-btn py-2 rounded-lg text-sm flex items-center justify-center">
366
+ <i class="fas fa-chart-line mr-1"></i> Analytics
367
+ </button>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
375
+ <script>
376
+ // Initialize Chart
377
+ const ctx = document.getElementById('performanceChart').getContext('2d');
378
+ const performanceChart = new Chart(ctx, {
379
+ type: 'line',
380
+ data: {
381
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
382
+ datasets: [
383
+ {
384
+ label: 'Revenue',
385
+ data: [12000, 19000, 15000, 20000, 18000, 22000, 24000],
386
+ borderColor: '#00f7ff',
387
+ backgroundColor: 'rgba(0, 247, 255, 0.1)',
388
+ borderWidth: 2,
389
+ tension: 0.4,
390
+ fill: true
391
+ },
392
+ {
393
+ label: 'Users',
394
+ data: [800, 1200, 1000, 1400, 1100, 1500, 1800],
395
+ borderColor: '#ff00e6',
396
+ backgroundColor: 'rgba(255, 0, 230, 0.1)',
397
+ borderWidth: 2,
398
+ tension: 0.4,
399
+ fill: true
400
+ }
401
+ ]
402
+ },
403
+ options: {
404
+ responsive: true,
405
+ maintainAspectRatio: false,
406
+ plugins: {
407
+ legend: {
408
+ position: 'top',
409
+ labels: {
410
+ color: '#fff',
411
+ font: {
412
+ family: 'Orbitron'
413
+ }
414
+ }
415
+ }
416
+ },
417
+ scales: {
418
+ y: {
419
+ beginAtZero: true,
420
+ grid: {
421
+ color: 'rgba(255, 255, 255, 0.1)'
422
+ },
423
+ ticks: {
424
+ color: '#fff'
425
+ }
426
+ },
427
+ x: {
428
+ grid: {
429
+ color: 'rgba(255, 255, 255, 0.1)'
430
+ },
431
+ ticks: {
432
+ color: '#fff'
433
+ }
434
+ }
435
+ }
436
+ }
437
+ });
438
+
439
+ // Simulate real-time data updates
440
+ setInterval(() => {
441
+ const newData = performanceChart.data.datasets[0].data.map(value => {
442
+ return value * (0.95 + Math.random() * 0.1);
443
+ });
444
+ performanceChart.data.datasets[0].data = newData;
445
+ performanceChart.update();
446
+ }, 3000);
447
+
448
+ // Animate progress bars
449
+ document.querySelectorAll('.progress-bar').forEach(bar => {
450
+ const targetWidth = parseInt(bar.style.width);
451
+ bar.style.width = '0%';
452
+ setTimeout(() => {
453
+ bar.style.width = targetWidth + '%';
454
+ }, 100);
455
+ });
456
+ </script>
457
+ <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=Kenokasakasa/g" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
458
+ </html>