|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Data Analytics Dashboard</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<style> |
|
.sidebar { |
|
transition: all 0.3s ease; |
|
} |
|
.sidebar.collapsed { |
|
width: 70px; |
|
} |
|
.sidebar.collapsed .nav-text { |
|
display: none; |
|
} |
|
.main-content { |
|
transition: all 0.3s ease; |
|
} |
|
.card-hover:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
} |
|
.chart-container { |
|
position: relative; |
|
height: 300px; |
|
} |
|
.data-table { |
|
max-height: 400px; |
|
overflow-y: auto; |
|
} |
|
.data-table::-webkit-scrollbar { |
|
width: 6px; |
|
} |
|
.data-table::-webkit-scrollbar-thumb { |
|
background-color: rgba(0,0,0,0.2); |
|
border-radius: 3px; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50"> |
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex flex-col"> |
|
<div class="p-4 flex items-center justify-between border-b border-indigo-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-chart-line text-2xl mr-3"></i> |
|
<span class="nav-text text-xl font-bold">AnalyticsPro</span> |
|
</div> |
|
<button id="toggleSidebar" class="text-white focus:outline-none"> |
|
<i class="fas fa-bars"></i> |
|
</button> |
|
</div> |
|
<div class="flex-1 overflow-y-auto"> |
|
<nav class="p-4"> |
|
<div class="mb-6"> |
|
<p class="nav-text text-indigo-300 uppercase text-xs font-semibold mb-2">Dashboard</p> |
|
<a href="#" class="flex items-center py-2 px-3 rounded-lg bg-indigo-700 text-white mb-1"> |
|
<i class="fas fa-home mr-3"></i> |
|
<span class="nav-text">Overview</span> |
|
</a> |
|
<a href="#" class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-indigo-200 mb-1"> |
|
<i class="fas fa-chart-pie mr-3"></i> |
|
<span class="nav-text">Analytics</span> |
|
</a> |
|
<a href="#" class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-indigo-200"> |
|
<i class="fas fa-bell mr-3"></i> |
|
<span class="nav-text">Reports</span> |
|
</a> |
|
</div> |
|
<div class="mb-6"> |
|
<p class="nav-text text-indigo-300 uppercase text-xs font-semibold mb-2">Data Management</p> |
|
<a href="#" class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-indigo-200 mb-1"> |
|
<i class="fas fa-database mr-3"></i> |
|
<span class="nav-text">Data Sources</span> |
|
</a> |
|
<a href="#" class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-indigo-200 mb-1"> |
|
<i class="fas fa-table mr-3"></i> |
|
<span class="nav-text">Datasets</span> |
|
</a> |
|
<a href="#" class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-indigo-200"> |
|
<i class="fas fa-cogs mr-3"></i> |
|
<span class="nav-text">Integrations</span> |
|
</a> |
|
</div> |
|
<div> |
|
<p class="nav-text text-indigo-300 uppercase text-xs font-semibold mb-2">Settings</p> |
|
<a href="#" class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-indigo-200 mb-1"> |
|
<i class="fas fa-user mr-3"></i> |
|
<span class="nav-text">Profile</span> |
|
</a> |
|
<a href="#" class="flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-indigo-200"> |
|
<i class="fas fa-cog mr-3"></i> |
|
<span class="nav-text">Settings</span> |
|
</a> |
|
</div> |
|
</nav> |
|
</div> |
|
<div class="p-4 border-t border-indigo-700"> |
|
<div class="flex items-center"> |
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> |
|
<div class="nav-text"> |
|
<p class="font-medium">Sarah Johnson</p> |
|
<p class="text-xs text-indigo-300">Admin</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="main-content flex-1 overflow-auto"> |
|
|
|
<header class="bg-white shadow-sm p-4 flex items-center justify-between"> |
|
<h1 class="text-2xl font-bold text-gray-800">Data Analytics Dashboard</h1> |
|
<div class="flex items-center space-x-4"> |
|
<div class="relative"> |
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
</div> |
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
<i class="fas fa-bell"></i> |
|
</button> |
|
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
<i class="fas fa-question-circle"></i> |
|
</button> |
|
</div> |
|
</header> |
|
|
|
|
|
<main class="p-6"> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
<div class="bg-white rounded-xl shadow-sm p-6 transition-all duration-300 card-hover"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-gray-500">Total Users</p> |
|
<h3 class="text-2xl font-bold mt-2">12,345</h3> |
|
<p class="text-green-500 text-sm mt-1 flex items-center"> |
|
<i class="fas fa-arrow-up mr-1"></i> 12.5% from last month |
|
</p> |
|
</div> |
|
<div class="bg-indigo-100 p-3 rounded-full"> |
|
<i class="fas fa-users text-indigo-600 text-xl"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-white rounded-xl shadow-sm p-6 transition-all duration-300 card-hover"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-gray-500">Revenue</p> |
|
<h3 class="text-2xl font-bold mt-2">$48,245</h3> |
|
<p class="text-green-500 text-sm mt-1 flex items-center"> |
|
<i class="fas fa-arrow-up mr-1"></i> 8.2% from last month |
|
</p> |
|
</div> |
|
<div class="bg-green-100 p-3 rounded-full"> |
|
<i class="fas fa-dollar-sign text-green-600 text-xl"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-white rounded-xl shadow-sm p-6 transition-all duration-300 card-hover"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-gray-500">Conversion Rate</p> |
|
<h3 class="text-2xl font-bold mt-2">3.42%</h3> |
|
<p class="text-red-500 text-sm mt-1 flex items-center"> |
|
<i class="fas fa-arrow-down mr-1"></i> 1.1% from last month |
|
</p> |
|
</div> |
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
<i class="fas fa-percentage text-purple-600 text-xl"></i> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-white rounded-xl shadow-sm p-6 transition-all duration-300 card-hover"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-gray-500">Avg. Session</p> |
|
<h3 class="text-2xl font-bold mt-2">4m 23s</h3> |
|
<p class="text-green-500 text-sm mt-1 flex items-center"> |
|
<i class="fas fa-arrow-up mr-1"></i> 15.8% from last month |
|
</p> |
|
</div> |
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
<i class="fas fa-clock text-blue-600 text-xl"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<h2 class="text-lg font-semibold text-gray-800">Revenue Overview</h2> |
|
<div class="flex space-x-2"> |
|
<button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full">Monthly</button> |
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Quarterly</button> |
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Yearly</button> |
|
</div> |
|
</div> |
|
<div class="chart-container"> |
|
<canvas id="revenueChart"></canvas> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<h2 class="text-lg font-semibold text-gray-800">User Acquisition</h2> |
|
<div class="flex space-x-2"> |
|
<button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full">Sources</button> |
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">Devices</button> |
|
</div> |
|
</div> |
|
<div class="chart-container"> |
|
<canvas id="acquisitionChart"></canvas> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-1"> |
|
<h2 class="text-lg font-semibold text-gray-800 mb-6">Traffic Sources</h2> |
|
<div class="chart-container"> |
|
<canvas id="trafficChart"></canvas> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 lg:col-span-2"> |
|
<div class="flex items-center justify-between mb-6"> |
|
<h2 class="text-lg font-semibold text-gray-800">Recent Transactions</h2> |
|
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
Export Data |
|
</button> |
|
</div> |
|
<div class="data-table"> |
|
<table class="min-w-full divide-y divide-gray-200"> |
|
<thead class="bg-gray-50"> |
|
<tr> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> |
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
</tr> |
|
</thead> |
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4567</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Smith</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$245.00</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4566</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$189.50</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4565</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Brown</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-14</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$320.75</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4564</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Emily Davis</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-13</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$175.20</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Failed</span> |
|
</td> |
|
</tr> |
|
<tr> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4563</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Robert Wilson</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-12</td> |
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$420.00</td> |
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
<h2 class="text-lg font-semibold text-gray-800 mb-6">Recent Activity</h2> |
|
<div class="space-y-4"> |
|
<div class="flex items-start"> |
|
<div class="bg-indigo-100 p-2 rounded-full mr-4"> |
|
<i class="fas fa-user-plus text-indigo-600"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium">New user registered</p> |
|
<p class="text-xs text-gray-500">Sarah Johnson created an account - 2 hours ago</p> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="bg-green-100 p-2 rounded-full mr-4"> |
|
<i class="fas fa-shopping-cart text-green-600"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium">New order placed</p> |
|
<p class="text-xs text-gray-500">Order #4578 for $189.50 - 4 hours ago</p> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="bg-blue-100 p-2 rounded-full mr-4"> |
|
<i class="fas fa-chart-line text-blue-600"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium">Monthly report generated</p> |
|
<p class="text-xs text-gray-500">May 2023 revenue report - 1 day ago</p> |
|
</div> |
|
</div> |
|
<div class="flex items-start"> |
|
<div class="bg-purple-100 p-2 rounded-full mr-4"> |
|
<i class="fas fa-bug text-purple-600"></i> |
|
</div> |
|
<div> |
|
<p class="text-sm font-medium">Bug fixed</p> |
|
<p class="text-xs text-gray-500">Resolved dashboard loading issue - 2 days ago</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
document.getElementById('toggleSidebar').addEventListener('click', function() { |
|
document.querySelector('.sidebar').classList.toggle('collapsed'); |
|
document.querySelector('.main-content').classList.toggle('lg:ml-64'); |
|
}); |
|
|
|
|
|
const revenueCtx = document.getElementById('revenueChart').getContext('2d'); |
|
const revenueChart = new Chart(revenueCtx, { |
|
type: 'line', |
|
data: { |
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
|
datasets: [{ |
|
label: 'Revenue', |
|
data: [12500, 19000, 17000, 22000, 25000, 28000, 30000], |
|
backgroundColor: 'rgba(79, 70, 229, 0.05)', |
|
borderColor: 'rgba(79, 70, 229, 1)', |
|
borderWidth: 2, |
|
tension: 0.3, |
|
fill: true |
|
}] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
plugins: { |
|
legend: { |
|
display: false |
|
} |
|
}, |
|
scales: { |
|
y: { |
|
beginAtZero: true, |
|
grid: { |
|
drawBorder: false |
|
} |
|
}, |
|
x: { |
|
grid: { |
|
display: false |
|
} |
|
} |
|
} |
|
} |
|
}); |
|
|
|
|
|
const acquisitionCtx = document.getElementById('acquisitionChart').getContext('2d'); |
|
const acquisitionChart = new Chart(acquisitionCtx, { |
|
type: 'bar', |
|
data: { |
|
labels: ['Direct', 'Organic', 'Referral', 'Social', 'Email'], |
|
datasets: [{ |
|
label: 'Users', |
|
data: [1200, 1900, 800, 1500, 700], |
|
backgroundColor: [ |
|
'rgba(79, 70, 229, 0.8)', |
|
'rgba(16, 185, 129, 0.8)', |
|
'rgba(245, 158, 11, 0.8)', |
|
'rgba(139, 92, 246, 0.8)', |
|
'rgba(59, 130, 246, 0.8)' |
|
], |
|
borderColor: [ |
|
'rgba(79, 70, 229, 1)', |
|
'rgba(16, 185, 129, 1)', |
|
'rgba(245, 158, 11, 1)', |
|
'rgba(139, 92, 246, 1)', |
|
'rgba(59, 130, 246, 1)' |
|
], |
|
borderWidth: 1 |
|
}] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
plugins: { |
|
legend: { |
|
display: false |
|
} |
|
}, |
|
scales: { |
|
y: { |
|
beginAtZero: true, |
|
grid: { |
|
drawBorder: false |
|
} |
|
}, |
|
x: { |
|
grid: { |
|
display: false |
|
} |
|
} |
|
} |
|
} |
|
}); |
|
|
|
|
|
const trafficCtx = document.getElementById('trafficChart').getContext('2d'); |
|
const trafficChart = new Chart(trafficCtx, { |
|
type: 'doughnut', |
|
data: { |
|
labels: ['Direct', 'Organic', 'Referral', 'Social'], |
|
datasets: [{ |
|
data: [35, 30, 20, 15], |
|
backgroundColor: [ |
|
'rgba(79, 70, 229, 0.8)', |
|
'rgba(16, 185, 129, 0.8)', |
|
'rgba(245, 158, 11, 0.8)', |
|
'rgba(139, 92, 246, 0.8)' |
|
], |
|
borderColor: [ |
|
'rgba(79, 70, 229, 1)', |
|
'rgba(16, 185, 129, 1)', |
|
'rgba(245, 158, 11, 1)', |
|
'rgba(139, 92, 246, 1)' |
|
], |
|
borderWidth: 1 |
|
}] |
|
}, |
|
options: { |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
plugins: { |
|
legend: { |
|
position: 'right', |
|
} |
|
}, |
|
cutout: '70%' |
|
} |
|
}); |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tidy/data" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
