|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Modern 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> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6366f1', |
|
|
secondary: '#8b5cf6', |
|
|
dark: '#1e293b', |
|
|
light: '#f8fafc' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background: linear-gradient(135deg, #f0f4ff 0%, #f8fafc 100%); |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
|
|
|
.card: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); |
|
|
} |
|
|
|
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
.notification-dot { |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
right: -5px; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background-color: #ef4444; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
.grid-layout { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.grid-layout { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
<div class="flex min-h-screen"> |
|
|
|
|
|
<div class="sidebar bg-gray-800 w-64 min-h-screen shadow-lg hidden md:block"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-chart-pie text-white text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-xl font-bold ml-3 text-gray-800">Dashboard<span class="text-primary">Pro</span></h1> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="mt-8 px-4"> |
|
|
<a href="#" class="flex items-center p-3 text-primary bg-indigo-50 rounded-lg mb-2"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-2"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span>Analytics</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-2"> |
|
|
<i class="fas fa-users mr-3"></i> |
|
|
<span>Customers</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-2"> |
|
|
<i class="fas fa-shopping-cart mr-3"></i> |
|
|
<span>Orders</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-2"> |
|
|
<i class="fas fa-box mr-3"></i> |
|
|
<span>Products</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center p-3 text-gray-600 hover:bg-gray-100 rounded-lg mb-2"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="absolute bottom-0 w-64 p-4 border-t border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://ui-avatars.com/api/?name=John+Doe&background=6366f1&color=fff" alt="User" class="w-10 h-10 rounded-full"> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-800">John Doe</p> |
|
|
<p class="text-xs text-gray-500">Admin</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
|
|
|
<div class="bg-gray-800 shadow-sm"> |
|
|
<div class="flex justify-between items-center p-4"> |
|
|
<div class="flex items-center"> |
|
|
<button class="md:hidden mr-3 text-gray-600"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold text-gray-800">Dashboard</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="relative mr-4"> |
|
|
<input type="text" placeholder="Search..." class="bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-500"></i> |
|
|
</div> |
|
|
|
|
|
<div class="relative mr-4"> |
|
|
<button class="text-gray-600"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="notification-dot"></span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<img src="https://ui-avatars.com/api/?name=John+Doe&background=6366f1&color=fff" alt="User" class="w-10 h-10 rounded-full"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
|
|
|
|
|
|
<div class="card bg-gray-800 rounded-xl shadow-md p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Orders</h2> |
|
|
<button class="bg-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-plus mr-2"></i> New Order |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="text-left text-gray-500 text-sm border-b"> |
|
|
<th class="pb-3">Order ID</th> |
|
|
<th class="pb-3">Customer</th> |
|
|
<th class="pb-3">Date</th> |
|
|
<th class="pb-3">Amount</th> |
|
|
<th class="pb-3">Status</th> |
|
|
<th class="pb-3">Action</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b hover:bg-gray-50"> |
|
|
<td class="py-4">#32145</td> |
|
|
<td class="py-4">John Smith</td> |
|
|
<td class="py-4">Aug 15, 2023</td> |
|
|
<td class="py-4">$245.00</td> |
|
|
<td class="py-4"> |
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Completed</span> |
|
|
</td> |
|
|
<td class="py-4"> |
|
|
<button class="text-gray-500 hover:text-primary"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="border-b hover:bg-gray-50"> |
|
|
<td class="py-4">#32146</td> |
|
|
<td class="py-4">Sarah Johnson</td> |
|
|
<td class="py-4">Aug 15, 2023</td> |
|
|
<td class="py-4">$89.50</td> |
|
|
<td class="py-4"> |
|
|
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Pending</span> |
|
|
</td> |
|
|
<td class="py-4"> |
|
|
<button class="text-gray-500 hover:text-primary"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="border-b hover:bg-gray-50"> |
|
|
<td class="py-4">#32147</td> |
|
|
<td class="py-4">Michael Brown</td> |
|
|
<td class="py-4">Aug 14, 2023</td> |
|
|
<td class="py-4">$142.75</td> |
|
|
<td class="py-4"> |
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Completed</span> |
|
|
</td> |
|
|
<td class="py-4"> |
|
|
<button class="text-gray-500 hover:text-primary"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="border-b hover:bg-gray-50"> |
|
|
<td class="py-4">#32148</td> |
|
|
<td class="py-4">Emily Davis</td> |
|
|
<td class="py-4">Aug 14, 2023</td> |
|
|
<td class="py-4">$325.99</td> |
|
|
<td class="py-4"> |
|
|
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs">Cancelled</span> |
|
|
</td> |
|
|
<td class="py-4"> |
|
|
<button class="text-gray-500 hover:text-primary"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="py-4">#32149</td> |
|
|
<td class="py-4">David Wilson</td> |
|
|
<td class="py-4">Aug 13, 2023</td> |
|
|
<td class="py-4">$78.30</td> |
|
|
<td class="py-4"> |
|
|
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Shipped</span> |
|
|
</td> |
|
|
<td class="py-4"> |
|
|
<button class="text-gray-500 hover:text-primary"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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=rockson8/kucnocny" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
