Download index.html from oncoming/datanova: direct link, hf CLI and curl.
- Browser
- Download file 40.8 kB
-
https://huggingface.co/spaces/oncoming/datanova/resolve/main/index.html
- Command line
-
hf download hf://spaces/oncoming/datanova/index.html
-
curl -L -o index.html https://huggingface.co/spaces/oncoming/datanova/resolve/main/index.html
40.8 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DataNova | Advanced Data Platform</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #10b981; | |
| --dark: #1e293b; | |
| --light: #f8fafc; | |
| --gray: #94a3b8; | |
| --danger: #ef4444; | |
| --warning: #f59e0b; | |
| --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --glow: 0 0 10px rgba(99, 102, 241, 0.3); | |
| /* Light theme colors */ | |
| --bg-color: #f1f5f9; | |
| --text-color: #1e293b; | |
| --card-bg: #ffffff; | |
| --sidebar-bg: #ffffff; | |
| --header-bg: #ffffff; | |
| --table-row-hover: #f8fafc; | |
| --table-border: #e2e8f0; | |
| --input-bg: #ffffff; | |
| --input-border: #e2e8f0; | |
| --ai-panel-bg: #ffffff; | |
| --ai-message-bg: #f1f5f9; | |
| --chart-grid: rgba(0, 0, 0, 0.1); | |
| } | |
| /* Dark theme colors */ | |
| .dark-mode { | |
| --bg-color: #0f172a; | |
| --text-color: #f8fafc; | |
| --card-bg: #1e293b; | |
| --sidebar-bg: #1e293b; | |
| --header-bg: #1e293b; | |
| --table-row-hover: #334155; | |
| --table-border: #334155; | |
| --input-bg: #1e293b; | |
| --input-border: #334155; | |
| --ai-panel-bg: #1e293b; | |
| --ai-message-bg: #334155; | |
| --chart-grid: rgba(255, 255, 255, 0.1); | |
| --gray: #64748b; | |
| --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| transition: background-color 0.3s, color 0.3s, border-color 0.3s; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header */ | |
| header { | |
| background-color: var(--header-bg); | |
| box-shadow: var(--card-shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| } | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px 0; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .logo-icon { | |
| font-size: 2rem; | |
| color: var(--primary); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 30px; | |
| } | |
| .nav-links a { | |
| color: var(--text-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .nav-links a.active:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background-color: var(--primary); | |
| } | |
| .user-area { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .notification-btn { | |
| position: relative; | |
| background: none; | |
| border: none; | |
| font-size: 1.2rem; | |
| color: var(--gray); | |
| cursor: pointer; | |
| } | |
| .notification-badge { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background-color: var(--danger); | |
| color: white; | |
| border-radius: 50%; | |
| width: 18px; | |
| height: 18px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.6rem; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: var(--primary); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: none; | |
| color: var(--gray); | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .theme-toggle:hover { | |
| color: var(--primary); | |
| } | |
| /* Dashboard Layout */ | |
| .dashboard { | |
| display: grid; | |
| grid-template-columns: 250px 1fr; | |
| gap: 30px; | |
| padding: 30px 0; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| background-color: var(--sidebar-bg); | |
| border-radius: 10px; | |
| padding: 20px; | |
| box-shadow: var(--card-shadow); | |
| height: fit-content; | |
| } | |
| .sidebar-section { | |
| margin-bottom: 30px; | |
| } | |
| .sidebar-title { | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--gray); | |
| margin-bottom: 15px; | |
| } | |
| .sidebar-menu { | |
| list-style: none; | |
| } | |
| .sidebar-menu li { | |
| margin-bottom: 10px; | |
| } | |
| .sidebar-menu a { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--text-color); | |
| text-decoration: none; | |
| padding: 8px 10px; | |
| border-radius: 6px; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| } | |
| .sidebar-menu a:hover { | |
| background-color: var(--table-row-hover); | |
| color: var(--primary); | |
| } | |
| .sidebar-menu a.active { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .sidebar-menu a.active i { | |
| color: white; | |
| } | |
| .sidebar-menu i { | |
| color: var(--gray); | |
| width: 20px; | |
| text-align: center; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| /* Welcome Banner */ | |
| .welcome-banner { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| padding: 25px; | |
| border-radius: 10px; | |
| box-shadow: var(--card-shadow); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| animation: fadeIn 1s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .welcome-text h2 { | |
| font-size: 1.5rem; | |
| margin-bottom: 5px; | |
| } | |
| .welcome-text p { | |
| opacity: 0.9; | |
| font-weight: 300; | |
| } | |
| .upgrade-btn { | |
| background-color: white; | |
| color: var(--primary); | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| box-shadow: var(--glow); | |
| } | |
| .upgrade-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4); | |
| } | |
| /* Stats Grid */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .stat-card { | |
| background-color: var(--card-bg); | |
| border-radius: 10px; | |
| padding: 20px; | |
| box-shadow: var(--card-shadow); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .stat-card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 15px; | |
| } | |
| .stat-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| } | |
| .stat-icon.primary { | |
| background-color: var(--primary); | |
| } | |
| .stat-icon.secondary { | |
| background-color: var(--secondary); | |
| } | |
| .stat-icon.warning { | |
| background-color: var(--warning); | |
| } | |
| .stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .stat-title { | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| .stat-change { | |
| display: flex; | |
| align-items: center; | |
| font-size: 0.8rem; | |
| margin-top: 10px; | |
| } | |
| .stat-change.positive { | |
| color: var(--secondary); | |
| } | |
| .stat-change.negative { | |
| color: var(--danger); | |
| } | |
| /* Charts Section */ | |
| .charts-section { | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| gap: 20px; | |
| } | |
| @media (max-width: 1200px) { | |
| .charts-section { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .chart-card { | |
| background-color: var(--card-bg); | |
| border-radius: 10px; | |
| padding: 20px; | |
| box-shadow: var(--card-shadow); | |
| } | |
| .chart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .chart-title { | |
| font-weight: 600; | |
| } | |
| .chart-actions { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .chart-btn { | |
| background: none; | |
| border: none; | |
| color: var(--gray); | |
| cursor: pointer; | |
| transition: color 0.3s; | |
| } | |
| .chart-btn:hover { | |
| color: var(--primary); | |
| } | |
| .chart-container { | |
| height: 300px; | |
| position: relative; | |
| } | |
| canvas { | |
| max-width: 100%; | |
| } | |
| /* Data Tables */ | |
| .tables-section { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| } | |
| @media (max-width: 1200px) { | |
| .tables-section { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .table-card { | |
| background-color: var(--card-bg); | |
| border-radius: 10px; | |
| padding: 20px; | |
| box-shadow: var(--card-shadow); | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, td { | |
| padding: 12px 15px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--table-border); | |
| } | |
| th { | |
| font-weight: 600; | |
| color: var(--text-color); | |
| text-transform: uppercase; | |
| font-size: 0.8rem; | |
| letter-spacing: 0.5px; | |
| } | |
| tr:hover td { | |
| background-color: var(--table-row-hover); | |
| } | |
| .status-badge { | |
| display: inline-block; | |
| padding: 4px 8px; | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .status-active { | |
| background-color: #dcfce7; | |
| color: #16a34a; | |
| } | |
| .status-pending { | |
| background-color: #fef9c3; | |
| color: #ca8a04; | |
| } | |
| .status-inactive { | |
| background-color: #fee2e2; | |
| color: #dc2626; | |
| } | |
| .action-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--gray); | |
| transition: color 0.3s; | |
| } | |
| .action-btn:hover { | |
| color: var(--primary); | |
| } | |
| /* AI Assistant */ | |
| .ai-assistant { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| z-index: 1000; | |
| } | |
| .ai-btn { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: white; | |
| border: none; | |
| box-shadow: 0 5px 20px rgba(99, 102, 241, 0.5); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| transition: all 0.3s; | |
| } | |
| .ai-btn:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6); | |
| } | |
| .ai-panel { | |
| position: absolute; | |
| bottom: 80px; | |
| right: 0; | |
| width: 350px; | |
| background-color: var(--ai-panel-bg); | |
| border-radius: 10px; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); | |
| padding: 20px; | |
| display: none; | |
| animation: slideUp 0.3s; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .ai-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .ai-title { | |
| font-weight: 600; | |
| } | |
| .ai-close { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--gray); | |
| font-size: 1.2rem; | |
| } | |
| .ai-message { | |
| background-color: var(--ai-message-bg); | |
| padding: 10px 15px; | |
| border-radius: 8px; | |
| margin-bottom: 15px; | |
| font-size: 0.9rem; | |
| } | |
| .ai-input { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid var(--input-border); | |
| border-radius: 6px; | |
| resize: none; | |
| margin-bottom: 10px; | |
| font-family: inherit; | |
| background-color: var(--input-bg); | |
| color: var(--text-color); | |
| } | |
| .ai-send { | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| transition: background-color 0.3s; | |
| } | |
| .ai-send:hover { | |
| background-color: var(--primary-dark); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 992px) { | |
| .dashboard { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| display: none; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Animation classes */ | |
| .fade-in { | |
| animation: fadeIn 0.5s; | |
| } | |
| .slide-in-left { | |
| animation: slideInLeft 0.5s; | |
| } | |
| @keyframes slideInLeft { | |
| from { transform: translateX(-20px); opacity: 0; } | |
| to { transform: translateX(0); opacity: 1; } | |
| } | |
| /* Pulse animation */ | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="light-mode"> | |
| <header> | |
| <div class="container"> | |
| <nav class="navbar"> | |
| <div class="logo"> | |
| <i class="fas fa-database logo-icon"></i> | |
| <span>DataNova</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#" class="active">Dashboard</a> | |
| <a href="#">Analytics</a> | |
| <a href="#">Data Sources</a> | |
| <a href="#">Reports</a> | |
| <a href="#">Settings</a> | |
| </div> | |
| <div class="user-area"> | |
| <button class="theme-toggle" id="themeToggle"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <button class="notification-btn"> | |
| <i class="far fa-bell"></i> | |
| <span class="notification-badge">3</span> | |
| </button> | |
| <div class="user-avatar pulse">JD</div> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <div class="dashboard"> | |
| <aside class="sidebar"> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">Main</div> | |
| <ul class="sidebar-menu"> | |
| <li><a href="#" class="active"><i class="fas fa-home"></i> Dashboard</a></li> | |
| <li><a href="#"><i class="fas fa-chart-line"></i> Analytics</a></li> | |
| <li><a href="#"><i class="fas fa-database"></i> Data Warehouse</a></li> | |
| <li><a href="#"><i class="fas fa-file-alt"></i> Reports</a></li> | |
| </ul> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">Tools</div> | |
| <ul class="sidebar-menu"> | |
| <li><a href="#"><i class="fas fa-robot"></i> AI Assistant</a></li> | |
| <li><a href="#"><i class="fas fa-chart-pie"></i> Visualizations</a></li> | |
| <li><a href="#"><i class="fas fa-project-diagram"></i> Data Pipeline</a></li> | |
| <li><a href="#"><i class="fas fa-brain"></i> Machine Learning</a></li> | |
| </ul> | |
| </div> | |
| <div class="sidebar-section"> | |
| <div class="sidebar-title">Settings</div> | |
| <ul class="sidebar-menu"> | |
| <li><a href="#"><i class="fas fa-user-cog"></i> Profile</a></li> | |
| <li><a href="#"><i class="fas fa-cog"></i> Preferences</a></li> | |
| <li><a href="#"><i class="fas fa-users"></i> Team</a></li> | |
| <li><a href="#"><i class="fas fa-question-circle"></i> Help</a></li> | |
| </ul> | |
| </div> | |
| </aside> | |
| <main class="main-content"> | |
| <div class="welcome-banner fade-in"> | |
| <div class="welcome-text"> | |
| <h2>Welcome back, John!</h2> | |
| <p>Here's what's happening with your data today.</p> | |
| </div> | |
| <button class="upgrade-btn"> | |
| <i class="fas fa-rocket"></i> Upgrade Plan | |
| </button> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card slide-in-left" style="animation-delay: 0.1s;"> | |
| <div class="stat-card-header"> | |
| <div> | |
| <div class="stat-value">1,248</div> | |
| <div class="stat-title">Total Data Sources</div> | |
| </div> | |
| <div class="stat-icon primary"> | |
| <i class="fas fa-database"></i> | |
| </div> | |
| </div> | |
| <div class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> 12.5% from last month | |
| </div> | |
| </div> | |
| <div class="stat-card slide-in-left" style="animation-delay: 0.2s;"> | |
| <div class="stat-card-header"> | |
| <div> | |
| <div class="stat-value">824</div> | |
| <div class="stat-title">Processed Datasets</div> | |
| </div> | |
| <div class="stat-icon secondary"> | |
| <i class="fas fa-chart-bar"></i> | |
| </div> | |
| </div> | |
| <div class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> 8.3% from last month | |
| </div> | |
| </div> | |
| <div class="stat-card slide-in-left" style="animation-delay: 0.3s;"> | |
| <div class="stat-card-header"> | |
| <div> | |
| <div class="stat-value">356 TB</div> | |
| <div class="stat-title">Total Storage</div> | |
| </div> | |
| <div class="stat-icon warning"> | |
| <i class="fas fa-hdd"></i> | |
| </div> | |
| </div> | |
| <div class="stat-change negative"> | |
| <i class="fas fa-arrow-down"></i> 15.2% remaining | |
| </div> | |
| </div> | |
| <div class="stat-card slide-in-left" style="animation-delay: 0.4s;"> | |
| <div class="stat-card-header"> | |
| <div> | |
| <div class="stat-value">98.7%</div> | |
| <div class="stat-title">System Health</div> | |
| </div> | |
| <div class="stat-icon primary"> | |
| <i class="fas fa-heartbeat"></i> | |
| </div> | |
| </div> | |
| <div class="stat-change positive"> | |
| <i class="fas fa-arrow-up"></i> All systems operational | |
| </div> | |
| </div> | |
| </div> | |
| <div class="charts-section"> | |
| <div class="chart-card"> | |
| <div class="chart-header"> | |
| <h3 class="chart-title">Data Volume Overview</h3> | |
| <div class="chart-actions"> | |
| <button class="chart-btn"><i class="fas fa-calendar"></i> Period</button> | |
| <button class="chart-btn"><i class="fas fa-ellipsis-v"></i> More</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="volumeChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="chart-header"> | |
| <h3 class="chart-title">Data Source Types</h3> | |
| <div class="chart-actions"> | |
| <button class="chart-btn"><i class="fas fa-filter"></i> Filter</button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="typesChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tables-section"> | |
| <div class="table-card"> | |
| <h3>Recent Data Ingestions</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Source</th> | |
| <th>Type</th> | |
| <th>Size</th> | |
| <th>Status</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Sales Q3 2023</td> | |
| <td>CSV</td> | |
| <td>2.4 GB</td> | |
| <td><span class="status-badge status-active">Processed</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-eye"></i></button> | |
| <button class="action-btn"><i class="fas fa-download"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>Customer Feedback</td> | |
| <td>JSON</td> | |
| <td>1.1 GB</td> | |
| <td><span class="status-badge status-active">Processed</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-eye"></i></button> | |
| <button class="action-btn"><i class="fas fa-download"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>Web Analytics</td> | |
| <td>Parquet</td> | |
| <td>5.7 GB</td> | |
| <td><span class="status-badge status-pending">Processing</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-eye"></i></button> | |
| <button class="action-btn"><i class="fas fa-download"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>IoT Sensor Data</td> | |
| <td>Avro</td> | |
| <td>15.3 GB</td> | |
| <td><span class="status-badge status-inactive">Failed</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-redo"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>Social Media</td> | |
| <td>JSON</td> | |
| <td>8.2 GB</td> | |
| <td><span class="status-badge status-active">Processed</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-eye"></i></button> | |
| <button class="action-btn"><i class="fas fa-download"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="table-card"> | |
| <h3>Upcoming Tasks</h3> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Task</th> | |
| <th>Due Date</th> | |
| <th>Priority</th> | |
| <th>Status</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Data quality check</td> | |
| <td>Today</td> | |
| <td><i class="fas fa-exclamation-circle" style="color: var(--danger);"></i></td> | |
| <td><span class="status-badge status-pending">Pending</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-check"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>ML model retraining</td> | |
| <td Tomorrow</td> | |
| <td><i class="fas fa-exclamation-triangle" style="color: var(--warning);"></i></td> | |
| <td><span class="status-badge status-pending">Scheduled</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-clock"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>Backup verification</td> | |
| <td>Oct 15</td> | |
| <td><i class="fas fa-info-circle" style="color: var(--primary);"></i></td> | |
| <td><span class="status-badge status-pending">Scheduled</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-clock"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>Data governance audit</td> | |
| <td>Oct 20</td> | |
| <td><i class="fas fa-exclamation-triangle" style="color: var(--warning);"></i></td> | |
| <td><span class="status-badge status-pending">Not started</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-calendar-plus"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>New data source integration</td> | |
| <td>Oct 25</td> | |
| <td><i class="fas fa-info-circle" style="color: var(--primary);"></i></td> | |
| <td><span class="status-badge status-pending">Pending</span></td> | |
| <td> | |
| <button class="action-btn"><i class="fas fa-clock"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="ai-assistant"> | |
| <button class="ai-btn" id="aiToggle"> | |
| <i class="fas fa-robot"></i> | |
| </button> | |
| <div class="ai-panel" id="aiPanel"> | |
| <div class="ai-header"> | |
| <h3 class="ai-title">DataNova AI Assistant</h3> | |
| <button class="ai-close" id="aiClose"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="ai-message"> | |
| Hi there! I'm Nova, your AI assistant. How can I help you with your data today? | |
| </div> | |
| <textarea class="ai-input" placeholder="Ask me anything about your data..."></textarea> | |
| <button class="ai-send"> | |
| <i class="fas fa-paper-plane"></i> Send | |
| </button> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Volume Chart | |
| const volumeCtx = document.getElementById('volumeChart').getContext('2d'); | |
| const volumeChart = new Chart(volumeCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], | |
| datasets: [{ | |
| label: 'Data Volume (TB)', | |
| data: [120, 150, 180, 210, 240, 270, 300, 330, 360, 390], | |
| borderColor: '#6366f1', | |
| backgroundColor: 'rgba(99, 102, 241, 0.1)', | |
| tension: 0.4, | |
| fill: true, | |
| borderWidth: 2 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| grid: { | |
| color: function(context) { | |
| return getComputedStyle(document.body).getPropertyValue('--chart-grid'); | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| color: function(context) { | |
| return getComputedStyle(document.body).getPropertyValue('--chart-grid'); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Types Chart | |
| const typesCtx = document.getElementById('typesChart').getContext('2d'); | |
| const typesChart = new Chart(typesCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['CSV', 'JSON', 'Database', 'API', 'Others'], | |
| datasets: [{ | |
| data: [35, 25, 20, 15, 5], | |
| backgroundColor: [ | |
| '#6366f1', | |
| '#10b981', | |
| '#f59e0b', | |
| '#ef4444', | |
| '#94a3b8' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| } | |
| } | |
| } | |
| }); | |
| // AI Assistant Toggle | |
| const aiToggle = document.getElementById('aiToggle'); | |
| const aiPanel = document.getElementById('aiPanel'); | |
| const aiClose = document.getElementById('aiClose'); | |
| aiToggle.addEventListener('click', function() { | |
| aiPanel.style.display = aiPanel.style.display === 'block' ? 'none' : 'block'; | |
| }); | |
| aiClose.addEventListener('click', function() { | |
| aiPanel.style.display = 'none'; | |
| }); | |
| // Add animation to stat cards on scroll | |
| const statCards = document.querySelectorAll('.stat-card'); | |
| function checkScroll() { | |
| statCards.forEach(card => { | |
| const cardTop = card.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (cardTop < windowHeight - 100) { | |
| card.style.opacity = 1; | |
| card.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', checkScroll); | |
| checkScroll(); // Initial check | |
| // Theme toggle functionality | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const body = document.body; | |
| let isDarkMode = false; | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark') { | |
| enableDarkMode(); | |
| } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | |
| enableDarkMode(); | |
| } | |
| themeToggle.addEventListener('click', () => { | |
| isDarkMode ? disableDarkMode() : enableDarkMode(); | |
| }); | |
| function enableDarkMode() { | |
| body.classList.add('dark-mode'); | |
| themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; | |
| localStorage.setItem('theme', 'dark'); | |
| isDarkMode = true; | |
| // Update charts for dark mode | |
| updateChartsForTheme(true); | |
| } | |
| function disableDarkMode() { | |
| body.classList.remove('dark-mode'); | |
| themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; | |
| localStorage.setItem('theme', 'light'); | |
| isDarkMode = false; | |
| // Update charts for light mode | |
| updateChartsForTheme(false); | |
| } | |
| function updateChartsForTheme(isDark) { | |
| // Update line chart | |
| volumeChart.options.scales.x.grid.color = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; | |
| volumeChart.options.scales.y.grid.color = isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'; | |
| volumeChart.update(); | |
| } | |
| // Listen for system theme changes | |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { | |
| const newColorScheme = event.matches ? "dark" : "light"; | |
| if (newColorScheme === 'dark') { | |
| enableDarkMode(); | |
| } else { | |
| disableDarkMode(); | |
| } | |
| }); | |
| }); | |
| // Add interactive elements | |
| const statCards = document.querySelectorAll('.stat-card'); | |
| statCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| this.classList.toggle('highlight'); | |
| }); | |
| }); | |
| // Mock data for demonstration | |
| function updateStats() { | |
| const statValues = document.querySelectorAll('.stat-value'); | |
| // Simulate data changes | |
| setInterval(() => { | |
| statValues[0].textContent = (1248 + Math.floor(Math.random() * 20)).toString(); | |
| statValues[1].textContent = (824 + Math.floor(Math.random() * 15)).toString(); | |
| statValues[3].textContent = (98.7 + Math.random()).toFixed(1) + '%'; | |
| }, 5000); | |
| } | |
| updateStats(); | |
| </script> | |
| <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> | |
| </html> |