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