|
|
<!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> |
