| <!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 { |
| height: 250px; |
| } |
| @media (max-width: 768px) { |
| .sidebar { |
| transform: translateX(-100%); |
| position: absolute; |
| z-index: 10; |
| } |
| .sidebar.active { |
| transform: translateX(0); |
| } |
| .mobile-menu-btn { |
| display: block; |
| } |
| } |
| </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 border-b border-gray-200"> |
| <h1 class="text-2xl font-bold text-indigo-600">DashboardPro</h1> |
| <p class="text-gray-500 text-sm">Admin Panel</p> |
| </div> |
| <nav class="p-4"> |
| <div class="mb-6"> |
| <p class="text-xs uppercase text-gray-500 font-semibold mb-3">Main</p> |
| <a href="#" class="flex items-center py-2 px-3 rounded-lg bg-indigo-50 text-indigo-600 mb-2"> |
| <i class="fas fa-tachometer-alt mr-3"></i> |
| Dashboard |
| </a> |
| <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mb-2"> |
| <i class="fas fa-chart-line mr-3"></i> |
| Analytics |
| </a> |
| <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mb-2"> |
| <i class="fas fa-shopping-cart mr-3"></i> |
| Orders |
| </a> |
| </div> |
| <div class="mb-6"> |
| <p class="text-xs uppercase text-gray-500 font-semibold mb-3">Management</p> |
| <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mb-2"> |
| <i class="fas fa-users mr-3"></i> |
| Users |
| </a> |
| <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mb-2"> |
| <i class="fas fa-box-open mr-3"></i> |
| Products |
| </a> |
| <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mb-2"> |
| <i class="fas fa-tags mr-3"></i> |
| Categories |
| </a> |
| </div> |
| <div> |
| <p class="text-xs uppercase text-gray-500 font-semibold mb-3">Settings</p> |
| <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100 mb-2"> |
| <i class="fas fa-cog mr-3"></i> |
| Settings |
| </a> |
| <a href="#" class="flex items-center py-2 px-3 rounded-lg text-gray-700 hover:bg-gray-100"> |
| <i class="fas fa-sign-out-alt mr-3"></i> |
| Logout |
| </a> |
| </div> |
| </nav> |
| </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"> |
| <button class="mobile-menu-btn md:hidden text-gray-600 focus:outline-none"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <div class="flex items-center space-x-4"> |
| <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-200 focus:border-indigo-300"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| <div class="relative"> |
| <button class="text-gray-600 focus:outline-none"> |
| <i class="fas fa-bell text-xl"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| </div> |
| <div class="flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="h-8 w-8 rounded-full object-cover"> |
| <span class="ml-2 text-gray-700">Sarah Smith</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
| <div class="mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Dashboard Overview</h2> |
| <p class="text-gray-600">Welcome back! Here's what's happening with your business today.</p> |
| </div> |
|
|
| |
| <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-sm 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 text-gray-800">$24,780</h3> |
| <p class="text-green-500 text-sm mt-1"><i class="fas fa-arrow-up mr-1"></i> 12.5% from last month</p> |
| </div> |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> |
| <i class="fas fa-dollar-sign text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 text-sm">New Orders</p> |
| <h3 class="text-2xl font-bold text-gray-800">1,245</h3> |
| <p class="text-green-500 text-sm mt-1"><i class="fas fa-arrow-up mr-1"></i> 8.2% from last month</p> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
| <i class="fas fa-shopping-bag text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500 text-sm">Active Users</p> |
| <h3 class="text-2xl font-bold text-gray-800">8,542</h3> |
| <p class="text-red-500 text-sm mt-1"><i class="fas fa-arrow-down mr-1"></i> 3.7% from last month</p> |
| </div> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-users text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-sm 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 text-gray-800">3.42%</h3> |
| <p class="text-green-500 text-sm mt-1"><i class="fas fa-arrow-up mr-1"></i> 1.1% from last month</p> |
| </div> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <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="lg:col-span-2 bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> |
| <div class="flex items-center justify-between mb-6"> |
| <h3 class="text-lg font-semibold text-gray-800">Sales Overview</h3> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm rounded-full bg-indigo-100 text-indigo-600">Weekly</button> |
| <button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-600">Monthly</button> |
| <button class="px-3 py-1 text-sm rounded-full bg-gray-100 text-gray-600">Yearly</button> |
| </div> |
| </div> |
| <div class="chart-container"> |
| <canvas id="salesChart"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-6">Recent Activities</h3> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-indigo-100 text-indigo-600 mr-3"> |
| <i class="fas fa-shopping-cart"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-800">New order #1234 received</p> |
| <p class="text-xs text-gray-500">2 minutes ago</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> |
| <i class="fas fa-user-plus"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-800">New user registered</p> |
| <p class="text-xs text-gray-500">15 minutes ago</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> |
| <i class="fas fa-box-open"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-800">Product #2345 out of stock</p> |
| <p class="text-xs text-gray-500">1 hour ago</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3"> |
| <i class="fas fa-truck"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-800">Order #1234 shipped</p> |
| <p class="text-xs text-gray-500">3 hours ago</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3"> |
| <i class="fas fa-star"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-800">New review received</p> |
| <p class="text-xs text-gray-500">5 hours ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden card-hover transition-all duration-300"> |
| <div class="p-6"> |
| <div class="flex items-center justify-between mb-6"> |
| <h3 class="text-lg font-semibold text-gray-800">Recent Orders</h3> |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">View All</button> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</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">#ORD-0001</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Doe</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> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-indigo-600 hover:text-indigo-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-0002</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jane Smith</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-yellow-100 text-yellow-800">Processing</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
| <button class="text-indigo-600 hover:text-indigo-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#ORD-0003</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Robert Johnson</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">$320.75</td> |
| <td class=" |
| </html> |
