<!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",
button: {
DEFAULT: '#a31319',
dark: '#4a0000',
text: '#ffffff',
hover: '#e63946',
hoverDark: '#9b0000'
},
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-text-light dark:bg-bgDark dark:text-text-dark transition-all duration-300">
<div class="p-10">
<!-- Card with Custom Header and Footer Gradients -->
<div class="bg-card text-card-text border border-gray-300 rounded-lg shadow-lg transition-all duration-300 dark:bg-card-dark dark:text-card-text-dark hover:-translate-y-1">
<!-- Card Header with Gradient Background -->
<div class="bg-gradientRedToBlack dark:bg-gradientBlackToRed text-white p-6 rounded-t-lg">
<h2 class="text-2xl font-bold">Card Header</h2>
<p class="text-sm opacity-80">Subtitle text here</p>
</div>
<!-- Card Body with White Background -->
<div class="bg-card-body text-card-body-text p-8 dark:bg-card-body-dark dark:text-card-body-textDark">
<h3 class="text-xl font-semibold mb-4">Content Section</h3>
<p class="mb-4">This is a simple card body with enhanced design and smooth transitions. The content is more structured and visually appealing.</p>
<div class="flex gap-4">
<button class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-dark transition-colors">
Action 1
</button>
<button class="px-4 py-2 border border-primary text-primary rounded hover:bg-primary hover:text-white transition-colors">
Action 2
</button>
</div>
</div>
<!-- Card Footer with Gradient Background -->
<div class="bg-gradientRedToBlack dark:bg-gradientBlackToRed text-white p-6 rounded-b-lg">
<div class="flex justify-between items-center">
<p>Footer Content</p>
</div>
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button onclick="toggleDarkMode()"
class="mt-6 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 dark:bg-primary-dark dark:hover:bg-primary">
Toggle Dark Mode
</button>
</div>
<script>
const toggleDarkMode = () => {
document.documentElement.classList.toggle("dark");
}
</script>
</body>
</html>