| <!DOCTYPE html> |
| <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); |
| |
| |
| --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-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 { |
| 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 { |
| display: grid; |
| grid-template-columns: 250px 1fr; |
| gap: 30px; |
| padding: 30px 0; |
| } |
| |
| |
| .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 { |
| display: flex; |
| flex-direction: column; |
| gap: 30px; |
| } |
| |
| |
| .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 { |
| 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 { |
| 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%; |
| } |
| |
| |
| .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 { |
| 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); |
| } |
| |
| |
| @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; |
| } |
| } |
| |
| |
| .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 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> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| 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'); |
| } |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| 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', |
| } |
| } |
| } |
| }); |
| |
| |
| 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'; |
| }); |
| |
| |
| 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(); |
| |
| |
| const themeToggle = document.getElementById('themeToggle'); |
| const body = document.body; |
| let isDarkMode = false; |
| |
| |
| 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; |
| |
| |
| updateChartsForTheme(true); |
| } |
| |
| function disableDarkMode() { |
| body.classList.remove('dark-mode'); |
| themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; |
| localStorage.setItem('theme', 'light'); |
| isDarkMode = false; |
| |
| |
| updateChartsForTheme(false); |
| } |
| |
| function updateChartsForTheme(isDark) { |
| |
| 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(); |
| } |
| |
| |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { |
| const newColorScheme = event.matches ? "dark" : "light"; |
| if (newColorScheme === 'dark') { |
| enableDarkMode(); |
| } else { |
| disableDarkMode(); |
| } |
| }); |
| }); |
| |
| |
| const statCards = document.querySelectorAll('.stat-card'); |
| statCards.forEach(card => { |
| card.addEventListener('click', function() { |
| this.classList.toggle('highlight'); |
| }); |
| }); |
| |
| |
| function updateStats() { |
| const statValues = document.querySelectorAll('.stat-value'); |
| |
| |
| 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> |
