<!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>
</head>
<body class="bg-bgLight text-text-light dark:bg-bgDark dark:text-text-dark transition-all duration-300">
<button id="themeToggle"
class="bg-gradient-to-r from-primary to-black dark:from-primary-dark dark:to-black text-white">
থিম পরিবর্তন
</button>
<div class="p-10">
<!-- Card with Table -->
<div class="bg-card dark:bg-card-dark text-card-text dark:text-card-textDark border border-gray-200 dark:border-gray-700 rounded-lg shadow-md overflow-hidden">
<!-- Table Header -->
<div class="bg-gradient-to-r from-primary to-black dark:from-primary-dark dark:to-black text-white p-4 font-bold">
<h2>Table Header</h2>
</div>
<!-- Table Body -->
<div class="p-4">
<div class="grid grid-cols-5 font-bold mb-2">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Actions</div>
</div>
<div class="grid grid-cols-5 items-center py-2 border-b border-gray-200 dark:border-gray-700">
<div>Row 1 Data 1</div>
<div>Row 1 Data 2</div>
<div>Row 1 Data 3</div>
<div>Row 1 Data 4</div>
<div class="flex gap-2">
<button class="px-2 py-1 rounded bg-primary text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 9v10H8V9m4-4h8m-8 0a4 4 0 00-8 0m8 0a4 4 0 01-8 0" /></svg>
Edit
</button>
<button class="px-2 py-1 rounded bg-secondary text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m2 0a2 2 0 110 4H7a2 2 0 010-4m2 0a2 2 0 114 0m-4-4V6m8 0a4 4 0 10-8 0m8 0a4 4 0 118 0" /></svg>
Delete
</button>
<button class="px-2 py-1 rounded bg-gradientRedToBlack text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v8m0-8l4 4m-4-4l-4 4" /></svg>
View
</button>
<button class="px-2 py-1 rounded bg-bgLight text-primary">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13v4a3 3 0 01-3 3H7a3 3 0 01-3-3v-4m16-2H8m8 0a2 2 0 10-4 0m4 0a2 2 0 114 0" /></svg>
Print
</button>
</div>
</div>
</div>
<!-- Table Footer -->
<div class="bg-gradient-to-r from-primary to-black dark:from-primary-dark dark:to-black text-white p-4 text-right">
<p>Table Footer</p>
</div>
</div>
</div>
<script>
const themeToggle = document.getElementById('themeToggle');
const html = document.documentElement;
const setTheme = (isDark) => {
if (isDark) {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
localStorage.setItem('theme', isDark ? 'dark' : 'light');
};
themeToggle.addEventListener('click', () => {
const isDark = !html.classList.contains('dark');
setTheme(isDark);
});
// Initial theme setup
const isDark = localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
setTheme(isDark);
</script>
</body>
</html>