<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ডোপামিন - অ্যাডমিশন প্রস্তুতি</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts - Hind Siliguri (for Bangla) and Inter (for English) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* Base font setting */
html {
font-family: 'Hind+Siliguri', 'Inter', sans-serif;
scroll-behavior: smooth;
}
/* Page transition helper */
.page-content {
display: none;
}
.page-content.active {
display: block;
}
/* Custom Exam UI styles */
.exam-option {
transition: all 0.2s ease-in-out;
}
.exam-option.selected {
background-color: #E0E7FF; /* indigo-100 */
border-color: #6366F1; /* indigo-500 */
color: #4338CA; /* indigo-700 */
border-width: 2px;
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
}
.exam-option.selected .option-letter {
background-color: #6366F1;
color: white;
border-color: #6366F1;
}
.exam-option:not(.selected):hover {
background-color: #f7f7f7; /* lighter gray */
transform: translateY(-2px);
}
/* Question Palette Button Styles */
.palette-btn {
transition: all 0.15s ease;
}
.palette-btn.answered {
background-color: #10b981; /* green-500 */
color: white;
border-color: #059669;
}
.palette-btn.current {
background-color: #3b82f6; /* blue-500 */
color: white;
border-color: #2563eb;
transform: scale(1.1);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
.palette-btn.not-answered {
background-color: #f3f4f6; /* gray-100 */
border-color: #d1d5db; /* gray-300 */
color: #4b5563; /* gray-600 */
}
.palette-btn:hover:not(.current) {
transform: scale(1.05);
}
/* Modal styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
}
.modal.active {
display: flex;
}
.modal-content {
animation: modal-appear 0.3s ease-out;
}
@keyframes modal-appear {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Smooth Mobile Menu Animation */
#mobile-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu.open {
max-height: 400px; /* Adjust based on menu items */
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Animated Hamburger Icon */
#mobile-menu-btn .line {
transition: all 0.3s ease-in-out;
transform-origin: center;
}
#mobile-menu-btn.open .line-1 {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu-btn.open .line-2 {
opacity: 0;
}
#mobile-menu-btn.open .line-3 {
transform: translateY(-8px) rotate(-45deg);
}
</style>
</head>
<body class="bg-gray-50 text-slate-800">
<!-- ===== Header / Navigation Bar ===== -->
<header class="bg-white/80 shadow-sm backdrop-blur-md sticky top-0 z-50 transition-all duration-300">
<nav class="container mx-auto px-4 lg:px-8 py-4 flex justify-between items-center">
<!-- Logo -->
<a href="#" onclick="showPage('page-home')" class="text-3xl font-bold bg-gradient-to-r from-indigo-600 to-teal-500 bg-clip-text text-transparent">
ডোপামিন
</a>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-6">
<a href="#" onclick="showPage('page-home')" class="text-slate-600 hover:text-indigo-600 font-medium transition-colors">হোম</a>
<a href="#" onclick="showPage('page-courses')" class="text-slate-600 hover:text-indigo-600 font-medium transition-colors">কোর্সসমূহ</a>
<a href="#" onclick="showPage('page-question-bank')" class="text-slate-600 hover:text-indigo-600 font-medium transition-colors">প্রশ্নব্যাংক</a>
<a href="#" onclick="showPage('page-dashboard')" class="text-slate-600 hover:text-indigo-600 font-medium transition-colors">ড্যাশবোর্ড</a>
<a href="#" onclick="openModal('modal-custom-exam')" class="text-white bg-gradient-to-r from-teal-500 to-teal-600 hover:from-teal-600 hover:to-teal-700 px-5 py-2.5 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105">
কাস্টম এক্সাম
</a>
</div>
<!-- User Profile / Auth (Mockup) -->
<div class="hidden md:flex items-center space-x-3">
<!-- Show this button when logged out -->
<button id="login-btn" class="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-4 py-2 rounded-lg font-semibold hover:from-indigo-700 hover:to-indigo-800 transition-all shadow-md hover:shadow-lg transform hover:scale-105">
লগইন
</button>
<!-- Show this when logged in -->
<div id="user-profile-menu" class="hidden items-center space-x-2 cursor-pointer">
<img src="https://placehold.co/40x40/E2E8F0/4A5568?text=S" alt="Profile" class="w-10 h-10 rounded-full border-2 border-indigo-200">
<span class="font-medium hidden sm:block text-slate-700">স্টুডেন্ট</span>
</div>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden flex items-center">
<!-- Mobile Auth button (Example) -->
<button id="login-btn-mobile" class="text-sm bg-indigo-600 text-white px-3 py-1.5 rounded-lg font-semibold mr-3">লগইন</button>
<button id="mobile-menu-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-slate-700 hover:text-slate-900 hover:bg-slate-100 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<div class="space-y-2 w-7 h-7">
<span class="line line-1 block w-full h-0.5 bg-current"></span>
<span class="line line-2 block w-full h-0.5 bg-current"></span>
<span class="line line-3 block w-full h-0.5 bg-current"></span>
</div>
</button>
</div>
</nav>
<!-- Mobile Menu (Controlled by JS and CSS transition) -->
<div id="mobile-menu" class="md:hidden border-t border-slate-200">
<a href="#" onclick="showPage('page-home'); closeMobileMenu();" class="block px-5 py-3 text-slate-700 hover:bg-slate-100 font-medium">হোম</a>
<a href="#" onclick="showPage('page-courses'); closeMobileMenu();" class="block px-5 py-3 text-slate-700 hover:bg-slate-100 font-medium">কোর্সসমূহ</a>
<a href="#" onclick="showPage('page-question-bank'); closeMobileMenu();" class="block px-5 py-3 text-slate-700 hover:bg-slate-100 font-medium">প্রশ্নব্যাংক</a>
<a href="#" onclick="showPage('page-dashboard'); closeMobileMenu();" class="block px-5 py-3 text-slate-700 hover:bg-slate-100 font-medium">ড্যাশবোর্ড</a>
<a href="#" onclick="openModal('modal-custom-exam'); closeMobileMenu();" class="block px-5 py-3 m-4 text-center text-white bg-gradient-to-r from-teal-500 to-teal-600 rounded-lg font-bold">কাস্টম এক্সাম</a>
</div>
</header>
<!-- ===== Main Content Wrapper ===== -->
<main class="container mx-auto px-4 lg:px-8 py-8 lg:py-12">
<!-- ===== Page: Home ===== -->
<div id="page-home" class="page-content active">
<!-- Hero Section -->
<section class="bg-white rounded-xl shadow-lg p-6 md:p-12 flex flex-col md:flex-row items-center overflow-hidden">
<div class="md:w-1/2 text-center md:text-left">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-800 leading-tight">
<span class="bg-gradient-to-r from-indigo-600 to-teal-500 bg-clip-text text-transparent">অ্যাডমিশন প্রস্তুতি</span>,
<br class="hidden md:block">
এখন আপনার হাতের মুঠোয়
</h1>
<p class="mt-4 text-base sm:text-lg text-slate-600">
"ডোপামিন"-এ স্বাগতম! হাজারো MCQ প্র্যাকটিস করুন, কাস্টম এক্সাম দিন এবং এক্সাম ব্যাচে অংশ নিয়ে নিজেকে প্রস্তুত করুন সেরা প্রস্তুতির জন্য।
</p>
<div class="mt-8 flex flex-col sm:flex-row gap-4 sm:gap-0 sm:space-x-4">
<a href="#" onclick="showPage('page-courses')" class="w-full sm:w-auto bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-8 py-3 rounded-lg font-semibold text-lg hover:from-indigo-700 hover:to-indigo-800 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 text-center">
কোর্সসমূহ দেখুন
</a>
<a href="#" onclick="showPage('page-question-bank')" class="w-full sm:w-auto bg-slate-100 text-slate-700 px-8 py-3 rounded-lg font-semibold text-lg hover:bg-slate-200 transition-all duration-300 text-center">
প্রশ্নব্যাংক
</a>
</div>
</div>
<div class="md:w-1/2 mt-8 md:mt-0 flex justify-center">
<img src="https://placehold.co/500x400/E0E7FF/4338CA?text=Dopamine+Hero" alt="Education Illustration" class="rounded-lg max-w-full h-auto">
</div>
</section>
<!-- Features Section -->
<section class="mt-20">
<h2 class="text-3xl font-bold text-center text-slate-800 mb-12">আমাদের সেরা ফিচারসমূহ</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Feature Card 1 -->
<div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="text-teal-500 mb-4 bg-teal-50 w-16 h-16 rounded-full flex items-center justify-center">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.536L16.732 3.732z"></path></svg>
</div>
<h3 class="text-xl font-semibold mb-2 text-slate-700">কাস্টম এক্সাম</h3>
<p class="text-slate-600">বিষয়, অধ্যায়, সময় ও প্রশ্ন সংখ্যা সিলেক্ট করে নিজের মতো এক্সাম তৈরি করুন।</p>
</div>
<!-- Feature Card 2 -->
<div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="text-indigo-500 mb-4 bg-indigo-50 w-16 h-16 rounded-full flex items-center justify-center">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18c-2.305 0-4.408.867-6 2.292m0-14.25v14.25"></path></svg>
</div>
<h3 class="text-xl font-semibold mb-2 text-slate-700">প্রশ্নব্যাংক সলভ</h3>
<p class="text-slate-600">মেডিকেল, ডেন্টাল ও ভার্সিটির বিগত বছরের প্রশ্ন সলভ করুন এক্সাম দিয়ে।</p>
</div>
<!-- Feature Card 3 -->
<div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="text-sky-500 mb-4 bg-sky-50 w-16 h-16 rounded-full flex items-center justify-center">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</div>
<h3 class="text-xl font-semibold mb-2 text-slate-700">এক্সাম ব্যাচ</h3>
<p class="text-slate-600">রুটিন মাফিক এক্সাম ব্যাচে অংশ নিয়ে গুছিয়ে নিন আপনার পূর্ণাঙ্গ প্রস্তুতি।</p>
</div>
<!-- Feature Card 4 -->
<div class="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
<div class="text-emerald-500 mb-4 bg-emerald-50 w-16 h-16 rounded-full flex items-center justify-center">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path></svg>
</div>
<h3 class="text-xl font-semibold mb-2 text-slate-700">পারফরম্যান্স অ্যানালাইসিস</h3>
<p class="text-slate-600">প্রতিটি পরীক্ষার বিস্তারিত ফলাফল ও দুর্বলতাগুলো চিহ্নিত করে এগিয়ে থাকুন।</p>
</div>
</div>
</section>
</div>
<!-- ===== Page: Dashboard ===== -->
<div id="page-dashboard" class="page-content">
<h1 class="text-3xl font-bold text-slate-800 mb-6">আমার ড্যাশবোর্ড</h1>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white p-6 rounded-xl shadow-lg flex items-center space-x-4">
<div class="bg-indigo-100 p-3 rounded-full">
<svg class="w-8 h-8 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
</div>
<div>
<p class="text-sm text-slate-500">মোট এক্সাম</p>
<p class="text-2xl font-bold text-slate-800">১২ টি</p>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg flex items-center space-x-4">
<div class="bg-teal-100 p-3 rounded-full">
<svg class="w-8 h-8 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z"></path></svg>
</div>
<div>
<p class="text-sm text-slate-500">গড় মার্কস</p>
<p class="text-2xl font-bold text-slate-800">৮২.৫%</p>
</div>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg flex items-center space-x-4">
<div class="bg-sky-100 p-3 rounded-full">
<svg class="w-8 h-8 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
</div>
<div>
<p class="text-sm text-slate-500">লিডারবোর্ড পজিশন</p>
<p class="text-2xl font-bold text-slate-800">#১২৮</p>
</div>
</div>
</div>
<!-- My Courses -->
<div class="bg-white p-6 rounded-xl shadow-lg">
<h2 class="text-xl font-semibold text-slate-800 mb-4">আমার কোর্সসমূহ (এক্সাম ব্যাচ)</h2>
<div class="space-y-4">
<!-- Enrolled Course 1 -->
<div class="border border-slate-200 p-4 rounded-lg flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div class="mb-3 sm:mb-0">
<h3 class="text-lg font-semibold text-indigo-700">মেডিকেল অ্যাডমিশন ফাইনাল মডেল টেস্ট ব্যাচ</h3>
<p class="text-sm text-slate-500">পরবর্তী এক্সাম: আগামী ৫ই ডিসেম্বর (চ্যাপ্টার: ১০)</p>
</div>
<a href="#" class="bg-indigo-500 text-white px-5 py-2.5 rounded-lg font-medium hover:bg-indigo-600 transition-colors duration-200 w-full sm:w-auto text-center">
রুটিন দেখুন
</a>
</div>
<!-- Enrolled Course 2 -->
<div class="border border-slate-200 p-4 rounded-lg flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div class="mb-3 sm:mb-0">
<h3 class="text-lg font-semibold text-indigo-700">ভার্সিটি 'ক' ইউনিট প্রশ্নব্যাংক সলভ ব্যাচ</h3>
<p class="text-sm text-slate-500">পরবর্তী এক্সাম: আগামী ৪ই ডিসেম্বর (বিষয়: রসায়ন)</p>
</div>
<a href="#" class="bg-indigo-500 text-white px-5 py-2.5 rounded-lg font-medium hover:bg-indigo-600 transition-colors duration-200 w-full sm:w-auto text-center">
রুটিন দেখুন
</a>
</div>
</div>
</div>
</div>
<!-- ===== Page: Question Bank ===== -->
<div id="page-question-bank" class="page-content">
<h1 class="text-3xl font-bold text-slate-800 mb-6">প্রশ্নব্যাংক সলভ</h1>
<p class="text-lg text-slate-600 mb-8">বিগত বছরের প্রশ্নগুলোর উপর এক্সাম দিয়ে নিজের প্রস্তুতি যাচাই করুন।</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Medical -->
<div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-teal-500 transition-all duration-300 transform hover:shadow-xl hover:-translate-y-1">
<h2 class="text-2xl font-semibold text-teal-700 mb-4">মেডিকেল প্রশ্নব্যাংক</h2>
<div class="space-y-2">
<a href="#" onclick="startMockExam('med_2022')" class="block text-slate-700 hover:text-indigo-600 hover:bg-slate-100 p-3 rounded-lg transition-colors font-medium">মেডিকেল ভর্তি পরীক্ষা ২০২১-২২</a>
<a href="#" onclick="startMockExam('med_2021')" class="block text-slate-700 hover:text-indigo-600 hover:bg-slate-100 p-3 rounded-lg transition-colors font-medium">মেডিকেল ভর্তি পরীক্ষা ২০২০-২১</a>
<a href="#" onclick="startMockExam('med_2020')" class="block text-slate-700 hover:text-indigo-600 hover:bg-slate-100 p-3 rounded-lg transition-colors font-medium">মেডিকেল ভর্তি পরীক্ষা ২০১৯-২০</a>
</div>
</div>
<!-- Dental -->
<div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-sky-500 transition-all duration-300 transform hover:shadow-xl hover:-translate-y-1">
<h2 class="text-2xl font-semibold text-sky-700 mb-4">ডেন্টাল প্রশ্নব্যাংক</h2>
<div class="space-y-2">
<a href="#" onclick="startMockExam('den_2022')" class="block text-slate-700 hover:text-indigo-600 hover:bg-slate-100 p-3 rounded-lg transition-colors font-medium">ডেন্টাল ভর্তি পরীক্ষা ২০২১-২২</a>
<a href="#" onclick="startMockExam('den_2021')" class="block text-slate-700 hover:text-indigo-600 hover:bg-slate-100 p-3 rounded-lg transition-colors font-medium">ডেন্টাল ভর্তি পরীক্ষা ২০২০-২১</a>
<a href="#" onclick="startMockExam('den_2020')" class="block text-slate-700 hover:text-indigo-600 hover:bg-slate-100 p-3 rounded-lg transition-colors font-medium">ডেন্টাল ভর্তি পরীক্ষা ২০১৯-২০</a>
</div>
</div>
<!-- University -->
<div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-indigo-500 opacity-70 transition-all duration-300 transform hover:shadow-xl hover:-translate-y-1">
<h2 class="text-2xl font-semibold text-indigo-700 mb-4">ভার্সিটি 'ক' ইউনিট</h2>
<p class="text-slate-500 p-3">শীঘ্রই আসছে...</p>
</div>
</div>
</div>
<!-- ===== Page: Courses ===== -->
<div id="page-courses" class="page-content">
<h1 class="text-3xl font-bold text-slate-800 mb-8 text-center">আমাদের এক্সাম ব্যাচসমূহ</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Course Card 1 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-2xl hover:scale-[1.03]">
<div class="relative">
<img src="https://placehold.co/600x400/31C48D/FFFFFF?text=Medical+Batch" alt="Course Image" class="w-full h-48 object-cover">
<span class="absolute top-4 left-4 inline-block bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold">Bestseller</span>
</div>
<div class="p-6 flex-grow">
<span class="inline-block bg-teal-100 text-teal-700 px-3 py-1 rounded-full text-sm font-semibold mb-3">মেডিকেল ব্যাচ</span>
<h3 class="text-xl font-bold text-slate-800 mb-2">ফাইনাল মডেল টেস্ট ব্যাচ (মেডিকেল)</h3>
<p class="text-slate-600 text-sm mb-4">পূর্ণাঙ্গ সিলেবাসের উপর ২০টি স্পেশাল মডেল টেস্ট দিয়ে শেষ মুহূর্তের প্রস্তুতি নাও।</p>
</div>
<div class="p-6 bg-slate-50 border-t flex justify-between items-center">
<p class="text-2xl font-bold text-indigo-600">৳৫০০</p>
<button class="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-5 py-2.5 rounded-lg font-semibold hover:from-indigo-700 hover:to-indigo-800 transition-all shadow-md hover:shadow-lg transform hover:scale-105">এনরোল করুন</button>
</div>
</div>
<!-- Course Card 2 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-2xl hover:scale-[1.03]">
<img src="https://placehold.co/600x400/6366F1/FFFFFF?text=Varsity+Batch" alt="Course Image" class="w-full h-48 object-cover">
<div class="p-6 flex-grow">
<span class="inline-block bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-semibold mb-3">ভার্সিটি 'ক'</span>
<h3 class="text-xl font-bold text-slate-800 mb-2">প্রশ্নব্যাংক সলভ ব্যাচ (DU, BUET, CKruet)</h3>
<p class="text-slate-600 text-sm mb-4">বিগত ১০ বছরের ভার্সিটি 'ক' ইউনিট প্রশ্ন সলভ করো অধ্যায়ভিত্তিক এক্সামের মাধ্যমে।</p>
</div>
<div class="p-6 bg-slate-50 border-t flex justify-between items-center">
<p class="text-2xl font-bold text-indigo-600">৳৪৫০</p>
<button class="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-5 py-2.5 rounded-lg font-semibold hover:from-indigo-700 hover:to-indigo-800 transition-all shadow-md hover:shadow-lg transform hover:scale-105">এনরোল করুন</button>
</div>
</div>
<!-- Course Card 3 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col transition-all duration-300 hover:shadow-2xl hover:scale-[1.03]">
<img src="https://placehold.co/600x400/0EA5E9/FFFFFF?text=Dental+Batch" alt="Course Image" class="w-full h-48 object-cover">
<div class="p-6 flex-grow">
<span class="inline-block bg-sky-100 text-sky-700 px-3 py-1 rounded-full text-sm font-semibold mb-3">ডেন্টাল ব্যাচ</span>
<h3 class="text-xl font-bold text-slate-800 mb-2">ডেন্টাল স্পেশাল এক্সাম ব্যাচ</h3>
<p class="text-slate-600 text-sm mb-4">ডেন্টাল ভর্তি পরীক্ষার অনুরূপ প্রশ্নপত্রের উপর পেপার ফাইনাল ও সাবজেক্ট ফাইনাল।</p>
</div>
<div class="p-6 bg-slate-50 border-t flex justify-between items-center">
<p class="text-2xl font-bold text-indigo-600">৳৪০০</p>
<button class="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-5 py-2.5 rounded-lg font-semibold hover:from-indigo-700 hover:to-indigo-800 transition-all shadow-md hover:shadow-lg transform hover:scale-105">এনরোল করুন</button>
</div>
</div>
</div>
</div>
<!-- ===== Page: Exam Interface ===== -->
<div id="page-exam" class="page-content">
<!-- Exam Header -->
<div class="bg-gradient-to-r from-indigo-600 to-indigo-700 p-4 rounded-xl shadow-lg mb-6 flex flex-col sm:flex-row justify-between items-center space-y-3 sm:space-y-0">
<h1 id="exam-title" class="text-lg sm:text-xl md:text-2xl font-bold text-white text-center sm:text-left">
মেডিকেল ভর্তি পরীক্ষা ২০২১-২২
</h1>
<div class="flex items-center space-x-2 sm:space-x-4">
<div class="flex items-center space-x-2 bg-white/90 px-3 py-2 rounded-lg shadow-inner">
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span id="exam-timer" class="text-base sm:text-lg font-bold text-slate-700">59:59</span>
</div>
<button onclick="submitExam()" class="bg-red-500 text-white px-4 py-2 sm:px-5 sm:py-2 rounded-lg font-semibold hover:bg-red-600 transition-colors shadow-md transform hover:scale-105 text-sm sm:text-base">
এক্সাম শেষ
</button>
</div>
</div>
<!-- Exam Body: flex-col-reverse on mobile, lg:flex-row on desktop -->
<div class="flex flex-col-reverse lg:flex-row gap-6">
<!-- Question Palette (Appears first on mobile due to flex-col-reverse) -->
<div class="lg:w-1/4 w-full">
<div class="bg-white p-4 rounded-xl shadow-lg lg:sticky lg:top-24">
<h3 class="text-lg font-semibold text-slate-800 mb-4 pb-2 border-b">প্রশ্ন তালিকা</h3>
<div id="question-palette" class="grid grid-cols-5 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-5 gap-2 max-h-60 lg:max-h-96 overflow-y-auto pr-2">
<!-- Palette buttons will be generated by JS -->
</div>
<div class="mt-4 pt-4 border-t space-y-2">
<div class="flex items-center space-x-2">
<span class="w-5 h-5 rounded bg-green-500 border border-green-600"></span>
<span class="text-sm text-slate-600">উত্তর দিয়েছেন</span>
</div>
<div class="flex items-center space-x-2">
<span class="w-5 h-5 rounded bg-slate-100 border border-slate-300"></span>
<span class="text-sm text-slate-600">উত্তর দেননি</span>
</div>
<div class="flex items-center space-x-2">
<span class="w-5 h-5 rounded bg-blue-500 border border-blue-600"></span>
<span class="text-sm text-slate-600">বর্তমান প্রশ্ন</span>
</div>
</div>
</div>
</div>
<!-- Question Area (Appears second on mobile) -->
<div class="lg:w-3/4 w-full">
<div class="bg-white p-6 lg:p-8 rounded-xl shadow-lg">
<!-- Question Text -->
<div id="question-container" class="mb-6">
<h2 class="text-lg sm:text-xl lg:text-2xl font-semibold text-slate-800 leading-relaxed" id="question-text">
১. 'ডোপামিন' কোন ধরনের নিউরোট্রান্সমিটার?
</h2>
<!-- Add image support if question has one -->
<!-- <img src="..." alt="Question Figure" class="mt-4 rounded-lg"> -->
</div>
<!-- Options -->
<div id="options-container" class="space-y-4">
<div class="exam-option border-2 border-slate-200 p-4 rounded-lg cursor-pointer flex items-center space-x-3" onclick="selectAnswer(0, 'A')">
<span class="option-letter w-7 h-7 flex-shrink-0 border-2 border-slate-400 rounded-full flex items-center justify-center font-bold text-slate-600 transition-all">A</span>
<span class="text-base sm:text-lg text-slate-700">Option A</span>
</div>
<div class="exam-option border-2 border-slate-200 p-4 rounded-lg cursor-pointer flex items-center space-x-3" onclick="selectAnswer(0, 'B')">
<span class="option-letter w-7 h-7 flex-shrink-0 border-2 border-slate-400 rounded-full flex items-center justify-center font-bold text-slate-600 transition-all">B</span>
<span class="text-base sm:text-lg text-slate-700">Option B</span>
</div>
<div class="exam-option border-2 border-slate-200 p-4 rounded-lg cursor-pointer flex items-center space-x-3" onclick="selectAnswer(0, 'C')">
<span class="option-letter w-7 h-7 flex-shrink-0 border-2 border-slate-400 rounded-full flex items-center justify-center font-bold text-slate-600 transition-all">C</span>
<span class="text-base sm:text-lg text-slate-700">Option C</span>
</div>
<div class="exam-option border-2 border-slate-200 p-4 rounded-lg cursor-pointer flex items-center space-x-3" onclick="selectAnswer(0, 'D')">
<span class="option-letter w-7 h-7 flex-shrink-0 border-2 border-slate-400 rounded-full flex items-center justify-center font-bold text-slate-600 transition-all">D</span>
<span class="text-base sm:text-lg text-slate-700">Option D</span>
</div>
</div>
<!-- Navigation Buttons -->
<div class="mt-8 pt-6 border-t border-slate-200 flex justify-between items-center">
<button id="prev-question-btn" onclick="prevQuestion()" class="bg-slate-200 text-slate-700 px-6 py-2.5 rounded-lg font-semibold hover:bg-slate-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
পূর্ববর্তী
</button>
<button id="next-question-btn" onclick="nextQuestion()" class="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-6 py-2.5 rounded-lg font-semibold hover:from-indigo-700 hover:to-indigo-800 transition-all shadow-md hover:shadow-lg transform hover:scale-105">
পরবর্তী
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- ===== Footer ===== -->
<footer class="bg-slate-800 text-slate-300 mt-16">
<div class="container mx-auto px-4 lg:px-8 py-12">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-2xl font-bold text-white mb-2">ডোপামিন</h3>
<p class="text-slate-400">অ্যাডমিশন প্রস্তুতির বিশ্বস্ত সঙ্গী।</p>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-3">দ্রুত লিঙ্ক</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition-colors">আমাদের সম্পর্কে</a></li>
<li><a href="#" class="hover:text-white transition-colors">যোগাযোগ</a></li>
<li><a href="#" class="hover:text-white transition-colors">শর্তাবলী</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-3">সোশ্যাল মিডিয়া</h4>
<!-- Social Icons -->
<div class="flex space-x-4">
<a href="#" class="text-slate-400 hover:text-white transition-colors" aria-label="Facebook"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M10 15v-5h-2v5h2zm-4 0v-5H4v5h2zm10 0v-5h-2v5h2zm7-15h-24v24h24v-24zm-4 19h-16v-11h16v11z"></path></svg></a>
<a href="#" class="text-slate-400 hover:text-white transition-colors" aria-label="Instagram"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.148 3.229-1.664 4.771-4.919 4.919-1.266.058-1.647.07-4.85.07s-3.584-.012-4.85-.07c-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.646-.07-4.849s.012-3.584.07-4.85c.148-3.229 1.664-4.771 4.919-4.919 1.266-.057 1.647-.069 4.85-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.308.196-6.101 2.025-6.298 6.298-.058 1.281-.072 1.689-.072 4.948s.014 3.667.072 4.947c.196 4.274 2.025 6.101 6.298 6.298 1.28.058 1.688.072 4.948.072s3.667-.014 4.947-.072c4.308-.196 6.101-2.025 6.298-6.298.058-1.281.072-1.689.072-4.948s-.014-3.667-.072-4.947c-.196-4.274-2.025-6.101-6.298-6.298-1.28-.058-1.689-.072-4.948-.072zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4zm4.135-10.849c-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75-.336-.75-.75-.75z"></path></svg></a>
</div>
</div>
</div>
<div class="mt-8 pt-8 border-t border-slate-700 text-center text-slate-400">
© ২০২৫ ডোপামিন। সর্বসত্ত্ব সংরক্ষিত।
</div>
</div>
</footer>
<!-- ===== Modals ===== -->
<!-- Modal: Custom Exam Builder -->
<div id="modal-custom-exam" class="modal">
<div class="modal-content bg-white w-11/12 md:w-1/2 lg:w-1/3 rounded-xl shadow-2xl p-6 lg:p-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-slate-800">কাস্টম এক্সাম তৈরি করুন</h2>
<button onclick="closeModal('modal-custom-exam')" class="text-slate-500 hover:text-slate-800 text-3xl">×</button>
</div>
<form id="custom-exam-form" class="space-y-4">
<div>
<label for="subject" class="block text-sm font-medium text-slate-700 mb-1">বিষয়</label>
<select id="subject" name="subject" class="w-full border-slate-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
<option>বিষয় সিলেক্ট করুন</option>
<option value="physics">পদার্থবিজ্ঞান</option>
<option value="chemistry">রসায়ন</option>
<option value="biology">জীববিজ্ঞান</option>
<option value="math">উচ্চতর গণিত</option>
</select>
</div>
<div>
<label for="chapter" class="block text-sm font-medium text-slate-700 mb-1">অধ্যায়</label>
<select id="chapter" name="chapter" class="w-full border-slate-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
<option>অধ্যায় সিলেক্ট করুন</option>
<option value="ch1">অধ্যায় ১</option>
<option value="ch2">অধ্যায় ২</option>
<option value="ch3">অধ্যায় ৩</option>
</select>
</div>
<div>
<label for="num-questions" class="block text-sm font-medium text-slate-700 mb-1">প্রশ্ন সংখ্যা</label>
<input type="number" id="num-questions" name="num-questions" value="20" class="w-full border-slate-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<div>
<label for="time-limit" class="block text-sm font-medium text-slate-700 mb-1">সময় (মিনিট)</label>
<input type="number" id="time-limit" name="time-limit" value="20" class="w-full border-slate-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
</div>
<button type="submit" class="w-full bg-gradient-to-r from-teal-500 to-teal-600 text-white py-3 rounded-lg font-semibold text-lg hover:from-teal-600 hover:to-teal-700 transition-all shadow-md hover:shadow-lg transform hover:scale-105">
এক্সাম শুরু করুন
</button>
</form>
</div>
</div>
<!-- Modal: Exam Result (Mockup) -->
<div id="modal-result" class="modal">
<div class="modal-content bg-white w-11/12 md:w-1/2 lg:w-1/3 rounded-xl shadow-2xl p-6 lg:p-8 text-center">
<h2 class="text-3xl font-bold text-slate-800 mb-4">এক্সাম সম্পন্ন!</h2>
<p class="text-lg text-slate-600 mb-6">আপনার পারফরম্যান্স:</p>
<div class="space-y-3 text-left w-3/4 mx-auto mb-8">
<div class="flex justify-between text-lg">
<span class="font-medium text-slate-700">সঠিক উত্তর:</span>
<span class="font-bold text-green-600">১৮</span>
</div>
<div class="flex justify-between text-lg">
<span class="font-medium text-slate-700">ভুল উত্তর:</span>
<span class="font-bold text-red-600">২</span>
</div>
<div class="flex justify-between text-lg">
<span class="font-medium text-slate-700">নেগেটিভ মার্ক:</span>
<span class="font-bold text-red-600">-০.৫০</span>
</div>
<hr class="my-2">
<div class="flex justify-between text-xl">
<span class="font-bold text-slate-800">মোট মার্কস:</span>
<span class="font-bold text-indigo-600">১৭.৫০ / ২০</span>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-4 sm:gap-0 sm:space-x-4 justify-center">
<button onclick="closeModal('modal-result'); showPage('page-dashboard');" class="bg-slate-200 text-slate-700 px-6 py-2.5 rounded-lg font-semibold hover:bg-slate-300 transition-colors w-full sm:w-auto">
ড্যাশবোর্ড
</button>
<button onclick="closeModal('modal-result')" class="bg-gradient-to-r from-indigo-600 to-indigo-700 text-white px-6 py-2.5 rounded-lg font-semibold hover:from-indigo-700 hover:to-indigo-800 transition-all w-full sm:w-auto">
বন্ধ করুন
</button>
</div>
</div>
</div>
<!-- ===== JavaScript ===== -->
<script>
// --- Mock Data & State ---
const mockQuestions = [
{
q: "১. 'ডোপামিন' কোন ধরনের নিউরোট্রান্সমিটার?",
options: ["ইনহিবিটরি", "এক্সাইটেটরি", "উভয়ই", "কোনোটিই নয়"],
answer: "C"
},
{
q: "২. কোনটি রক্তের উপাদান নয়?",
options: ["লসিকাকোষ", "অণুচক্রিকা", "প্লাজমা", "লিম্ফোসাইট"],
answer: "A"
},
{
q: "৩. নিউটনের তৃতীয় সূত্র কোনটি?",
options: ["F = ma", "V = u + at", "প্রত্যেক ক্রিয়ারই একটি সমান ও বিপরীত প্রতিক্রিয়া আছে", "বল প্রয়োগে বস্তুর বেগের পরিবর্তন হয়"],
answer: "C"
},
{
q: "৪. সালোকসংশ্লেষণ প্রক্রিয়ায় কী উৎপন্ন হয়?",
options: ["অক্সিজেন ও পানি", "কার্বন ডাই-অক্সাইড ও গ্লুকোজ", "গ্লুকোজ ও অক্সিজেন", "পানি ও কার্বন ডাই-অক্সাইড"],
answer: "C"
},
{
q: "৫. সোডিয়ামের পারমাণবিক সংখ্যা কত?",
options: ["১০", "১১", "১২", "১৩"],
answer: "B"
}
];
let currentExamQuestions = [];
let currentQuestionIndex = 0;
let userAnswers = {}; // Store as { 0: 'A', 1: 'C', ... }
let examTimerInterval;
let timeLeft = 3600; // 60 minutes in seconds
// --- Navigation Logic ---
function showPage(pageId) {
document.querySelectorAll('.page-content').forEach(page => {
page.classList.remove('active');
});
document.getElementById(pageId).classList.add('active');
window.scrollTo(0, 0); // Scroll to top on page change
}
// --- Modal Logic ---
function openModal(modalId) {
document.getElementById(modalId).classList.add('active');
}
function closeModal(modalId) {
document.getElementById(modalId).classList.remove('active');
}
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
event.target.classList.remove('active');
}
}
// --- Smooth Mobile Menu Logic ---
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
const isOpen = mobileMenu.classList.toggle('open');
mobileMenuBtn.classList.toggle('open');
mobileMenuBtn.setAttribute('aria-expanded', isOpen.toString());
});
function closeMobileMenu() {
mobileMenu.classList.remove('open');
mobileMenuBtn.classList.remove('open');
mobileMenuBtn.setAttribute('aria-expanded', 'false');
}
// --- Custom Exam Form Logic ---
document.getElementById('custom-exam-form').addEventListener('submit', function(e) {
e.preventDefault();
const subject = document.getElementById('subject').value;
const numQuestions = document.getElementById('num-questions').value;
const timeLimit = document.getElementById('time-limit').value;
closeModal('modal-custom-exam');
const customTitle = `কাস্টম এক্সাম: ${subject} (${numQuestions} প্রশ্ন)`;
const customTime = parseInt(timeLimit) * 60; // Convert to seconds
let questionsToStart = mockQuestions.slice(0, parseInt(numQuestions));
if(questionsToStart.length === 0) {
questionsToStart = mockQuestions; // fallback
}
startExam('custom', questionsToStart, customTitle, customTime);
});
// --- Exam Logic ---
function startExam(examId, questions, title = "এক্সাম", time = 3600) {
currentExamQuestions = questions;
currentQuestionIndex = 0;
userAnswers = {};
timeLeft = time;
document.getElementById('exam-title').innerText = title;
const palette = document.getElementById('question-palette');
palette.innerHTML = '';
currentExamQuestions.forEach((q, index) => {
const btn = document.createElement('button');
btn.className = 'palette-btn not-answered w-10 h-10 border rounded font-medium';
btn.innerText = index + 1;
btn.onclick = () => showQuestion(index);
palette.appendChild(btn);
});
showQuestion(0);
startTimer();
showPage('page-exam');
}
function showQuestion(index) {
if (index < 0 || index >= currentExamQuestions.length) return;
currentQuestionIndex = index;
const question = currentExamQuestions[index];
document.getElementById('question-text').innerText = `${index + 1}. ${question.q}`;
const optionsContainer = document.getElementById('options-container');
optionsContainer.innerHTML = '';
question.options.forEach((option, i) => {
const optionLetter = String.fromCharCode(65 + i); // A, B, C, D
const optionDiv = document.createElement('div');
optionDiv.className = 'exam-option border-2 border-slate-200 p-4 rounded-lg cursor-pointer flex items-center space-x-3';
optionDiv.onclick = () => selectAnswer(index, optionLetter);
if (userAnswers[index] === optionLetter) {
optionDiv.classList.add('selected');
}
optionDiv.innerHTML = `
<span class="option-letter w-7 h-7 flex-shrink-0 border-2 border-slate-400 rounded-full flex items-center justify-center font-bold text-slate-600 transition-all">${optionLetter}</span>
<span class="text-base sm:text-lg text-slate-700">${option}</span>
`;
optionsContainer.appendChild(optionDiv);
});
updatePalette();
document.getElementById('prev-question-btn').disabled = (index === 0);
document.getElementById('next-question-btn').disabled = (index === currentExamQuestions.length - 1);
}
function selectAnswer(qIndex, optionLetter) {
userAnswers[qIndex] = optionLetter;
showQuestion(qIndex);
}
function updatePalette() {
const paletteBtns = document.querySelectorAll('#question-palette .palette-btn');
paletteBtns.forEach((btn, index) => {
btn.classList.remove('current', 'answered', 'not-answered');
if (index === currentQuestionIndex) {
btn.classList.add('current');
} else if (userAnswers[index]) {
btn.classList.add('answered');
} else {
btn.classList.add('not-answered');
}
});
}
function nextQuestion() {
if (currentQuestionIndex < currentExamQuestions.length - 1) {
showQuestion(currentQuestionIndex + 1);
}
}
function prevQuestion() {
if (currentQuestionIndex > 0) {
showQuestion(currentQuestionIndex - 1);
}
}
function startTimer() {
if (examTimerInterval) clearInterval(examTimerInterval);
const timerEl = document.getElementById('exam-timer');
examTimerInterval = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(examTimerInterval);
submitExam(true); // Auto-submit
return;
}
timeLeft--;
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
timerEl.innerText = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}, 1000);
}
function submitExam(autoSubmit = false) {
clearInterval(examTimerInterval);
if (!autoSubmit) {
// In a real app, you'd build a custom modal confirmation.
console.log("Submit button clicked.");
}
console.log("Exam Submitted. Answers:", userAnswers);
showPage('page-home'); // Go back to home or dashboard
openModal('modal-result'); // Show result modal
}
// --- Initial Page Load ---
document.addEventListener('DOMContentLoaded', () => {
showPage('page-home');
// Mock: Simulate user login
setTimeout(() => {
document.getElementById('login-btn').classList.add('hidden');
document.getElementById('login-btn-mobile').classList.add('hidden');
document.getElementById('user-profile-menu').classList.remove('hidden');
document.getElementById('user-profile-menu').classList.add('flex');
}, 1500);
});
// Mock function to demonstrate starting an exam
function startMockExam(type) {
const title = "মেডিকেল ভর্তি পরীক্ষা (ডেমো)";
const time = 300; // 5 min demo
startExam('mock_exam_id', mockQuestions, title, time);
}
</script>
</body>
</html>