|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Modern Dashboard UI</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"> |
|
|
<style> |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
transform: translateX(-100%); |
|
|
position: absolute; |
|
|
z-index: 10; |
|
|
} |
|
|
.sidebar.active { |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-white w-64 flex-shrink-0 shadow-lg"> |
|
|
<div class="p-4 gradient-bg text-white"> |
|
|
<h1 class="text-2xl font-bold">DashboardPro</h1> |
|
|
<p class="text-sm opacity-80">Welcome back, Admin</p> |
|
|
</div> |
|
|
<nav class="mt-6"> |
|
|
<div class="px-4"> |
|
|
<div class="py-2 px-3 flex items-center rounded-lg bg-indigo-100 text-indigo-700"> |
|
|
<i class="fas fa-tachometer-alt mr-3"></i> |
|
|
<span>Dashboard</span> |
|
|
</div> |
|
|
<div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1"> |
|
|
<i class="fas fa-chart-line mr-3 text-gray-500"></i> |
|
|
<span>Analytics</span> |
|
|
</div> |
|
|
<div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1"> |
|
|
<i class="fas fa-users mr-3 text-gray-500"></i> |
|
|
<span>Users</span> |
|
|
</div> |
|
|
<div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1"> |
|
|
<i class="fas fa-cog mr-3 text-gray-500"></i> |
|
|
<span>Settings</span> |
|
|
</div> |
|
|
<div class="py-2 px-3 flex items-center rounded-lg hover:bg-gray-100 mt-1"> |
|
|
<i class="fas fa-envelope mr-3 text-gray-500"></i> |
|
|
<span>Messages</span> |
|
|
<span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">5</span> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
<div class="absolute bottom-0 w-full p-4 border-t"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium">Sarah Johnson</p> |
|
|
<p class="text-xs text-gray-500">Admin</p> |
|
|
</div> |
|
|
<button class="ml-auto text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-sign-out-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm z-10"> |
|
|
<div class="flex items-center justify-between px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<button id="sidebarToggle" class="md:hidden mr-4 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Dashboard Overview</h2> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Total Revenue</p> |
|
|
<h3 class="text-2xl font-bold mt-1">$24,780</h3> |
|
|
<p class="text-green-500 text-sm mt-2"><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 text-indigo-700"> |
|
|
<i class="fas fa-dollar-sign text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">New Users</p> |
|
|
<h3 class="text-2xl font-bold mt-1">1,254</h3> |
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 8.2% from last month</p> |
|
|
</div> |
|
|
<div class="bg-blue-100 p-3 rounded-full text-blue-700"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Active Projects</p> |
|
|
<h3 class="text-2xl font-bold mt-1">42</h3> |
|
|
<p class="text-red-500 text-sm mt-2"><i class="fas fa-arrow-down mr-1"></i> 3.1% from last month</p> |
|
|
</div> |
|
|
<div class="bg-purple-100 p-3 rounded-full text-purple-700"> |
|
|
<i class="fas fa-project-diagram text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Conversion Rate</p> |
|
|
<h3 class="text-2xl font-bold mt-1">3.6%</h3> |
|
|
<p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 1.8% from last month</p> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full text-green-700"> |
|
|
<i class="fas fa-percentage text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-semibold">Revenue Overview</h3> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-sm bg-indigo-100 text-indigo-700 rounded-full">Monthly</button> |
|
|
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full">Weekly</button> |
|
|
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded-full">Daily</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="mainChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Traffic Sources</h3> |
|
|
<div class="chart-container"> |
|
|
<canvas id="pieChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Recent Activity</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-2 rounded-full text-indigo-700 mr-3"> |
|
|
<i class="fas fa-user-plus"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New user registered</p> |
|
|
<p class="text-sm text-gray-500">John Doe just signed up as a new member</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 minutes ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-green-100 p-2 rounded-full text-green-700 mr-3"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New order received</p> |
|
|
<p class="text-sm text-gray-500">Order #3245 for $125.00</p> |
|
|
<p class="text-xs text-gray-400 mt-1">25 minutes ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-blue-100 p-2 rounded-full text-blue-700 mr-3"> |
|
|
<i class="fas fa-ticket-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New support ticket</p> |
|
|
<p class="text-sm text-gray-500">Ticket #4567 from Sarah Miller</p> |
|
|
<p class="text-xs text-gray-400 mt-1">1 hour ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-100 p-2 rounded-full text-purple-700 mr-3"> |
|
|
<i class="fas fa-credit-card"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Payment processed</p> |
|
|
<p class="text-sm text-gray-500">Payment of $45.00 from Robert Johnson</p> |
|
|
<p class="text-xs text-gray-400 mt-1">3 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h3 class="text-lg font-semibold">Active Projects</h3> |
|
|
<button class="text-indigo-600 hover:text-indigo-800">View All</button> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="border-b pb-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="font-medium">Website Redesign</h4> |
|
|
<span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">In Progress</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Complete redesign of company website with modern UI/UX</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Team member"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team member"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Team member"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">Due in 5 days</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-b pb-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="font-medium">Mobile App Development</h4> |
|
|
<span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">On Track</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Development of cross-platform mobile application</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Team member"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Team member"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">Due in 12 days</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="font-medium">Marketing Campaign</h4> |
|
|
<span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Planning</span> |
|
|
</div> |
|
|
<p class="text-sm text-gray-600 mb-3">Q3 marketing campaign for new product launch</p> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/56.jpg" alt="Team member"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/67.jpg" alt="Team member"> |
|
|
<img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/78.jpg" alt="Team member"> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">Due in 3 weeks</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
document.getElementById('sidebarToggle').addEventListener('click', function() { |
|
|
document.querySelector('.sidebar').classList.toggle('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const mainCtx = document.getElementById('mainChart').getContext('2d'); |
|
|
const mainChart = new Chart(mainCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
|
|
datasets: [{ |
|
|
label: 'Revenue', |
|
|
data: [6500, 5900, 8000, 8100, 8600, 9250, 10200], |
|
|
borderColor: '#667eea', |
|
|
backgroundColor: 'rgba(102, 126, 234, 0.1)', |
|
|
borderWidth: 2, |
|
|
fill: true, |
|
|
tension: 0.4 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: false, |
|
|
grid: { |
|
|
drawBorder: false |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const pieCtx = document.getElementById('pieChart').getContext('2d'); |
|
|
const pieChart = new Chart(pieCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['Direct', 'Organic', 'Referral', 'Social'], |
|
|
datasets: [{ |
|
|
data: [35, 25, 20, 20], |
|
|
backgroundColor: [ |
|
|
'#667eea', |
|
|
'#4c51bf', |
|
|
'#7f9cf5', |
|
|
'#a3bffa' |
|
|
], |
|
|
borderWidth: 0 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
cutout: '70%', |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'bottom', |
|
|
labels: { |
|
|
boxWidth: 12, |
|
|
padding: 20 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const cards = document.querySelectorAll('.card-hover'); |
|
|
cards.forEach(card => { |
|
|
card.addEventListener('mouseenter', () => { |
|
|
card.classList.add('shadow-lg'); |
|
|
}); |
|
|
card.addEventListener('mouseleave', () => { |
|
|
card.classList.remove('shadow-lg'); |
|
|
}); |
|
|
}); |
|
|
</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=agentpx/dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
