<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Admin 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">
</head>
<body class="bg-gray-100 font-sans">
<div class="flex h-screen">
<!-- Sidebar -->
<div class="bg-gray-800 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out" id="sidebar">
<!-- Brand -->
<div class="text-white flex items-center space-x-2 px-4">
<i class="fas fa-tachometer-alt fa-2x"></i>
<span class="text-2xl font-extrabold">AdminPanel</span>
</div>
<!-- Navigation -->
<nav>
<a href="#" class="py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white flex items-center text-white bg-gray-700">
<i class="fas fa-home mr-2"></i>
Dashboard
</a>
<a href="#" class="py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white flex items-center text-gray-300">
<i class="fas fa-users mr-2"></i>
Users
</a>
<a href="#" class="py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white flex items-center text-gray-300">
<i class="fas fa-shopping-cart mr-2"></i>
Products
</a>
<a href="#" class="py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white flex items-center text-gray-300">
<i class="fas fa-chart-bar mr-2"></i>
Analytics
</a>
<a href="#" class="py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700 hover:text-white flex items-center text-gray-300">
<i class="fas fa-cog mr-2"></i>
Settings
</a>
</nav>
<!-- User Profile -->
<div class="border-t border-gray-700 pt-4 pb-2 px-4 absolute bottom-0 w-full">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">
JD
</div>
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col">
<!-- Header -->
<header class="flex justify-between items-center py-4 px-6 bg-white border-b-4 border-indigo-600">
<div class="flex items-center">
<button id="toggleSidebar" class="text-gray-500 focus:outline-none lg:hidden">
<i class="fas fa-bars fa-2x"></i>
</button>
<div class="relative mx-4 lg:mx-0">
<span class="absolute inset-y-0 left-0 pl-3 flex items-center">
<i class="text-gray-500 fa fa-search"></i>
</span>
<input class="form-input w-32 sm:w-64 rounded-md pl-10 pr-4 focus:border-indigo-600" type="text" placeholder="Search">
</div>
</div>
<div class="flex items-center">
<div class="relative">
<button class="text-gray-500 focus:outline-none mx-4">
<i class="fa-regular fa-bell fa-lg"></i>
</button>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</div>
<div class="relative">
<button class="relative block w-8 h-8 rounded-full overflow-hidden">
<img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Your avatar">
</button>
</div>
</div>
</header>
<!-- Page Content -->
<main class="flex-1 overflow-y-auto p-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 class="text-2xl font-semibold text-gray-900">Dashboard</h1>
<!-- Stats -->
<div class="mt-8 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<i class="fas fa-users text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Total Users</dt>
<dd>
<div class="text-lg font-medium text-gray-900">5,231</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-500 rounded-md p-3">
<i class="fas fa-shopping-cart text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Total Sales</dt>
<dd>
<div class="text-lg font-medium text-gray-900">$12,234</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- Card -->
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-red-500 rounded-md p-3">
<i class="fas fa-chart-line text-white"></i>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">Conversion Rate</dt>
<dd>
<div class="text-lg font-medium text-gray-900">3.28%</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<!-- Charts -->
<div class="mt-8">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<h2 class="text-lg font-medium text-gray-900">Monthly Revenue</h2>
<div class="mt-4 h-64 flex items-center justify-center border-2 border-dashed border-gray-300 rounded-lg">
<p class="text-gray-500">Revenue chart would be displayed here</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
// Toggle sidebar on mobile
document.getElementById('toggleSidebar').addEventListener('click', function() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('-translate-x-full');
});
</script>
</body>
</html>
