Hugging Face's logo

Spaces:
saidbakli
/
baklisaid
Running

App Files Community
baklisaid / index.html
saidbakli's picture
saidbakli
Add 2 files
d0b45bc verified
raw
history blame contribute delete
76.3 kB
<!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">
 <!-- Sidebar -->
 <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>
<!-- Main Content -->
 <div class="flex-1 overflow-auto">
 <!-- Mobile Header -->
 <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> <!-- Spacer for alignment -->
 </header>
<!-- Content -->
 <main class="p-4">
 <!-- Home Tab Content -->
 <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>
<!-- Quick Stats -->
 <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>
<!-- Subjects Summary -->
 <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>
<!-- Recent Grades -->
 <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>
<!-- Top Students -->
 <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>
<!-- Students Needing Attention -->
 <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>
<!-- Students List Tab Content -->
 <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>
<!-- Grades Tab Content -->
 <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>
<!-- Grade Entry Form -->
 <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">
 <!-- Student rows will be inserted here by JavaScript -->
 </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>
<!-- Statistics -->
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
 <!-- Class Average -->
 <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>
<!-- Best Subject -->
 <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>
<!-- Needs Improvement -->
 <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>
<!-- Student Performance -->
 <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">
 <!-- Top Students -->
 <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">
 <!-- Will be filled by JavaScript -->
 <div class="text-center py-4 text-gray-500">
 <i class="fas fa-spinner fa-spin mr-2"></i>
 جاري تحميل البيانات...
 </div>
 </div>
 </div>
<!-- Students Needing Help -->
 <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">
 <!-- Will be filled by JavaScript -->
 <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>
<!-- Statistics Tab Content -->
 <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">
 <!-- Placeholder for chart -->
 <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">
 <!-- Placeholder for chart -->
 <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">
 <!-- Placeholder for chart -->
 <div class="flex items-center justify-center h-full bg-gray-100 rounded">
 <p class="text-gray-500">رسم بياني مقارن بين متوسطات المواد</p>
 </div>
 </div>
 </div>
 </div>
<!-- Schedule Tab Content -->
 <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>
<!-- Messages Tab Content -->
 <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>
<!-- Settings Tab Content -->
 <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>
 // Mobile menu toggle
 document.getElementById('menu-toggle').addEventListener('click', function() {
 document.querySelector('.sidebar').classList.toggle('hidden');
 });
// Tab switching functionality
 const menuItems = document.querySelectorAll('.menu-item');
 const tabContents = document.querySelectorAll('.tab-content');
menuItems.forEach(item => {
 item.addEventListener('click', function(e) {
 e.preventDefault();
// Remove active class from all menu items
 menuItems.forEach(i => i.classList.remove('active'));
 // Add active class to clicked menu item
 this.classList.add('active');
// Hide all tab contents
 tabContents.forEach(content => content.classList.remove('active'));
 // Show the selected tab content
 const tabId = this.getAttribute('data-tab');
 document.getElementById(tabId).classList.add('active');
 });
 });
 // Student data from your input
 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}
 ];
 // Initialize student grades with random values between 5 and 10
 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: ""
 };
 });
 // Calculate averages and evaluations
 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 = "ضعيف";
 }
 });
 }
 // Render student table
 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);
 });
// Add event listeners to all grade inputs
 document.querySelectorAll('.grade-input').forEach(input => {
 input.addEventListener('change', handleGradeChange);
 input.addEventListener('blur', validateGradeInput);
 });
updateStatistics();
 }
 // Get evaluation CSS class
 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";
 }
 }
 // Handle grade changes
 function handleGradeChange(e) {
 const input = e.target;
 const studentId = parseInt(input.dataset.id);
 const subject = input.dataset.subject;
 const value = parseFloat(input.value) || 0;
// Update the student grade
 const student = studentGrades.find(s => s.id === studentId);
 if (student) {
 student[subject] = value.toFixed(1);
// Recalculate average
 const avg = ((parseFloat(student.arabic) + parseFloat(student.math) +
parseFloat(student.islamic) + parseFloat(student.art)) / 4).toFixed(1);
 student.average = avg;
// Update evaluation
 if (avg >= 8.5) {
 student.evaluation = "ممتاز";
 } else if (avg >= 7) {
 student.evaluation = "جيد جدًا";
 } else if (avg >= 5) {
 student.evaluation = "مقبول";
 } else {
 student.evaluation = "ضعيف";
 }
// Update the row
 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();
 }
 }
 // Validate grade inputs (0-10)
 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';
// Round to nearest 0.5
 input.value = (Math.round(value * 2) / 2).toFixed(1);
 }
 // Update statistics
 function updateStatistics() {
 // Calculate class average
 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}%`;
// Calculate subject averages
 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}
 ];
// Find best and worst subjects
 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);
// Update evaluations for subjects
 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;
// Update top and weak students
 updateStudentPerformance();
 }
 // Update top and weak students
 function updateStudentPerformance() {
 // Sort students by average
 const sortedStudents = [...studentGrades].sort((a, b) => b.average - a.average);
// Top 3 students
 const topStudentsContainer = document.getElementById('topStudents');
 topStudentsContainer.innerHTML = '';
for (let i = 0; i < Math.min(3, sortedStudents
</html>