<!-- شريط العنوان الديناميكي -->
<div id="header" class="px-4 py-3 flex justify-between items-center border-b">
<button id="menu-btn" class="text-gray-700">
<i class="fas fa-bars text-xl"></i>
</button>
<div class="flex items-center space-x-2 rtl:space-x-reverse">
<div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold">د</div>
<h1 class="font-bold text-purple-800">دروسي</h1>
</div>
<button id="search-btn" class="text-gray-700">
<i class="fas fa-search text-xl"></i>
</button>
</div>
<!-- شريط البحث -->
<div id="search-bar" class="search-bar absolute top-0 right-0 w-0 opacity-0 bg-white z-10 h-14 flex items-center px-4">
<button id="back-btn" class="text-gray-700 mr-2">
<i class="fas fa-arrow-right"></i>
</button>
<input type="text" placeholder="ابحث عن دروس، تمارين، فيديوهات..." class="flex-1 border-none focus:outline-none">
<button class="text-gray-700 ml-2">
<i class="fas fa-search"></i>
</button>
</div>
<!-- التنقل بين الصفحات -->
<div id="tabs" class="flex overflow-x-auto no-scrollbar border-b">
<div class="flex space-x-6 rtl:space-x-reverse px-4">
<a href="#" class="tab-button py-3 font-medium active" data-page="home">الرئيسية</a>
<a href="#" class="tab-button py-3 font-medium text-gray-500" data-page="lessons">الدروس</a>
<a href="#" class="tab-button py-3 font-medium text-gray-500" data-page="exercises">التمارين</a>
<a href="#" class="tab-button py-3 font-medium text-gray-500" data-page="videos">الفيديوهات</a>
<a href="#" class="tab-button py-3 font-medium text-gray-500" data-page="community">المجتمع</a>
</div>
</div>
<!-- الصفحات -->
<div class="pages-container">
<!-- الصفحة الرئيسية -->
<div id="home-page" class="page active p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<!-- إشعار -->
<div class="notification" id="notification">
<div class="flex justify-between items-center mb-1">
<span class="font-bold">دروسي</span>
<span class="text-xs">الآن</span>
</div>
<p>تمت إضافة دروس جديدة للباكالوريا علوم</p>
</div>
<!-- بطاقة المستخدم -->
<div class="bg-gradient-to-r from-purple-600 to-purple-500 text-white rounded-xl p-4 mb-4 shadow">
<div class="flex justify-between items-start">
<div>
<p class="text-sm opacity-80">مرحباً بعودتك</p>
<h3 class="font-bold text-xl">يوسف أحمد</h3>
<p class="text-sm mt-1">الباكالوريا علوم - مسلك علوم رياضية</p>
</div>
<div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
<i class="fas fa-user-graduate text-xl"></i>
</div>
</div>
<div class="flex justify-between mt-4 pt-3 border-t border-white border-opacity-20">
<div class="text-center">
<div class="text-lg font-bold">85%</div>
<div class="text-xs opacity-80">التقدم</div>
</div>
<div class="text-center">
<div class="text-lg font-bold">24</div>
<div class="text-xs opacity-80">الدروس</div>
</div>
<div class="text-center">
<div class="text-lg font-bold">156</div>
<div class="text-xs opacity-80">التمارين</div>
</div>
</div>
</div>
<!-- الدروس الأخيرة -->
<div class="mb-6">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold text-lg">الدروس الأخيرة</h3>
<a href="#" class="text-purple-600 text-sm show-page" data-page="lessons">عرض الكل</a>
</div>
<div class="space-y-3">
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">الدوال الأسية</h4>
<p class="text-sm text-gray-500">الرياضيات - الباكالوريا</p>
</div>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-book-open"></i>
</div>
</div>
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">قوانين نيوتن</h4>
<p class="text-sm text-gray-500">الفيزياء - الجذع المشترك</p>
</div>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-video"></i>
</div>
</div>
</div>
</div>
<!-- المواد الدراسية -->
<div class="mb-6">
<h3 class="font-bold text-lg mb-3">المواد الدراسية</h3>
<div class="grid grid-cols-3 gap-3">
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="math">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-square-root-alt text-blue-600"></i>
</div>
<span class="text-sm font-medium">الرياضيات</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="physics">
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-atom text-red-600"></i>
</div>
<span class="text-sm font-medium">الفيزياء</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="chemistry">
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-flask text-yellow-600"></i>
</div>
<span class="text-sm font-medium">الكيمياء</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="arabic">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-language text-green-600"></i>
</div>
<span class="text-sm font-medium">العربية</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="french">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-language text-purple-600"></i>
</div>
<span class="text-sm font-medium">الفرنسية</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="english">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-language text-indigo-600"></i>
</div>
<span class="text-sm font-medium">الإنجليزية</span>
</div>
</div>
</div>
<!-- الفيديوهات الجديدة -->
<div class="mb-6">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold text-lg">فيديوهات جديدة</h3>
<a href="#" class="text-purple-600 text-sm show-page" data-page="videos">عرض الكل</a>
</div>
<div class="flex overflow-x-auto space-x-3 rtl:space-x-reverse pb-2">
<div class="flex-none w-40 show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
12:45
</div>
</div>
<h4 class="font-medium text-sm mt-1">شرح الدوال الأسية</h4>
<p class="text-xs text-gray-500">الرياضيات</p>
</div>
<div class="flex-none w-40 show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
18:32
</div>
</div>
<h4 class="font-medium text-sm mt-1">قوانين نيوتن</h4>
<p class="text-xs text-gray-500">الفيزياء</p>
</div>
<div class="flex-none w-40 show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
22:15
</div>
</div>
<h4 class="font-medium text-sm mt-1">تحليل النصوص</h4>
<p class="text-xs text-gray-500">اللغة العربية</p>
</div>
</div>
</div>
<!-- التمارين المقترحة -->
<div class="mb-6">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold text-lg">تمارين مقترحة</h3>
<a href="#" class="text-purple-600 text-sm show-page" data-page="exercises">عرض الكل</a>
</div>
<div class="space-y-3">
<div class="bg-white p-3 rounded-lg shadow-sm show-page" data-page="exercise-detail">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold">تمارين الدوال الأسية</h4>
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded-full">جديد</span>
</div>
<p class="text-sm text-gray-500 mb-3">10 تمارين مع التصحيح الآلي</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>65% مكتمل</span>
<span>3/10 تمارين</span>
</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm show-page" data-page="exercise-detail">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold">تمارين قوانين نيوتن</h4>
<span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full">مستحسن</span>
</div>
<p class="text-sm text-gray-500 mb-3">8 تمارين مع التصحيح الآلي</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 25%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>25% مكتمل</span>
<span>2/8 تمارين</span>
</div>
</div>
</div>
</div>
</div>
<!-- صفحة الدروس -->
<div id="lessons-page" class="page p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<div class="flex justify-between items-center mb-4">
<button class="back-btn text-gray-700">
<i class="fas fa-arrow-right"></i>
</button>
<h2 class="font-bold text-xl flex-1 text-center">الدروس التعليمية</h2>
</div>
<div class="mb-4">
<div class="flex space-x-2 rtl:space-x-reverse border-b">
<button class="tab-btn active px-4 py-2 font-medium" data-tab="all-lessons">الكل</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="saved-lessons">المحفوظة</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="downloaded-lessons">المحملة</button>
</div>
</div>
<div class="tab-content active" id="all-lessons">
<div class="mb-6">
<h3 class="font-bold text-lg mb-3">المواد الدراسية</h3>
<div class="grid grid-cols-3 gap-3">
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="math">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-square-root-alt text-blue-600"></i>
</div>
<span class="text-sm font-medium">الرياضيات</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="physics">
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-atom text-red-600"></i>
</div>
<span class="text-sm font-medium">الفيزياء</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="chemistry">
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-flask text-yellow-600"></i>
</div>
<span class="text-sm font-medium">الكيمياء</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="arabic">
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-language text-green-600"></i>
</div>
<span class="text-sm font-medium">العربية</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="french">
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-language text-purple-600"></i>
</div>
<span class="text-sm font-medium">الفرنسية</span>
</div>
<div class="subject-card bg-white p-3 rounded-lg shadow-sm text-center show-page" data-page="subject" data-subject="english">
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
<i class="fas fa-language text-indigo-600"></i>
</div>
<span class="text-sm font-medium">الإنجليزية</span>
</div>
</div>
</div>
<div class="mb-6">
<h3 class="font-bold text-lg mb-3">آخر الدروس المضافة</h3>
<div class="space-y-3">
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">الدوال الأسية</h4>
<p class="text-sm text-gray-500">الرياضيات - الباكالوريا</p>
</div>
<div class="flex space-x-2 rtl:space-x-reverse">
<button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
<i class="fas fa-bookmark"></i>
</button>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-book-open"></i>
</div>
</div>
</div>
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">قوانين نيوتن</h4>
<p class="text-sm text-gray-500">الفيزياء - الجذع المشترك</p>
</div>
<div class="flex space-x-2 rtl:space-x-reverse">
<button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
<i class="fas fa-bookmark"></i>
</button>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-video"></i>
</div>
</div>
</div>
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">التركيب الضوئي</h4>
<p class="text-sm text-gray-500">علوم الحياة - الأولى باك</p>
</div>
<div class="flex space-x-2 rtl:space-x-reverse">
<button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
<i class="fas fa-bookmark"></i>
</button>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-book-open"></i>
</div>
</div>
</div>
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">تحليل النصوص</h4>
<p class="text-sm text-gray-500">اللغة العربية - الثانية باك</p>
</div>
<div class="flex space-x-2 rtl:space-x-reverse">
<button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
<i class="fas fa-bookmark"></i>
</button>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-book-open"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-content" id="saved-lessons">
<div class="text-center py-10">
<i class="fas fa-bookmark text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">لا توجد دروس محفوظة</p>
</div>
</div>
<div class="tab-content" id="downloaded-lessons">
<div class="text-center py-10">
<i class="fas fa-download text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">لا توجد دروس محملة</p>
</div>
</div>
</div>
<!-- صفحة التمارين -->
<div id="exercises-page" class="page p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<div class="flex justify-between items-center mb-4">
<button class="back-btn text-gray-700">
<i class="fas fa-arrow-right"></i>
</button>
<h2 class="font-bold text-xl flex-1 text-center">التمارين التفاعلية</h2>
</div>
<div class="mb-4">
<div class="flex space-x-2 rtl:space-x-reverse border-b">
<button class="tab-btn active px-4 py-2 font-medium" data-tab="all-exercises">الكل</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="saved-exercises">المحفوظة</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="completed-exercises">المكتملة</button>
</div>
</div>
<div class="tab-content active" id="all-exercises">
<div class="space-y-3">
<div class="bg-white p-3 rounded-lg shadow-sm show-page" data-page="exercise-detail">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold">تمارين الدوال الأسية</h4>
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded-full">جديد</span>
</div>
<p class="text-sm text-gray-500 mb-3">10 تمارين مع التصحيح الآلي</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>65% مكتمل</span>
<span>3/10 تمارين</span>
</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm show-page" data-page="exercise-detail">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold">تمارين قوانين نيوتن</h4>
<span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full">مستحسن</span>
</div>
<p class="text-sm text-gray-500 mb-3">8 تمارين مع التصحيح الآلي</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 25%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>25% مكتمل</span>
<span>2/8 تمارين</span>
</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm show-page" data-page="exercise-detail">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold">تمارين التركيب الضوئي</h4>
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">سهل</span>
</div>
<p class="text-sm text-gray-500 mb-3">5 تمارين مع التصحيح الآلي</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 0%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>0% مكتمل</span>
<span>0/5 تمارين</span>
</div>
</div>
</div>
</div>
<div class="tab-content" id="saved-exercises">
<div class="text-center py-10">
<i class="fas fa-bookmark text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">لا توجد تمارين محفوظة</p>
</div>
</div>
<div class="tab-content" id="completed-exercises">
<div class="text-center py-10">
<i class="fas fa-check-circle text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">لا توجد تمارين مكتملة</p>
</div>
</div>
</div>
<!-- صفحة الفيديوهات -->
<div id="videos-page" class="page p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<div class="flex justify-between items-center mb-4">
<button class="back-btn text-gray-700">
<i class="fas fa-arrow-right"></i>
</button>
<h2 class="font-bold text-xl flex-1 text-center">الفيديوهات التعليمية</h2>
</div>
<div class="mb-4">
<div class="flex space-x-2 rtl:space-x-reverse border-b">
<button class="tab-btn active px-4 py-2 font-medium" data-tab="all-videos">الكل</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="saved-videos">المحفوظة</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="downloaded-videos">المحملة</button>
</div>
</div>
<div class="tab-content active" id="all-videos">
<div class="grid grid-cols-2 gap-3">
<div class="show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
12:45
</div>
</div>
<h4 class="font-medium text-sm mt-1">شرح الدوال الأسية</h4>
<p class="text-xs text-gray-500">الرياضيات</p>
</div>
<div class="show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
18:32
</div>
</div>
<h4 class="font-medium text-sm mt-1">قوانين نيوتن</h4>
<p class="text-xs text-gray-500">الفيزياء</p>
</div>
<div class="show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
22:15
</div>
</div>
<h4 class="font-medium text-sm mt-1">تحليل النصوص</h4>
<p class="text-xs text-gray-500">اللغة العربية</p>
</div>
<div class="show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
15:20
</div>
</div>
<h4 class="font-medium text-sm mt-1">التركيب الضوئي</h4>
<p class="text-xs text-gray-500">علوم الحياة</p>
</div>
</div>
</div>
<div class="tab-content" id="saved-videos">
<div class="text-center py-10">
<i class="fas fa-bookmark text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">لا توجد فيديوهات محفوظة</p>
</div>
</div>
<div class="tab-content" id="downloaded-videos">
<div class="text-center py-10">
<i class="fas fa-download text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">لا توجد فيديوهات محملة</p>
</div>
</div>
</div>
<!-- صفحة المجتمع -->
<div id="community-page" class="page p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<div class="flex justify-between items-center mb-4">
<button class="back-btn text-gray-700">
<i class="fas fa-arrow-right"></i>
</button>
<h2 class="font-bold text-xl flex-1 text-center">المجتمع التعليمي</h2>
</div>
<div class="mb-4">
<div class="flex space-x-2 rtl:space-x-reverse border-b">
<button class="tab-btn active px-4 py-2 font-medium" data-tab="discussions">المناقشات</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="questions">الأسئلة</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="groups">المجموعات</button>
</div>
</div>
<div class="tab-content active" id="discussions">
<div class="space-y-4">
<div class="bg-white p-3 rounded-lg shadow-sm">
<div class="flex items-start mb-3">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-2">
<i class="fas fa-user"></i>
</div>
<div>
<h4 class="font-bold">أحمد محمد</h4>
<p class="text-xs text-gray-500">منذ ساعتين</p>
</div>
</div>
<p class="mb-3">هل يمكن مساعدتي في حل هذا التمرين حول الدوال الأسية؟ لقد واجهت صعوبة في فهم الجزء الأخير منه.</p>
<div class="flex justify-between text-sm text-gray-500">
<span><i class="far fa-comment mr-1"></i> 5 تعليقات</span>
<span><i class="far fa-heart mr-1"></i> 12 إعجاب</span>
</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm">
<div class="flex items-start mb-3">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2">
<i class="fas fa-user"></i>
</div>
<div>
<h4 class="font-bold">سارة علي</h4>
<p class="text-xs text-gray-500">منذ يوم</p>
</div>
</div>
<p class="mb-3">شاركوني آراءكم حول أفضل طريقة لتحضير امتحان الباكالوريا في مادة الفيزياء. هل التركيز على التمارين أم المراجعة النظرية أولاً؟</p>
<div class="flex justify-between text-sm text-gray-500">
<span><i class="far fa-comment mr-1"></i> 14 تعليق</span>
<span><i class="far fa-heart mr-1"></i> 23 إعجاب</span>
</div>
</div>
</div>
</div>
<div class="tab-content" id="questions">
<div class="text-center py-10">
<i class="fas fa-question-circle text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">لا توجد أسئلة بعد</p>
</div>
</div>
<div class="tab-content" id="groups">
<div class="text-center py-10">
<i class="fas fa-users text-4xl text-gray-300 mb-3"></i>
<p class="text-gray-500">لا توجد مجموعات بعد</p>
</div>
</div>
</div>
<!-- صفحة تفاصيل الدرس -->
<div id="lesson-detail-page" class="page p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<div class="flex justify-between items-center mb-4">
<button class="back-btn text-gray-700">
<i class="fas fa-arrow-right"></i>
</button>
<h2 class="font-bold text-xl flex-1 text-center">تفاصيل الدرس</h2>
</div>
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<h3 class="font-bold text-lg mb-2">الدوال الأسية</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="mr-2">الرياضيات</span>
<span class="mr-2">•</span>
<span>الباكالوريا علوم</span>
</div>
<div class="flex justify-between mb-4">
<button class="flex items-center text-purple-600">
<i class="fas fa-bookmark mr-1"></i>
<span>حفظ</span>
</button>
<button class="flex items-center text-purple-600">
<i class="fas fa-download mr-1"></i>
<span>تحميل</span>
</button>
<button class="flex items-center text-purple-600">
<i class="fas fa-share-alt mr-1"></i>
<span>مشاركة</span>
</button>
</div>
<div class="border-t pt-3">
<h4 class="font-bold mb-2">ملخص الدرس</h4>
<p class="text-gray-700 mb-3">
الدالة الأسية هي دالة رياضية تُكتب على الشكل f(x) = a^x حيث a عدد حقيقي موجب لا يساوي 1. تتصف الدوال الأسية بنمو سريع جداً وتستخدم في العديد من التطبيقات العلمية والهندسية.
</p>
<h4 class="font-bold mb-2">المفاهيم الأساسية</h4>
<ul class="list-disc pr-4 text-gray-700 mb-3">
<li class="mb-1">تعريف الدالة الأسية</li>
<li class="mb-1">خصائص الدوال الأسية</li>
<li class="mb-1">تمثيلها البياني</li>
<li class="mb-1">حل المعادلات الأسية</li>
<li>التطبيقات العملية</li>
</ul>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-4">
<h3 class="font-bold text-lg mb-3">المواد المرتبطة</h3>
<div class="space-y-3">
<div class="flex items-center p-2 border rounded-lg">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
<i class="fas fa-file-pdf"></i>
</div>
<div class="flex-1">
<h4 class="font-medium">ملخص الدوال الأسية</h4>
<p class="text-xs text-gray-500">PDF • 1.2MB</p>
</div>
<button class="text-purple-600">
<i class="fas fa-download"></i>
</button>
</div>
<div class="flex items-center p-2 border rounded-lg">
<div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-3">
<i class="fas fa-video"></i>
</div>
<div class="flex-1">
<h4 class="font-medium">شرح الدوال الأسية</h4>
<p class="text-xs text-gray-500">فيديو • 12:45 دقيقة</p>
</div>
<button class="text-purple-600">
<i class="fas fa-play"></i>
</button>
</div>
<div class="flex items-center p-2 border rounded-lg">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
<i class="fas fa-question-circle"></i>
</div>
<div class="flex-1">
<h4 class="font-medium">تمارين الدوال الأسية</h4>
<p class="text-xs text-gray-500">10 تمارين</p>
</div>
<button class="text-purple-600">
<i class="fas fa-arrow-left"></i>
</button>
</div>
</div>
</div>
</div>
<!-- صفحة تفاصيل التمرين -->
<div id="exercise-detail-page" class="page p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<div class="flex justify-between items-center mb-4">
<button class="back-btn text-gray-700">
<i class="fas fa-arrow-right"></i>
</button>
<h2 class="font-bold text-xl flex-1 text-center">تفاصيل التمرين</h2>
</div>
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<h3 class="font-bold text-lg mb-2">تمارين الدوال الأسية</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="mr-2">الرياضيات</span>
<span class="mr-2">•</span>
<span>الباكالوريا علوم</span>
</div>
<div class="flex justify-between mb-4">
<button class="flex items-center text-purple-600">
<i class="fas fa-bookmark mr-1"></i>
<span>حفظ</span>
</button>
<button class="flex items-center text-purple-600">
<i class="fas fa-download mr-1"></i>
<span>تحميل</span>
</button>
<button class="flex items-center text-purple-600">
<i class="fas fa-share-alt mr-1"></i>
<span>مشاركة</span>
</button>
</div>
<div class="border-t pt-3">
<div class="flex justify-between items-center mb-3">
<h4 class="font-bold">التقدم</h4>
<span class="text-sm text-purple-600">65% مكتمل</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 mb-4">
<div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div>
</div>
<h4 class="font-bold mb-3">التمارين (3/10 مكتملة)</h4>
<div class="space-y-3">
<div class="exercise-option bg-green-50 border border-green-200 rounded-lg p-3">
<div class="flex justify-between items-start mb-2">
<h5 class="font-medium">التمرين 1</h5>
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">مكتمل</span>
</div>
<p class="text-sm text-gray-600 mb-2">احسب قيمة الدالة الأسية f(x) = 2^x عندما x = 3</p>
<div class="text-xs text-green-600">
<i class="fas fa-check-circle mr-1"></i> إجابتك صحيحة: 8
</div>
</div>
<div class="exercise-option bg-green-50 border border-green-200 rounded-lg p-3">
<div class="flex justify-between items-start mb-2">
<h5 class="font-medium">التمرين 2</h5>
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">مكتمل</span>
</div>
<p class="text-sm text-gray-600 mb-2">حل المعادلة الأسية 3^(x+1) = 27</p>
<div class="text-xs text-green-600">
<i class="fas fa-check-circle mr-1"></i> إجابتك صحيحة: x = 2
</div>
</div>
<div class="exercise-option bg-green-50 border border-green-200 rounded-lg p-3">
<div class="flex justify-between items-start mb-2">
<h5 class="font-medium">التمرين 3</h5>
<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">مكتمل</span>
</div>
<p class="text-sm text-gray-600 mb-2">مثل بيانياً الدالة f(x) = (1/2)^x</p>
<div class="text-xs text-green-600">
<i class="fas fa-check-circle mr-1"></i> تم تسليم الإجابة
</div>
</div>
<div class="exercise-option bg-white border border-gray-200 rounded-lg p-3">
<div class="flex justify-between items-start mb-2">
<h5 class="font-medium">التمرين 4</h5>
<span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">غير مكتمل</span>
</div>
<p class="text-sm text-gray-600 mb-2">أوجد قيمة x التي تحقق المعادلة 5^(2x-1) = 125</p>
<button class="text-sm text-purple-600">ابدأ الحل</button>
</div>
<div class="exercise-option bg-white border border-gray-200 rounded-lg p-3">
<div class="flex justify-between items-start mb-2">
<h5 class="font-medium">التمرين 5</h5>
<span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">غير مكتمل</span>
</div>
<p class="text-sm text-gray-600 mb-2">حل المعادلة الأسية e^(2x) = 7</p>
<button class="text-sm text-purple-600">ابدأ الحل</button>
</div>
</div>
</div>
</div>
<button class="w-full bg-purple-600 text-white py-3 rounded-lg font-bold">
استمر في حل التمارين
</button>
</div>
<!-- صفحة تفاصيل الفيديو -->
<div id="video-detail-page" class="page p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<div class="flex justify-between items-center mb-4">
<button class="back-btn text-gray-700">
<i class="fas fa-arrow-right"></i>
</button>
<h2 class="font-bold text-xl flex-1 text-center">مشاهدة الفيديو</h2>
</div>
<div class="video-container mb-4 bg-black rounded-lg">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="bg-white rounded-lg shadow-sm p-4 mb-4">
<h3 class="font-bold text-lg mb-2">شرح الدوال الأسية</h3>
<div class="flex items-center text-sm text-gray-500 mb-3">
<span class="mr-2">الرياضيات</span>
<span class="mr-2">•</span>
<span>الباكالوريا علوم</span>
</div>
<div class="flex justify-between mb-4">
<button class="flex items-center text-purple-600">
<i class="fas fa-bookmark mr-1"></i>
<span>حفظ</span>
</button>
<button class="flex items-center text-purple-600">
<i class="fas fa-download mr-1"></i>
<span>تحميل</span>
</button>
<button class="flex items-center text-purple-600">
<i class="fas fa-share-alt mr-1"></i>
<span>مشاركة</span>
</button>
</div>
<div class="border-t pt-3">
<h4 class="font-bold mb-2">عن الفيديو</h4>
<p class="text-gray-700 mb-3">
في هذا الفيديو التعليمي، سنقوم بشرح مفهوم الدوال الأسية بشكل مفصل، مع أمثلة تطبيقية وحلول لتمارين متنوعة. الفيديو مناسب لطلاب الباكالوريا علوم رياضية.
</p>
<div class="flex items-center text-sm text-gray-500 mb-1">
<i class="fas fa-clock mr-2"></i>
<span>المدة: 12 دقيقة و 45 ثانية</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-calendar-alt mr-2"></i>
<span>تاريخ النشر: 15 مارس 2023</span>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-sm p-4">
<h3 class="font-bold text-lg mb-3">مواد مرتبطة</h3>
<div class="space-y-3">
<div class="flex items-center p-2 border rounded-lg">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
<i class="fas fa-file-pdf"></i>
</div>
<div class="flex-1">
<h4 class="font-medium">ملخص الدوال الأسية</h4>
<p class="text-xs text-gray-500">PDF • 1.2MB</p>
</div>
<button class="text-purple-600">
<i class="fas fa-download"></i>
</button>
</div>
<div class="flex items-center p-2 border rounded-lg">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
<i class="fas fa-question-circle"></i>
</div>
<div class="flex-1">
<h4 class="font-medium">تمارين الدوال الأسية</h4>
<p class="text-xs text-gray-500">10 تمارين</p>
</div>
<button class="text-purple-600">
<i class="fas fa-arrow-left"></i>
</button>
</div>
</div>
</div>
</div>
<!-- صفحة المادة الدراسية -->
<div id="subject-page" class="page p-4 overflow-y-auto" style="height: calc(100vh - 170px);">
<div class="flex justify-between items-center mb-4">
<button class="back-btn text-gray-700">
<i class="fas fa-arrow-right"></i>
</button>
<h2 class="font-bold text-xl flex-1 text-center" id="subject-title">الرياضيات</h2>
</div>
<div class="mb-6">
<div class="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mx-auto mb-3">
<i class="fas fa-square-root-alt text-3xl"></i>
</div>
<h3 class="font-bold text-lg text-center mb-2">الرياضيات</h3>
<p class="text-gray-500 text-center text-sm">الباكالوريا علوم رياضية</p>
</div>
<div class="mb-4">
<div class="flex space-x-2 rtl:space-x-reverse border-b">
<button class="tab-btn active px-4 py-2 font-medium" data-tab="subject-lessons">الدروس</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="subject-exercises">التمارين</button>
<button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="subject-videos">الفيديوهات</button>
</div>
</div>
<div class="tab-content active" id="subject-lessons">
<div class="space-y-3">
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">الدوال الأسية</h4>
<p class="text-sm text-gray-500">الباكالوريا علوم</p>
</div>
<div class="flex space-x-2 rtl:space-x-reverse">
<button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
<i class="fas fa-bookmark"></i>
</button>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-book-open"></i>
</div>
</div>
</div>
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">الدوال اللوغاريتمية</h4>
<p class="text-sm text-gray-500">الباكالوريا علوم</p>
</div>
<div class="flex space-x-2 rtl:space-x-reverse">
<button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
<i class="fas fa-bookmark"></i>
</button>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-book-open"></i>
</div>
</div>
</div>
<div class="lesson-card bg-white p-3 rounded-lg shadow-sm flex justify-between items-center show-page" data-page="lesson-detail">
<div>
<h4 class="font-bold">المتتاليات العددية</h4>
<p class="text-sm text-gray-500">الباكالوريا علوم</p>
</div>
<div class="flex space-x-2 rtl:space-x-reverse">
<button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
<i class="fas fa-bookmark"></i>
</button>
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
<i class="fas fa-book-open"></i>
</div>
</div>
</div>
</div>
</div>
<div class="tab-content" id="subject-exercises">
<div class="space-y-3">
<div class="bg-white p-3 rounded-lg shadow-sm show-page" data-page="exercise-detail">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold">تمارين الدوال الأسية</h4>
<span class="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded-full">جديد</span>
</div>
<p class="text-sm text-gray-500 mb-3">10 تمارين مع التصحيح الآلي</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 65%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>65% مكتمل</span>
<span>3/10 تمارين</span>
</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm show-page" data-page="exercise-detail">
<div class="flex justify-between items-center mb-2">
<h4 class="font-bold">تمارين الدوال اللوغاريتمية</h4>
<span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full">مستحسن</span>
</div>
<p class="text-sm text-gray-500 mb-3">8 تمارين مع التصحيح الآلي</p>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full" style="width: 25%"></div>
</div>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>25% مكتمل</span>
<span>2/8 تمارين</span>
</div>
</div>
</div>
</div>
<div class="tab-content" id="subject-videos">
<div class="grid grid-cols-2 gap-3">
<div class="show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
12:45
</div>
</div>
<h4 class="font-medium text-sm mt-1">شرح الدوال الأسية</h4>
</div>
<div class="show-page" data-page="video-detail">
<div class="relative">
<img src="https://via.placeholder.com/160x90" alt="فيديو تعليمي" class="rounded-lg w-full">
<div class="absolute bottom-1 left-1 bg-black bg-opacity-70 text-white text-xs px-1 rounded">
15:20
</div>
</div>
<h4 class="font-medium text-sm mt-1">شرح الدوال اللوغاريتمية</h4>
</div>
</div>
</div>
</div>
</div>
<!-- القائمة الجانبية -->
<div class="drawer">
<div class="p-4 border-b">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center text-white font-bold text-xl mr-3">د</div>
<div>
<h3 class="font-bold">يوسف أحمد</h3>
<p class="text-sm text-gray-500">الباكالوريا علوم</p>
</div>
</div>
<div class="flex justify-between text-center">
<div>
<div class="text-lg font-bold">85%</div>
<div class="text-xs text-gray-500">التقدم</div>
</div>
<div>
<div class="text-lg font-bold">24</div>
<div class="text-xs text-gray-500">الدروس</div>
</div>
<div>
<div class="text-lg font-bold">156</div>
<div class="text-xs text-gray-500">التمارين</div>
</div>
</div>
</div>
<div class="p-2">
<a href="#" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-purple-50">
<i class="fas fa-user-circle text-lg text-purple-600 w-8"></i>
<span class="flex-1">حسابي</span>
<i class="fas fa-arrow-left text-sm text-gray-400"></i>
</a>
<a href="#" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-purple-50">
<i class="fas fa-bookmark text-lg text-purple-600 w-8"></i>
<span class="flex-1">المحفوظات</span>
<i class="fas fa-arrow-left text-sm text-gray-400"></i>
</a>
<a href="#" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-purple-50">
<i class="fas fa-download text-lg text-purple-600 w-8"></i>
<span class="flex-1">الملفات المحملة</span>
<i class="fas fa-arrow-left text-sm text-gray-400"></i>
</a>
<a href="#" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-purple-50">
<i class="fas fa-cog text-lg text-purple-600 w-8"></i>
<span class="flex-1">الإعدادات</span>
<i class="fas fa-arrow-left text-sm text-gray-400"></i>
</a>
<a href="#" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-purple-50">
<i class="fas fa-question-circle text-lg text-purple-600 w-8"></i>
<span class="flex-1">المساعدة</span>
<i class="fas fa-arrow-left text-sm text-gray-400"></i>
</a>
<a href="#" class="flex items-center p-2 rounded-lg text-gray-700 hover:bg-purple-50">
<i class="fas fa-sign-out-alt text-lg text-purple-600 w-8"></i>
<span class="flex-1">تسجيل الخروج</span>
<i class="fas fa-arrow-left text-sm text-gray-400"></i>
</a>
</div>
</div>
<div class="drawer-overlay"></div>
<!-- شريط التصفح السفلي -->
<div class="bottom-nav bg-white flex justify-around items-center py-3 fixed bottom-0 w-full max-w-480 z-50">
<a href="#" class="nav-item active flex flex-col items-center text-xs" data-page="home">
<i class="fas fa-home text-xl mb-1"></i>
<span>الرئيسية</span>
</a>
<a href="#" class="nav-item flex flex-col items-center text-xs text-gray-500" data-page="lessons">
<i class="fas fa-book-open text-xl mb-1"></i>
<span>الدروس</span>
</a>
<a href="#" class="nav-item flex flex-col items-center text-xs text-gray-500" data-page="exercises">
<i class="fas fa-pen-fancy text-xl mb-1"></i>
<span>التمارين</span>
</a>
<a href="#" class="nav-item flex flex-col items-center text-xs text-gray-500" data-page="videos">
<i class="fas fa-video text-xl mb-1"></i>
<span>الفيديوهات</span>
</a>
<a href="#" class="nav-item flex flex-col items-center text-xs text-gray-500" data-page="community">
<i class="fas fa-users text-xl mb-1"></i>
<span>المجتمع</span>
</a>
</div>
</div>
<script>
// تحديث الوقت
function updateTime() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
document.getElementById('time').text
