<!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", // Enable dark mode based on class
theme: {
extend: {
colors: {
primary: {
DEFAULT: "#a31319", // Light red color
dark: "#4a0000", // Darker red for dark mode
text: "#ffffff" // White text for light mode
},
secondary: "#5a5a5a", // A secondary color for text
bgLight: "#ffffff", // Light background for light mode
bgDark: "#333333", // Dark background for dark mode
},
backgroundImage: {
gradientRedToBlack: "linear-gradient(to right, #a31319, #000000)", // Gradient for light mode
gradientBlackToRed: "linear-gradient(to right, #000000, #a31319)" // Gradient for dark mode
}
}
}
};
</script>
<style>
/* Root light mode variables */
:root {
--primary-color: #a31319;
--secondary-color: #5a5a5a;
--bg-light: #ffffff;
--text-light: #333333;
--border-light: #ddd;
}
/* Dark mode variables */
.dark {
--primary-color: #4a0000;
--secondary-color: #888888;
--bg-dark: #333333;
--text-dark: #ffffff;
--border-dark: #444;
}
</style>
</head>
<body class="bg-[var(--bg-light)] text-[var(--text-light)] dark:bg-[var(--bg-dark)] dark:text-[var(--text-dark)] transition-all duration-300">
<nav class="fixed w-full z-50 bg-gradient-to-r from-primary to-black shadow-md">
<div class="container mx-auto flex justify-between items-center p-4">
<h1 class="text-2xl font-bold text-white">ড্যাশবোর্ড</h1>
<button id="themeToggle"
class="px-4 py-2 rounded-lg bg-white/10 text-white
hover:bg-white/20 transition-all duration-300
backdrop-filter backdrop-blur-sm border border-white/10">
থিম পরিবর্তন
</button>
</div>
</nav>
<main class="container mx-auto pt-24 px-4 pb-8">
<div class="bg-gradient-to-r from-primary to-black glass-card rounded-lg p-6 mb-8">
<h2 class="text-xl font-semibold mb-4 text-primary-DEFAULT dark:text-white">স্বাগতম</h2>
<p class="text-gray-600 dark:text-gray-300">
এই ড্যাশবোর্ডটি কাস্টম Tailwind কনফিগারেশন ব্যবহার করে তৈরি করা হয়েছে।
</p>
</div>
<!-- Consistent Card Styling -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="card bg-gradient-to-r from-primary to-black text-white rounded-lg p-6 shadow-md dark:bg-gradient-to-r dark:from-primary-dark dark:to-black">
<div class="card-header text-xl font-semibold mb-4">কার্ড হেডার</div>
<div class="card-text">
এই কার্ডের মধ্যে সাধারণ তথ্য রয়েছে, যা আপনি দেখতে পারবেন। কার্ড কম্পোনেন্টটি একটি সাধারণ UI উপাদান।
</div>
<div class="card-footer mt-4 text-right">
<button class="bg-primary text-white py-2 px-4 rounded-lg">একশন বাটন</button>
</div>
</div>
<!-- Card 2 -->
<div class="card bg-gradient-to-r from-primary to-black text-white rounded-lg p-6 shadow-md dark:bg-gradient-to-r dark:from-primary-dark dark:to-black">
<div class="card-header text-xl font-semibold mb-4">কার্ড হেডার</div>
<div class="card-text">
এই কার্ডের মধ্যে সাধারণ তথ্য রয়েছে, যা আপনি দেখতে পারবেন। কার্ড কম্পোনেন্টটি একটি সাধারণ UI উপাদান।
</div>
<div class="card-footer mt-4 text-right">
<button class="bg-primary text-white py-2 px-4 rounded-lg">একশন বাটন</button>
</div>
</div>
<!-- Card 3 -->
<div class="card bg-gradient-to-r from-primary to-black text-white rounded-lg p-6 shadow-md dark:bg-gradient-to-r dark:from-primary-dark dark:to-black">
<div class="card-header text-xl font-semibold mb-4">কার্ড হেডার</div>
<div class="card-text">
এই কার্ডের মধ্যে সাধারণ তথ্য রয়েছে, যা আপনি দেখতে পারবেন। কার্ড কম্পোনেন্টটি একটি সাধারণ UI উপাদান।
</div>
<div class="card-footer mt-4 text-right">
<button class="bg-primary text-white py-2 px-4 rounded-lg">একশন বাটন</button>
</div>
</div>
</div>
<!-- Footer Section -->
<footer class="bg-primary text-white text-center py-6 mt-8">
<p>© ২০২৪ ড্যাশবোর্ড - সব অধিকার সংরক্ষিত</p>
</footer>
</main>
<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>