-
Notifications
You must be signed in to change notification settings - Fork 50
Design Examples (Raw Files)
Modestas Vaitkevičius edited this page May 26, 2025
·
1 revision
Full design examples:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Product - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
/* Custom file input */
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select files';
display: inline-block;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
outline: none;
white-space: nowrap;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.dark .custom-file-input::before {
background: #374151;
border-color: #4b5563;
color: #e5e7eb;
}
.custom-file-input:hover::before {
border-color: #9ca3af;
}
.custom-file-input:active::before {
background: #e5e7eb;
}
.dark .custom-file-input:active::before {
background: #4b5563;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
formSubmitted: false,
formData: {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
},
errors: {},
validateForm() {
this.errors = {};
if (!this.formData.name) this.errors.name = 'Product name is required';
if (!this.formData.category) this.errors.category = 'Category is required';
if (!this.formData.price) this.errors.price = 'Price is required';
else if (isNaN(this.formData.price) || this.formData.price <= 0) this.errors.price = 'Price must be a positive number';
if (!this.formData.stock) this.errors.stock = 'Stock quantity is required';
else if (isNaN(this.formData.stock) || parseInt(this.formData.stock) < 0) this.errors.stock = 'Stock must be a non-negative number';
if (!this.formData.description) this.errors.description = 'Description is required';
return Object.keys(this.errors).length === 0;
},
submitForm() {
if (this.validateForm()) {
// In a real application, you would submit the form data to the server here
console.log('Form data:', this.formData);
this.formSubmitted = true;
// Reset form after 3 seconds for demo purposes
setTimeout(() => {
this.formSubmitted = false;
this.formData = {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
};
}, 3000);
}
}
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="profile.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="login.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="index.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Products -->
<li x-data="{ open: true }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Products</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span>All Products</span>
</div>
</a>
<a href="create-product.html"
class="block px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span>Create Product</span>
</div>
</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
</svg>
<span>Categories</span>
</div>
</a>
</div>
</li>
<!-- Profile -->
<li>
<a href="profile.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Profile</span>
</a>
</li>
<!-- Settings -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Settings</span>
</a>
</li>
</ul>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center" x-show="sidebarOpen">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
<div class="p-6">
<!-- Success Message -->
<div x-show="formSubmitted" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="mb-6 bg-green-50 dark:bg-green-900 border-l-4 border-green-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500 dark:text-green-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-green-700 dark:text-green-200">Product created successfully!</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button @click="formSubmitted = false"
class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="p-6">
<!-- Breadcrumbs -->
<div class="mb-6 flex items-center text-sm">
<a href="index.html" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Buttons</span>
</div>
<!-- Page Title -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Buttons</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Various button styles and components for
your application</p>
</div>
<!-- Basic Buttons -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Basic Buttons</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Primary
</button>
<button
class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Secondary
</button>
<button
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
Success
</button>
<button
class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
Danger
</button>
<button
class="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors">
Warning
</button>
<button
class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">
Info
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Basic button styles with different colors for different actions.</p>
</div>
</div>
</div>
<!-- Outline Buttons -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Outline Buttons</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="px-4 py-2 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 dark:text-blue-400 dark:border-blue-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Primary
</button>
<button
class="px-4 py-2 border border-gray-600 text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:text-gray-400 dark:border-gray-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Secondary
</button>
<button
class="px-4 py-2 border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 dark:text-green-400 dark:border-green-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
Success
</button>
<button
class="px-4 py-2 border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
Danger
</button>
<button
class="px-4 py-2 border border-yellow-500 text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors">
Warning
</button>
<button
class="px-4 py-2 border border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 dark:text-indigo-400 dark:border-indigo-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">
Info
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Outline button styles with border and transparent background.</p>
</div>
</div>
</div>
<!-- Button Sizes -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button Sizes</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap items-center gap-4">
<button
class="px-2.5 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Extra Small
</button>
<button
class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Small
</button>
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Default
</button>
<button
class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-lg font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Large
</button>
<button
class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white text-xl font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Extra Large
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Different button sizes for various contexts.</p>
</div>
</div>
</div>
<!-- Icon Buttons -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Icon Buttons</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="p-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
<button
class="p-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<button
class="p-2 bg-green-600 hover:bg-green-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13l4 4L19 7" />
</svg>
</button>
<button
class="p-2 bg-red-600 hover:bg-red-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
<button
class="p-2 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 dark:text-blue-400 dark:border-blue-400 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
</button>
</div>
<div class="flex flex-wrap gap-4 mt-4">
<button
class="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
Add Item
</button>
<button
class="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
Save
</button>
<button
class="flex items-center px-4 py-2 border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Delete
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Icon-only buttons and buttons with icons and text.</p>
</div>
</div>
</div>
<!-- Button States -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button States</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Normal
</button>
<button
class="px-4 py-2 bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors cursor-default">
Hover/Active
</button>
<button
class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md focus:outline-none ring-2 ring-blue-500 ring-offset-2 transition-colors">
Focused
</button>
<button
class="px-4 py-2 bg-blue-400 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors opacity-50 cursor-not-allowed"
disabled>
Disabled
</button>
</div>
<div class="flex flex-wrap gap-4 mt-4">
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors flex items-center">
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4">
</circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
Loading...
</button>
<button
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13l4 4L19 7" />
</svg>
Completed
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Different button states: normal, hover/active, focused, disabled, and loading.
</p>
</div>
</div>
</div>
<!-- Button Groups -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button Groups</h3>
</div>
<div class="p-6 space-y-6">
<div class="inline-flex rounded-md shadow-sm" role="group">
<button
class="px-4 py-2 text-sm font-medium text-blue-700 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
Day
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
Week
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
Month
</button>
</div>
<div class="inline-flex rounded-md shadow-sm mt-4" role="group">
<button
class="p-2 text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h7" />
</svg>
</button>
<button
class="p-2 text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</button>
<button
class="p-2 text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Button groups for related actions or toggling between options.</p>
</div>
</div>
</div>
<!-- Social Buttons -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Social Buttons</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="flex items-center px-4 py-2 bg-[#1877F2] hover:bg-[#166FE5] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#1877F2] focus:ring-offset-2 transition-colors">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
<path fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd"></path>
</svg>
Facebook
</button>
<button
class="flex items-center px-4 py-2 bg-[#1DA1F2] hover:bg-[#1A91DA] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#1DA1F2] focus:ring-offset-2 transition-colors">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84">
</path>
</svg>
Twitter
</button>
<button
class="flex items-center px-4 py-2 bg-[#EA4335] hover:bg-[#D73925] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#EA4335] focus:ring-offset-2 transition-colors">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z">
</path>
</svg>
Google
</button>
<button
class="flex items-center px-4 py-2 bg-[#333333] hover:bg-[#2B2B2B] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#333333] focus:ring-offset-2 transition-colors">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"></path>
</svg>
GitHub
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Social media buttons for authentication or sharing.</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-auto py-4 text-center text-sm text-gray-500 dark:text-gray-400">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</main>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Components - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
activeTab: 'cards',
showModal: false,
showToast: false,
toastMessage: '',
toastType: 'success',
displayToast(message, type = 'success') {
this.toastMessage = message;
this.toastType = type;
this.showToast = true;
setTimeout(() => {
this.showToast = false;
}, 3000);
},
accordionOpen: {
'accordion-1': true,
'accordion-2': false,
'accordion-3': false
},
toggleAccordion(id) {
this.accordionOpen[id] = !this.accordionOpen[id];
},
progress: 65
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="profile.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="login.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="index.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Tables -->
<li>
<a href="tables.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Tables</span>
</a>
</li>
<!-- Forms -->
<li>
<a href="create-product.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Forms</span>
</a>
</li>
<!-- UI Elements -->
<li x-data="{ open: true }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">UI Elements</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="buttons.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
</svg>
<span>Buttons</span>
</div>
</a>
<a href="typography.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7" />
</svg>
<span>Typography</span>
</div>
</a>
<a href="components.html"
class="block px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
<span>Components</span>
</div>
</a>
</div>
</li>
<!-- Pages -->
<li x-data="{ open: false }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Pages</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="profile.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span>Profile</span>
</div>
</a>
<a href="login.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
</svg>
<span>Login</span>
</div>
</a>
<a href="register.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
</svg>
<span>Register</span>
</div>
</a>
<a href="error.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Error</span>
</div>
</a>
</div>
</li>
</ul>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center" x-show="sidebarOpen">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
<div class="p-6">
<!-- Breadcrumbs -->
<div class="mb-6 flex items-center text-sm">
<a href="index.html" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">UI Elements</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Components</span>
</div>
<!-- Page Title -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Dashboard Components</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Essential UI components for building dashboard
interfaces</p>
</div>
<!-- Component Navigation -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex flex-wrap gap-2">
<button @click="activeTab = 'cards'"
:class="{ 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': activeTab === 'cards', 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': activeTab !== 'cards' }"
class="px-4 py-2 rounded-md text-sm font-medium transition-colors">
Cards
</button>
<button @click="activeTab = 'alerts'"
:class="{ 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': activeTab === 'alerts', 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': activeTab !== 'alerts' }"
class="px-4 py-2 rounded-md text-sm font-medium transition-colors">
Alerts
</button>
<button @click="activeTab = 'badges'"
:class="{ 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': activeTab === 'badges', 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': activeTab !== 'badges' }"
class="px-4 py-2 rounded-md text-sm font-medium transition-colors">
Badges
</button>
<button @click="activeTab = 'progress'"
:class="{ 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': activeTab === 'progress', 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': activeTab !== 'progress' }"
class="px-4 py-2 rounded-md text-sm font-medium transition-colors">
Progress
</button>
<button @click="activeTab = 'tooltips'"
:class="{ 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': activeTab === 'tooltips', 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': activeTab !== 'tooltips' }"
class="px-4 py-2 rounded-md text-sm font-medium transition-colors">
Tooltips
</button>
<button @click="activeTab = 'modals'"
:class="{ 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': activeTab === 'modals', 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': activeTab !== 'modals' }"
class="px-4 py-2 rounded-md text-sm font-medium transition-colors">
Modals
</button>
<button @click="activeTab = 'accordions'"
:class="{ 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': activeTab === 'accordions', 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': activeTab !== 'accordions' }"
class="px-4 py-2 rounded-md text-sm font-medium transition-colors">
Accordions
</button>
<button @click="activeTab = 'breadcrumbs'"
:class="{ 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400': activeTab === 'breadcrumbs', 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300': activeTab !== 'breadcrumbs' }"
class="px-4 py-2 rounded-md text-sm font-medium transition-colors">
Breadcrumbs
</button>
</div>
</div>
</div>
<!-- Cards Section -->
<div x-show="activeTab === 'cards'" class="space-y-6">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Cards</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Versatile containers for
displaying content</p>
</div>
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Basic Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Basic Card
</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">A simple card with title
and content.</p>
</div>
</div>
<!-- Card with Header -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
<div
class="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Card with
Header</h3>
</div>
<div class="p-4">
<p class="text-gray-600 dark:text-gray-400">A card with a distinct header
section.</p>
</div>
</div>
<!-- Card with Footer -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Card with
Footer</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">A card with content and a
footer section.</p>
</div>
<div
class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-750">
<div class="flex justify-end">
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Action
</button>
</div>
</div>
</div>
<!-- Image Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
<img src="https://via.placeholder.com/400x200" alt="Card image"
class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Image Card
</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">A card with an image and
content.</p>
</div>
</div>
<!-- Stat Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">
Total Revenue</p>
<h3
class="text-2xl font-bold text-gray-800 dark:text-gray-200 mt-1">
$24,560</h3>
<p
class="text-sm text-green-600 dark:text-green-400 flex items-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
12.5% increase
</p>
</div>
<div class="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
</div>
</div>
<!-- Action Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Action Card
</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">A card with multiple action
buttons.</p>
<div class="flex gap-2 mt-4">
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Save
</button>
<button
class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Alerts Section -->
<div x-show="activeTab === 'alerts'" class="space-y-6">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alerts</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Provide contextual feedback
messages for user actions</p>
</div>
<div class="p-6 space-y-4">
<!-- Success Alert -->
<div
class="bg-green-50 dark:bg-green-900/20 border-l-4 border-green-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500 dark:text-green-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-green-700 dark:text-green-200">Your changes have been
saved successfully.</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button
class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Warning Alert -->
<div
class="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-500 dark:text-yellow-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700 dark:text-yellow-200">Your account is
about to expire. Please renew your subscription.</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button
class="inline-flex rounded-md p-1.5 text-yellow-500 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Error Alert -->
<div class="bg-red-50 dark:bg-red-900/20 border-l-4 border-red-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-500 dark:text-red-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-red-700 dark:text-red-200">There was an error
processing your request. Please try again.</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button
class="inline-flex rounded-md p-1.5 text-red-500 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-500 dark:text-blue-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-blue-700 dark:text-blue-200">A new software update is
available. See what's new in version 2.0.4.</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button
class="inline-flex rounded-md p-1.5 text-blue-500 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Toast Alert -->
<div x-show="showToast" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform translate-y-2"
class="fixed bottom-4 right-4 max-w-xs bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg x-show="toastType === 'success'"
class="h-6 w-6 text-green-500 dark:text-green-400"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<svg x-show="toastType === 'error'"
class="h-6 w-6 text-red-500 dark:text-red-400"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p x-text="toastMessage"
class="text-sm font-medium text-gray-900 dark:text-gray-100"></p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button @click="showToast = false"
class="inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="mt-4">
<button @click="displayToast('This is a success message!', 'success')"
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
Show Success Toast
</button>
<button @click="displayToast('This is an error message!', 'error')"
class="ml-2 px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
Show Error Toast
</button>
</div>
</div>
</div>
</div>
<!-- Badges Section -->
<div x-show="activeTab === 'badges'" class="space-y-6">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Badges</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Small count and labeling
components</p>
</div>
<div class="p-6 space-y-6">
<!-- Basic Badges -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Basic Badges
</h3>
<div class="flex flex-wrap gap-4">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
Default
</span>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
Primary
</span>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
Success
</span>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
Warning
</span>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
Danger
</span>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300">
Info
</span>
</div>
</div>
<!-- Pill Badges -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Pill Badges
</h3>
<div class="flex flex-wrap gap-4">
<span
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
Default
</span>
<span
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
Primary
</span>
<span
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
Success
</span>
<span
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
Warning
</span>
<span
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
Danger
</span>
</div>
</div>
<!-- Badges with Icons -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Badges with
Icons</h3>
<div class="flex flex-wrap gap-4">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor"
viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Active
</span>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-red-400" fill="currentColor"
viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Inactive
</span>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg"
class="-ml-0.5 mr-1.5 h-3 w-3 text-blue-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Processing
</span>
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
<svg xmlns="http://www.w3.org/2000/svg"
class="-ml-0.5 mr-1.5 h-3 w-3 text-yellow-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
Warning
</span>
</div>
</div>
<!-- Notification Badges -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Notification
Badges</h3>
<div class="flex flex-wrap gap-8">
<div class="relative inline-block">
<button
class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<span
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">3</span>
</div>
<div class="relative inline-block">
<button
class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<span
class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full">12</span>
</div>
<div class="relative inline-block">
<button
class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</button>
<span
class="absolute top-0 right-0 inline-block w-2 h-2 bg-red-600 rounded-full"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Progress Section -->
<div x-show="activeTab === 'progress'" class="space-y-6">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Progress Bars</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Visual indicators of progress
</p>
</div>
<div class="p-6 space-y-6">
<!-- Basic Progress Bars -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Basic Progress
Bars</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">Default
(25%)</span>
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">25%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 25%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">Success
(45%)</span>
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 45%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">Warning
(65%)</span>
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">65%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 65%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">Danger
(85%)</span>
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 85%"></div>
</div>
</div>
</div>
</div>
<!-- Progress Bar Sizes -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Progress Bar
Sizes</h3>
<div class="space-y-4">
<div>
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">Small</span>
<div class="w-full bg-gray-200 rounded-full h-1.5 dark:bg-gray-700 mt-1">
<div class="bg-blue-600 h-1.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<div>
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">Default</span>
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mt-1">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<div>
<span
class="text-sm font-medium text-gray-700 dark:text-gray-300">Large</span>
<div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700 mt-1">
<div class="bg-blue-600 h-4 rounded-full" style="width: 50%"></div>
</div>
</div>
</div>
</div>
<!-- Progress with Labels -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Progress with
Labels</h3>
<div class="w-full bg-gray-200 rounded-full h-6 dark:bg-gray-700">
<div class="bg-blue-600 h-6 rounded-full flex items-center justify-center text-xs font-medium text-white"
style="width: 75%">75%</div>
</div>
</div>
<!-- Striped Progress -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Striped
Progress</h3>
<div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700">
<div class="bg-blue-600 h-4 rounded-full"
style="width: 60%; background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;">
</div>
</div>
</div>
<!-- Animated Progress -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Animated
Progress</h3>
<div class="w-full bg-gray-200 rounded-full h-4 dark:bg-gray-700">
<div class="bg-blue-600 h-4 rounded-full animate-pulse" style="width: 70%">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tooltips Section -->
<div x-show="activeTab === 'tooltips'" class="space-y-6">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Tooltips</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Informative text that appears
when users hover over an element</p>
</div>
<div class="p-6">
<div class="flex flex-wrap justify-center gap-8 py-8">
<!-- Top Tooltip -->
<div x-data="{ tooltip: false }" class="relative">
<button @mouseenter="tooltip = true" @mouseleave="tooltip = false"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Tooltip Top
</button>
<div x-show="tooltip"
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-32 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-md shadow-lg">
Tooltip on top
<div
class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700">
</div>
</div>
</div>
<!-- Right Tooltip -->
<div x-data="{ tooltip: false }" class="relative">
<button @mouseenter="tooltip = true" @mouseleave="tooltip = false"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Tooltip Right
</button>
<div x-show="tooltip"
class="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 w-32 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-md shadow-lg">
Tooltip on right
<div
class="absolute right-full top-1/2 transform translate-y-1/2 border-4 border-transparent border-r-gray-900 dark:border-r-gray-700">
</div>
</div>
</div>
<!-- Bottom Tooltip -->
<div x-data="{ tooltip: false }" class="relative">
<button @mouseenter="tooltip = true" @mouseleave="tooltip = false"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Tooltip Bottom
</button>
<div x-show="tooltip"
class="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 w-32 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-md shadow-lg">
Tooltip on bottom
<div
class="absolute bottom-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-900 dark:border-b-gray-700">
</div>
</div>
</div>
<!-- Left Tooltip -->
<div x-data="{ tooltip: false }" class="relative">
<button @mouseenter="tooltip = true" @mouseleave="tooltip = false"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Tooltip Left
</button>
<div x-show="tooltip"
class="absolute right-full top-1/2 transform -translate-y-1/2 mr-2 w-32 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-md shadow-lg">
Tooltip on left
<div
class="absolute left-full top-1/2 transform translate-y-1/2 border-4 border-transparent border-l-gray-900 dark:border-l-gray-700">
</div>
</div>
</div>
</div>
<div class="mt-8">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Icon Tooltips
</h3>
<div class="flex flex-wrap gap-8">
<div x-data="{ tooltip: false }" class="relative">
<button @mouseenter="tooltip = true" @mouseleave="tooltip = false"
class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<div x-show="tooltip"
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 px-3 py-2 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-md shadow-lg">
This is additional information about this feature.
<div
class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700">
</div>
</div>
</div>
<div x-data="{ tooltip: false }" class="relative">
<button @mouseenter="tooltip = true" @mouseleave="tooltip = false"
class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<div x-show="tooltip"
class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 px-3 py-2 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-md shadow-lg">
Need help? Contact support at [email protected]
<div
class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modals Section -->
<div x-show="activeTab === 'modals'" class="space-y-6">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Modals</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Dialog boxes that appear on top
of the page content</p>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button @click="showModal = true"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Open Modal
</button>
</div>
<!-- Modal -->
<div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<div
class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div x-show="showModal" @click="showModal = false"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen">​</span>
<div x-show="showModal" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3
class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
Modal Title
</h3>
<div class="mt-2">
<p class="text-sm text-gray-600 dark:text-gray-400">
This is an example modal dialog box. You can use this
for confirmations, forms, or any content that needs to
be displayed in a focused overlay.
</p>
</div>
</div>
</div>
</div>
<div
class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button @click="showModal = false" type="button"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
Confirm
</button>
<button @click="showModal = false" type="button"
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Accordions Section -->
<div x-show="activeTab === 'accordions'" class="space-y-6">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Accordions</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Collapsible content sections
</p>
</div>
<div class="p-6 space-y-4">
<!-- Basic Accordion -->
<div class="space-y-2">
<div class="border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden">
<button @click="toggleAccordion('accordion-1')"
class="flex justify-between items-center w-full px-4 py-3 text-left text-gray-800 dark:text-gray-200 font-medium bg-gray-50 dark:bg-gray-750 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<span>What is AdminDash?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': accordionOpen['accordion-1'] }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="accordionOpen['accordion-1']"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="px-4 py-3 text-gray-600 dark:text-gray-400">
<p>AdminDash is a modern dashboard template built with HTML, CSS, and
AlpineJS. It provides a clean and intuitive interface for building admin
panels, dashboards, and other web applications.</p>
</div>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden">
<button @click="toggleAccordion('accordion-2')"
class="flex justify-between items-center w-full px-4 py-3 text-left text-gray-800 dark:text-gray-200 font-medium bg-gray-50 dark:bg-gray-750 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<span>How do I customize the theme?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': accordionOpen['accordion-2'] }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="accordionOpen['accordion-2']"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="px-4 py-3 text-gray-600 dark:text-gray-400">
<p>You can customize the theme by modifying the Tailwind CSS configuration
file (tailwind.config.js) and the CSS variables defined in the
<style> tag. You can change colors, fonts, spacing, and other
design elements to match your brand.</p>
</div>
</div>
<div class="border border-gray-200 dark:border-gray-700 rounded-md overflow-hidden">
<button @click="toggleAccordion('accordion-3')"
class="flex justify-between items-center w-full px-4 py-3 text-left text-gray-800 dark:text-gray-200 font-medium bg-gray-50 dark:bg-gray-750 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<span>Is AdminDash free to use?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform"
:class="{ 'rotate-180': accordionOpen['accordion-3'] }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="accordionOpen['accordion-3']"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="px-4 py-3 text-gray-600 dark:text-gray-400">
<p>AdminDash is released under the MIT license, which means it is free to
use for personal and commercial projects. You can modify and distribute
it as you wish, but you must include the original copyright notice and
license in any derivative works.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Breadcrumbs Section -->
<div x-show="activeTab === 'breadcrumbs'" class="space-y-6">
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-200">Breadcrumbs</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Hierarchical navigation links
</p>
</div>
<div class="p-6 space-y-4">
<!-- Basic Breadcrumbs -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Basic
Breadcrumbs</h3>
<div class="flex items-center text-sm">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
<span>Library</span>
</div>
</div>
<!-- Breadcrumbs with Current Page -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Breadcrumbs
with Current Page</h3>
<div class="flex items-center text-sm">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Library</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Data</span>
</div>
</div>
<!-- Breadcrumbs with Icons -->
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Breadcrumbs
with Icons</h3>
<div class="flex items-center text-sm">
<a href="#"
class="text-blue-600 dark:text-blue-400 hover:underline flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
Home
</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
<a href="#"
class="text-blue-600 dark:text-blue-400 hover:underline flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
Library
</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Data</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Product - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
/* Custom file input */
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select files';
display: inline-block;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
outline: none;
white-space: nowrap;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.dark .custom-file-input::before {
background: #374151;
border-color: #4b5563;
color: #e5e7eb;
}
.custom-file-input:hover::before {
border-color: #9ca3af;
}
.custom-file-input:active::before {
background: #e5e7eb;
}
.dark .custom-file-input:active::before {
background: #4b5563;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
formSubmitted: false,
formData: {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
},
errors: {},
validateForm() {
this.errors = {};
if (!this.formData.name) this.errors.name = 'Product name is required';
if (!this.formData.category) this.errors.category = 'Category is required';
if (!this.formData.price) this.errors.price = 'Price is required';
else if (isNaN(this.formData.price) || this.formData.price <= 0) this.errors.price = 'Price must be a positive number';
if (!this.formData.stock) this.errors.stock = 'Stock quantity is required';
else if (isNaN(this.formData.stock) || parseInt(this.formData.stock) < 0) this.errors.stock = 'Stock must be a non-negative number';
if (!this.formData.description) this.errors.description = 'Description is required';
return Object.keys(this.errors).length === 0;
},
submitForm() {
if (this.validateForm()) {
// In a real application, you would submit the form data to the server here
console.log('Form data:', this.formData);
this.formSubmitted = true;
// Reset form after 3 seconds for demo purposes
setTimeout(() => {
this.formSubmitted = false;
this.formData = {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
};
}, 3000);
}
}
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="profile.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="login.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="index.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Products -->
<li x-data="{ open: true }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Products</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span>All Products</span>
</div>
</a>
<a href="create-product.html"
class="block px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span>Create Product</span>
</div>
</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
</svg>
<span>Categories</span>
</div>
</a>
</div>
</li>
<!-- Profile -->
<li>
<a href="profile.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Profile</span>
</a>
</li>
<!-- Settings -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Settings</span>
</a>
</li>
</ul>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center" x-show="sidebarOpen">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
<div class="p-6">
<!-- Success Message -->
<div x-show="formSubmitted" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="mb-6 bg-green-50 dark:bg-green-900 border-l-4 border-green-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500 dark:text-green-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-green-700 dark:text-green-200">Product created successfully!</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button @click="formSubmitted = false"
class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Breadcrumbs -->
<div class="mb-6 flex items-center text-sm">
<a href="index.html" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Products</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Create Product</span>
</div>
<!-- Page Title -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Create New Product</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Add a new product to your inventory</p>
</div>
CONTENT GOES HERE
<!-- Footer -->
<footer class="mt-auto py-4 text-center text-sm text-gray-500 dark:text-gray-400">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</main>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error 404 - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
darkMode: localStorage.getItem('darkMode') === 'true',
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
}
}" :class="{ 'dark': darkMode }">
<div class="min-h-screen flex flex-col">
<!-- Simple Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Logo -->
<div class="flex items-center">
<a href="index.html" class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</span>
</a>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
</div>
</header>
<!-- Error Content -->
<main class="flex-1 flex items-center justify-center p-6">
<div class="max-w-md w-full text-center">
<!-- Error Illustration -->
<div class="mb-8">
<svg xmlns="http://www.w3.org/2000/svg" class="h-40 w-40 mx-auto text-blue-500 dark:text-blue-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<!-- Error Message -->
<h1 class="text-6xl font-bold text-gray-800 dark:text-gray-100 mb-4">404</h1>
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Page Not Found</h2>
<p class="text-gray-600 dark:text-gray-400 mb-8">The page you are looking for might have been removed,
had its name changed, or is temporarily unavailable.</p>
<!-- Action Buttons -->
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="index.html"
class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Back to Dashboard
</a>
<button
class="px-6 py-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Report Problem
</button>
</div>
</div>
</main>
<!-- Footer -->
<footer
class="py-4 text-center text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forgot Password - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
darkMode: localStorage.getItem('darkMode') === 'true',
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
submitted: false
}" :class="{ 'dark': darkMode }">
<div class="min-h-screen flex flex-col">
<!-- Simple Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4 max-w-7xl mx-auto">
<!-- Logo -->
<div class="flex items-center">
<div class="font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
</div>
</header>
<!-- Main Content -->
<main class="flex-1 flex items-center justify-center p-6">
<div class="w-full max-w-md">
<!-- Forgot Password Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-6">
<!-- Form View -->
<div x-show="!submitted">
<div class="text-center mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Forgot Password</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Enter your email to reset your password
</p>
</div>
<form @submit.prevent="submitted = true">
<!-- Email Input -->
<div class="mb-4">
<label for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
<input type="email" id="email" placeholder="[email protected]"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
</div>
<!-- Submit Button -->
<button type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Reset Password
</button>
</form>
<!-- Back to Login -->
<div class="text-center mt-6">
<p class="text-sm text-gray-600 dark:text-gray-400">
Remember your password?
<a href="login.html"
class="text-blue-600 dark:text-blue-400 hover:underline font-medium">Sign in</a>
</p>
</div>
</div>
<!-- Success View -->
<div x-show="submitted" class="text-center py-8">
<div
class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900 mb-4">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-green-600 dark:text-green-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Check your email</h3>
<p class="text-gray-600 dark:text-gray-400 mt-2">
We've sent a password reset link to your email address. Please check your inbox.
</p>
<div class="mt-6">
<a href="login.html"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Back to Login
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer
class="py-4 text-center text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Product - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
/* Custom file input */
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select files';
display: inline-block;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
outline: none;
white-space: nowrap;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.dark .custom-file-input::before {
background: #374151;
border-color: #4b5563;
color: #e5e7eb;
}
.custom-file-input:hover::before {
border-color: #9ca3af;
}
.custom-file-input:active::before {
background: #e5e7eb;
}
.dark .custom-file-input:active::before {
background: #4b5563;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
formSubmitted: false,
formData: {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
},
errors: {},
validateForm() {
this.errors = {};
if (!this.formData.name) this.errors.name = 'Product name is required';
if (!this.formData.category) this.errors.category = 'Category is required';
if (!this.formData.price) this.errors.price = 'Price is required';
else if (isNaN(this.formData.price) || this.formData.price <= 0) this.errors.price = 'Price must be a positive number';
if (!this.formData.stock) this.errors.stock = 'Stock quantity is required';
else if (isNaN(this.formData.stock) || parseInt(this.formData.stock) < 0) this.errors.stock = 'Stock must be a non-negative number';
if (!this.formData.description) this.errors.description = 'Description is required';
return Object.keys(this.errors).length === 0;
},
submitForm() {
if (this.validateForm()) {
// In a real application, you would submit the form data to the server here
console.log('Form data:', this.formData);
this.formSubmitted = true;
// Reset form after 3 seconds for demo purposes
setTimeout(() => {
this.formSubmitted = false;
this.formData = {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
};
}, 3000);
}
}
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="profile.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="login.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="index.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Products -->
<li x-data="{ open: true }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Products</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span>All Products</span>
</div>
</a>
<a href="create-product.html"
class="block px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span>Create Product</span>
</div>
</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
</svg>
<span>Categories</span>
</div>
</a>
</div>
</li>
<!-- Profile -->
<li>
<a href="profile.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Profile</span>
</a>
</li>
<!-- Settings -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Settings</span>
</a>
</li>
</ul>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center" x-show="sidebarOpen">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
<div class="p-6">
<!-- Success Message -->
<div x-show="formSubmitted" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="mb-6 bg-green-50 dark:bg-green-900 border-l-4 border-green-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500 dark:text-green-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-green-700 dark:text-green-200">Product created successfully!</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button @click="formSubmitted = false"
class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Breadcrumbs -->
<div class="mb-6 flex items-center text-sm">
<a href="index.html" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Products</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Create Product</span>
</div>
<!-- Page Title -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Create New Product</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Add a new product to your inventory</p>
</div>
<!-- Form Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-6">
<form @submit.prevent="submitForm">
<!-- Form Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Left Column -->
<div class="space-y-6">
<h3
class="text-lg font-medium text-gray-800 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700 pb-2">
Basic Information</h3>
<!-- Product Name -->
<div>
<label for="product-name"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Product Name <span class="text-red-500">*</span>
</label>
<input type="text" id="product-name" x-model="formData.name"
placeholder="Enter product name"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
:class="{'border-red-500 dark:border-red-500': errors.name}">
<p x-show="errors.name" x-text="errors.name"
class="mt-1 text-sm text-red-500"></p>
</div>
<!-- Category -->
<div>
<label for="category"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Category <span class="text-red-500">*</span>
</label>
<select id="category" x-model="formData.category"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
:class="{'border-red-500 dark:border-red-500': errors.category}">
<option value="">Select a category</option>
<option value="electronics">Electronics</option>
<option value="clothing">Clothing</option>
<option value="home">Home & Kitchen</option>
<option value="books">Books</option>
<option value="toys">Toys & Games</option>
</select>
<p x-show="errors.category" x-text="errors.category"
class="mt-1 text-sm text-red-500"></p>
</div>
<!-- Price and Stock -->
<div class="grid grid-cols-2 gap-4">
<div>
<label for="price"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Price ($) <span class="text-red-500">*</span>
</label>
<input type="text" id="price" x-model="formData.price"
placeholder="0.00"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
:class="{'border-red-500 dark:border-red-500': errors.price}">
<p x-show="errors.price" x-text="errors.price"
class="mt-1 text-sm text-red-500"></p>
</div>
<div>
<label for="stock"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Stock <span class="text-red-500">*</span>
</label>
<input type="number" id="stock" x-model="formData.stock" placeholder="0"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
:class="{'border-red-500 dark:border-red-500': errors.stock}">
<p x-show="errors.stock" x-text="errors.stock"
class="mt-1 text-sm text-red-500"></p>
</div>
</div>
<!-- Description -->
<div>
<label for="description"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Description <span class="text-red-500">*</span>
</label>
<textarea id="description" x-model="formData.description" rows="4"
placeholder="Enter product description"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
:class="{'border-red-500 dark:border-red-500': errors.description}"></textarea>
<p x-show="errors.description" x-text="errors.description"
class="mt-1 text-sm text-red-500"></p>
</div>
<!-- Status -->
<div>
<label
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
<div class="flex space-x-4">
<div class="flex items-center">
<input type="radio" id="status-active" name="status" value="active"
x-model="formData.status"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="status-active"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
Active
</label>
</div>
<div class="flex items-center">
<input type="radio" id="status-draft" name="status" value="draft"
x-model="formData.status"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="status-draft"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
Draft
</label>
</div>
<div class="flex items-center">
<input type="radio" id="status-inactive" name="status"
value="inactive" x-model="formData.status"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="status-inactive"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
Inactive
</label>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-6">
<h3
class="text-lg font-medium text-gray-800 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700 pb-2">
Additional Details</h3>
<!-- Features -->
<div>
<label
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Features</label>
<div class="space-y-2">
<div class="flex items-center">
<input type="checkbox" id="feature-1" value="waterproof"
x-model="formData.features"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="feature-1"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
Waterproof
</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="feature-2" value="wireless"
x-model="formData.features"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="feature-2"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
Wireless
</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="feature-3" value="rechargeable"
x-model="formData.features"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="feature-3"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
Rechargeable
</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="feature-4" value="bluetooth"
x-model="formData.features"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="feature-4"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
Bluetooth
</label>
</div>
</div>
</div>
<!-- Release Date -->
<div>
<label for="release-date"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Release Date
</label>
<input type="date" id="release-date" x-model="formData.releaseDate"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<!-- Product Images -->
<div>
<label for="product-images"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Product Images
</label>
<input type="file" id="product-images" multiple x-model="formData.images"
class="custom-file-input w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Upload up to 5
images (PNG, JPG, WEBP)</p>
</div>
<!-- Tags -->
<div>
<label for="tags"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Tags
</label>
<input type="text" id="tags" x-model="formData.tags"
placeholder="Enter tags separated by commas"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<!-- Dimensions -->
<div>
<label
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dimensions
(inches)</label>
<div class="grid grid-cols-3 gap-3">
<div>
<label for="length"
class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Length</label>
<input type="text" id="length" x-model="formData.dimensions.length"
placeholder="0.0"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div>
<label for="width"
class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Width</label>
<input type="text" id="width" x-model="formData.dimensions.width"
placeholder="0.0"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<div>
<label for="height"
class="block text-xs text-gray-500 dark:text-gray-400 mb-1">Height</label>
<input type="text" id="height" x-model="formData.dimensions.height"
placeholder="0.0"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
</div>
</div>
<!-- Weight -->
<div>
<label for="weight"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Weight (lbs)
</label>
<input type="text" id="weight" x-model="formData.weight" placeholder="0.0"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
</div>
</div>
<!-- Form Actions -->
<div class="mt-8 pt-5 border-t border-gray-200 dark:border-gray-700">
<div class="flex justify-end space-x-3">
<button type="button"
class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Cancel
</button>
<button type="button"
class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Save as Draft
</button>
<button type="submit"
class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Create Product
</button>
</div>
</div>
</form>
</div>
</div>
<!-- Form Tips Card -->
<div class="bg-blue-50 dark:bg-blue-900/30 rounded-lg p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-blue-500 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800 dark:text-blue-300">Tips for creating a
product</h3>
<div class="mt-2 text-sm text-blue-700 dark:text-blue-200">
<ul class="list-disc pl-5 space-y-1">
<li>Use high-quality images for better product presentation</li>
<li>Write detailed descriptions to help customers understand the product</li>
<li>Add relevant tags to improve searchability</li>
<li>Set accurate dimensions and weight for shipping calculations</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-auto py-4 text-center text-sm text-gray-500 dark:text-gray-400">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</main>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Template</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
/* Nested sidebar menu animations */
.menu-enter {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.menu-enter.menu-enter-active {
max-height: 1000px;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
}
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium">New User Registered</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium">Server Alert</p>
<p class="text-xs text-gray-500 dark:text-gray-400">High CPU usage detected</p>
<p class="text-xs text-gray-400 mt-1">1 day ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Pages -->
<li>
<a href="typography.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h7" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Typography</span>
</a>
</li>
<li>
<a href="tables.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Tables</span>
</a>
</li>
<li>
<a href="error.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Error</span>
</a>
</li>
<li>
<a href="form.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Form</span>
</a>
</li>
<li>
<a href="empty-page.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Empty Page</span>
</a>
</li>
<li>
<a href="components.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Components</span>
</a>
</li>
<li>
<a href="buttons.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Buttons</span>
</a>
</li>
<li>
<a href="login.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Login</span>
</a>
</li>
<li>
<a href="register.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Register</span>
</a>
</li>
<!-- Components - Level 1 -->
<li x-data="{ open: false }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Components</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<!-- UI Elements - Level 2 -->
<div x-data="{ subOpen: false }">
<button @click="subOpen = !subOpen"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
<span>UI Elements</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': subOpen }" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 3 submenu -->
<div x-show="subOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">Buttons</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">Cards</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">Modals</a>
</div>
</div>
<!-- Forms - Level 2 -->
<div x-data="{ subOpen: false }">
<button @click="subOpen = !subOpen"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span>Forms</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': subOpen }" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 3 submenu -->
<div x-show="subOpen" class="mt-1 ml-4 space-y-1">
<a href="form.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">Form
Example Form</a>
</div>
</div>
<a href="tables.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span>Tables</span>
</div>
</a>
</div>
</li>
<!-- Charts -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Charts</span>
</a>
</li>
<!-- Pages - Level 1 -->
<li x-data="{ open: false }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Pages</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span>Profile</span>
</div>
</a>
<a href="login.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
</svg>
<span>Login</span>
</div>
</a>
<a href="register.html"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
</svg>
<span>Register</span>
</div>
</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Error</span>
</div>
</a>
</div>
</li>
<!-- Settings -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Settings</span>
</a>
</li>
</ul>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center" x-show="sidebarOpen">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
<div class="p-6">
<!-- Breadcrumbs -->
<div class="mb-6 flex items-center text-sm">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Dashboard</span>
</div>
<!-- Page Title -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Dashboard</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Welcome back, John Doe</p>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<!-- Users Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Users</p>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-100 mt-1">2,543</p>
<p class="text-xs text-green-500 flex items-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
12.5% increase
</p>
</div>
<div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-blue-500 dark:text-blue-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
</div>
</div>
<!-- Revenue Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Revenue</p>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-100 mt-1">$45,231</p>
<p class="text-xs text-green-500 flex items-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
8.2% increase
</p>
</div>
<div class="bg-green-100 dark:bg-green-900 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-green-500 dark:text-green-300" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
</div>
<!-- Orders Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Orders</p>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-100 mt-1">1,205</p>
<p class="text-xs text-red-500 flex items-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
3.1% decrease
</p>
</div>
<div class="bg-purple-100 dark:bg-purple-900 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-purple-500 dark:text-purple-300" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
</div>
</div>
</div>
<!-- Visitors Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Visitors</p>
<p class="text-2xl font-bold text-gray-800 dark:text-gray-100 mt-1">12,345</p>
<p class="text-xs text-green-500 flex items-center mt-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
24.5% increase
</p>
</div>
<div class="bg-orange-100 dark:bg-orange-900 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-orange-500 dark:text-orange-300" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</div>
</div>
</div>
</div>
<!-- Charts and Tables Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<!-- Chart 1 - Takes up 2/3 of the width on large screens -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700 lg:col-span-2">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Revenue Overview</h2>
<div class="flex items-center space-x-2">
<button
class="px-3 py-1 text-xs bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300 rounded-md">Monthly</button>
<button
class="px-3 py-1 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Weekly</button>
<button
class="px-3 py-1 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Daily</button>
</div>
</div>
<!-- Chart Placeholder -->
<div class="h-64 bg-gray-100 dark:bg-gray-700 rounded-md flex items-center justify-center">
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-12 w-12 mx-auto text-gray-400 dark:text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Chart Placeholder</p>
</div>
</div>
<!-- Stats Below Chart -->
<div class="grid grid-cols-3 gap-4 mt-4">
<div class="text-center">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Sales</p>
<p class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-1">$24,345</p>
</div>
<div class="text-center">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">This Month</p>
<p class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-1">$12,545</p>
</div>
<div class="text-center">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">This Week</p>
<p class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-1">$5,324</p>
</div>
</div>
</div>
<!-- Chart 2 - Takes up 1/3 of the width on large screens -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Customer Distribution
</h2>
<button
class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
</div>
<!-- Donut Chart Placeholder -->
<div
class="h-48 bg-gray-100 dark:bg-gray-700 rounded-md flex items-center justify-center mb-4">
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-12 w-12 mx-auto text-gray-400 dark:text-gray-500" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Donut Chart Placeholder</p>
</div>
</div>
<!-- Legend -->
<div class="space-y-2">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
<span class="text-sm text-gray-600 dark:text-gray-400">New Customers</span>
</div>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">45%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Returning</span>
</div>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">30%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
<span class="text-sm text-gray-600 dark:text-gray-400">Referrals</span>
</div>
<span class="text-sm font-medium text-gray-800 dark:text-gray-200">25%</span>
</div>
</div>
</div>
</div>
<!-- Recent Orders Table -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Recent Orders</h2>
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">View
All</a>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-gray-50 dark:bg-gray-700">
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Order ID</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Customer</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Date</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Amount</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Status</th>
<th
class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
#ORD-001</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/12.jpg"
alt="Customer" class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane
Cooper</p>
<p class="text-xs text-gray-500 dark:text-gray-400">[email protected]
</p>
</div>
</div>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
May 14, 2023</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
$125.00</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Completed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
<button
class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View</button>
</td>
</tr>
<tr>
<td
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
#ORD-002</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">
Robert Johnson</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
[email protected]</p>
</div>
</div>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
May 13, 2023</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
$243.50</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">Processing</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
<button
class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View</button>
</td>
</tr>
<tr>
<td
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
#ORD-003</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/3.jpg"
alt="Customer" class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">
Sarah Williams</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
[email protected]</p>
</div>
</div>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
May 12, 2023</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
$89.25</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Cancelled</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
<button
class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View</button>
</td>
</tr>
<tr>
<td
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
#ORD-004</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Customer"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">
Michael Brown</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
[email protected]</p>
</div>
</div>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
May 11, 2023</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
$352.75</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Completed</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
<button
class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View</button>
</td>
</tr>
<tr>
<td
class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
#ORD-005</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/5.jpg"
alt="Customer" class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">
Emily Davis</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
[email protected]</p>
</div>
</div>
</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
May 10, 2023</td>
<td
class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
$127.99</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">Shipped</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm">
<button
class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">View</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Footer -->
<footer class="mt-auto py-4 text-center text-sm text-gray-500 dark:text-gray-400">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</main>
</div>
</div>
<script>
// Additional Alpine.js functionality can be added here
document.addEventListener('alpine:init', () => {
// You can define custom Alpine.js data and functions here
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
darkMode: localStorage.getItem('darkMode') === 'true',
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
}
}" :class="{ 'dark': darkMode }">
<div class="min-h-screen flex flex-col">
<!-- Main Content -->
<main class="flex-1 flex items-center justify-center p-6">
<div class="w-full max-w-md">
<!-- Login Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-6">
<div class="text-center mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Welcome Back</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Sign in to your account</p>
</div>
<form>
<!-- Email Input -->
<div class="mb-4">
<label for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
<input type="email" id="email" placeholder="[email protected]"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
</div>
<!-- Password Input -->
<div class="mb-4">
<div class="flex items-center justify-between mb-1">
<label for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<a href="forgot-password.html"
class="text-xs text-blue-600 dark:text-blue-400 hover:underline">Forgot
password?</a>
</div>
<input type="password" id="password" placeholder="••••••••"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
</div>
<!-- Remember Me -->
<div class="mb-6">
<div class="flex items-center">
<input type="checkbox" id="remember"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="remember" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
Remember me
</label>
</div>
</div>
<!-- Login Button -->
<button type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Sign In
</button>
</form>
<!-- Register Link -->
<div class="text-center mt-6">
<p class="text-sm text-gray-600 dark:text-gray-400">
Don't have an account?
<a href="register.html"
class="text-blue-600 dark:text-blue-400 hover:underline font-medium">Sign up</a>
</p>
</div>
<!-- Social Login -->
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or
continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<button
class="flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z" />
</svg>
Google
</button>
<button
class="flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
<path
d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
</svg>
Facebook
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer
class="py-4 text-center text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
profileTab: 'personal',
showSuccessAlert: false,
showSuccessAlert(message) {
this.successMessage = message;
this.showSuccessAlert = true;
setTimeout(() => {
this.showSuccessAlert = false;
}, 3000);
},
successMessage: ''
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Server Alert</p>
<p class="text-xs text-gray-500 dark:text-gray-400">High CPU usage detected</p>
<p class="text-xs text-gray-400 mt-1">1 day ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="index.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Profile -->
<li>
<a href="profile.html"
class="flex items-center px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Profile</span>
</a>
</li>
<!-- Components - Level 1 -->
<li x-data="{ open: false }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Components</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span>Tables</span>
</div>
</a>
</div>
</li>
<!-- Settings -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Settings</span>
</a>
</li>
</ul>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center" x-show="sidebarOpen">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
<div class="p-6">
<!-- Success Alert -->
<div x-show="showSuccessAlert" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="mb-6 bg-green-50 dark:bg-green-900 border-l-4 border-green-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500 dark:text-green-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-green-700 dark:text-green-200" x-text="successMessage"></p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button @click="showSuccessAlert = false"
class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Breadcrumbs -->
<div class="mb-6 flex items-center text-sm">
<a href="index.html" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Profile</span>
</div>
<!-- Page Title -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Profile Settings</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Manage your account information and password
</p>
</div>
<!-- Profile Content -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
<!-- Profile Tabs -->
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="flex -mb-px">
<button @click="profileTab = 'personal'"
:class="{ 'border-blue-500 text-blue-600 dark:text-blue-400': profileTab === 'personal', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300': profileTab !== 'personal' }"
class="py-4 px-6 border-b-2 font-medium text-sm focus:outline-none">
Personal Information
</button>
<button @click="profileTab = 'password'"
:class="{ 'border-blue-500 text-blue-600 dark:text-blue-400': profileTab === 'password', 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300': profileTab !== 'password' }"
class="py-4 px-6 border-b-2 font-medium text-sm focus:outline-none">
Change Password
</button>
</nav>
</div>
<!-- Personal Information Tab -->
<div x-show="profileTab === 'personal'" class="p-6">
<form @submit.prevent="showSuccessAlert('Profile information updated successfully')">
<div class="flex flex-col md:flex-row gap-6">
<!-- Avatar Section -->
<div class="flex flex-col items-center space-y-4 md:w-1/3">
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile"
class="h-32 w-32 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-sm">
<button
class="absolute bottom-0 right-0 bg-blue-600 text-white p-2 rounded-full shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
<div class="text-center">
<h3 class="font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
<!-- Form Fields -->
<div class="md:w-2/3 space-y-4">
<!-- Full Name -->
<div>
<label for="full-name"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full
Name</label>
<input type="text" id="full-name" value="John Doe"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<!-- Email -->
<div>
<label for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email
Address</label>
<input type="email" id="email" value="[email protected]"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<!-- Phone -->
<div>
<label for="phone"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone
Number</label>
<input type="tel" id="phone" value="+1 (555) 123-4567"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<!-- Bio -->
<div>
<label for="bio"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bio</label>
<textarea id="bio" rows="3"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">Administrator at AdminDash with over 5 years of experience in web development and UI/UX design.</textarea>
</div>
<!-- Save Button -->
<div class="pt-4">
<button type="submit"
class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Save Changes
</button>
</div>
</div>
</div>
</form>
</div>
<!-- Change Password Tab -->
<div x-show="profileTab === 'password'" class="p-6">
<form @submit.prevent="showSuccessAlert('Password updated successfully')">
<div class="max-w-md mx-auto space-y-4">
<!-- Current Password -->
<div>
<label for="current-password"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Current
Password</label>
<input type="password" id="current-password" placeholder="••••••••"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
</div>
<!-- New Password -->
<div>
<label for="new-password"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New
Password</label>
<input type="password" id="new-password" placeholder="••••••••"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Password must be at
least 8 characters long and include a number and a special character</p>
</div>
<!-- Confirm New Password -->
<div>
<label for="confirm-new-password"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm
New Password</label>
<input type="password" id="confirm-new-password" placeholder="••••••••"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
</div>
<!-- Update Password Button -->
<div class="pt-4">
<button type="submit"
class="w-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Update Password
</button>
</div>
</div>
</form>
</div>
</div>
<!-- Footer -->
<footer class="mt-auto py-4 text-center text-sm text-gray-500 dark:text-gray-400">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</main>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
darkMode: localStorage.getItem('darkMode') === 'true',
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
}
}" :class="{ 'dark': darkMode }">
<div class="min-h-screen flex flex-col">
<!-- Main Content -->
<main class="flex-1 flex items-center justify-center p-6">
<div class="w-full max-w-md">
<!-- Register Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="p-6">
<div class="text-center mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Create an Account</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Fill in the details to get started</p>
</div>
<form>
<!-- Full Name Input -->
<div class="mb-4">
<label for="name"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full
Name</label>
<input type="text" id="name" placeholder="John Doe"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
</div>
<!-- Email Input -->
<div class="mb-4">
<label for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
<input type="email" id="email" placeholder="[email protected]"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
</div>
<!-- Password Input -->
<div class="mb-4">
<label for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
<input type="password" id="password" placeholder="••••••••"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Password must be at least 8
characters long</p>
</div>
<!-- Confirm Password Input -->
<div class="mb-4">
<label for="confirm-password"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm
Password</label>
<input type="password" id="confirm-password" placeholder="••••••••"
class="w-full px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
required>
</div>
<!-- Terms and Conditions -->
<div class="mb-6">
<div class="flex items-start">
<input type="checkbox" id="terms"
class="h-4 w-4 mt-1 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
required>
<label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
I agree to the <a href="#"
class="text-blue-600 dark:text-blue-400 hover:underline">Terms of
Service</a> and <a href="#"
class="text-blue-600 dark:text-blue-400 hover:underline">Privacy Policy</a>
</label>
</div>
</div>
<!-- Register Button -->
<button type="submit"
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Create Account
</button>
</form>
<!-- Login Link -->
<div class="text-center mt-6">
<p class="text-sm text-gray-600 dark:text-gray-400">
Already have an account?
<a href="login.html"
class="text-blue-600 dark:text-blue-400 hover:underline font-medium">Sign in</a>
</p>
</div>
<!-- Social Register -->
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or
register with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-2 gap-3">
<button
class="flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z" />
</svg>
Google
</button>
<button
class="flex justify-center items-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
<path
d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
</svg>
Facebook
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer
class="py-4 text-center text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Product - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
/* Custom file input */
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select files';
display: inline-block;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
outline: none;
white-space: nowrap;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.dark .custom-file-input::before {
background: #374151;
border-color: #4b5563;
color: #e5e7eb;
}
.custom-file-input:hover::before {
border-color: #9ca3af;
}
.custom-file-input:active::before {
background: #e5e7eb;
}
.dark .custom-file-input:active::before {
background: #4b5563;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
formSubmitted: false,
formData: {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
},
errors: {},
validateForm() {
this.errors = {};
if (!this.formData.name) this.errors.name = 'Product name is required';
if (!this.formData.category) this.errors.category = 'Category is required';
if (!this.formData.price) this.errors.price = 'Price is required';
else if (isNaN(this.formData.price) || this.formData.price <= 0) this.errors.price = 'Price must be a positive number';
if (!this.formData.stock) this.errors.stock = 'Stock quantity is required';
else if (isNaN(this.formData.stock) || parseInt(this.formData.stock) < 0) this.errors.stock = 'Stock must be a non-negative number';
if (!this.formData.description) this.errors.description = 'Description is required';
return Object.keys(this.errors).length === 0;
},
submitForm() {
if (this.validateForm()) {
// In a real application, you would submit the form data to the server here
console.log('Form data:', this.formData);
this.formSubmitted = true;
// Reset form after 3 seconds for demo purposes
setTimeout(() => {
this.formSubmitted = false;
this.formData = {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
};
}, 3000);
}
}
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="profile.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="login.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="index.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }" class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Products -->
<li x-data="{ open: true }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }" class="transition-opacity duration-300">Products</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span>All Products</span>
</div>
</a>
<a href="create-product.html"
class="block px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span>Create Product</span>
</div>
</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
</svg>
<span>Categories</span>
</div>
</a>
</div>
</li>
<!-- Profile -->
<li>
<a href="profile.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }" class="transition-opacity duration-300">Profile</span>
</a>
</li>
<!-- Settings -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }" class="transition-opacity duration-300">Settings</span>
</a>
</li>
</ul>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center" x-show="sidebarOpen">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
<div class="p-6">
<!-- Success Message -->
<div x-show="formSubmitted" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="mb-6 bg-green-50 dark:bg-green-900 border-l-4 border-green-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-green-700 dark:text-green-200">Product created successfully!</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button @click="formSubmitted = false"
class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Table Preview Content -->
<div class="p-6">
<!-- Breadcrumbs -->
<div class="mb-6 flex items-center text-sm">
<a href="index.html" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Tables</span>
</div>
<!-- Page Title -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Manage and display your data with advanced tables</p>
</div>
<!-- Table Card -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<!-- Table Header with Search -->
<div class="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/80">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Users</h3>
<div class="relative">
<input type="text" placeholder="Search users..."
class="w-full md:w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
</div>
</div>
<!-- Filters Bar -->
<div class="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
<div class="flex flex-wrap items-center gap-3">
<!-- Status Filter -->
<div class="flex items-center">
<label for="status-filter"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mr-2">Status:</label>
<select id="status-filter"
class="text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="all">All</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="pending">Pending</option>
</select>
</div>
<!-- Role Filter -->
<div class="flex items-center">
<label for="role-filter"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mr-2">Role:</label>
<select id="role-filter"
class="text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="all">All Roles</option>
<option value="admin">Admin</option>
<option value="editor">Editor</option>
<option value="user">User</option>
</select>
</div>
<!-- Date Filter -->
<div class="flex items-center">
<label for="date-filter"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mr-2">Joined:</label>
<select id="date-filter"
class="text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="all">All Time</option>
<option value="today">Today</option>
<option value="week">This Week</option>
<option value="month">This Month</option>
<option value="year">This Year</option>
</select>
</div>
<!-- Clear Filters Button -->
<button class="text-sm text-blue-600 dark:text-blue-400 hover:underline ml-auto">
Clear Filters
</button>
</div>
</div>
<!-- Action Buttons -->
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex flex-wrap gap-2">
<button
class="inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
Add User
</button>
<button
class="inline-flex items-center px-3 py-1.5 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
Export
</button>
<button
class="inline-flex items-center px-3 py-1.5 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
Filter
</button>
<button
class="inline-flex items-center px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Delete Selected
</button>
</div>
</div>
<!-- Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800/80">
<tr>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<div class="flex items-center">
<input type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</div>
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<div class="flex items-center">
User
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</div>
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<div class="flex items-center">
Role
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</div>
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<div class="flex items-center">
Status
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</div>
</th>
<th scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
<div class="flex items-center">
Joined
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</div>
</th>
<th scope="col"
class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<!-- Row 1 -->
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg"
alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">John Doe</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">Administrator</div>
</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 dark:bg-green-800/30 dark:text-green-400">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
Jan 10, 2023
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg"
alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Jane Smith</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">Editor</div>
</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 dark:bg-green-800/30 dark:text-green-400">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
Feb 15, 2023
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg"
alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Robert Johnson</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">User</div>
</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 dark:bg-yellow-800/30 dark:text-yellow-400">
Pending
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
Mar 22, 2023
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/4.jpg"
alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Emily Davis</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">User</div>
</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 dark:bg-red-800/30 dark:text-red-400">
Inactive
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
Apr 5, 2023
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
<!-- Row 5 -->
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg"
alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">Michael Wilson</div>
<div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-100">Editor</div>
</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 dark:bg-green-800/30 dark:text-green-400">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
May 18, 2023
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex justify-end space-x-2">
<button class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
<button class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div class="flex items-center">
<p class="text-sm text-gray-700 dark:text-gray-300">
Showing
<span class="font-medium">1</span>
to
<span class="font-medium">5</span>
of
<span class="font-medium">25</span>
results
</p>
</div>
<div class="flex items-center space-x-2">
<label for="per-page" class="text-sm text-gray-700 dark:text-gray-300 mr-2">Per Page:</label>
<select id="per-page"
class="text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<a href="#"
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-blue-50 dark:bg-blue-900/30 text-sm font-medium text-blue-600 dark:text-blue-400">
1
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
2
</a>
<a href="#"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
3
</a>
<span
class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">
...
</span>
<a href="#"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
5
</a>
<a href="#"
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-auto py-4 text-center text-sm text-gray-500 dark:text-gray-400">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</main>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Product - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
/* Custom file input */
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select files';
display: inline-block;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
outline: none;
white-space: nowrap;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.dark .custom-file-input::before {
background: #374151;
border-color: #4b5563;
color: #e5e7eb;
}
.custom-file-input:hover::before {
border-color: #9ca3af;
}
.custom-file-input:active::before {
background: #e5e7eb;
}
.dark .custom-file-input:active::before {
background: #4b5563;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
formSubmitted: false,
formData: {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
},
errors: {},
validateForm() {
this.errors = {};
if (!this.formData.name) this.errors.name = 'Product name is required';
if (!this.formData.category) this.errors.category = 'Category is required';
if (!this.formData.price) this.errors.price = 'Price is required';
else if (isNaN(this.formData.price) || this.formData.price <= 0) this.errors.price = 'Price must be a positive number';
if (!this.formData.stock) this.errors.stock = 'Stock quantity is required';
else if (isNaN(this.formData.stock) || parseInt(this.formData.stock) < 0) this.errors.stock = 'Stock must be a non-negative number';
if (!this.formData.description) this.errors.description = 'Description is required';
return Object.keys(this.errors).length === 0;
},
submitForm() {
if (this.validateForm()) {
// In a real application, you would submit the form data to the server here
console.log('Form data:', this.formData);
this.formSubmitted = true;
// Reset form after 3 seconds for demo purposes
setTimeout(() => {
this.formSubmitted = false;
this.formData = {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
};
}, 3000);
}
}
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="profile.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="login.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="index.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Products -->
<li x-data="{ open: true }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Products</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span>All Products</span>
</div>
</a>
<a href="create-product.html"
class="block px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span>Create Product</span>
</div>
</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
</svg>
<span>Categories</span>
</div>
</a>
</div>
</li>
<!-- Profile -->
<li>
<a href="profile.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Profile</span>
</a>
</li>
<!-- Settings -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sid