Hugging Face's logo

Spaces:
oncoming
/
datanova
Running

App Files Community
oncoming commited on
Commit
f3760f3
·
verified ·
1 Parent(s): 01e086d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1173 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Datanova
3
- emoji: 📚
4
  colorFrom: blue
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: datanova
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,1173 @@
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>DataNova | Advanced Data Platform</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --primary: #6366f1;
12
+ --primary-dark: #4f46e5;
13
+ --secondary: #10b981;
14
+ --dark: #1e293b;
15
+ --light: #f8fafc;
16
+ --gray: #94a3b8;
17
+ --danger: #ef4444;
18
+ --warning: #f59e0b;
19
+ --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
20
+ --glow: 0 0 10px rgba(99, 102, 241, 0.3);
21
+
22
+ /* Light theme colors */
23
+ --bg-color: #f1f5f9;
24
+ --text-color: #1e293b;
25
+ --card-bg: #ffffff;
26
+ --sidebar-bg: #ffffff;
27
+ --header-bg: #ffffff;
28
+ --table-row-hover: #f8fafc;
29
+ --table-border: #e2e8f0;
30
+ --input-bg: #ffffff;
31
+ --input-border: #e2e8f0;
32
+ --ai-panel-bg: #ffffff;
33
+ --ai-message-bg: #f1f5f9;
34
+ --chart-grid: rgba(0, 0, 0, 0.1);
35
+ }
36
+
37
+ /* Dark theme colors */
38
+ .dark-mode {
39
+ --bg-color: #0f172a;
40
+ --text-color: #f8fafc;
41
+ --card-bg: #1e293b;
42
+ --sidebar-bg: #1e293b;
43
+ --header-bg: #1e293b;
44
+ --table-row-hover: #334155;
45
+ --table-border: #334155;
46
+ --input-bg: #1e293b;
47
+ --input-border: #334155;
48
+ --ai-panel-bg: #1e293b;
49
+ --ai-message-bg: #334155;
50
+ --chart-grid: rgba(255, 255, 255, 0.1);
51
+
52
+ --gray: #64748b;
53
+ --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
54
+ }
55
+
56
+ * {
57
+ margin: 0;
58
+ padding: 0;
59
+ box-sizing: border-box;
60
+ transition: background-color 0.3s, color 0.3s, border-color 0.3s;
61
+ }
62
+
63
+ body {
64
+ font-family: 'Inter', sans-serif;
65
+ background-color: var(--bg-color);
66
+ color: var(--text-color);
67
+ line-height: 1.6;
68
+ }
69
+
70
+ .container {
71
+ max-width: 1600px;
72
+ margin: 0 auto;
73
+ padding: 0 20px;
74
+ }
75
+
76
+ /* Header */
77
+ header {
78
+ background-color: var(--header-bg);
79
+ box-shadow: var(--card-shadow);
80
+ position: sticky;
81
+ top: 0;
82
+ z-index: 1000;
83
+ }
84
+
85
+ .navbar {
86
+ display: flex;
87
+ justify-content: space-between;
88
+ align-items: center;
89
+ padding: 15px 0;
90
+ }
91
+
92
+ .logo {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 10px;
96
+ font-size: 1.5rem;
97
+ font-weight: 700;
98
+ color: var(--primary);
99
+ }
100
+
101
+ .logo-icon {
102
+ font-size: 2rem;
103
+ color: var(--primary);
104
+ }
105
+
106
+ .nav-links {
107
+ display: flex;
108
+ gap: 30px;
109
+ }
110
+
111
+ .nav-links a {
112
+ color: var(--text-color);
113
+ text-decoration: none;
114
+ font-weight: 500;
115
+ transition: color 0.3s;
116
+ position: relative;
117
+ }
118
+
119
+ .nav-links a:hover {
120
+ color: var(--primary);
121
+ }
122
+
123
+ .nav-links a.active:after {
124
+ content: '';
125
+ position: absolute;
126
+ bottom: -5px;
127
+ left: 0;
128
+ width: 100%;
129
+ height: 2px;
130
+ background-color: var(--primary);
131
+ }
132
+
133
+ .user-area {
134
+ display: flex;
135
+ align-items: center;
136
+ gap: 20px;
137
+ }
138
+
139
+ .notification-btn {
140
+ position: relative;
141
+ background: none;
142
+ border: none;
143
+ font-size: 1.2rem;
144
+ color: var(--gray);
145
+ cursor: pointer;
146
+ }
147
+
148
+ .notification-badge {
149
+ position: absolute;
150
+ top: -5px;
151
+ right: -5px;
152
+ background-color: var(--danger);
153
+ color: white;
154
+ border-radius: 50%;
155
+ width: 18px;
156
+ height: 18px;
157
+ display: flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ font-size: 0.6rem;
161
+ }
162
+
163
+ .user-avatar {
164
+ width: 40px;
165
+ height: 40px;
166
+ border-radius: 50%;
167
+ background-color: var(--primary);
168
+ color: white;
169
+ display: flex;
170
+ align-items: center;
171
+ justify-content: center;
172
+ font-weight: 600;
173
+ cursor: pointer;
174
+ }
175
+
176
+ .theme-toggle {
177
+ background: none;
178
+ border: none;
179
+ color: var(--gray);
180
+ font-size: 1.2rem;
181
+ cursor: pointer;
182
+ display: flex;
183
+ align-items: center;
184
+ }
185
+
186
+ .theme-toggle:hover {
187
+ color: var(--primary);
188
+ }
189
+
190
+ /* Dashboard Layout */
191
+ .dashboard {
192
+ display: grid;
193
+ grid-template-columns: 250px 1fr;
194
+ gap: 30px;
195
+ padding: 30px 0;
196
+ }
197
+
198
+ /* Sidebar */
199
+ .sidebar {
200
+ background-color: var(--sidebar-bg);
201
+ border-radius: 10px;
202
+ padding: 20px;
203
+ box-shadow: var(--card-shadow);
204
+ height: fit-content;
205
+ }
206
+
207
+ .sidebar-section {
208
+ margin-bottom: 30px;
209
+ }
210
+
211
+ .sidebar-title {
212
+ font-size: 0.8rem;
213
+ text-transform: uppercase;
214
+ letter-spacing: 1px;
215
+ color: var(--gray);
216
+ margin-bottom: 15px;
217
+ }
218
+
219
+ .sidebar-menu {
220
+ list-style: none;
221
+ }
222
+
223
+ .sidebar-menu li {
224
+ margin-bottom: 10px;
225
+ }
226
+
227
+ .sidebar-menu a {
228
+ display: flex;
229
+ align-items: center;
230
+ gap: 10px;
231
+ color: var(--text-color);
232
+ text-decoration: none;
233
+ padding: 8px 10px;
234
+ border-radius: 6px;
235
+ font-weight: 500;
236
+ transition: all 0.3s;
237
+ }
238
+
239
+ .sidebar-menu a:hover {
240
+ background-color: var(--table-row-hover);
241
+ color: var(--primary);
242
+ }
243
+
244
+ .sidebar-menu a.active {
245
+ background-color: var(--primary);
246
+ color: white;
247
+ }
248
+
249
+ .sidebar-menu a.active i {
250
+ color: white;
251
+ }
252
+
253
+ .sidebar-menu i {
254
+ color: var(--gray);
255
+ width: 20px;
256
+ text-align: center;
257
+ }
258
+
259
+ /* Main Content */
260
+ .main-content {
261
+ display: flex;
262
+ flex-direction: column;
263
+ gap: 30px;
264
+ }
265
+
266
+ /* Welcome Banner */
267
+ .welcome-banner {
268
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
269
+ color: white;
270
+ padding: 25px;
271
+ border-radius: 10px;
272
+ box-shadow: var(--card-shadow);
273
+ display: flex;
274
+ justify-content: space-between;
275
+ align-items: center;
276
+ animation: fadeIn 1s;
277
+ }
278
+
279
+ @keyframes fadeIn {
280
+ from { opacity: 0; transform: translateY(20px); }
281
+ to { opacity: 1; transform: translateY(0); }
282
+ }
283
+
284
+ .welcome-text h2 {
285
+ font-size: 1.5rem;
286
+ margin-bottom: 5px;
287
+ }
288
+
289
+ .welcome-text p {
290
+ opacity: 0.9;
291
+ font-weight: 300;
292
+ }
293
+
294
+ .upgrade-btn {
295
+ background-color: white;
296
+ color: var(--primary);
297
+ border: none;
298
+ padding: 10px 20px;
299
+ border-radius: 6px;
300
+ font-weight: 600;
301
+ cursor: pointer;
302
+ transition: all 0.3s;
303
+ box-shadow: var(--glow);
304
+ }
305
+
306
+ .upgrade-btn:hover {
307
+ transform: translateY(-2px);
308
+ box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
309
+ }
310
+
311
+ /* Stats Grid */
312
+ .stats-grid {
313
+ display: grid;
314
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
315
+ gap: 20px;
316
+ }
317
+
318
+ .stat-card {
319
+ background-color: var(--card-bg);
320
+ border-radius: 10px;
321
+ padding: 20px;
322
+ box-shadow: var(--card-shadow);
323
+ transition: transform 0.3s, box-shadow 0.3s;
324
+ }
325
+
326
+ .stat-card:hover {
327
+ transform: translateY(-5px);
328
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
329
+ }
330
+
331
+ .stat-card-header {
332
+ display: flex;
333
+ justify-content: space-between;
334
+ margin-bottom: 15px;
335
+ }
336
+
337
+ .stat-icon {
338
+ width: 40px;
339
+ height: 40px;
340
+ border-radius: 8px;
341
+ display: flex;
342
+ align-items: center;
343
+ justify-content: center;
344
+ color: white;
345
+ }
346
+
347
+ .stat-icon.primary {
348
+ background-color: var(--primary);
349
+ }
350
+
351
+ .stat-icon.secondary {
352
+ background-color: var(--secondary);
353
+ }
354
+
355
+ .stat-icon.warning {
356
+ background-color: var(--warning);
357
+ }
358
+
359
+ .stat-value {
360
+ font-size: 1.8rem;
361
+ font-weight: 700;
362
+ margin-bottom: 5px;
363
+ }
364
+
365
+ .stat-title {
366
+ color: var(--gray);
367
+ font-size: 0.9rem;
368
+ }
369
+
370
+ .stat-change {
371
+ display: flex;
372
+ align-items: center;
373
+ font-size: 0.8rem;
374
+ margin-top: 10px;
375
+ }
376
+
377
+ .stat-change.positive {
378
+ color: var(--secondary);
379
+ }
380
+
381
+ .stat-change.negative {
382
+ color: var(--danger);
383
+ }
384
+
385
+ /* Charts Section */
386
+ .charts-section {
387
+ display: grid;
388
+ grid-template-columns: 2fr 1fr;
389
+ gap: 20px;
390
+ }
391
+
392
+ @media (max-width: 1200px) {
393
+ .charts-section {
394
+ grid-template-columns: 1fr;
395
+ }
396
+ }
397
+
398
+ .chart-card {
399
+ background-color: var(--card-bg);
400
+ border-radius: 10px;
401
+ padding: 20px;
402
+ box-shadow: var(--card-shadow);
403
+ }
404
+
405
+ .chart-header {
406
+ display: flex;
407
+ justify-content: space-between;
408
+ align-items: center;
409
+ margin-bottom: 20px;
410
+ }
411
+
412
+ .chart-title {
413
+ font-weight: 600;
414
+ }
415
+
416
+ .chart-actions {
417
+ display: flex;
418
+ gap: 10px;
419
+ }
420
+
421
+ .chart-btn {
422
+ background: none;
423
+ border: none;
424
+ color: var(--gray);
425
+ cursor: pointer;
426
+ transition: color 0.3s;
427
+ }
428
+
429
+ .chart-btn:hover {
430
+ color: var(--primary);
431
+ }
432
+
433
+ .chart-container {
434
+ height: 300px;
435
+ position: relative;
436
+ }
437
+
438
+ canvas {
439
+ max-width: 100%;
440
+ }
441
+
442
+ /* Data Tables */
443
+ .tables-section {
444
+ display: grid;
445
+ grid-template-columns: 1fr 1fr;
446
+ gap: 20px;
447
+ }
448
+
449
+ @media (max-width: 1200px) {
450
+ .tables-section {
451
+ grid-template-columns: 1fr;
452
+ }
453
+ }
454
+
455
+ .table-card {
456
+ background-color: var(--card-bg);
457
+ border-radius: 10px;
458
+ padding: 20px;
459
+ box-shadow: var(--card-shadow);
460
+ overflow-x: auto;
461
+ }
462
+
463
+ table {
464
+ width: 100%;
465
+ border-collapse: collapse;
466
+ }
467
+
468
+ th, td {
469
+ padding: 12px 15px;
470
+ text-align: left;
471
+ border-bottom: 1px solid var(--table-border);
472
+ }
473
+
474
+ th {
475
+ font-weight: 600;
476
+ color: var(--text-color);
477
+ text-transform: uppercase;
478
+ font-size: 0.8rem;
479
+ letter-spacing: 0.5px;
480
+ }
481
+
482
+ tr:hover td {
483
+ background-color: var(--table-row-hover);
484
+ }
485
+
486
+ .status-badge {
487
+ display: inline-block;
488
+ padding: 4px 8px;
489
+ border-radius: 12px;
490
+ font-size: 0.75rem;
491
+ font-weight: 600;
492
+ }
493
+
494
+ .status-active {
495
+ background-color: #dcfce7;
496
+ color: #16a34a;
497
+ }
498
+
499
+ .status-pending {
500
+ background-color: #fef9c3;
501
+ color: #ca8a04;
502
+ }
503
+
504
+ .status-inactive {
505
+ background-color: #fee2e2;
506
+ color: #dc2626;
507
+ }
508
+
509
+ .action-btn {
510
+ background: none;
511
+ border: none;
512
+ cursor: pointer;
513
+ color: var(--gray);
514
+ transition: color 0.3s;
515
+ }
516
+
517
+ .action-btn:hover {
518
+ color: var(--primary);
519
+ }
520
+
521
+ /* AI Assistant */
522
+ .ai-assistant {
523
+ position: fixed;
524
+ bottom: 30px;
525
+ right: 30px;
526
+ z-index: 1000;
527
+ }
528
+
529
+ .ai-btn {
530
+ width: 60px;
531
+ height: 60px;
532
+ border-radius: 50%;
533
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
534
+ color: white;
535
+ border: none;
536
+ box-shadow: 0 5px 20px rgba(99, 102, 241, 0.5);
537
+ cursor: pointer;
538
+ display: flex;
539
+ align-items: center;
540
+ justify-content: center;
541
+ font-size: 1.5rem;
542
+ transition: all 0.3s;
543
+ }
544
+
545
+ .ai-btn:hover {
546
+ transform: scale(1.1);
547
+ box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
548
+ }
549
+
550
+ .ai-panel {
551
+ position: absolute;
552
+ bottom: 80px;
553
+ right: 0;
554
+ width: 350px;
555
+ background-color: var(--ai-panel-bg);
556
+ border-radius: 10px;
557
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
558
+ padding: 20px;
559
+ display: none;
560
+ animation: slideUp 0.3s;
561
+ }
562
+
563
+ @keyframes slideUp {
564
+ from { transform: translateY(20px); opacity: 0; }
565
+ to { transform: translateY(0); opacity: 1; }
566
+ }
567
+
568
+ .ai-header {
569
+ display: flex;
570
+ justify-content: space-between;
571
+ align-items: center;
572
+ margin-bottom: 15px;
573
+ }
574
+
575
+ .ai-title {
576
+ font-weight: 600;
577
+ }
578
+
579
+ .ai-close {
580
+ background: none;
581
+ border: none;
582
+ cursor: pointer;
583
+ color: var(--gray);
584
+ font-size: 1.2rem;
585
+ }
586
+
587
+ .ai-message {
588
+ background-color: var(--ai-message-bg);
589
+ padding: 10px 15px;
590
+ border-radius: 8px;
591
+ margin-bottom: 15px;
592
+ font-size: 0.9rem;
593
+ }
594
+
595
+ .ai-input {
596
+ width: 100%;
597
+ padding: 10px;
598
+ border: 1px solid var(--input-border);
599
+ border-radius: 6px;
600
+ resize: none;
601
+ margin-bottom: 10px;
602
+ font-family: inherit;
603
+ background-color: var(--input-bg);
604
+ color: var(--text-color);
605
+ }
606
+
607
+ .ai-send {
608
+ background-color: var(--primary);
609
+ color: white;
610
+ border: none;
611
+ padding: 8px 15px;
612
+ border-radius: 6px;
613
+ cursor: pointer;
614
+ display: flex;
615
+ align-items: center;
616
+ gap: 5px;
617
+ transition: background-color 0.3s;
618
+ }
619
+
620
+ .ai-send:hover {
621
+ background-color: var(--primary-dark);
622
+ }
623
+
624
+ /* Responsive */
625
+ @media (max-width: 992px) {
626
+ .dashboard {
627
+ grid-template-columns: 1fr;
628
+ }
629
+
630
+ .sidebar {
631
+ display: none;
632
+ }
633
+
634
+ .nav-links {
635
+ display: none;
636
+ }
637
+ }
638
+
639
+ @media (max-width: 768px) {
640
+ .stats-grid {
641
+ grid-template-columns: 1fr;
642
+ }
643
+ }
644
+
645
+ /* Animation classes */
646
+ .fade-in {
647
+ animation: fadeIn 0.5s;
648
+ }
649
+
650
+ .slide-in-left {
651
+ animation: slideInLeft 0.5s;
652
+ }
653
+
654
+ @keyframes slideInLeft {
655
+ from { transform: translateX(-20px); opacity: 0; }
656
+ to { transform: translateX(0); opacity: 1; }
657
+ }
658
+
659
+ /* Pulse animation */
660
+ .pulse {
661
+ animation: pulse 2s infinite;
662
+ }
663
+
664
+ @keyframes pulse {
665
+ 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
666
+ 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
667
+ 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
668
+ }
669
+ </style>
670
+ </head>
671
+ <body class="light-mode">
672
+ <header>
673
+ <div class="container">
674
+ <nav class="navbar">
675
+ <div class="logo">
676
+ <i class="fas fa-database logo-icon"></i>
677
+ <span>DataNova</span>
678
+ </div>
679
+ <div class="nav-links">
680
+ <a href="#" class="active">Dashboard</a>
681
+ <a href="#">Analytics</a>
682
+ <a href="#">Data Sources</a>
683
+ <a href="#">Reports</a>
684
+ <a href="#">Settings</a>
685
+ </div>
686
+ <div class="user-area">
687
+ <button class="theme-toggle" id="themeToggle">
688
+ <i class="fas fa-moon"></i>
689
+ </button>
690
+ <button class="notification-btn">
691
+ <i class="far fa-bell"></i>
692
+ <span class="notification-badge">3</span>
693
+ </button>
694
+ <div class="user-avatar pulse">JD</div>
695
+ </div>
696
+ </nav>
697
+ </div>
698
+ </header>
699
+
700
+ <div class="container">
701
+ <div class="dashboard">
702
+ <aside class="sidebar">
703
+ <div class="sidebar-section">
704
+ <div class="sidebar-title">Main</div>
705
+ <ul class="sidebar-menu">
706
+ <li><a href="#" class="active"><i class="fas fa-home"></i> Dashboard</a></li>
707
+ <li><a href="#"><i class="fas fa-chart-line"></i> Analytics</a></li>
708
+ <li><a href="#"><i class="fas fa-database"></i> Data Warehouse</a></li>
709
+ <li><a href="#"><i class="fas fa-file-alt"></i> Reports</a></li>
710
+ </ul>
711
+ </div>
712
+
713
+ <div class="sidebar-section">
714
+ <div class="sidebar-title">Tools</div>
715
+ <ul class="sidebar-menu">
716
+ <li><a href="#"><i class="fas fa-robot"></i> AI Assistant</a></li>
717
+ <li><a href="#"><i class="fas fa-chart-pie"></i> Visualizations</a></li>
718
+ <li><a href="#"><i class="fas fa-project-diagram"></i> Data Pipeline</a></li>
719
+ <li><a href="#"><i class="fas fa-brain"></i> Machine Learning</a></li>
720
+ </ul>
721
+ </div>
722
+
723
+ <div class="sidebar-section">
724
+ <div class="sidebar-title">Settings</div>
725
+ <ul class="sidebar-menu">
726
+ <li><a href="#"><i class="fas fa-user-cog"></i> Profile</a></li>
727
+ <li><a href="#"><i class="fas fa-cog"></i> Preferences</a></li>
728
+ <li><a href="#"><i class="fas fa-users"></i> Team</a></li>
729
+ <li><a href="#"><i class="fas fa-question-circle"></i> Help</a></li>
730
+ </ul>
731
+ </div>
732
+ </aside>
733
+
734
+ <main class="main-content">
735
+ <div class="welcome-banner fade-in">
736
+ <div class="welcome-text">
737
+ <h2>Welcome back, John!</h2>
738
+ <p>Here's what's happening with your data today.</p>
739
+ </div>
740
+ <button class="upgrade-btn">
741
+ <i class="fas fa-rocket"></i> Upgrade Plan
742
+ </button>
743
+ </div>
744
+
745
+ <div class="stats-grid">
746
+ <div class="stat-card slide-in-left" style="animation-delay: 0.1s;">
747
+ <div class="stat-card-header">
748
+ <div>
749
+ <div class="stat-value">1,248</div>
750
+ <div class="stat-title">Total Data Sources</div>
751
+ </div>
752
+ <div class="stat-icon primary">
753
+ <i class="fas fa-database"></i>
754
+ </div>
755
+ </div>
756
+ <div class="stat-change positive">
757
+ <i class="fas fa-arrow-up"></i> 12.5% from last month
758
+ </div>
759
+ </div>
760
+
761
+ <div class="stat-card slide-in-left" style="animation-delay: 0.2s;">
762
+ <div class="stat-card-header">
763
+ <div>
764
+ <div class="stat-value">824</div>
765
+ <div class="stat-title">Processed Datasets</div>
766
+ </div>
767
+ <div class="stat-icon secondary">
768
+ <i class="fas fa-chart-bar"></i>
769
+ </div>
770
+ </div>
771
+ <div class="stat-change positive">
772
+ <i class="fas fa-arrow-up"></i> 8.3% from last month
773
+ </div>
774
+ </div>
775
+
776
+ <div class="stat-card slide-in-left" style="animation-delay: 0.3s;">
777
+ <div class="stat-card-header">
778
+ <div>
779
+ <div class="stat-value">356 TB</div>
780
+ <div class="stat-title">Total Storage</div>
781
+ </div>
782
+ <div class="stat-icon warning">
783
+ <i class="fas fa-hdd"></i>
784
+ </div>
785
+ </div>
786
+ <div class="stat-change negative">
787
+ <i class="fas fa-arrow-down"></i> 15.2% remaining
788
+ </div>
789
+ </div>
790
+
791
+ <div class="stat-card slide-in-left" style="animation-delay: 0.4s;">
792
+ <div class="stat-card-header">
793
+ <div>
794
+ <div class="stat-value">98.7%</div>
795
+ <div class="stat-title">System Health</div>
796
+ </div>
797
+ <div class="stat-icon primary">
798
+ <i class="fas fa-heartbeat"></i>
799
+ </div>
800
+ </div>
801
+ <div class="stat-change positive">
802
+ <i class="fas fa-arrow-up"></i> All systems operational
803
+ </div>
804
+ </div>
805
+ </div>
806
+
807
+ <div class="charts-section">
808
+ <div class="chart-card">
809
+ <div class="chart-header">
810
+ <h3 class="chart-title">Data Volume Overview</h3>
811
+ <div class="chart-actions">
812
+ <button class="chart-btn"><i class="fas fa-calendar"></i> Period</button>
813
+ <button class="chart-btn"><i class="fas fa-ellipsis-v"></i> More</button>
814
+ </div>
815
+ </div>
816
+ <div class="chart-container">
817
+ <canvas id="volumeChart"></canvas>
818
+ </div>
819
+ </div>
820
+
821
+ <div class="chart-card">
822
+ <div class="chart-header">
823
+ <h3 class="chart-title">Data Source Types</h3>
824
+ <div class="chart-actions">
825
+ <button class="chart-btn"><i class="fas fa-filter"></i> Filter</button>
826
+ </div>
827
+ </div>
828
+ <div class="chart-container">
829
+ <canvas id="typesChart"></canvas>
830
+ </div>
831
+ </div>
832
+ </div>
833
+
834
+ <div class="tables-section">
835
+ <div class="table-card">
836
+ <h3>Recent Data Ingestions</h3>
837
+ <table>
838
+ <thead>
839
+ <tr>
840
+ <th>Source</th>
841
+ <th>Type</th>
842
+ <th>Size</th>
843
+ <th>Status</th>
844
+ <th>Actions</th>
845
+ </tr>
846
+ </thead>
847
+ <tbody>
848
+ <tr>
849
+ <td>Sales Q3 2023</td>
850
+ <td>CSV</td>
851
+ <td>2.4 GB</td>
852
+ <td><span class="status-badge status-active">Processed</span></td>
853
+ <td>
854
+ <button class="action-btn"><i class="fas fa-eye"></i></button>
855
+ <button class="action-btn"><i class="fas fa-download"></i></button>
856
+ </td>
857
+ </tr>
858
+ <tr>
859
+ <td>Customer Feedback</td>
860
+ <td>JSON</td>
861
+ <td>1.1 GB</td>
862
+ <td><span class="status-badge status-active">Processed</span></td>
863
+ <td>
864
+ <button class="action-btn"><i class="fas fa-eye"></i></button>
865
+ <button class="action-btn"><i class="fas fa-download"></i></button>
866
+ </td>
867
+ </tr>
868
+ <tr>
869
+ <td>Web Analytics</td>
870
+ <td>Parquet</td>
871
+ <td>5.7 GB</td>
872
+ <td><span class="status-badge status-pending">Processing</span></td>
873
+ <td>
874
+ <button class="action-btn"><i class="fas fa-eye"></i></button>
875
+ <button class="action-btn"><i class="fas fa-download"></i></button>
876
+ </td>
877
+ </tr>
878
+ <tr>
879
+ <td>IoT Sensor Data</td>
880
+ <td>Avro</td>
881
+ <td>15.3 GB</td>
882
+ <td><span class="status-badge status-inactive">Failed</span></td>
883
+ <td>
884
+ <button class="action-btn"><i class="fas fa-redo"></i></button>
885
+ </td>
886
+ </tr>
887
+ <tr>
888
+ <td>Social Media</td>
889
+ <td>JSON</td>
890
+ <td>8.2 GB</td>
891
+ <td><span class="status-badge status-active">Processed</span></td>
892
+ <td>
893
+ <button class="action-btn"><i class="fas fa-eye"></i></button>
894
+ <button class="action-btn"><i class="fas fa-download"></i></button>
895
+ </td>
896
+ </tr>
897
+ </tbody>
898
+ </table>
899
+ </div>
900
+
901
+ <div class="table-card">
902
+ <h3>Upcoming Tasks</h3>
903
+ <table>
904
+ <thead>
905
+ <tr>
906
+ <th>Task</th>
907
+ <th>Due Date</th>
908
+ <th>Priority</th>
909
+ <th>Status</th>
910
+ <th>Actions</th>
911
+ </tr>
912
+ </thead>
913
+ <tbody>
914
+ <tr>
915
+ <td>Data quality check</td>
916
+ <td>Today</td>
917
+ <td><i class="fas fa-exclamation-circle" style="color: var(--danger);"></i></td>
918
+ <td><span class="status-badge status-pending">Pending</span></td>
919
+ <td>
920
+ <button class="action-btn"><i class="fas fa-check"></i></button>
921
+ </td>
922
+ </tr>
923
+ <tr>
924
+ <td>ML model retraining</td>
925
+ <td Tomorrow</td>
926
+ <td><i class="fas fa-exclamation-triangle" style="color: var(--warning);"></i></td>
927
+ <td><span class="status-badge status-pending">Scheduled</span></td>
928
+ <td>
929
+ <button class="action-btn"><i class="fas fa-clock"></i></button>
930
+ </td>
931
+ </tr>
932
+ <tr>
933
+ <td>Backup verification</td>
934
+ <td>Oct 15</td>
935
+ <td><i class="fas fa-info-circle" style="color: var(--primary);"></i></td>
936
+ <td><span class="status-badge status-pending">Scheduled</span></td>
937
+ <td>
938
+ <button class="action-btn"><i class="fas fa-clock"></i></button>
939
+ </td>
940
+ </tr>
941
+ <tr>
942
+ <td>Data governance audit</td>
943
+ <td>Oct 20</td>
944
+ <td><i class="fas fa-exclamation-triangle" style="color: var(--warning);"></i></td>
945
+ <td><span class="status-badge status-pending">Not started</span></td>
946
+ <td>
947
+ <button class="action-btn"><i class="fas fa-calendar-plus"></i></button>
948
+ </td>
949
+ </tr>
950
+ <tr>
951
+ <td>New data source integration</td>
952
+ <td>Oct 25</td>
953
+ <td><i class="fas fa-info-circle" style="color: var(--primary);"></i></td>
954
+ <td><span class="status-badge status-pending">Pending</span></td>
955
+ <td>
956
+ <button class="action-btn"><i class="fas fa-clock"></i></button>
957
+ </td>
958
+ </tr>
959
+ </tbody>
960
+ </table>
961
+ </div>
962
+ </div>
963
+ </main>
964
+ </div>
965
+ </div>
966
+
967
+ <div class="ai-assistant">
968
+ <button class="ai-btn" id="aiToggle">
969
+ <i class="fas fa-robot"></i>
970
+ </button>
971
+ <div class="ai-panel" id="aiPanel">
972
+ <div class="ai-header">
973
+ <h3 class="ai-title">DataNova AI Assistant</h3>
974
+ <button class="ai-close" id="aiClose">
975
+ <i class="fas fa-times"></i>
976
+ </button>
977
+ </div>
978
+ <div class="ai-message">
979
+ Hi there! I'm Nova, your AI assistant. How can I help you with your data today?
980
+ </div>
981
+ <textarea class="ai-input" placeholder="Ask me anything about your data..."></textarea>
982
+ <button class="ai-send">
983
+ <i class="fas fa-paper-plane"></i> Send
984
+ </button>
985
+ </div>
986
+ </div>
987
+
988
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
989
+ <script>
990
+ // Initialize charts
991
+ document.addEventListener('DOMContentLoaded', function() {
992
+ // Volume Chart
993
+ const volumeCtx = document.getElementById('volumeChart').getContext('2d');
994
+ const volumeChart = new Chart(volumeCtx, {
995
+ type: 'line',
996
+ data: {
997
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
998
+ datasets: [{
999
+ label: 'Data Volume (TB)',
1000
+ data: [120, 150, 180, 210, 240, 270, 300, 330, 360, 390],
1001
+ borderColor: '#6366f1',
1002
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
1003
+ tension: 0.4,
1004
+ fill: true,
1005
+ borderWidth: 2
1006
+ }]
1007
+ },
1008
+ options: {
1009
+ responsive: true,
1010
+ maintainAspectRatio: false,
1011
+ plugins: {
1012
+ legend: {
1013
+ position: 'top',
1014
+ }
1015
+ },
1016
+ scales: {
1017
+ y: {
1018
+ beginAtZero: false,
1019
+ grid: {
1020
+ color: function(context) {
1021
+ return getComputedStyle(document.body).getPropertyValue('--chart-grid');
1022
+ }
1023
+ }
1024
+ },
1025
+ x: {
1026
+ grid: {
1027
+ color: function(context) {
1028
+ return getComputedStyle(document.body).getPropertyValue('--chart-grid');
1029
+ }
1030
+ }
1031
+ }
1032
+ }
1033
+ }
1034
+ });
1035
+
1036
+ // Types Chart
1037
+ const typesCtx = document.getElementById('typesChart').getContext('2d');
1038
+ const typesChart = new Chart(typesCtx, {
1039
+ type: 'doughnut',
1040
+ data: {
1041
+ labels: ['CSV', 'JSON', 'Database', 'API', 'Others'],
1042
+ datasets: [{
1043
+ data: [35, 25, 20, 15, 5],
1044
+ backgroundColor: [
1045
+ '#6366f1',
1046
+ '#10b981',
1047
+ '#f59e0b',
1048
+ '#ef4444',
1049
+ '#94a3b8'
1050
+ ],
1051
+ borderWidth: 1
1052
+ }]
1053
+ },
1054
+ options: {
1055
+ responsive: true,
1056
+ maintainAspectRatio: false,
1057
+ plugins: {
1058
+ legend: {
1059
+ position: 'right',
1060
+ }
1061
+ }
1062
+ }
1063
+ });
1064
+
1065
+ // AI Assistant Toggle
1066
+ const aiToggle = document.getElementById('aiToggle');
1067
+ const aiPanel = document.getElementById('aiPanel');
1068
+ const aiClose = document.getElementById('aiClose');
1069
+
1070
+ aiToggle.addEventListener('click', function() {
1071
+ aiPanel.style.display = aiPanel.style.display === 'block' ? 'none' : 'block';
1072
+ });
1073
+
1074
+ aiClose.addEventListener('click', function() {
1075
+ aiPanel.style.display = 'none';
1076
+ });
1077
+
1078
+ // Add animation to stat cards on scroll
1079
+ const statCards = document.querySelectorAll('.stat-card');
1080
+
1081
+ function checkScroll() {
1082
+ statCards.forEach(card => {
1083
+ const cardTop = card.getBoundingClientRect().top;
1084
+ const windowHeight = window.innerHeight;
1085
+
1086
+ if (cardTop < windowHeight - 100) {
1087
+ card.style.opacity = 1;
1088
+ card.style.transform = 'translateY(0)';
1089
+ }
1090
+ });
1091
+ }
1092
+
1093
+ window.addEventListener('scroll', checkScroll);
1094
+ checkScroll(); // Initial check
1095
+
1096
+ // Theme toggle functionality
1097
+ const themeToggle = document.getElementById('themeToggle');
1098
+ const body = document.body;
1099
+ let isDarkMode = false;
1100
+
1101
+ // Check for saved theme preference
1102
+ if (localStorage.getItem('theme') === 'dark') {
1103
+ enableDarkMode();
1104
+ } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
1105
+ enableDarkMode();
1106
+ }
1107
+
1108
+ themeToggle.addEventListener('click', () => {
1109
+ isDarkMode ? disableDarkMode() : enableDarkMode();
1110
+ });
1111
+
1112
+ function enableDarkMode() {
1113
+ body.classList.add('dark-mode');
1114
+ themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
1115
+ localStorage.setItem('theme', 'dark');
1116
+ isDarkMode = true;
1117
+
1118
+ // Update charts for dark mode
1119
+ updateChartsForTheme(true);
1120
+ }
1121
+
1122
+ function disableDarkMode() {
1123
+ body.classList.remove('dark-mode');
1124
+ themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
1125
+ localStorage.setItem('theme', 'light');
1126
+ isDarkMode = false;
1127
+
1128
+ // Update charts for light mode
1129
+ updateChartsForTheme(false);
1130
+ }
1131
+
1132
+ function updateChartsForTheme(isDark) {
1133
+ // Update line chart
1134
+ volumeChart.options.scales.x.grid.color = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
1135
+ volumeChart.options.scales.y.grid.color = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
1136
+ volumeChart.update();
1137
+ }
1138
+
1139
+ // Listen for system theme changes
1140
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
1141
+ const newColorScheme = event.matches ? "dark" : "light";
1142
+ if (newColorScheme === 'dark') {
1143
+ enableDarkMode();
1144
+ } else {
1145
+ disableDarkMode();
1146
+ }
1147
+ });
1148
+ });
1149
+
1150
+ // Add interactive elements
1151
+ const statCards = document.querySelectorAll('.stat-card');
1152
+ statCards.forEach(card => {
1153
+ card.addEventListener('click', function() {
1154
+ this.classList.toggle('highlight');
1155
+ });
1156
+ });
1157
+
1158
+ // Mock data for demonstration
1159
+ function updateStats() {
1160
+ const statValues = document.querySelectorAll('.stat-value');
1161
+
1162
+ // Simulate data changes
1163
+ setInterval(() => {
1164
+ statValues[0].textContent = (1248 + Math.floor(Math.random() * 20)).toString();
1165
+ statValues[1].textContent = (824 + Math.floor(Math.random() * 15)).toString();
1166
+ statValues[3].textContent = (98.7 + Math.random()).toFixed(1) + '%';
1167
+ }, 5000);
1168
+ }
1169
+
1170
+ updateStats();
1171
+ </script>
1172
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1173
+ </html>