<!DOCTYPE html>
<html lang="bn" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ড্যাশবোর্ড</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
primary: {
DEFAULT: "#a31319",
dark: "#4a0000",
text: "#ffffff"
},
secondary: "#5a5a5a",
bgLight: "#ffffff",
bgDark: "#333333",
card: {
DEFAULT: '#ffffff',
dark: '#2d2d2d',
text: '#333333',
textDark: '#ffffff',
header: {
DEFAULT: 'linear-gradient(to right, #a31319, #000000)',
dark: 'linear-gradient(to right, #4a0000, #2d0000)',
text: '#ffffff'
},
footer: {
DEFAULT: 'linear-gradient(to right, #a31319, #000000)',
dark: 'linear-gradient(to right, #4a0000, #2d0000)',
text: '#ffffff'
},
body: {
DEFAULT: '#ffffff',
dark: '#333333',
text: '#333333',
textDark: '#ffffff'
}
}
},
backgroundImage: {
'gradientRedToBlack': 'linear-gradient(to right, #a31319, #000000)',
'gradientBlackToRed': 'linear-gradient(to right, #000000, #a31319)',
'btn-gradient-light': 'linear-gradient(to right, #a31319, #000000)',
'btn-gradient-dark': 'linear-gradient(to right, #000000, #a31319)',
'card-header-gradient': 'linear-gradient(to right, #a31319, #6b0000)',
'card-header-gradient-dark': 'linear-gradient(to right, #4a0000, #2d0000)',
'card-footer-gradient': 'linear-gradient(to right, #a31319, #6b0000)',
'card-footer-gradient-dark': 'linear-gradient(to right, #4a0000, #2d0000)'
}
}
}
};
</script>
<style>
:root {
--primary-color: #a31319;
--secondary-color: #5a5a5a;
--bg-light: #ffffff;
--text-light: #333333;
--border-light: #ddd;
}
.dark {
--primary-color: #4a0000;
--secondary-color: #888888;
--bg-dark: #333333;
--text-dark: #ffffff;
--border-dark: #444;
}
</style>
</head>
<body class="bg-bgLight text-gray-800">
<!-- Sidebar -->
<aside id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-gradient-to-b from-primary via-secondary to-black text-primary-text transform -translate-x-full transition-transform duration-300">
<!-- Sidebar Header -->
<div class="flex items-center justify-between p-4 border-b border-gray-700">
<h1 class="text-lg font-bold">ড্যাশবোর্ড</h1>
<button id="closeSidebar" class="text-primary-text text-xl">✕</button>
</div>
<!-- Sidebar Navigation -->
<nav class="mt-4 space-y-2">
<a href="#" class="block px-4 py-2 hover:bg-bgDark rounded-md">ড্যাশবোর্ড</a>
<!-- User Management Section -->
<div class="relative">
<button class="w-full text-left px-4 py-2 hover:bg-bgDark rounded-md dropdown-trigger">
ব্যবহারকারী ব্যবস্থাপনা
<span class="float-right">▼</span>
</button>
<div class="hidden dropdown-content ml-4 mt-1 bg-bgDark rounded-md overflow-hidden">
<a href="#" class="block px-4 py-2 hover:bg-gray-800">ব্যবহারকারীদের তালিকা</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-800">রোলের তালিকা</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-800">অনুমতির তালিকা</a>
</div>
</div>
<!-- Business Section -->
<h3 class="px-4 py-2 text-sm font-bold text-muted">ব্যবসা</h3>
<a href="#" class="block px-4 py-2 hover:bg-bgDark rounded-md">গ্রাহক</a>
<a href="#" class="block px-4 py-2 hover:bg-bgDark rounded-md">বিক্রয় কর্মচারী</a>
<a href="#" class="block px-4 py-2 hover:bg-bgDark rounded-md">পণ্য</a>
</nav>
<!-- Sidebar Bottom Section -->
<div class="absolute bottom-0 w-full bg-secondary p-4">
<a href="#" class="flex items-center space-x-2 text-gray-300 hover:text-primary-text">
<span>লগআউট</span>
</a>
</div>
</aside>
<!-- Toggle Button -->
<button id="sidebarToggle" class="fixed top-4 left-4 bg-primary text-primary-text px-3 py-2 rounded-md">
☰
</button>
<!-- Main Content -->
<div id="mainContent" class="ml-0 transition-all duration-300">
<header class="border-b hidden md:block bg-gradient-to-r from-primary to-card-footer-gradient text-primary-text">
<div class="container mx-auto px-4">
<div class="h-16 flex items-center justify-between flex-wrap">
<!-- Left Group (First, Previous, Next, Last) -->
<div class="flex items-center gap-2 flex-wrap w-full sm:w-auto justify-between sm:justify-start">
<!-- First Button -->
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-text border border-primary shadow-sm hover:bg-primary-dark hover:text-primary hover:scale-105 transform transition-all duration-200 opacity-50 cursor-not-allowed">
<i class="ri-skip-back-line text-base mr-2"></i>
First
</a>
<!-- Previous Button -->
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-text border border-primary shadow-sm hover:bg-primary-dark hover:text-primary hover:scale-105 transform transition-all duration-200 opacity-50 cursor-not-allowed">
<i class="ri-arrow-left-s-line text-base mr-2"></i>
Previous
</a>
<!-- Next Button -->
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-text border border-primary shadow-sm hover:bg-primary-dark hover:text-primary hover:scale-105 transform transition-all duration-200 opacity-50 cursor-not-allowed">
Next
<i class="ri-arrow-right-s-line text-base ml-2"></i>
</a>
<!-- Last Button -->
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-text border border-primary shadow-sm hover:bg-primary-dark hover:text-primary hover:scale-105 transform transition-all duration-200 opacity-50 cursor-not-allowed">
Last
<i class="ri-skip-forward-line text-base ml-2"></i>
</a>
</div>
<!-- Center Group: Add/All/Print/Refresh -->
<div class="flex items-center gap-2 flex-wrap w-full sm:w-auto justify-between sm:justify-end mt-2 sm:mt-0">
<button type="button" onclick="location.reload();" class="flex items-center px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-text border border-primary shadow-sm hover:bg-primary-dark hover:text-primary hover:scale-105 transform transition-all duration-200">
<i class="ri-refresh-line text-base mr-2"></i>
Refresh
</button>
</div>
<!-- Right Group: Theme/Notifications/Profile -->
<div class="flex items-center gap-4 flex-wrap w-full sm:w-auto justify-between sm:justify-end mt-2 sm:mt-0">
<!-- Theme Toggle -->
<div class="relative inline-block w-10 align-middle select-none">
<input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" onchange="toggleTheme(this.checked)">
<label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
<!-- Notifications Icon -->
<button class="p-2 rounded-md hover:bg-primary-dark transition-colors">
<i class="ri-notification-3-line text-lg"></i>
</button>
<!-- User Profile Dropdown -->
<div class="dropdown">
<button class="flex items-center space-x-3 rounded-lg hover:bg-primary-dark transition-colors">
<img src="/static/images/demo/demo-profile.jpg" alt="Profile" class="w-8 h-8 rounded-full object-cover border-2 border-gray-200">
<span class="text-sm font-medium">olee</span>
</button>
</div>
</div>
</div>
</div>
</header>
<div class="p-6">
<h1 class="text-2xl font-bold">মূল বিষয়বস্তু এলাকা</h1>
<p>এখানে মূল বিষয়বস্তু থাকবে।</p>
</div>
</div>
<!-- Mobile Bottom Menu -->
<nav class="fixed bottom-0 left-0 right-0 z-40 flex justify-around items-center py-3 lg:hidden bg-gradient-to-t from-secondary via-bgDark to-primary border-t border-opacity-20 border-bgLight shadow-lg">
<!-- Dashboard -->
<a href="/dashboard/" class="flex flex-col items-center text-primary-text hover:text-card-footer-gradient active:scale-105 transition-all duration-300">
<i class="ri-dashboard-line text-2xl"></i>
<span class="text-sm">Dashboard</span>
</a>
<!-- Sales -->
<a href="/erp/sales-orders/" class="flex flex-col items-center text-primary-text hover:text-card-footer-gradient active:scale-105 transition-all duration-300">
<i class="ri-file-list-3-line text-2xl"></i>
<span class="text-sm">Sales</span>
</a>
<!-- Products -->
<a href="/erp/products/" class="flex flex-col items-center text-primary-text hover:text-card-footer-gradient active:scale-105 transition-all duration-300">
<i class="ri-shopping-bag-3-line text-2xl"></i>
<span class="text-sm">Products</span>
</a>
<!-- Purchase -->
<a href="/erp/purchase-orders/" class="flex flex-col items-center text-primary-text hover:text-card-footer-gradient active:scale-105 transition-all duration-300">
<i class="ri-file-list-3-line text-2xl"></i>
<span class="text-sm">Purchase</span>
</a>
</nav>
<!-- JavaScript -->
<script>
const sidebar = document.getElementById('sidebar');
const mainContent = document.getElementById('mainContent');
const sidebarToggle = document.getElementById('sidebarToggle');
const closeSidebar = document.getElementById('closeSidebar');
const dropdownTriggers = document.querySelectorAll('.dropdown-trigger');
// Toggle Sidebar
sidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('-translate-x-full');
mainContent.classList.toggle('ml-64');
});
closeSidebar.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
mainContent.classList.remove('ml-64');
});
// Dropdown Functionality
dropdownTriggers.forEach(trigger => {
trigger.addEventListener('click', () => {
const dropdown = trigger.nextElementSibling;
if (dropdown.classList.contains('hidden')) {
dropdown.classList.remove('hidden');
dropdown.classList.add('block', 'animate-slide-down');
} else {
dropdown.classList.add('hidden');
dropdown.classList.remove('block', 'animate-slide-down');
}
});
});
// Add animation keyframes
document.head.insertAdjacentHTML('beforeend', `
<style>
@keyframes slide-down {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-slide-down {
animation: slide-down 0.3s ease-out;
}
</style>
`);
</script>
</body>
</html>