|
<!DOCTYPE html> |
|
<html lang="ar" dir="rtl"> |
|
<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> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); |
|
|
|
:root { |
|
--primary-color: #1a5632; |
|
--secondary-color: #f7c948; |
|
--accent-color: #2e7d32; |
|
} |
|
|
|
body { |
|
font-family: 'Tajawal', sans-serif; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
[dir="rtl"] body { |
|
font-family: 'Tajawal', sans-serif; |
|
} |
|
|
|
[dir="ltr"] body { |
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
} |
|
|
|
.sidebar { |
|
transition: all 0.3s ease; |
|
background-color: var(--primary-color); |
|
} |
|
|
|
.sidebar.collapsed { |
|
width: 80px; |
|
} |
|
|
|
.sidebar.collapsed .menu-text { |
|
display: none; |
|
} |
|
|
|
.sidebar.collapsed .logo-text { |
|
display: none; |
|
} |
|
|
|
.content-area { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.content-area.expanded { |
|
margin-right: 80px; |
|
} |
|
|
|
[dir="rtl"] .rotate-180 { |
|
transform: rotate(180deg); |
|
} |
|
|
|
[dir="ltr"] .content-area.expanded { |
|
margin-right: 0; |
|
margin-left: 80px; |
|
} |
|
|
|
.dropdown-menu { |
|
display: none; |
|
} |
|
|
|
.dropdown-menu.show { |
|
display: block; |
|
} |
|
|
|
.btn-primary { |
|
background-color: var(--primary-color); |
|
color: white; |
|
} |
|
|
|
.btn-primary:hover { |
|
background-color: #134826; |
|
} |
|
|
|
.btn-secondary { |
|
background-color: var(--secondary-color); |
|
color: #333; |
|
} |
|
|
|
.btn-secondary:hover { |
|
background-color: #e6b722; |
|
} |
|
|
|
.text-primary { |
|
color: var(--primary-color); |
|
} |
|
|
|
.bg-primary { |
|
background-color: var(--primary-color); |
|
} |
|
|
|
.border-primary { |
|
border-color: var(--primary-color); |
|
} |
|
|
|
|
|
#installContainer { |
|
position: fixed; |
|
bottom: 1em; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
z-index: 100; |
|
display: none; |
|
} |
|
|
|
#installButton { |
|
background-color: var(--primary-color); |
|
color: white; |
|
padding: 0.75em 1.5em; |
|
border-radius: 5px; |
|
font-weight: bold; |
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2); |
|
} |
|
|
|
|
|
#offlineNotification { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
background-color: #ff9800; |
|
color: white; |
|
text-align: center; |
|
padding: 10px; |
|
z-index: 1000; |
|
display: none; |
|
} |
|
|
|
|
|
#mobileMenuButton { |
|
display: none; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
#mobileMenuButton { |
|
display: block; |
|
} |
|
|
|
.sidebar { |
|
position: fixed; |
|
z-index: 1000; |
|
transform: translateX(100%); |
|
transition: transform 0.3s ease; |
|
} |
|
|
|
.sidebar.open { |
|
transform: translateX(0); |
|
} |
|
|
|
.content-area { |
|
margin-right: 0 !important; |
|
} |
|
|
|
.content-area.expanded { |
|
margin-left: 0 !important; |
|
} |
|
} |
|
|
|
|
|
.data-table { |
|
width: 100%; |
|
border-collapse: collapse; |
|
} |
|
|
|
.data-table th, .data-table td { |
|
padding: 12px 15px; |
|
text-align: right; |
|
border-bottom: 1px solid #e5e7eb; |
|
} |
|
|
|
.data-table th { |
|
background-color: #f9fafb; |
|
font-weight: 600; |
|
color: #374151; |
|
} |
|
|
|
.data-table tr:hover { |
|
background-color: #f3f4f6; |
|
} |
|
|
|
|
|
.form-group { |
|
margin-bottom: 1.5rem; |
|
} |
|
|
|
.form-label { |
|
display: block; |
|
margin-bottom: 0.5rem; |
|
font-weight: 500; |
|
color: #374151; |
|
} |
|
|
|
.form-control { |
|
width: 100%; |
|
padding: 0.75rem; |
|
border: 1px solid #d1d5db; |
|
border-radius: 0.375rem; |
|
transition: border-color 0.15s ease-in-out; |
|
} |
|
|
|
.form-control:focus { |
|
outline: none; |
|
border-color: var(--primary-color); |
|
box-shadow: 0 0 0 3px rgba(26, 86, 50, 0.1); |
|
} |
|
|
|
|
|
.progress-container { |
|
width: 100%; |
|
height: 8px; |
|
background-color: #e5e7eb; |
|
border-radius: 4px; |
|
overflow: hidden; |
|
} |
|
|
|
.progress-bar { |
|
height: 100%; |
|
background-color: var(--primary-color); |
|
transition: width 0.3s ease; |
|
} |
|
|
|
|
|
.juz-container { |
|
display: grid; |
|
grid-template-columns: repeat(5, 1fr); |
|
gap: 10px; |
|
} |
|
|
|
.juz-box { |
|
border: 1px solid #e5e7eb; |
|
border-radius: 8px; |
|
padding: 10px; |
|
text-align: center; |
|
cursor: pointer; |
|
transition: all 0.2s ease; |
|
} |
|
|
|
.juz-box:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
|
} |
|
|
|
.juz-box.completed { |
|
background-color: #d1fae5; |
|
border-color: #34d399; |
|
} |
|
|
|
.juz-box.in-progress { |
|
background-color: #fef3c7; |
|
border-color: #f59e0b; |
|
} |
|
|
|
.juz-box.not-started { |
|
background-color: #f3f4f6; |
|
border-color: #e5e7eb; |
|
} |
|
|
|
|
|
.attendance-present { |
|
color: #10b981; |
|
} |
|
|
|
.attendance-absent { |
|
color: #ef4444; |
|
} |
|
|
|
.attendance-late { |
|
color: #f59e0b; |
|
} |
|
|
|
|
|
.payment-paid { |
|
color: #10b981; |
|
} |
|
|
|
.payment-pending { |
|
color: #f59e0b; |
|
} |
|
|
|
.payment-overdue { |
|
color: #ef4444; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gray-50 text-gray-800"> |
|
|
|
<div id="offlineNotification"> |
|
أنت الآن غير متصل بالإنترنت. سيتم حفظ التغييرات عند اتصالك مرة أخرى. |
|
</div> |
|
|
|
|
|
<div id="installContainer"> |
|
<button id="installButton" class="btn-primary"> |
|
<i class="fas fa-download mr-2"></i> |
|
<span id="installText">تثبيت التطبيق</span> |
|
</button> |
|
</div> |
|
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
<button id="mobileMenuButton" class="md:hidden fixed top-4 left-4 z-50 bg-white p-2 rounded-full shadow-lg"> |
|
<i class="fas fa-bars text-xl text-primary"></i> |
|
</button> |
|
|
|
|
|
<div id="sidebar" class="sidebar bg-primary text-white w-64 flex flex-col fixed h-full"> |
|
|
|
<div class="p-4 flex items-center justify-between border-b border-green-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-mosque text-2xl text-yellow-300"></i> |
|
<span class="logo-text mr-2 text-xl font-bold">مدرسة النور</span> |
|
</div> |
|
<button id="toggleSidebar" class="text-white focus:outline-none hidden md:block"> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="p-4 flex items-center border-b border-green-700"> |
|
<img src="https://via.placeholder.com/50" alt="User" class="rounded-full w-10 h-10"> |
|
<div class="mr-3 menu-text"> |
|
<div class="font-medium" id="userName">الأستاذ أحمد</div> |
|
<div class="text-xs text-green-200" id="userRole">مدير المدرسة</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<nav class="flex-1 overflow-y-auto"> |
|
<ul class="py-2"> |
|
<li> |
|
<a href="#" class="flex items-center p-3 hover:bg-green-700" data-page="dashboard"> |
|
<i class="fas fa-home text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.home">الرئيسية</span> |
|
</a> |
|
</li> |
|
|
|
|
|
<li> |
|
<div class="dropdown"> |
|
<button onclick="toggleDropdown('students')" class="w-full flex items-center justify-between p-3 hover:bg-green-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-users text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.students">الطلاب</span> |
|
</div> |
|
<i class="fas fa-chevron-down text-xs"></i> |
|
</button> |
|
<ul id="students" class="dropdown-menu bg-green-900"> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="students-list" data-i18n="menu.studentsList">قائمة الطلاب</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="add-student" data-i18n="menu.addStudent">تسجيل طالب جديد</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="attendance" data-i18n="menu.attendance">تقارير الحضور</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="student-groups" data-i18n="menu.studentGroups">مجموعات الطلاب</a></li> |
|
</ul> |
|
</div> |
|
</li> |
|
|
|
|
|
<li> |
|
<div class="dropdown"> |
|
<button onclick="toggleDropdown('teachers')" class="w-full flex items-center justify-between p-3 hover:bg-green-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-chalkboard-teacher text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.teachers">المعلمين</span> |
|
</div> |
|
<i class="fas fa-chevron-down text-xs"></i> |
|
</button> |
|
<ul id="teachers" class="dropdown-menu bg-green-900"> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="teachers-list" data-i18n="menu.teachersList">قائمة المعلمين</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="add-teacher" data-i18n="menu.addTeacher">إضافة معلم جديد</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="schedule" data-i18n="menu.schedule">جدول الحصص</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="teacher-attendance" data-i18n="menu.teacherAttendance">حضور المعلمين</a></li> |
|
</ul> |
|
</div> |
|
</li> |
|
|
|
|
|
<li> |
|
<div class="dropdown"> |
|
<button onclick="toggleDropdown('quran')" class="w-full flex items-center justify-between p-3 hover:bg-green-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-quran text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.quran">القرآن الكريم</span> |
|
</div> |
|
<i class="fas fa-chevron-down text-xs"></i> |
|
</button> |
|
<ul id="quran" class="dropdown-menu bg-green-900"> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="memorization" data-i18n="menu.memorization">سجل الحفظ</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="recitation" data-i18n="menu.recitation">اختبارات التلاوة</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="tracking" data-i18n="menu.tracking">متابعة الحفظ</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="quran-tests" data-i18n="menu.quranTests">اختبارات القرآن</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="quran-levels" data-i18n="menu.quranLevels">مستويات الحفظ</a></li> |
|
</ul> |
|
</div> |
|
</li> |
|
|
|
|
|
<li> |
|
<div class="dropdown"> |
|
<button onclick="toggleDropdown('islamic')" class="w-full flex items-center justify-between p-3 hover:bg-green-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-mosque text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.islamic">التربية الإسلامية</span> |
|
</div> |
|
<i class="fas fa-chevron-down text-xs"></i> |
|
</button> |
|
<ul id="islamic" class="dropdown-menu bg-green-900"> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="lessons" data-i18n="menu.lessons">الدروس</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="exams" data-i18n="menu.exams">الاختبارات</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="activities" data-i18n="menu.activities">الأنشطة</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="islamic-curriculum" data-i18n="menu.islamicCurriculum">المنهج الدراسي</a></li> |
|
</ul> |
|
</div> |
|
</li> |
|
|
|
|
|
<li> |
|
<div class="dropdown"> |
|
<button onclick="toggleDropdown('arabic')" class="w-full flex items-center justify-between p-3 hover:bg-green-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-language text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.arabic">اللغة العربية</span> |
|
</div> |
|
<i class="fas fa-chevron-down text-xs"></i> |
|
</button> |
|
<ul id="arabic" class="dropdown-menu bg-green-900"> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="courses" data-i18n="menu.courses">المقررات</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="homework" data-i18n="menu.homework">الواجبات</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="assessments" data-i18n="menu.assessments">التقييمات</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="arabic-levels" data-i18n="menu.arabicLevels">مستويات اللغة</a></li> |
|
</ul> |
|
</div> |
|
</li> |
|
|
|
|
|
<li> |
|
<div class="dropdown"> |
|
<button onclick="toggleDropdown('financial')" class="w-full flex items-center justify-between p-3 hover:bg-green-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-money-bill-wave text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.financial">الشؤون المالية</span> |
|
</div> |
|
<i class="fas fa-chevron-down text-xs"></i> |
|
</button> |
|
<ul id="financial" class="dropdown-menu bg-green-900"> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="tuition" data-i18n="menu.tuition">الرسوم الدراسية</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="payments" data-i18n="menu.payments">سجل المدفوعات</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="reports" data-i18n="menu.financialReports">التقارير المالية</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="expenses" data-i18n="menu.expenses">المصروفات</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="invoices" data-i18n="menu.invoices">الفواتير</a></li> |
|
</ul> |
|
</div> |
|
</li> |
|
|
|
|
|
<li> |
|
<div class="dropdown"> |
|
<button onclick="toggleDropdown('reports')" class="w-full flex items-center justify-between p-3 hover:bg-green-700"> |
|
<div class="flex items-center"> |
|
<i class="fas fa-chart-bar text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.reports">التقارير</span> |
|
</div> |
|
<i class="fas fa-chevron-down text-xs"></i> |
|
</button> |
|
<ul id="reports" class="dropdown-menu bg-green-900"> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="student-reports" data-i18n="menu.studentReports">تقارير الطلاب</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="teacher-reports" data-i18n="menu.teacherReports">تقارير المعلمين</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="quran-reports" data-i18n="menu.quranReports">تقارير القرآن</a></li> |
|
<li><a href="#" class="block p-3 pr-8 hover:bg-green-700" data-page="attendance-reports" data-i18n="menu.attendanceReports">تقارير الحضور</a></li> |
|
</ul> |
|
</div> |
|
</li> |
|
|
|
|
|
<li> |
|
<a href="#" class="flex items-center p-3 hover:bg-green-700" data-page="settings"> |
|
<i class="fas fa-cog text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.settings">الإعدادات</span> |
|
</a> |
|
</li> |
|
</ul> |
|
</nav> |
|
|
|
|
|
<div class="p-4 border-t border-green-700"> |
|
<button onclick="toggleLanguage()" class="flex items-center text-white mb-3"> |
|
<i class="fas fa-globe text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.changeLanguage">تغيير اللغة / Cambiar idioma</span> |
|
</button> |
|
<a href="#" class="flex items-center text-white" onclick="logout()"> |
|
<i class="fas fa-sign-out-alt text-yellow-300"></i> |
|
<span class="menu-text mr-3" data-i18n="menu.logout">تسجيل الخروج</span> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="contentArea" class="content-area flex-1 flex flex-col overflow-hidden mr-64"> |
|
|
|
<header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between"> |
|
<div class="flex items-center"> |
|
<h1 class="text-xl font-bold text-primary" id="pageTitle" data-i18n="page.dashboard">لوحة التحكم</h1> |
|
</div> |
|
|
|
<div class="flex items-center space-x-4"> |
|
<div class="relative"> |
|
<button class="text-gray-600 hover:text-green-800 focus:outline-none" onclick="showNotifications()"> |
|
<i class="fas fa-bell text-xl"></i> |
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
</button> |
|
</div> |
|
<div class="relative"> |
|
<button class="text-gray-600 hover:text-green-800 focus:outline-none" onclick="showMessages()"> |
|
<i class="fas fa-envelope text-xl"></i> |
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
</button> |
|
</div> |
|
<div class="flex items-center"> |
|
<img src="https://via.placeholder.com/40" alt="User" class="rounded-full w-8 h-8"> |
|
<span class="mr-2 font-medium" id="topUserName">الأستاذ أحمد</span> |
|
</div> |
|
</div> |
|
</header> |
|
|
|
|
|
<main id="dynamicContent" class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
<div id="dashboardContent"> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
<div class="bg-white rounded-lg shadow p-6"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-gray-500" data-i18n="stats.students">عدد الطلاب</p> |
|
<h3 class="text-2xl font-bold text-green-800">127</h3> |
|
</div> |
|
<div class="bg-green-100 p-3 rounded-full"> |
|
<i class="fas fa-users text-green-800 text-xl"></i> |
|
</div> |
|
</div> |
|
<p class="text-green-600 text-sm mt-2"><i class="fas fa-arrow-up"></i> <span data-i18n="stats.studentsIncrease">12% عن الشهر الماضي</span></p> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-gray-500" data-i18n="stats.teachers">عدد المعلمين</p> |
|
<h3 class="text-2xl font-bold text-blue-800">8</h3> |
|
</div> |
|
<div class="bg-blue-100 p-3 rounded-full"> |
|
<i class="fas fa-chalkboard-teacher text-blue-800 text-xl"></i> |
|
</div> |
|
</div> |
|
<p class="text-blue-600 text-sm mt-2"><i class="fas fa-arrow-up"></i> <span data-i18n="stats.newTeachers">2 معلم جديد</span></p> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-gray-500" data-i18n="stats.memorization">حفظ القرآن</p> |
|
<h3 class="text-2xl font-bold text-yellow-800">24</h3> |
|
</div> |
|
<div class="bg-yellow-100 p-3 rounded-full"> |
|
<i class="fas fa-quran text-yellow-800 text-xl"></i> |
|
</div> |
|
</div> |
|
<p class="text-yellow-600 text-sm mt-2"><i class="fas fa-arrow-up"></i> <span data-i18n="stats.completedParts">3 طلاب أكملوا جزءاً</span></p> |
|
</div> |
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
<div class="flex items-center justify-between"> |
|
<div> |
|
<p class="text-gray-500" data-i18n="stats.revenue">الإيرادات الشهرية</p> |
|
<h3 class="text-2xl font-bold text-purple-800">€3,450</h3> |
|
</div> |
|
<div class="bg-purple-100 p-3 rounded-full"> |
|
<i class="fas fa-euro-sign text-purple-800 text-xl"></i> |
|
</div> |
|
</div> |
|
<p class="text-purple-600 text-sm mt-2"><i class="fas fa-arrow-up"></i> <span data-i18n="stats.revenueIncrease">€450 عن الشهر الماضي</span></p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
<div class="lg:col-span-2"> |
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
<div class="p-5 border-b border-gray-200"> |
|
<h3 class="font-bold text-primary" data-i18n="activity.recent">أحدث الأنشطة</h3> |
|
</div> |
|
<div class="divide-y divide-gray-200"> |
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="bg-green-100 p-2 rounded-full mr-3"> |
|
<i class="fas fa-user-graduate text-green-800"></i> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="activity.newStudent">تسجيل طالب جديد</p> |
|
<p class="text-sm text-gray-500" data-i18n="activity.newStudentDesc">تم تسجيل الطالب محمد أحمد في الصف الثالث</p> |
|
<p class="text-xs text-gray-400 mt-1" data-i18n="activity.timeAgo2">منذ ساعتين</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
<i class="fas fa-chalkboard-teacher text-blue-800"></i> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="activity.newTeacher">إضافة معلم جديد</p> |
|
<p class="text-sm text-gray-500" data-i18n="activity.newTeacherDesc">تم تعيين الأستاذ خالد لتدريس القرآن الكريم</p> |
|
<p class="text-xs text-gray-400 mt-1" data-i18n="activity.timeAgo1">منذ يوم</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="bg-yellow-100 p-2 rounded-full mr-3"> |
|
<i class="fas fa-quran text-yellow-800"></i> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="activity.memorization">إكمال حفظ جزء</p> |
|
<p class="text-sm text-gray-500" data-i18n="activity.memorizationDesc">الطالبة سارة محمد أكملت حفظ جزء عم</p> |
|
<p class="text-xs text-gray-400 mt-1" data-i18n="activity.timeAgo3">منذ 3 أيام</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="bg-purple-100 p-2 rounded-full mr-3"> |
|
<i class="fas fa-euro-sign text-purple-800"></i> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="activity.payment">دفع رسوم دراسية</p> |
|
<p class="text-sm text-gray-500" data-i18n="activity.paymentDesc">تم استلام رسوم الطالب يوسف أحمد لشهر يونيو</p> |
|
<p class="text-xs text-gray-400 mt-1" data-i18n="activity.timeAgo4">منذ 4 أيام</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="p-4 bg-gray-50 text-center"> |
|
<a href="#" class="text-primary font-medium" data-i18n="activity.viewAll">عرض جميع الأنشطة</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div> |
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
<div class="p-5 border-b border-gray-200"> |
|
<div class="flex justify-between items-center"> |
|
<h3 class="font-bold text-primary" data-i18n="calendar.title">التقويم</h3> |
|
<div class="flex space-x-2"> |
|
<button class="p-1 rounded-full hover:bg-gray-100" onclick="nextMonth()"> |
|
<i class="fas fa-chevron-right"></i> |
|
</button> |
|
<button class="p-1 rounded-full hover:bg-gray-100" onclick="prevMonth()"> |
|
<i class="fas fa-chevron-left"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="p-4"> |
|
<div class="grid grid-cols-7 gap-1 mb-2"> |
|
<div class="text-center font-medium text-gray-500 text-sm" data-i18n="calendar.sun">أح</div> |
|
<div class="text-center font-medium text-gray-500 text-sm" data-i18n="calendar.mon">إث</div> |
|
<div class="text-center font-medium text-gray-500 text-sm" data-i18n="calendar.tue">ث</div> |
|
<div class="text-center font-medium text-gray-500 text-sm" data-i18n="calendar.wed">أر</div> |
|
<div class="text-center font-medium text-gray-500 text-sm" data-i18n="calendar.thu">خ</div> |
|
<div class="text-center font-medium text-gray-500 text-sm" data-i18n="calendar.fri">ج</div> |
|
<div class="text-center font-medium text-gray-500 text-sm" data-i18n="calendar.sat">س</div> |
|
</div> |
|
<div id="calendarDays" class="grid grid-cols-7 gap-1"> |
|
|
|
</div> |
|
<div class="mt-4 border-t border-gray-200 pt-4"> |
|
<div class="flex items-center mb-2"> |
|
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
|
<span class="text-sm" data-i18n="calendar.event1">اختبار حفظ - الجزء الثلاثون</span> |
|
</div> |
|
<div class="flex items-center"> |
|
<div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div> |
|
<span class="text-sm" data-i18n="calendar.event2">اجتماع أولياء الأمور</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
<div class="p-5 border-b border-gray-200"> |
|
<h3 class="font-bold text-primary" data-i18n="events.upcoming">الأحداث القادمة</h3> |
|
</div> |
|
<div class="divide-y divide-gray-200"> |
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="bg-green-100 p-3 rounded-lg mr-3 text-center"> |
|
<div class="font-bold text-green-800">17</div> |
|
<div class="text-xs text-green-600" data-i18n="month.june">يونيو</div> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="events.exam">اختبار حفظ الجزء الثلاثون</p> |
|
<p class="text-sm text-gray-500" data-i18n="events.examDesc">لطلاب المستوى الثالث - قاعة القرآن الكريم</p> |
|
<p class="text-xs text-gray-400 mt-1">10:00 ص - 12:00 م</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="bg-blue-100 p-3 rounded-lg mr-3 text-center"> |
|
<div class="font-bold text-blue-800">24</div> |
|
<div class="text-xs text-blue-600" data-i18n="month.june">يونيو</div> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="events.meeting">اجتماع أولياء الأمور</p> |
|
<p class="text-sm text-gray-500" data-i18n="events.meetingDesc">لمناقشة تطور الطلاب وخطط الفصل القادم</p> |
|
<p class="text-xs text-gray-400 mt-1">5:00 م - 7:00 م</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="p-4 hover:bg-gray-50"> |
|
<div class="flex items-start"> |
|
<div class="bg-purple-100 p-3 rounded-lg mr-3 text-center"> |
|
<div class="font-bold text-purple-800">30</div> |
|
<div class="text-xs text-purple-600" data-i18n="month.june">يونيو</div> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="events.graduation">حفل تخريج الدفعة الخامسة</p> |
|
<p class="text-sm text-gray-500" data-i18n="events.graduationDesc">لطلاب الصف السادس الذين أكملوا حفظ 5 أجزاء</p> |
|
<p class="text-xs text-gray-400 mt-1">6:00 م - 8:00 م</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="otherPagesContent" style="display: none;"></div> |
|
</main> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="text-xl font-bold text-primary" data-i18n="login.title">تسجيل الدخول</h3> |
|
<button onclick="closeModal('loginModal')" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<form id="loginForm"> |
|
<div class="mb-4"> |
|
<label for="username" class="block text-gray-700 mb-2" data-i18n="login.username">اسم المستخدم</label> |
|
<input type="text" id="username" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> |
|
</div> |
|
<div class="mb-4"> |
|
<label for="password" class="block text-gray-700 mb-2" data-i18n="login.password">كلمة المرور</label> |
|
<input type="password" id="password" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"> |
|
</div> |
|
<div class="mb-4 flex items-center"> |
|
<input type="checkbox" id="remember" class="mr-2"> |
|
<label for="remember" class="text-gray-700" data-i18n="login.remember">تذكرني</label> |
|
</div> |
|
<button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-green-700 transition duration-300" data-i18n="login.submit">تسجيل الدخول</button> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="notificationsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="text-xl font-bold text-primary" data-i18n="notifications.title">الإشعارات</h3> |
|
<button onclick="closeModal('notificationsModal')" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<div class="divide-y divide-gray-200 max-h-96 overflow-y-auto"> |
|
<div class="py-3"> |
|
<div class="flex items-start"> |
|
<div class="bg-green-100 p-2 rounded-full mr-3"> |
|
<i class="fas fa-user-graduate text-green-800"></i> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="notifications.newStudent">تسجيل طالب جديد</p> |
|
<p class="text-sm text-gray-500" data-i18n="notifications.newStudentDesc">تم تسجيل الطالب محمد أحمد في الصف الثالث</p> |
|
<p class="text-xs text-gray-400 mt-1" data-i18n="notifications.timeAgo2">منذ ساعتين</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-3"> |
|
<div class="Flex items-start"> |
|
<div class="bg-blue-100 p-2 rounded-full mr-3"> |
|
<i class="fas fa-chalkboard-teacher text-blue-800"></i> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="notifications.newTeacher">إضافة معلم جديد</p> |
|
<p class="text-sm text-gray-500" data-i18n="notifications.newTeacherDesc">تم تعيين الأستاذ خالد لتدريس القرآن الكريم</p> |
|
<p class="text-xs text-gray-400 mt-1" data-i18n="notifications.timeAgo1">منذ يوم</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-3"> |
|
<div class="flex items-start"> |
|
<div class="bg-yellow-100 p-2 rounded-full mr-3"> |
|
<i class="fas fa-quran text-yellow-800"></i> |
|
</div> |
|
<div> |
|
<p class="font-medium" data-i18n="notifications.memorization">إكمال حفظ جزء</p> |
|
<p class="text-sm text-gray-500" data-i18n="notifications.memorizationDesc">الطالبة سارة محمد أكملت حفظ جزء عم</p> |
|
<p class="text-xs text-gray-400 mt-1" data-i18n="notifications.timeAgo3">منذ 3 أيام</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="messagesModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="text-xl font-bold text-primary" data-i18n="messages.title">الرسائل</h3> |
|
<button onclick="closeModal('messagesModal')" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<div class="divide-y divide-gray-200 max-h-96 overflow-y-auto"> |
|
<div class="py-3 hover:bg-gray-50 cursor-pointer"> |
|
<div class="flex items-start"> |
|
<img src="https://via.placeholder.com/40" alt="Sender" class="rounded-full w-10 h-10 mr-3"> |
|
<div> |
|
<div class="flex justify-between"> |
|
<p class="font-medium">أحمد محمد</p> |
|
<p class="text-xs text-gray-400" data-i18n="messages.timeAgo1">منذ يوم</p> |
|
</div> |
|
<p class="text-sm text-gray-500 truncate" data-i18n="messages.message1">هل يمكنني الحصول على تقرير عن مستوى ابني في الحفظ؟</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-3 hover:bg-gray-50 cursor-pointer"> |
|
<div class="flex items-start"> |
|
<img src="https://via.placeholder.com/40" alt="Sender" class="rounded-full w-10 h-10 mr-3"> |
|
<div> |
|
<div class="flex justify-between"> |
|
<p class="font-medium">الأستاذ خالد</p> |
|
<p class="text-xs text-gray-400" data-i18n="messages.timeAgo2">منذ 3 أيام</p> |
|
</div> |
|
<p class="text-sm text-gray-500 truncate" data-i18n="messages.message2">أحتاج إلى تأجيل حصة يوم الخميس بسبب ظرف طارئ</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="py-3 hover:bg-gray-50 cursor-pointer"> |
|
<div class="flex items-start"> |
|
<img src="https://via.placeholder.com/40" alt="Sender" class="rounded-full w-10 h-10 mr-3"> |
|
<div> |
|
<div class="flex justify-between"> |
|
<p class="font-medium">إدارة المدرسة</p> |
|
<p class="text-xs text-gray-400" data-i18n="messages.timeAgo3">منذ أسبوع</p> |
|
</div> |
|
<p class="text-sm text-gray-500 truncate" data-i18n="messages.message3">تذكير: اجتماع المعلمين يوم السبت القادم</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="addStudentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-2xl"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="text-xl font-bold text-primary" data-i18n="student.addTitle">تسجيل طالب جديد</h3> |
|
<button onclick="closeModal('addStudentModal')" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<form id="addStudentForm"> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="form-group"> |
|
<label for="studentName" class="form-label" data-i18n="student.name">الاسم الكامل</label> |
|
<input type="text" id="studentName" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentBirthdate" class="form-label" data-i18n="student.birthdate">تاريخ الميلاد</label> |
|
<input type="date" id="studentBirthdate" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentGender" class="form-label" data-i18n="student.gender">الجنس</label> |
|
<select id="studentGender" class="form-control" required> |
|
<option value="" selected disabled data-i18n="student.selectGender">اختر الجنس</option> |
|
<option value="male" data-i18n="student.male">ذكر</option> |
|
<option value="female" data-i18n="student.female">أنثى</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentLevel" class="form-label" data-i18n="student.level">المستوى</label> |
|
<select id="studentLevel" class="form-control" required> |
|
<option value="" selected disabled data-i18n="student.selectLevel">اختر المستوى</option> |
|
<option value="1" data-i18n="student.level1">المستوى الأول</option> |
|
<option value="2" data-i18n="student.level2">المستوى الثاني</option> |
|
<option value="3" data-i18n="student.level3">المستوى الثالث</option> |
|
<option value="4" data-i18n="student.level4">المستوى الرابع</option> |
|
<option value="5" data-i18n="student.level5">المستوى الخامس</option> |
|
<option value="6" data-i18n="student.level6">المستوى السادس</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentGroup" class="form-label" data-i18n="student.group">المجموعة</label> |
|
<select id="studentGroup" class="form-control" required> |
|
<option value="" selected disabled data-i18n="student.selectGroup">اختر المجموعة</option> |
|
<option value="1" data-i18n="student.group1">المجموعة أ</option> |
|
<option value="2" data-i18n="student.group2">المجموعة ب</option> |
|
<option value="3" data-i18n="student.group3">المجموعة ج</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentPhone" class="form-label" data-i18n="student.phone">رقم الهاتف</label> |
|
<input type="tel" id="studentPhone" class="form-control"> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentAddress" class="form-label" data-i18n="student.address">العنوان</label> |
|
<input type="text" id="studentAddress" class="form-control"> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentParent" class="form-label" data-i18n="student.parent">ولي الأمر</label> |
|
<input type="text" id="studentParent" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentParentPhone" class="form-label" data-i18n="student.parentPhone">هاتف ولي الأمر</label> |
|
<input type="tel" id="studentParentPhone" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="studentJoinDate" class="form-label" data-i18n="student.joinDate">تاريخ الالتحاق</label> |
|
<input type="date" id="studentJoinDate" class="form-control" required> |
|
</div> |
|
</div> |
|
<div class="mt-6 flex justify-end space-x-3"> |
|
<button type="button" onclick="closeModal('addStudentModal')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" data-i18n="common.cancel">إلغاء</button> |
|
<button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-green-700" data-i18n="common.save">حفظ</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="addTeacherModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-2xl"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="text-xl font-bold text-primary" data-i18n="teacher.addTitle">إضافة معلم جديد</h3> |
|
<button onclick="closeModal('addTeacherModal')" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<form id="addTeacherForm"> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="form-group"> |
|
<label for="teacherName" class="form-label" data-i18n="teacher.name">الاسم الكامل</label> |
|
<input type="text" id="teacherName" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="teacherBirthdate" class="form-label" data-i18n="teacher.birthdate">تاريخ الميلاد</label> |
|
<input type="date" id="teacherBirthdate" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="teacherGender" class="form-label" data-i18n="teacher.gender">الجنس</label> |
|
<select id="teacherGender" class="form-control" required> |
|
<option value="" selected disabled data-i18n="teacher.selectGender">اختر الجنس</option> |
|
<option value="male" data-i18n="teacher.male">ذكر</option> |
|
<option value="female" data-i18n="teacher.female">أنثى</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="teacherSpecialization" class="form-label" data-i18n="teacher.specialization">التخصص</label> |
|
<select id="teacherSpecialization" class="form-control" required> |
|
<option value="" selected disabled data-i18n="teacher.selectSpecialization">اختر التخصص</option> |
|
<option value="quran" data-i18n="teacher.quran">القرآن الكريم</option> |
|
<option value="islamic" data-i18n="teacher.islamic">التربية الإسلامية</option> |
|
<option value="arabic" data-i18n="teacher.arabic">اللغة العربية</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="teacherQualification" class="form-label" data-i18n="teacher.qualification">المؤهل العلمي</label> |
|
<input type="text" id="teacherQualification" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="teacherPhone" class="form-label" data-i18n="teacher.phone">رقم الهاتف</label> |
|
<input type="tel" id="teacherPhone" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="teacherAddress" class="form-label" data-i18n="teacher.address">العنوان</label> |
|
<input type="text" id="teacherAddress" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="teacherJoinDate" class="form-label" data-i18n="teacher.joinDate">تاريخ التعيين</label> |
|
<input type="date" id="teacherJoinDate" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="teacherSalary" class="form-label" data-i18n="teacher.salary">الراتب</label> |
|
<input type="number" id="teacherSalary" class="form-control" required> |
|
</div> |
|
</div> |
|
<div class="mt-6 flex justify-end space-x-3"> |
|
<button type="button" onclick="closeModal('addTeacherModal')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" data-i18n="common.cancel">إلغاء</button> |
|
<button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-green-700" data-i18n="common.save">حفظ</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="quranMemorizationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-2xl"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="text-xl font-bold text-primary" data-i18n="quran.memorizationTitle">تسجيل حفظ جديد</h3> |
|
<button onclick="closeModal('quranMemorizationModal')" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<form id="quranMemorizationForm"> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="form-group"> |
|
<label for="memorizationStudent" class="form-label" data-i18n="quran.student">الطالب</label> |
|
<select id="memorizationStudent" class="form-control" required> |
|
<option value="" selected disabled data-i18n="quran.selectStudent">اختر الطالب</option> |
|
|
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationJuz" class="form-label" data-i18n="quran.juz">الجزء</label> |
|
<select id="memorizationJuz" class="form-control" required> |
|
<option value="" selected disabled data-i18n="quran.selectJuz">اختر الجزء</option> |
|
<option value="30" data-i18n="quran.juz30">الجزء الثلاثون (عم)</option> |
|
<option value="29" data-i18n="quran.juz29">الجزء التاسع والعشرون</option> |
|
|
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationFromSurah" class="form-label" data-i18n="quran.fromSurah">من السورة</label> |
|
<select id="memorizationFromSurah" class="form-control" required> |
|
<option value="" selected disabled data-i18n="quran.selectSurah">اختر السورة</option> |
|
|
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationFromAyah" class="form-label" data-i18n="quran.fromAyah">من الآية</label> |
|
<input type="number" id="memorizationFromAyah" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationToSurah" class="form-label" data-i18n="quran.toSurah">إلى السورة</label> |
|
<select id="memorizationToSurah" class="form-control" required> |
|
<option value="" selected disabled data-i18n="quran.selectSurah">اختر السورة</option> |
|
|
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationToAyah" class="form-label" data-i18n="quran.toAyah">إلى الآية</label> |
|
<input type="number" id="memorizationToAyah" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationDate" class="form-label" data-i18n="quran.memorizationDate">تاريخ الحفظ</label> |
|
<input type="date" id="memorizationDate" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationTeacher" class="form-label" data-i18n="quran.teacher">المعلم</label> |
|
<select id="memorizationTeacher" class="form-control" required> |
|
<option value="" selected disabled data-i18n="quran.selectTeacher">اختر المعلم</option> |
|
|
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationStatus" class="form-label" data-i18n="quran.status">حالة الحفظ</label> |
|
<select id="memorizationStatus" class="form-control" required> |
|
<option value="completed" data-i18n="quran.completed">مكتمل</option> |
|
<option value="in-progress" selected data-i18n="quran.inProgress">قيد الحفظ</option> |
|
<option value="review" data-i18n="quran.review">قيد المراجعة</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="memorizationNotes" class="form-label" data-i18n="quran.notes">ملاحظات</label> |
|
<textarea id="memorizationNotes" class="form-control" rows="2"></textarea> |
|
</div> |
|
</div> |
|
<div class="mt-6 flex justify-end space-x-3"> |
|
<button type="button" onclick="closeModal('quranMemorizationModal')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" data-i18n="common.cancel">إلغاء</button> |
|
<button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-green-700" data-i18n="common.save">حفظ</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="paymentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-2xl"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="text-xl font-bold text-primary" data-i18n="payment.title">تسجيل دفعة جديدة</h3> |
|
<button onclick="closeModal('paymentModal')" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<form id="paymentForm"> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="form-group"> |
|
<label for="paymentStudent" class="form-label" data-i18n="payment.student">الطالب</label> |
|
<select id="paymentStudent" class="form-control" required> |
|
<option value="" selected disabled data-i18n="payment.selectStudent">اختر الطالب</option> |
|
|
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="paymentType" class="form-label" data-i18n="payment.type">نوع الدفعة</label> |
|
<select id="paymentType" class="form-control" required> |
|
<option value="" selected disabled data-i18n="payment.selectType">اختر النوع</option> |
|
<option value="tuition" data-i18n="payment.tuition">رسوم دراسية</option> |
|
<option value="activity" data-i18n="payment.activity">رسوم نشاط</option> |
|
<option value="book" data-i18n="payment.book">رسوم كتب</option> |
|
<option value="other" data-i18n="payment.other">أخرى</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="paymentAmount" class="form-label" data-i18n="payment.amount">المبلغ (€)</label> |
|
<input type="number" id="paymentAmount" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="paymentDate" class="form-label" data-i18n="payment.date">تاريخ الدفع</label> |
|
<input type="date" id="paymentDate" class="form-control" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="paymentMethod" class="form-label" data-i18n="payment.method">طريقة الدفع</label> |
|
<select id="paymentMethod" class="form-control" required> |
|
<option value="" selected disabled data-i18n="payment.selectMethod">اختر الطريقة</option> |
|
<option value="cash" data-i18n="payment.cash">نقداً</option> |
|
<option value="bank" data-i18n="payment.bank">تحويل بنكي</option> |
|
<option value="card" data-i18n="payment.card">بطاقة ائتمان</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="paymentPeriod" class="form-label" data-i18n="payment.period">الفترة</label> |
|
<select id="paymentPeriod" class="form-control" required> |
|
<option value="" selected disabled data-i18n="payment.selectPeriod">اختر الفترة</option> |
|
<option value="monthly" data-i18n="payment.monthly">شهري</option> |
|
<option value="quarterly" data-i18n="payment.quarterly">ربع سنوي</option> |
|
<option value="semester" data-i18n="payment.semester">فصلي</option> |
|
<option value="annual" data-i18n="payment.annual">سنوي</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="paymentReceipt" class="form-label" data-i18n="payment.receipt">رقم الإيصال</label> |
|
<input type="text" id="paymentReceipt" class="form-control"> |
|
</div> |
|
<div class="form-group"> |
|
<label for="paymentNotes" class="form-label" data-i18n="payment.notes">ملاحظات</label> |
|
<textarea id="paymentNotes" class="form-control" rows="2"></textarea> |
|
</div> |
|
</div> |
|
<div class="mt-6 flex justify-end space-x-3"> |
|
<button type="button" onclick="closeModal('paymentModal')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" data-i18n="common.cancel">إلغاء</button> |
|
<button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-green-700" data-i18n="common.save">حفظ</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-4xl"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h3 class="text-xl font-bold text-primary" data-i18n="settings.title">إعدادات النظام</h3> |
|
<button onclick="closeModal('settingsModal')" class="text-gray-500 hover:text-gray-700"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="mb-6"> |
|
<ul class="flex border-b border-gray-200" id="settingsTabs"> |
|
<li class="mr-1"> |
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold text-primary border-b-2 border-primary" data-tab="general" data-i18n="settings.general">عام</a> |
|
</li> |
|
<li class="mr-1"> |
|
<a href="#" class="bg-white inline-block py-2 px-4 text-gray-500 hover:text-primary" data-tab="school" data-i18n="settings.school">المدرسة</a> |
|
</li> |
|
<li class="mr-1"> |
|
<a href="#" class="bg-white inline-block py-2 px-4 text-gray-500 hover:text-primary" data-tab="academic" data-i18n="settings.academic">أكاديمي</a> |
|
</li> |
|
<li class="mr-1"> |
|
<a href="#" class="bg-white inline-block py-2 px-4 text-gray-500 hover:text-primary" data-tab="financial" data-i18n="settings.financial">مالي</a> |
|
</li> |
|
<li class="mr-1"> |
|
<a href="#" class="bg-white inline-block py-2 px-4 text-gray-500 hover:text-primary" data-tab="users" data-i18n="settings.users">المستخدمون</a> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<div id="settingsContent"> |
|
|
|
<div id="generalSettings" class="settings-tab-content"> |
|
<form id="generalSettingsForm"> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="form-group"> |
|
<label for="schoolName" class="form-label" data-i18n="settings.schoolName">اسم المدرسة</label> |
|
<input type="text" id="schoolName" class="form-control" value="مدرسة النور" required> |
|
</div> |
|
<div class="form-group"> |
|
<label for="schoolLogo" class="form-label" data-i18n="settings.schoolLogo">شعار المدرسة</label> |
|
<input type="file" id="schoolLogo" class="form-control"> |
|
</div> |
|
<div class="form-group"> |
|
<label for="defaultLanguage" class="form-label" data-i18n="settings.defaultLanguage">اللغة الافتراضية</label> |
|
<select id="defaultLanguage" class="form-control" required> |
|
<option value="ar" selected data-i18n="settings.arabic">العربية</option> |
|
<option value="es" data-i18n="settings.spanish">الإسبانية</option> |
|
</select> |
|
</div> |
|
<div class="form-group"> |
|
<label for="timezone" class="form-label" data-i18n="settings.timezone">المنطقة الزمنية</label> |
|
<select id="timezone" class=" |
|
</html> |
