|
|
<!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'); |
|
|
|
|
|
body { |
|
|
font-family: 'Tajawal', sans-serif; |
|
|
background-color: #f5f7fa; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.student-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.grade-progress { |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
.grade-A { |
|
|
background-color: #10B981; |
|
|
} |
|
|
|
|
|
.grade-B { |
|
|
background-color: #3B82F6; |
|
|
} |
|
|
|
|
|
.grade-C { |
|
|
background-color: #F59E0B; |
|
|
} |
|
|
|
|
|
.grade-D { |
|
|
background-color: #EF4444; |
|
|
} |
|
|
|
|
|
.subject-icon { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
} |
|
|
|
|
|
.grade-indicator { |
|
|
width: 80px; |
|
|
height: 30px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 4px; |
|
|
font-weight: bold; |
|
|
font-size: 0.8rem; |
|
|
} |
|
|
|
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.menu-item.active { |
|
|
background-color: #1e40af; |
|
|
} |
|
|
|
|
|
.grade-input { |
|
|
width: 80px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.grade-input:focus { |
|
|
outline: 2px solid #3B82F6; |
|
|
} |
|
|
|
|
|
.subject-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.subject-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.student-id { |
|
|
font-size: 0.7rem; |
|
|
color: #6b7280; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0 hidden md:block"> |
|
|
<div class="p-4"> |
|
|
<h1 class="text-2xl font-bold text-center">مدرسة حموم سعيد</h1> |
|
|
<p class="text-center text-blue-200 mt-1">الصف الأول ابتدائي</p> |
|
|
</div> |
|
|
<nav class="mt-6"> |
|
|
<div class="px-4 py-3 bg-blue-900"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-user-tie ml-2"></i> |
|
|
<span>الأستاذ: باكلي سعيد</span> |
|
|
</div> |
|
|
</div> |
|
|
<a href="#" class="menu-item flex items-center px-4 py-3 text-white bg-blue-700 active" data-tab="home"> |
|
|
<i class="fas fa-home ml-2"></i> |
|
|
<span>الرئيسية</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center px-4 py-3 text-white hover:bg-blue-700" data-tab="students"> |
|
|
<i class="fas fa-users ml-2"></i> |
|
|
<span>قائمة الطلاب</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center px-4 py-3 text-white hover:bg-blue-700" data-tab="grades"> |
|
|
<i class="fas fa-graduation-cap ml-2"></i> |
|
|
<span>إدخال الدرجات</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center px-4 py-3 text-white hover:bg-blue-700" data-tab="stats"> |
|
|
<i class="fas fa-chart-line ml-2"></i> |
|
|
<span>الإحصائيات</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center px-4 py-3 text-white hover:bg-blue-700" data-tab="schedule"> |
|
|
<i class="fas fa-calendar-alt ml-2"></i> |
|
|
<span>الجدول الدراسي</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center px-4 py-3 text-white hover:bg-blue-700" data-tab="messages"> |
|
|
<i class="fas fa-envelope ml-2"></i> |
|
|
<span>رسائل أولياء الأمور</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center px-4 py-3 text-white hover:bg-blue-700" data-tab="settings"> |
|
|
<i class="fas fa-cog ml-2"></i> |
|
|
<span>الإعدادات</span> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto"> |
|
|
|
|
|
<header class="bg-blue-800 text-white p-4 flex items-center justify-between md:hidden"> |
|
|
<button id="menu-toggle" class="text-white"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-bold">مدرسة حموم سعيد</h1> |
|
|
<div class="w-6"></div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-4"> |
|
|
|
|
|
<div id="home" class="tab-content active"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">مرحبا بك، الأستاذ باكلي سعيد</h2> |
|
|
<p class="text-gray-600">الصف الأول ابتدائي - 36 طالبًا</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
<div class="mr-3"> |
|
|
<p class="text-gray-500">عدد الطلاب</p> |
|
|
<h3 class="text-xl font-bold">36</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-check-circle text-xl"></i> |
|
|
</div> |
|
|
<div class="mr-3"> |
|
|
<p class="text-gray-500">الحضور اليوم</p> |
|
|
<h3 class="text-xl font-bold">34</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
|
|
<i class="fas fa-tasks text-xl"></i> |
|
|
</div> |
|
|
<div class="mr-3"> |
|
|
<p class="text-gray-500">الواجبات المعلقة</p> |
|
|
<h3 class="text-xl font-bold">5</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-calendar-alt text-xl"></i> |
|
|
</div> |
|
|
<div class="mr-3"> |
|
|
<p class="text-gray-500">الأحداث القادمة</p> |
|
|
<h3 class="text-xl font-bold">2</h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow mb-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">المواد الدراسية</h3> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-4"> |
|
|
<div class="border rounded-lg p-4 text-center"> |
|
|
<div class="subject-icon bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-book-open text-2xl"></i> |
|
|
</div> |
|
|
<h4 class="font-bold">اللغة العربية</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 7.8/10</p> |
|
|
<div class="mt-2"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 78%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-4 text-center"> |
|
|
<div class="subject-icon bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-calculator text-2xl"></i> |
|
|
</div> |
|
|
<h4 class="font-bold">الرياضيات</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 7.1/10</p> |
|
|
<div class="mt-2"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-green-600 h-2.5 rounded-full" style="width: 71%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-4 text-center"> |
|
|
<div class="subject-icon bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-mosque text-2xl"></i> |
|
|
</div> |
|
|
<h4 class="font-bold">التربية الإسلامية</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 8.4/10</p> |
|
|
<div class="mt-2"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-purple-600 h-2.5 rounded-full" style="width: 84%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-4 text-center"> |
|
|
<div class="subject-icon bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-paint-brush text-2xl"></i> |
|
|
</div> |
|
|
<h4 class="font-bold">التربية الفنية</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 8.8/10</p> |
|
|
<div class="mt-2"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 88%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border rounded-lg p-4 text-center"> |
|
|
<div class="subject-icon bg-red-100 text-red-600 rounded-full flex items-center justify-center mx-auto mb-2"> |
|
|
<i class="fas fa-music text-2xl"></i> |
|
|
</div> |
|
|
<h4 class="font-bold">التربية الموسيقية</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 9.1/10</p> |
|
|
<div class="mt-2"> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-red-500 h-2.5 rounded-full" style="width: 91%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">أحدث الدرجات المسجلة</h3> |
|
|
<a href="#" class="text-blue-600 hover:underline">عرض الكل</a> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم الطالب</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المادة</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الدرجة</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التقييم</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap">أحمد محمد</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">8.0/10</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2023-06-15</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<div class="grade-indicator bg-green-100 text-green-800">جيد جدًا</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap">سارة علي</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">7.0/10</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2023-06-14</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<div class="grade-indicator bg-blue-100 text-blue-800">جيد</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap">يوسف خالد</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الإسلامية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">8.5/10</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2023-06-14</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<div class="grade-indicator bg-green-100 text-green-800">جيد جدًا</div> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap">ليلى عبدالله</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الفنية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">6.0/10</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2023-06-13</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<div class="grade-indicator bg-yellow-100 text-yellow-800">مقبول</div> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">أفضل الطلاب</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center p-3 border rounded-lg student-card transition duration-300"> |
|
|
<div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold ml-2">1</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-bold">أحمد محمد</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 8.5/10</p> |
|
|
</div> |
|
|
<div class="grade-indicator bg-green-100 text-green-800">ممتاز</div> |
|
|
</div> |
|
|
<div class="flex items-center p-3 border rounded-lg student-card transition duration-300"> |
|
|
<div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold ml-2">2</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-bold">سارة علي</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 8.2/10</p> |
|
|
</div> |
|
|
<div class="grade-indicator bg-green-100 text-green-800">ممتاز</div> |
|
|
</div> |
|
|
<div class="flex items-center p-3 border rounded-lg student-card transition duration-300"> |
|
|
<div class="bg-blue-100 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center font-bold ml-2">3</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-bold">يوسف خالد</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 8.0/10</p> |
|
|
</div> |
|
|
<div class="grade-indicator bg-blue-100 text-blue-800">جيد جدًا</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">طلاب يحتاجون متابعة</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center p-3 border rounded-lg student-card transition duration-300"> |
|
|
<div class="bg-red-100 text-red-800 w-10 h-10 rounded-full flex items-center justify-center font-bold ml-2"> |
|
|
<i class="fas fa-exclamation"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-bold">ليلى عبدالله</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 5.5/10</p> |
|
|
</div> |
|
|
<div class="grade-indicator bg-red-100 text-red-800">ضعيف</div> |
|
|
</div> |
|
|
<div class="flex items-center p-3 border rounded-lg student-card transition duration-300"> |
|
|
<div class="bg-yellow-100 text-yellow-800 w-10 h-10 rounded-full flex items-center justify-center font-bold ml-2"> |
|
|
<i class="fas fa-exclamation"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-bold">عمر فارس</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 6.0/10</p> |
|
|
</div> |
|
|
<div class="grade-indicator bg-yellow-100 text-yellow-800">مقبول</div> |
|
|
</div> |
|
|
<div class="flex items-center p-3 border rounded-lg student-card transition duration-300"> |
|
|
<div class="bg-yellow-100 text-yellow-800 w-10 h-10 rounded-full flex items-center justify-center font-bold ml-2"> |
|
|
<i class="fas fa-exclamation"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h4 class="font-bold">نورا سعيد</h4> |
|
|
<p class="text-sm text-gray-500">المعدل: 6.2/10</p> |
|
|
</div> |
|
|
<div class="grade-indicator bg-yellow-100 text-yellow-800">مقبول</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="students" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">قائمة الطلاب</h2> |
|
|
<p class="text-gray-600">إدارة طلاب الصف الأول ابتدائي</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">جميع الطلاب</h3> |
|
|
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"> |
|
|
<i class="fas fa-plus ml-2"></i> إضافة طالب جديد |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">#</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اسم الطالب</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاريخ الميلاد</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">ولي الأمر</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الهاتف</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap">1</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">أحمد محمد</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2016-05-12</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">محمد أحمد</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">0612345678</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mx-1"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 mx-1"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800 mx-1"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">سارة علي</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2016-07-23</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">علي محمود</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">0612345679</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mx-1"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 mx-1"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800 mx-1"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap">3</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">يوسف خالد</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2016-03-15</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">خالد يوسف</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">0612345680</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mx-1"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 mx-1"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800 mx-1"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap">4</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">ليلى عبدالله</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">2016-09-30</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">عبدالله محمد</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">0612345681</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mx-1"> |
|
|
<i class="fas fa-eye"></i> |
|
|
</button> |
|
|
<button class="text-yellow-600 hover:text-yellow-800 mx-1"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800 mx-1"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="grades" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">إدخال الدرجات</h2> |
|
|
<p class="text-gray-600">تسجيل درجات الطلاب في المواد المختلفة</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow mb-6"> |
|
|
<h2 class="text-xl font-bold text-gray-800 border-b pb-2 mb-4">إدخال الدرجات (0/10 - 10/10)</h2> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم التعريف</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الطالب</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الغة العربية</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الرياضيات</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التربية الإسلامية</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التربية الفنية</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المعدل</th> |
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التقييم</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200" id="studentTable"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button id="saveBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg mr-2"> |
|
|
<i class="fas fa-save ml-2"></i> حفظ التغييرات |
|
|
</button> |
|
|
<button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-6 rounded-lg"> |
|
|
<i class="fas fa-redo ml-2"></i> إعادة تعيين |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow subject-card"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 text-blue-700 p-3 rounded-full mr-3"> |
|
|
<i class="fas fa-chalkboard-teacher text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-800">معدل الفصل</h3> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div id="classAverage" class="text-4xl font-bold text-blue-600 mb-2">0.0</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-4"> |
|
|
<div id="classAverageBar" class="bg-blue-600 h-4 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">من أصل 10</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow subject-card"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 text-green-700 p-3 rounded-full mr-3"> |
|
|
<i class="fas fa-star text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-800">أفضل مادة</h3> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div id="bestSubject" class="text-2xl font-bold text-green-600 mb-1">-</div> |
|
|
<div id="bestSubjectScore" class="text-3xl font-bold mb-2">0.极</div> |
|
|
<div id="bestSubjectEval" class="grade-indicator bg-gray-100 text-gray-800 mx-auto">-</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow subject-card"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-yellow-100 text-yellow-700 p-3 rounded-full mr-3"> |
|
|
<i class="fas fa-exclamation-triangle text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-800">تحتاج تحسين</h3> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div id="weakSubject" class="text-2xl font-bold text-yellow-600 mb-1">-</div> |
|
|
<div id="weakSubjectScore" class="text-3xl font-bold mb-2">0.0</div> |
|
|
<div id="weakSubjectEval" class="grade-indicator bg-gray-100 text-gray-800 mx-auto">-</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<h2 class="text-xl font-bold text-gray-800 border-b pb-2 mb-4">أداء الطلاب</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center"> |
|
|
<i class="fas fa-trophy text-yellow-500 ml-2"></i> أفضل 3 طلاب |
|
|
</h3> |
|
|
<div id="topStudents" class="space-y-3"> |
|
|
|
|
|
<div class="text-center py-4 text-gray-500"> |
|
|
<i class="fas fa-spinner fa-spin mr-2"></i> |
|
|
جاري تحميل البيانات... |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold text-gray-800 mb-3 flex items-center"> |
|
|
<i class="fas fa-hands-helping text-red-500 ml-2"></i> يحتاجون متابعة |
|
|
</h3> |
|
|
<div id="weakStudents" class="space-y-3"> |
|
|
|
|
|
<div class="text-center py-4 text-gray-500"> |
|
|
<i class="fas fa-spinner fa-spin mr极2"></i> |
|
|
جاري تحميل البيانات... |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="stats" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">الإحصائيات</h2> |
|
|
<p class="极text-gray-600">تحليل أداء الطلاب في المواد المختلفة</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">توزيع الدرجات - اللغة العربية</h3> |
|
|
<div class="h-64"> |
|
|
|
|
|
<div class="flex items-center justify-center h-full bg-gray-100 rounded"> |
|
|
<p class="text-gray-500">رسم بياني يظهر توزيع الدرجات</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">توزيع الدرجات - الرياضيات</h3> |
|
|
<div class="h-64"> |
|
|
|
|
|
<div class="flex items-center justify-center h-full bg-gray-100 rounded"> |
|
|
<p class="text-gray-500">رسم بياني يظهر توزيع الدرجات</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow mb-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">مقارنة بين المواد</h3> |
|
|
<div class="h-96"> |
|
|
|
|
|
<div class="flex items-center justify-center h-full bg-gray-100 rounded"> |
|
|
<p class="text-gray-500">رسم بياني مقارن بين متوسطات المواد</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="schedule" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">الجدول الدراسي</h2> |
|
|
<p class="text-gray-600">جدول حصص الصف الأول ابتدائي</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">جدول الحصص الأسبوعي</h3> |
|
|
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"> |
|
|
<i class="fas fa-edit ml-2"></i> تعديل الجدول |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">اليوم</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحصة الأولى</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحصة الثانية</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray极500 uppercase tracking-wider">الحصة الثالثة</th> |
|
|
<th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحصة الرابعة</th> |
|
|
<th class="px-4 py-极2 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحصة الخامسة</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">الأحد</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الإسلامية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الفنية</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">الإثنين</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الموسيقية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">الثلاثاء</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الإسلامية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</极td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الفنية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">الأربعاء</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الإسلامية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الموسيقية</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-4 py-2 whitespace-nowrap font-bold">الخميس</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">التربية الإسلامية</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">الرياضيات</td> |
|
|
<td class="px-4 py-2 whitespace-nowrap">اللغة العربية</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="messages" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">رسائل أولياء الأمور</h2> |
|
|
<p class="text-gray-600">إدارة التواصل مع أولياء أمور الطلاب</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">الرسائل الواردة</h3> |
|
|
<div class="space-y-3"> |
|
|
<div class="border-b pb-3"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-bold">محمد أحمد</h4> |
|
|
<p class="text-sm text-gray-500">والد أحمد محمد</p> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">2023-06-15</span> |
|
|
</div> |
|
|
<p class="mt-2 text-gray-700 line-clamp-2">أريد معرفة مستوى ابني في مادة الرياضيات خلال الأسبوع الماضي...</p> |
|
|
<button class="mt-2 text-blue-600 hover:underline text-sm">قراءة الرسالة</button> |
|
|
</div> |
|
|
<div class="border-b pb-3"> |
|
|
<极div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<h4 class="font-bold">علي محمود</h4> |
|
|
<p class="text-sm text-gray-500">والد سارة علي</p> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">2023-06-14</span> |
|
|
</div> |
|
|
<p class="mt-2 text-gray-700 line-clamp-2">ابنتي تخبرني أنها تواجه صعوبة في فهم بعض دروس اللغة العربية...</p> |
|
|
<button class="mt-2 text-blue-600 hover:underline text-sm">قراءة الرسالة</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-4 w-full bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"> |
|
|
عرض جميع الرسائل |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2 bg-white p-4 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">إرسال رسالة جديدة</h3> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">إلى ولي الأمر</label> |
|
|
<select class="border rounded px-3 py-2 w-full"> |
|
|
<option>اختر ولي الأمر</option> |
|
|
<option>محمد أحمد (أحمد محمد)</option> |
|
|
<option>علي محمود (سارة علي)</option> |
|
|
<option>خالد يوسف (يوسف خالد)</option> |
|
|
<option>عبدالله محمد (ليلى عبدالله)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">الموضوع</label> |
|
|
<input type="text" class="border rounded px-3 py-2 w-full" placeholder="أدخل موضوع الرسالة"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">نص الرسالة</label> |
|
|
<textarea class="border rounded px-3 py-2 w-full h-32" placeholder="أدخل نص الرسالة هنا..."></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"> |
|
|
<i class="fas fa-paper-plane ml-2"></i> إرسال الرسالة |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings" class="tab-content"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">الإعدادات</h极> |
|
|
<p class="text-gray-600">تخصيص إعدادات حسابك ونظام المدرسة</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="md:col-span-2 bg-white p-4 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">معلومات الحساب</h3> |
|
|
<form> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">الاسم الأول</label> |
|
|
<input type="text" class="border rounded px-3 py-2 w-full" value="باكلي"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">الاسم الأخير</label> |
|
|
<input type="text" class="border rounded px-3 py-2 w-full" value="سعيد"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">البريد الإلكتروني</label> |
|
|
<input type="email" class="border rounded px-3 py-2 w-full" value="said.bakli@example.com"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">كلمة المرور الحالية</label> |
|
|
<input type="password" class="border rounded px-3 py-2 w-full" placeholder="أدخل كلمة المرور الحالية"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">كلمة المرور الجديدة</label> |
|
|
<input type="password" class="border rounded px-3 py-2 w-full" placeholder="كلمة المرور الجديدة"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">تأكيد كلمة المرور</label> |
|
|
<input type="password" class="border rounded px-3 py-2 w-full" placeholder="تأكيد كلمة المرور"> |
|
|
</div> |
|
|
</div> |
|
|
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"> |
|
|
<i class="fas fa-save ml-2"></i> حفظ التغييرات |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-4">إعدادات النظام</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox" checked> |
|
|
<span class="mr-2">إشعارات البريد الإلكتروني</span> |
|
|
</label> |
|
|
<p class="text-sm text-gray-500 mt-1">تلقي إشعارات عبر البريد الإلكتروني عند تسجيل درجات جديدة</p> |
|
|
</div> |
|
|
<div> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox" checked> |
|
|
<span class="mr-2">إشعارات الرسائل القصيرة</span> |
|
|
</label> |
|
|
<p class="text-sm text-gray-500 mt-1">إرسال رسائل SMS لأولياء الأمور عند تسجيل درجات منخفضة</p> |
|
|
</div> |
|
|
<div> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="form-checkbox"> |
|
|
<span class="mr-2">وضع الظلام</span> |
|
|
</label> |
|
|
<p class="text-sm text-gray-500 mt-1">تفعيل الوضع المظلم لواجهة المستخدم</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-6 w-full bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"> |
|
|
<i class="fas fa-sync-alt ml-2"></i> تطبيق الإعدادات |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('menu-toggle').addEventListener('click', function() { |
|
|
document.querySelector('.sidebar').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const menuItems = document.querySelectorAll('.menu-item'); |
|
|
const tabContents = document.querySelectorAll('.tab-content'); |
|
|
|
|
|
menuItems.forEach(item => { |
|
|
item.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
menuItems.forEach(i => i.classList.remove('active')); |
|
|
|
|
|
this.classList.add('active'); |
|
|
|
|
|
|
|
|
tabContents.forEach(content => content.classList.remove('active')); |
|
|
|
|
|
const tabId = this.getAttribute('data-tab'); |
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const students = [ |
|
|
{id: 430, regNum: "1101806010679900", lastName: "أبركان", firstName: "لياقوت", gender: "أنثى", dob: "2018-08-04", age: 6}, |
|
|
{id: 431, regNum: "1101806010680300", lastName: "أدمام", firstName: "مروي", gender极 "أنثى", dob: "2018-08-04", age: 6}, |
|
|
{id: 432, regNum: "1001806010949200", lastName: "أوبراهم", firstName: "إسماعيل", gender: "ذكر", dob: "2018-10-13", age: 6}, |
|
|
{id: 433, regNum: "1101806010484600", lastName: "أيت إدير", firstName: "سلين", gender: "أنثى", dob: "2018-06-19", age: 6}, |
|
|
{id: 434, regNum: "1101806010970200", lastName: "أيت عيسي", firstName: "دنيا", gender: "أنثى", dob: "2018-10-19", age: 6}, |
|
|
{id: 435, regNum: "1001806010813200", lastName: "بعزيزي", firstName: "يونس", gender: "ذكر", dob: "2018-09-06", age: 6}, |
|
|
{id: 436, regNum: "1001806010630400", lastName: "بن عيسي", firstName: "أيوب", gender: "ذكر", dob: "2018-07-24", age: 6}, |
|
|
{id: 437, regNum: "1101806010950000", lastName: "بناي", firstName: "إلينا", gender: "أنثى", dob: "2018-10-14", age: 6}, |
|
|
{id: 438, regNum: "1001806010645000", lastName: "تولوم", firstName: "محمد وسيم", gender: "ذكر", dob: "2018-07-27", age: 6}, |
|
|
{id: 439, regNum: "1001806390106400", lastName: "حجام", firstName: "ياني", gender: "ذكر", dob: "2018-07-28", age: 6}, |
|
|
{id: 440, regNum: "1001806010677100", lastName: "حداد", firstName: "أيمن", gender: "ذكر", dob: "2018-08-03", age: 6}, |
|
|
{id: 441, regNum: "1001806010690500", lastName: "حساوي", firstName: "إلياس", gender: "ذكر", dob: "2018-08-06", age: 6}, |
|
|
{id: 442, regNum: "1101806010753900", lastName: "حموش", firstName: "حورية", gender: "أنثى", dob: "2018-08-22", age: 6}, |
|
|
{id: 443, regNum: "100180601070140极", lastName: "شولاق", firstName: "حسام", gender: "ذكر", dob: "2018-08-09", age: 6}, |
|
|
{id: 444, regNum: "1001806010807600", lastName: "عرقوب", firstName: "ياني", gender: "ذكر", dob: "极2018-09-04", age: 6}, |
|
|
{id: 445, regNum: "1101806010682700", lastName: "عسلون", firstName: "ملاك", gender: "أنثى", dob: "2018-08-05", age: 6}, |
|
|
{id: 446, regNum: "1001806010975800", lastName: "عيادي", firstName: "وسيم", gender: "ذكر", dob: "2018-10-20", age: 6}, |
|
|
{id: 447, regNum: "1101806010846100", lastName: "كبيش", firstName: "ليليان", gender: "أنثى", dob: "2018-09-14", age: 6}, |
|
|
{id: 448, regNum: "1101806010683800", lastName: "كوشة", firstName: "روزة", gender: "أنثى", dob: "2018-08-05", age: 6}, |
|
|
{id: 449, regNum: "1001806010957300", lastName: "لعراب", firstName: "الهاشمي يوداس", gender: "ذكر", dob: "2018-10-16", age: 6}, |
|
|
{id: 450, regNum: "1001806010385900", lastName: "لمريو", firstName: "بوزيد", gender: "ذكر", dob: "2018-05-24", age: 6}, |
|
|
{id: 451, regNum: "1101806010110400", lastName: "مادي", firstName: "تينهينان", gender: "أنثى", dob: "2018-02-08", age: 7}, |
|
|
{id: 452, regNum: "1101816120059700", lastName: "واعر", firstName: "هبة", gender: "أنثى", dob: "2018-08-11", age: 6}, |
|
|
{id: 453, regNum: "1101806011178300", lastName: "أوعيشوش", firstName: "فايز", gender: "ذكر", dob: "2018-12-22", age: 6}, |
|
|
{id: 454, regNum: "1001806010343100", lastName: "بورشوش", firstName: "أنيا", gender: "أنثى", dob: "2018-05-09", age: 6}, |
|
|
{id: 455, regNum: "1020190601003406", lastName: "بوعودية", firstName: "حكيمة", gender: "أنثى", dob: "2019-01-10", age: 6}, |
|
|
{id: 456, regNum: "1001906010059403", lastName: "حفاف", firstName: "بوعلام", gender: "ذكر", dob: "2019-03-22", age: 6}, |
|
|
{id: 457, regNum: "1101806011010900", lastName: "حموش", firstName: "غيلاس", gender: "ذكر", dob: "2018-10-30", age: 6}, |
|
|
{id: 458, regNum: "1020190601005606", lastName: "رابحي", firstName: "عبد العظيم", gender: "ذكر", dob: "2019-01-16", age: 6}, |
|
|
{id: 459, regNum: "1101814290126600", lastName: "روتال", firstName: "جهاد عبد الاله", gender: "ذكر", dob: "2018-08-20", age: 6}, |
|
|
{id: 460, regNum: "1101806011187300", lastName: "شجاري المر", firstName: "محمد إسلام", gender: "ذكر", dob: "2018-12-24", age: 6}, |
|
|
{id: 461, regNum: "1101806011020700", lastName: "ططاح", firstName: "أكسل", gender: "ذكر", dob: "2018-11-02", age: 6}, |
|
|
{id: 462, regNum: "1001806011104000", lastName: "عرقوب", firstName: "سيرين", gender: "أنثى", dob: "2018-11-27", age: 6}, |
|
|
{id: 463, regNum: "1101906010056800", lastName: "منصر", firstName: "ميرال", gender: "أنثى", dob: "2019-03-21", age: 6}, |
|
|
{id: 464, regNum: "1101806010631400", lastName: "مولوج", firstName: "أدم", gender: "ذكر", dob: "2018-07-24", age: 6}, |
|
|
{id: 465, regNum: "1020190601005502", lastName: "مولوجي", firstName: "سيدرة", gender: "أنثى", dob: "2019-01-16", age: 6}, |
|
|
{id: 466, regNum: "1101806011207300", lastName: "ميزي علاوة", firstName: "آدم", gender: "ذكر", dob: "2018-12-31", age: 6} |
|
|
]; |
|
|
|
|
|
|
|
|
const studentGrades = students.map(student => { |
|
|
return { |
|
|
...student, |
|
|
arabic: (Math.random() * 5 + 5).toFixed(1), |
|
|
math: (Math.random() * 5 + 5).toFixed(1), |
|
|
islamic: (Math.random() * 5 + 5).toFixed(1), |
|
|
art: (Math.random() * 5 + 5).toFixed(1), |
|
|
average: 0, |
|
|
evaluation: "" |
|
|
}; |
|
|
}); |
|
|
|
|
|
|
|
|
function calculateAverages() { |
|
|
studentGrades.forEach(student => { |
|
|
const avg = ((parseFloat(student.arabic) + parseFloat(student.math) + |
|
|
parseFloat(student.islamic) + parseFloat(student.art)) / 4).toFixed(1); |
|
|
student.average = avg; |
|
|
|
|
|
if (avg >= 8.5) { |
|
|
student.evaluation = "ممتاز"; |
|
|
} else if (avg >= 7) { |
|
|
student.evaluation = "جيد جدًا"; |
|
|
} else if (avg >= 5) { |
|
|
student.evaluation = "مقبول"; |
|
|
} else { |
|
|
student.evaluation = "ضعيف"; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function renderStudentTable() { |
|
|
const tableBody = document.getElementById('studentTable'); |
|
|
tableBody.innerHTML = ''; |
|
|
|
|
|
studentGrades.forEach(student => { |
|
|
const row = document.createElement('tr'); |
|
|
|
|
|
row.innerHTML = ` |
|
|
<td class="px-4 py-3 whitespace-nowrap student-id">${student.id}</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<div class="font-medium">${student.firstName} ${student.lastName}</div> |
|
|
<div class="text-xs text-gray-500">${student.gender}, ${student.age} سنوات</div> |
|
|
</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<input type="number" min="0" max="10" step="0.5" class="grade-input border rounded p-1" |
|
|
value="${student.arabic}" data-subject="arabic" data-id="${student.id}"> |
|
|
</td> |
|
|
<td class="px极4 py-3 whitespace-nowrap"> |
|
|
<input type="number" min="0" max="10" step="0.5" class="grade-input border rounded p-1" |
|
|
value="${student.math}" data-subject="math" data-id="${student.id}"> |
|
|
</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<input type="number" min="0" max="10极 step="0.5" class="grade-input border rounded p-1" |
|
|
value="${student.islamic}" data-subject="islamic" data-id="${student.id}"> |
|
|
</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<input type="number" min="0" max="10" step="0.5" class="grade-input border rounded p-1" |
|
|
value="${student.art}" data-subject="art" data-id="${student.id}"> |
|
|
</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap font-bold average-cell">${student.average}</td> |
|
|
<td class="px-4 py-3 whitespace-nowrap"> |
|
|
<div class="grade-indicator ${getEvaluationClass(student.evaluation)}">${student.evaluation}</div> |
|
|
</td> |
|
|
`; |
|
|
|
|
|
tableBody.appendChild(row); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.grade-input').forEach(input => { |
|
|
input.addEventListener('change', handleGradeChange); |
|
|
input.addEventListener('blur', validateGradeInput); |
|
|
}); |
|
|
|
|
|
updateStatistics(); |
|
|
} |
|
|
|
|
|
|
|
|
function getEvaluationClass(evaluation) { |
|
|
switch(evaluation) { |
|
|
case "ممتاز": return "bg-green-100 text-green-800"; |
|
|
case "جيد جدًا": return "bg-blue-100 text-blue-800"; |
|
|
case "مقبول": return "bg-yellow-100 text-yellow-800"; |
|
|
case "ضعيف": return "bg-red-100 text-red-800"; |
|
|
default: return "bg-gray-100 text-gray-800"; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function handleGradeChange(e) { |
|
|
const input = e.target; |
|
|
const studentId = parseInt(input.dataset.id); |
|
|
const subject = input.dataset.subject; |
|
|
const value = parseFloat(input.value) || 0; |
|
|
|
|
|
|
|
|
const student = studentGrades.find(s => s.id === studentId); |
|
|
if (student) { |
|
|
student[subject] = value.toFixed(1); |
|
|
|
|
|
|
|
|
const avg = ((parseFloat(student.arabic) + parseFloat(student.math) + |
|
|
parseFloat(student.islamic) + parseFloat(student.art)) / 4).toFixed(1); |
|
|
student.average = avg; |
|
|
|
|
|
|
|
|
if (avg >= 8.5) { |
|
|
student.evaluation = "ممتاز"; |
|
|
} else if (avg >= 7) { |
|
|
student.evaluation = "جيد جدًا"; |
|
|
} else if (avg >= 5) { |
|
|
student.evaluation = "مقبول"; |
|
|
} else { |
|
|
student.evaluation = "ضعيف"; |
|
|
} |
|
|
|
|
|
|
|
|
const row = input.closest('tr'); |
|
|
row.querySelector('.average-cell').textContent = avg; |
|
|
const evalCell = row.querySelector('.grade-indicator'); |
|
|
evalCell.className = `grade-indicator ${getEvaluationClass(student.evaluation)}`; |
|
|
evalCell.textContent = student.evaluation; |
|
|
|
|
|
updateStatistics(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function validateGradeInput(e) { |
|
|
const input = e.target; |
|
|
let value = parseFloat(input.value); |
|
|
|
|
|
if (isNaN(value)) { |
|
|
input.value = ''; |
|
|
return; |
|
|
} |
|
|
|
|
|
if (value < 0) input.value = '0'; |
|
|
if (value > 10) input.value = '10'; |
|
|
|
|
|
|
|
|
input.value = (Math.round(value * 2) / 2).toFixed(1); |
|
|
} |
|
|
|
|
|
|
|
|
function updateStatistics() { |
|
|
|
|
|
const total = studentGrades.reduce((sum, student) => sum + parseFloat(student.average), 0); |
|
|
const classAvg = (total / studentGrades.length).toFixed(1); |
|
|
document.getElementById('classAverage').textContent = classAvg; |
|
|
document.getElementById('classAverageBar').style.width = `${classAvg * 10}%`; |
|
|
|
|
|
|
|
|
const arabicAvg = studentGrades.reduce((sum, student) => sum + parseFloat(student.arabic), 0) / studentGrades.length; |
|
|
const mathAvg = studentGrades.reduce((sum, student) => sum + parseFloat(student.math), 0) / studentGrades.length; |
|
|
const islamicAvg = studentGrades.reduce((sum, student) => sum + parseFloat(student.islamic), 0) / studentGrades.length; |
|
|
const artAvg = studentGrades.reduce((sum, student) => sum + parseFloat(student.art), 0) / studentGrades.length; |
|
|
|
|
|
const subjects = [ |
|
|
{name: "اللغة العربية", avg: arabicAvg}, |
|
|
{name: "الرياضيات", avg: mathAvg}, |
|
|
{name: "التربية الإسلامية", avg: islamicAvg}, |
|
|
{name: "التربية الفنية", avg: artAvg} |
|
|
]; |
|
|
|
|
|
|
|
|
subjects.sort((a, b) => b.avg - a.avg); |
|
|
const bestSubject = subjects[0]; |
|
|
const weakSubject = subjects[subjects.length - 1]; |
|
|
|
|
|
document.getElementById('bestSubject').textContent = bestSubject.name; |
|
|
document.getElementById('bestSubjectScore').textContent = bestSubject.avg.toFixed(1); |
|
|
|
|
|
document.getElementById('weakSubject').textContent = weakSubject.name; |
|
|
document.getElementById('weakSubjectScore').textContent = weakSubject.avg.toFixed(1); |
|
|
|
|
|
|
|
|
const bestEval = bestSubject.avg >= 8.5 ? "ممتاز" : |
|
|
bestSubject.avg >= 7 ? "جيد جدًا" : |
|
|
bestSubject.avg >= 5 ? "مقبول" : "ضعيف"; |
|
|
|
|
|
const weakEval = weakSubject.avg >= 8.5 ? "ممتاز" : |
|
|
weakSubject.avg >= 7 ? "جيد جدًا" : |
|
|
weakSubject.avg >= 5 ? "مقبول" : "ضعيف"; |
|
|
|
|
|
const bestEvalCell = document.getElementById('bestSubjectEval'); |
|
|
bestEvalCell.className = `grade-indicator ${getEvaluationClass(bestEval)}`; |
|
|
bestEvalCell.textContent = bestEval; |
|
|
|
|
|
const weakEvalCell = document.getElementById('weakSubjectEval'); |
|
|
weakEvalCell.className = `grade-indicator ${getEvaluationClass(weakEval)}`; |
|
|
weakEvalCell.textContent = weakEval; |
|
|
|
|
|
|
|
|
updateStudentPerformance(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateStudentPerformance() { |
|
|
|
|
|
const sortedStudents = [...studentGrades].sort((a, b) => b.average - a.average); |
|
|
|
|
|
|
|
|
const topStudentsContainer = document.getElementById('topStudents'); |
|
|
topStudentsContainer.innerHTML = ''; |
|
|
|
|
|
for (let i = 0; i < Math.min(3, sortedStudents |
|
|
</html> |
