<!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;
}
.form-container {
animation: formFadeIn 0.5s ease-out;
}
@keyframes formFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.form-field {
position: relative;
margin: 2rem 0;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 1rem;
background: transparent;
border: 2px solid #ccc;
border-radius: 4px;
outline: none;
transition: all 0.3s ease;
font-size: 1rem;
}
.dark .form-input,
.dark .form-textarea,
.dark .form-select {
border-color: #4a4a4a;
color: #ffffff;
}
.form-label {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
background: var(--bg-light);
padding: 0 0.5rem;
color: #666;
transition: all 0.3s ease;
pointer-events: none;
}
.dark .form-label {
background: var(--bg-dark);
color: #9ca3af;
}
.form-textarea ~ .form-label {
top: 1rem;
}
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
.form-textarea:focus ~ .form-label,
.form-textarea:not(:placeholder-shown) ~ .form-label,
.form-select:focus ~ .form-label,
.form-select:not([value=""]) ~ .form-label {
top: -0.5rem;
left: 0.5rem;
transform: translateY(-50%) scale(0.85);
color: var(--primary-color);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 1px var(--primary-color);
}
.form-checkbox-field,
.form-radio-field {
display: flex;
align-items: center;
margin: 0.5rem 0;
cursor: pointer;
}
.form-checkbox,
.form-radio {
appearance: none;
width: 1.2rem;
height: 1.2rem;
border: 2px solid #ccc;
margin-right: 0.5rem;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.form-radio {
border-radius: 50%;
}
.form-checkbox:checked,
.form-radio:checked {
border-color: var(--primary-color);
background-color: var(--primary-color);
}
.form-checkbox:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 0.8rem;
}
.form-radio:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.5rem;
height: 0.5rem;
background-color: white;
border-radius: 50%;
}
.form-file-upload {
position: relative;
width: 100%;
height: 100px;
border: 2px dashed #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.form-file-upload:hover {
border-color: var(--primary-color);
}
.form-file-upload input[type="file"] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.submit-button {
width: 100%;
padding: 1rem;
background: var(--primary-color);
color: white;
border: none;
border-radius: 4px;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 2rem;
}
.submit-button:hover {
background: var(--primary-color);
opacity: 0.9;
transform: translateY(-2px);
}
/* New styles for range input */
.form-range {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ddd;
outline: none;
padding: 0;
margin: 0;
}
.form-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
transition: all 0.3s ease;
}
.form-range::-webkit-slider-thumb:hover {
background: var(--primary-color);
}
.form-range:active::-webkit-slider-thumb {
background: var(--primary-color);
}
.form-range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: var(--primary-color);
cursor: pointer;
transition: background 0.3s ease;
}
.form-range::-moz-range-thumb:hover {
background: var(--primary-color);
}
.form-range:active::-moz-range-thumb {
background: var(--primary-color);
}
/* Styles for multi-select */
.form-multiselect {
height: auto;
min-height: 100px;
}
</style>
</head>
<body class="bg-bgLight text-text-light dark:bg-bgDark dark:text-text-dark transition-all duration-300">
<div class="p-10">
<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">
<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>
<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.</p>
<form class="space-y-6">
<!-- Name Field -->
<div class="form-field">
<input type="text" id="name" class="form-input" required placeholder=" " />
<label for="name" class="form-label">নাম</label>
</div>
<!-- Email Field -->
<div class="form-field">
<input type="email" id="email" class="form-input" required placeholder=" " />
<label for="email" class="form-label">ইমেইল</label>
</div>
<!-- Phone Field -->
<div class="form-field">
<input type="tel" id="phone" class="form-input" required placeholder=" " />
<label for="phone" class="form-label">ফোন নাম্বার</label>
</div>
<!-- District Selection -->
<div class="form-field">
<select id="district" class="form-select" required>
<option value="">নির্বাচন করুন</option>
<option value="dhaka">ঢাকা</option>
<option value="chittagong">চট্টগ্রাম</option>
<option value="rajshahi">রাজশাহী</option>
<option value="khulna">খুলনা</option>
</select>
<label for="district" class="form-label">জেলা</label>
</div>
<!-- Gender Selection -->
<div class="space-y-2">
<label class="block text-gray-700 dark:text-gray-300 font-medium mb-2">লিঙ্গ</label>
<div class="flex space-x-4">
<label class="form-radio-field">
<input type="radio" name="gender" class="form-radio" />
<span>পুরুষ</span>
</label>
<label class="form-radio-field">
<input type="radio" name="gender" class="form-radio" />
<span>মহিলা</span>
</label>
<label class="form-radio-field">
<input type="radio" name="gender" class="form-radio" />
<span>অন্যান্য</span>
</label>
</div>
</div>
<!-- File Upload -->
<div class="form-field">
<div class="form-file-upload">
<input type="file" id="file" accept="image/*" />
<div class="text-center">
<p>ছবি আপলোড করুন</p>
<p class="text-sm text-gray-500">ড্র্যাগ করুন অথবা ক্লিক করুন</p>
</div>
</div>
</div>
<!-- Message Field -->
<div class="form-field">
<textarea id="message" class="form-textarea" rows="4" placeholder=" "></textarea>
<label for="message" class="form-label">আপনার বার্তা</label>
</div>
<!-- Multiple Checkbox -->
<div class="space-y-2">
<label class="block text-gray-700 dark:text-gray-300 font-medium mb-2">পছন্দের বিষয়সমূহ</label>
<div class="space-y-2">
<label class="form-checkbox-field">
<input type="checkbox" name="interests" value="sports" class="form-checkbox" />
<span>খেলাধুলা</span>
</label>
<label class="form-checkbox-field">
<input type="checkbox" name="interests" value="music" class="form-checkbox" />
<span>সঙ্গীত</span>
</label>
<label class="form-checkbox-field">
<input type="checkbox" name="interests" value="reading" class="form-checkbox" />
<span>পড়াশুনা</span>
</label>
<label class="form-checkbox-field">
<input type="checkbox" name="interests" value="travel" class="form-checkbox" />
<span>ভ্রমণ</span>
</label>
</div>
</div>
<!-- Range Input -->
<div class="form-field">
<label for="experience" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">অভিজ্ঞতা (বছর)</label>
<input type="range" id="experience" name="experience" min="0" max="20" step="1" class="form-range" />
<div class="flex justify-between text-xs text-gray-600">
<span>0</span>
<span>10</span>
<span>20</span>
</div>
</div>
<!-- Multi-select -->
<div class="form-field">
<label for="skills" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">দক্ষতা</label>
<select id="skills" name="skills" multiple class="form-multiselect">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
</div>
<!-- Terms Checkbox -->
<div class="form-checkbox-field">
<input type="checkbox" id="terms" class="form-checkbox" required />
<label for="terms">
আমি <a href="#" class="text-primary-600 hover:underline">শর্তাবলী</a> মেনে নিচ্ছি
</label>
</div>
<!-- Submit Button -->
<button type="submit" class="submit-button">
জমা দিন
</button>
</form>
</div>
<div class="bg-gradientRedToBlack dark:bg-gradientBlackToRed text-white p-6 rounded-b-lg">
<p>Footer Content</p>
</div>
</div>
<button onclick="toggleDarkMode()" class="mt-6 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors">Toggle Dark Mode</button>
</div>
<script>
const toggleDarkMode = () => {
document.documentElement.classList.toggle("dark");
};
</script>
</body>
</html>