test / index.html
azbarga's picture
Add 3 files
0921adc verified
Raw History Blame Contribute Delete
77.5 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"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#3490dc', secondary: '#6574cd', success: '#38a169', danger: '#e3342f', warning: '#f6993f', info: '#6cb2eb', } } } } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); body { font-family: 'Tajawal', sans-serif; } .rtl-input { direction: rtl; text-align: right; } .sidebar { transition: all 0.3s; } .sidebar-collapsed { width: 70px; overflow: hidden; } .sidebar-expanded { width: 250px; } .main-content { transition: margin-right 0.3s; } .content-expanded { margin-right: 250px; } .content-collapsed { margin-right: 70px; } .notification-badge { position: absolute; top: -5px; right: -5px; } .dark-mode { background-color: #1a202c; color: #f7fafc; } .dark-mode .bg-white { background-color: #2d3748 !important; color: #f7fafc !important; } .dark-mode .text-gray-800 { color: #f7fafc !important; } .dark-mode .border-gray-200 { border-color: #4a5568 !important; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(26px); } </style> </head> <body class="bg-gray-100"> <div class="flex h-screen overflow-hidden"> <!-- Sidebar --> <div id="sidebar" class="sidebar bg-white shadow-lg sidebar-expanded"> <div class="p-4 flex items-center justify-between border-b border-gray-200"> <div class="flex items-center"> <i class="fas fa-chalkboard-teacher text-2xl text-primary ml-2"></i> <span class="text-xl font-bold">نظام المعلمين</span> </div> <button id="sidebar-toggle" class="text-gray-500 focus:outline-none"> <i class="fas fa-bars"></i> </button> </div> <div class="p-4"> <div class="mb-6"> <div class="text-xs uppercase font-bold text-gray-500 mb-2">القائمة الرئيسية</div> <ul> <li class="mb-2"> <a href="#dashboard" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-tachometer-alt ml-2"></i> <span>لوحة التحكم</span> </a> </li> <li class="mb-2"> <a href="#timetable" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-table ml-2"></i> <span>جداول الحصص</span> </a> </li> <li class="mb-2"> <a href="#absence" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-user-times ml-2"></i> <span>تسجيل الغياب</span> </a> </li> <li class="mb-2"> <a href="#substitutes" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-user-check ml-2"></i> <span>المعلمون البدلاء</span> </a> </li> <li class="mb-2"> <a href="#notifications" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-bell ml-2"></i> <span class="relative"> الإشعارات <span class="notification-badge bg-danger text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> </span> </a> </li> <li class="mb-2"> <a href="#reports" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-chart-bar ml-2"></i> <span>التقارير</span> </a> </li> </ul> </div> <div class="mb-6"> <div class="text-xs uppercase font-bold text-gray-500 mb-2">الإعدادات</div> <ul> <li class="mb-2"> <a href="#settings" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-cog ml-2"></i> <span>إعدادات النظام</span> </a> </li> <li class="mb-2"> <a href="#users" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-users ml-2"></i> <span>إدارة المستخدمين</span> </a> </li> <li class="mb-2"> <a href="#backup" class="flex items-center p-2 text-gray-800 rounded-lg hover:bg-gray-100"> <i class="fas fa-database ml-2"></i> <span>النسخ الاحتياطي</span> </a> </li> </ul> </div> </div> <div class="absolute bottom-0 w-full p-4 border-t border-gray-200"> <div class="flex items-center"> <img src="https://via.placeholder.com/40" alt="User" class="rounded-full h-10 w-10"> <div class="mr-2"> <div class="font-bold">أحمد محمد</div> <div class="text-xs text-gray-500">مدير النظام</div> </div> </div> </div> </div> <!-- Main Content --> <div id="main-content" class="main-content content-expanded flex-1 overflow-auto"> <!-- Top Navigation --> <nav class="bg-white shadow-sm p-4 flex items-center justify-between"> <div class="flex items-center"> <button id="mobile-menu-toggle" class="md:hidden text-gray-500 focus:outline-none mr-2"> <i class="fas fa-bars text-xl"></i> </button> <h1 class="text-xl font-bold">لوحة التحكم</h1> </div> <div class="flex items-center"> <div class="relative mr-4"> <input type="text" placeholder="بحث..." class="rtl-input pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i> </div> <div class="flex items-center space-x-4"> <button class="relative text-gray-500 hover:text-gray-700 focus:outline-none"> <i class="fas fa-bell text-xl"></i> <span class="notification-badge bg-danger text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> </button> <div class="flex items-center"> <label class="switch mr-2"> <input type="checkbox" id="dark-mode-toggle"> <span class="slider"></span> </label> <i class="fas fa-moon text-gray-500"></i> </div> </div> </div> </nav> <!-- Content Area --> <div class="p-4"> <!-- Dashboard Section --> <section id="dashboard" class="mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">لوحة التحكم</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> <div class="bg-primary text-white rounded-lg p-4 shadow"> <div class="flex items-center justify-between"> <div> <div class="text-sm">عدد المعلمين</div> <div class="text-2xl font-bold">45</div> </div> <i class="fas fa-users text-3xl opacity-50"></i> </div> </div> <div class="bg-success text-white rounded-lg p-4 shadow"> <div class="flex items-center justify-between"> <div> <div class="text-sm">غياب اليوم</div> <div class="text-2xl font-bold">3</div> </div> <i class="fas fa-user-times text-3xl opacity-50"></i> </div> </div> <div class="bg-warning text-white rounded-lg p-4 shadow"> <div class="flex items-center justify-between"> <div> <div class="text-sm">بدلاء اليوم</div> <div class="text-2xl font-bold">2</div> </div> <i class="fas fa-user-check text-3xl opacity-50"></i> </div> </div> <div class="bg-info text-white rounded-lg p-4 shadow"> <div class="flex items-center justify-between"> <div> <div class="text-sm">حصص اليوم</div> <div class="text-2xl font-bold">28</div> </div> <i class="fas fa-chalkboard text-3xl opacity-50"></i> </div> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="bg-white rounded-lg shadow p-4"> <h3 class="font-bold mb-3 border-b pb-2">جدول الحصص اليومي</h3> <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> </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">أ. أحمد</td> <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-success text-white">حاضر</span></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">أ. محمد</td> <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-danger text-white">غائب</span></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">أ. خالد</td> <td class="px-4 py-2 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-warning text-white">بديل</span></td> </tr> </tbody> </table> </div> </div> <div class="bg-white rounded-lg shadow p-4"> <h3 class="font-bold mb-3 border-b pb-2">الغياب الأخير</h3> <div class="space-y-3"> <div class="flex items-start p-3 border border-gray-200 rounded-lg"> <div class="bg-danger text-white rounded-full h-10 w-10 flex items-center justify-center mr-3"> <i class="fas fa-user-times"></i> </div> <div> <div class="font-bold">أ. محمد عبدالله</div> <div class="text-sm text-gray-500">الصف: ثاني ثانوي ب - الحصة: الثانية</div> <div class="text-sm">السبب: مرض</div> </div> <div class="text-xs text-gray-400 mr-auto">اليوم 8:30 ص</div> </div> <div class="flex items-start p-3 border border-gray-200 rounded-lg"> <div class="bg-danger text-white rounded-full h-10 w-10 flex items-center justify-center mr-3"> <i class="fas fa-user-times"></i> </div> <div> <div class="font-bold">أ. سعيد علي</div> <div class="text-sm text-gray-500">الصف: أول متوسط ج - الحصة: الثالثة</div> <div class="text-sm">السبب: إجازة</div> </div> <div class="text-xs text-gray-400 mr-auto">أمس 9:15 ص</div> </div> </div> </div> </div> </div> </section> <!-- Timetable Management Section --> <section id="timetable" class="mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">إدارة جداول الحصص</h2> <div class="mb-6"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg flex items-center"> <i class="fas fa-file-excel ml-2"></i> رفع ملف Excel </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> </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"> <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">1, 3, 5</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fas fa-eye"></i> </button> <button class="text-yellow-500 hover:text-yellow-700 mr-2"> <i class="fas fa-edit"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </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"> <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">2, 4, 6</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fas fa-eye"></i> </button> <button class="text-yellow-500 hover:text-yellow-700 mr-2"> <i class="fas fa-edit"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> </tbody> </table> </div> </div> </section> <!-- Absence Recording Section --> <section id="absence" class="mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">تسجيل غياب المعلمين</h2> <div class="mb-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label class="block text-gray-700 mb-2">تاريخ اليوم</label> <input type="date" class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-gray-700 mb-2">اختر المعلم</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>اختر المعلم</option> <option>أ. أحمد محمد</option> <option>أ. خالد سعيد</option> <option>أ. سعيد علي</option> </select> </div> </div> <div class="mt-4"> <label class="block text-gray-700 mb-2">سبب الغياب (اختياري)</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>اختر السبب</option> <option>مرض</option> <option>إجازة</option> <option>ظرف طارئ</option> <option>دورة تدريبية</option> </select> </div> <div class="mt-4"> <label class="block text-gray-700 mb-2">ملاحظات إضافية</label> <textarea class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" rows="3"></textarea> </div> <div class="mt-6"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-save ml-2"></i> حفظ الغياب </button> </div> </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">15/05/2023</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"> <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">2, 4</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fas fa-eye"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr> <td class="px-4 py-2 whitespace-nowrap">14/05/2023</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"> <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">3</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fas fa-eye"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> </tbody> </table> </div> </div> </section> <!-- Substitutes Section --> <section id="substitutes" class="mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">تعيين المعلمين البدلاء</h2> <div class="mb-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div> <label class="block text-gray-700 mb-2">اختر المعلم الغائب</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>اختر المعلم</option> <option>أ. محمد عبدالله</option> <option>أ. سعيد علي</option> </select> </div> <div> <label class="block text-gray-700 mb-2">اختر المعلم البديل</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>اختر البديل</option> <option>أ. أحمد محمد</option> <option>أ. خالد سعيد</option> </select> </div> <div> <label class="block text-gray-700 mb-2">الحصة</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>اختر الحصة</option> <option>الأولى</option> <option>الثانية</option> <option>الثالثة</option> </select> </div> </div> <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label class="block text-gray-700 mb-2">الصف</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>اختر الصف</option> <option>أول متوسط أ</option> <option>ثاني ثانوي ب</option> <option>ثالث ابتدائي ج</option> </select> </div> <div> <label class="block text-gray-700 mb-2">تاريخ الحصة</label> <input type="date" class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> </div> <div class="mt-6"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg mr-2"> <i class="fas fa-save ml-2"></i> حفظ التعيين </button> <button class="bg-success hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fab fa-whatsapp ml-2"></i> إرسال عبر واتساب </button> </div> </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">15/05/2023</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"> <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">الثانية - ثاني ثانوي ب</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fab fa-whatsapp"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr> <td class="px-4 py-2 whitespace-nowrap">14/05/2023</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"> <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">الثالثة - أول متوسط ج</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fab fa-whatsapp"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> </tbody> </table> </div> </div> </section> <!-- Notifications Section --> <section id="notifications" class="mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">إعدادات الإشعارات</h2> <div class="mb-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h3 class="font-bold mb-3">إشعارات قبل الحصص</h3> <div class="mb-4"> <label class="block text-gray-700 mb-2">تفعيل الإشعارات</label> <label class="inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span class="ms-3 text-sm font-medium text-gray-900">مفعل</span> </label> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">وقت الإشعار قبل الحصة</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>5 دقائق</option> <option>10 دقائق</option> <option>15 دقائق</option> <option>30 دقيقة</option> </select> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">نص الإشعار</label> <textarea class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" rows="4">المعلم [الاسم] غائب، الحصة القادمة رقم [x] فارغة. الرجاء إدخال معلم بديل.</textarea> </div> </div> <div> <h3 class="font-bold mb-3">إشعارات واتساب</h3> <div class="mb-4"> <label class="block text-gray-700 mb-2">تفعيل إرسال واتساب</label> <label class="inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span class="ms-3 text-sm font-medium text-gray-900">مفعل</span> </label> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">نص رسالة واتساب</label> <textarea class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" rows="4">السلام عليكم، تم تعيينك كمعلم بديل في الحصة رقم (3) لصف (أول متوسط ب) بسبب غياب المعلم (أ. خالد). شكراً لتعاونك.</textarea> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">إرسال تلقائي عند تعيين بديل</label> <label class="inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer"> <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span class="ms-3 text-sm font-medium text-gray-900">غير مفعل</span> </label> </div> </div> </div> <div class="mt-6"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-save ml-2"></i> حفظ الإعدادات </button> </div> </div> </div> </section> <!-- Reports Section --> <section id="reports" class="mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">التقارير والإحصائيات</h2> <div class="mb-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> <div> <label class="block text-gray-700 mb-2">نوع التقرير</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>تقرير الغياب</option> <option>تقرير البدلاء</option> <option>تقرير الحصص الفارغة</option> </select> </div> <div> <label class="block text-gray-700 mb-2">الفترة الزمنية</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>اليوم</option> <option>الأسبوع</option> <option>الشهر</option> <option>فترة مخصصة</option> </select> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6" id="custom-date-range" style="display: none;"> <div> <label class="block text-gray-700 mb-2">من تاريخ</label> <input type="date" class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div> <label class="block text-gray-700 mb-2">إلى تاريخ</label> <input type="date" class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> </div> <div class="flex space-x-4"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-filter ml-2"></i> تصفية </button> <button class="bg-success hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-file-excel ml-2"></i> تصدير Excel </button> <button class="bg-danger hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-file-pdf ml-2"></i> تصدير PDF </button> </div> </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">5</td> <td class="px-4 py-2 whitespace-nowrap">12</td> <td class="px-4 py-2 whitespace-nowrap">مرض</td> <td class="px-4 py-2 whitespace-nowrap"> <div class="w-full bg-gray-200 rounded-full h-2.5"> <div class="bg-danger h-2.5 rounded-full" style="width: 60%"></div> </div> <span class="text-xs">60%</span> </td> </tr> <tr> <td class="px-4 py-2 whitespace-nowrap">أ. سعيد علي</td> <td class="px-4 py-2 whitespace-nowrap">3</td> <td class="px-4 py-2 whitespace-nowrap">5</td> <td class="px-4 py-2 whitespace-nowrap">إجازة</td> <td class="px-4 py-2 whitespace-nowrap"> <div class="w-full bg-gray-200 rounded-full h-2.5"> <div class="bg-warning h-2.5 rounded-full" style="width: 30%"></div> </div> <span class="text-xs">30%</span> </td> </tr> </tbody> </table> </div> </div> </section> <!-- Settings Section --> <section id="settings" class="mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">إعدادات النظام</h2> <div class="mb-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h3 class="font-bold mb-3">إعدادات عامة</h3> <div class="mb-4"> <label class="block text-gray-700 mb-2">اسم المدرسة</label> <input type="text" class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="مدرسة النخبة الثانوية"> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">الوضع الليلي</label> <label class="inline-flex items-center cursor-pointer"> <input type="checkbox" id="dark-mode-toggle-2" class="sr-only peer"> <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span class="ms-3 text-sm font-medium text-gray-900">غير مفعل</span> </label> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">اللغة</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>العربية</option> <option>English</option> </select> </div> </div> <div> <h3 class="font-bold mb-3">إعدادات النسخ الاحتياطي</h3> <div class="mb-4"> <label class="block text-gray-700 mb-2">النسخ الاحتياطي التلقائي</label> <label class="inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer" checked> <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span class="ms-3 text-sm font-medium text-gray-900">مفعل</span> </label> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">مدة النسخ الاحتياطي</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>يومي</option> <option>أسبوعي</option> <option>شهري</option> </select> </div> <div class="mb-4"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-download ml-2"></i> نسخ احتياطي يدوي </button> </div> </div> </div> <div class="mt-6"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-save ml-2"></i> حفظ الإعدادات </button> </div> </div> </div> </section> <!-- Users Management Section --> <section id="users" class="mb-8"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">إدارة المستخدمين</h2> <div class="mb-6"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg mb-4"> <i class="fas fa-user-plus ml-2"></i> إضافة مستخدم جديد </button> <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">admin@school.edu</td> <td class="px-4 py-2 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-primary text-white">مدير النظام</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-success text-white">نشط</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fas fa-edit"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr> <td class="px-4 py-2 whitespace-nowrap">خالد سعيد</td> <td class="px-4 py-2 whitespace-nowrap">khalid@school.edu</td> <td class="px-4 py-2 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-secondary text-white">مشرف</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-success text-white">نشط</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fas fa-edit"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> </tbody> </table> </div> </div> </div> </section> <!-- Backup Section --> <section id="backup"> <div class="bg-white rounded-lg shadow-md p-6"> <h2 class="text-xl font-bold mb-4 border-b pb-2">النسخ الاحتياطي</h2> <div class="mb-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div> <h3 class="font-bold mb-3">إنشاء نسخة احتياطية</h3> <div class="mb-4"> <label class="block text-gray-700 mb-2">نوع النسخة</label> <select class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option>كاملة (بيانات + إعدادات)</option> <option>بيانات فقط</option> <option>إعدادات فقط</option> </select> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">تشفير النسخة</label> <label class="inline-flex items-center cursor-pointer"> <input type="checkbox" class="sr-only peer"> <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> <span class="ms-3 text-sm font-medium text-gray-900">غير مفعل</span> </label> </div> <div class="mb-4"> <button class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-download ml-2"></i> إنشاء نسخة احتياطية </button> </div> </div> <div> <h3 class="font-bold mb-3">استعادة نسخة احتياطية</h3> <div class="mb-4"> <label class="block text-gray-700 mb-2">اختر ملف النسخة</label> <div class="flex items-center justify-center w-full"> <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> <div class="flex flex-col items-center justify-center pt-5 pb-6"> <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">انقر لرفع الملف</span> أو اسحبه هنا</p> <p class="text-xs text-gray-500">SQL أو ZIP (حتى 10MB)</p> </div> <input id="dropzone-file" type="file" class="hidden" /> </label> </div> </div> <div class="mb-4"> <label class="block text-gray-700 mb-2">كلمة المرور (إذا كانت مشفرة)</label> <input type="password" class="rtl-input w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> </div> <div class="mb-4"> <button class="bg-success hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg"> <i class="fas fa-upload ml-2"></i> استعادة النسخة </button> </div> </div> </div> <div class="mt-6"> <h3 class="font-bold mb-3">النسخ الاحتياطية السابقة</h3> <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">backup_20230515.sql</td> <td class="px-4 py-2 whitespace-nowrap">15/05/2023 08:30 ص</td> <td class="px-4 py-2 whitespace-nowrap">5.2 MB</td> <td class="px-4 py-2 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">كاملة</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fas fa-download"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> <tr> <td class="px-4 py-2 whitespace-nowrap">backup_20230508.zip</td> <td class="px-4 py-2 whitespace-nowrap">08/05/2023 08:30 ص</td> <td class="px-4 py-2 whitespace-nowrap">7.8 MB</td> <td class="px-4 py-2 whitespace-nowrap"> <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">بيانات</span> </td> <td class="px-4 py-2 whitespace-nowrap"> <button class="text-blue-500 hover:text-blue-700 mr-2"> <i class="fas fa-download"></i> </button> <button class="text-red-500 hover:text-red-700"> <i class="fas fa-trash"></i> </button> </td> </tr> </tbody> </table> </div> </div> </div> </div> </section> </div> </div> </div> <script> // Toggle sidebar const sidebarToggle = document.getElementById('sidebar-toggle'); const sidebar = document.getElementById('sidebar'); const mainContent = document.getElementById('main-content'); const mobileMenuToggle = document.getElementById('mobile-menu-toggle'); sidebarToggle.addEventListener('click', () => { sidebar.classList.toggle('sidebar-collapsed'); sidebar.classList.toggle('sidebar-expanded'); mainContent.classList.toggle('content-collapsed'); mainContent.classList.toggle('content-expanded'); }); mobileMenuToggle.addEventListener('click', () => { sidebar.classList.toggle('hidden'); }); // Dark mode toggle const darkModeToggle = document.getElementById('dark-mode-toggle'); const darkModeToggle2 = document.getElementById('dark-mode-toggle-2'); darkModeToggle.addEventListener('change', () => { document.body.classList.toggle('dark-mode'); }); darkModeToggle2.addEventListener('change', () => { document.body.classList.toggle('dark-mode'); }); // Show custom date range when selected const timePeriodSelect = document.querySelector('#reports select:nth-of-type(2)'); const customDateRange = document.getElementById('custom-date-range'); timePeriodSelect.addEventListener('change', (e) => { if (e.target.value === 'فترة مخصصة') { customDateRange.style.display = 'grid'; } else { customDateRange.style.display = 'none'; } }); // File upload preview const dropzoneFile = document.getElementById('dropzone-file'); const dropzoneLabel = document.querySelector('[for="dropzone-file"]'); dropzoneFile.addEventListener('change', (e) => { if (e.target.files.length > 0) { const fileName = e.target.files[0].name; dropzoneLabel.innerHTML = ` <div class="flex flex-col items-center justify-center pt-5 pb-6"> <i class="fas fa-file-alt text-3xl text-gray-400 mb-2"></i> <p class="mb-2 text-sm text-gray-500">${fileName}</p> <p class="text-xs text-gray-500">${(e.target.files[0].size / (1024*1024)).toFixed(2)} MB</p> </div> `; } }); // Responsive adjustments function handleResize() { if (window.innerWidth < 768) { sidebar.classList.add('hidden'); } else { sidebar.classList.remove('hidden'); } } window.addEventListener('resize', handleResize); handleResize(); </script> <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=azbarga/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
<!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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3490dc',
secondary: '#6574cd',
success: '#38a169',
danger: '#e3342f',
warning: '#f6993f',
info: '#6cb2eb',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
body {
font-family: 'Tajawal', sans-serif;
}
.rtl-input {
direction: rtl;
text-align: right;
}
.sidebar {
transition: all 0.3s;
}
.sidebar-collapsed {
width: 70px;
overflow: hidden;
}
.sidebar-expanded {
width: 250px;
}
.main-content {
transition: margin-right 0.3s;
}
.content-expanded {
margin-right: 250px;
}
.content-collapsed {
margin-right: 70px;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
}
.dark-mode {
background-color: #1a202c;
color: #f7fafc;
}
.dark-mode .bg-white {
background-color: #2d3748 !important;
color: #f7fafc !important;
}
.dark-mode .text-gray-800 {
color: #f7fafc !important;
}
.dark-mode .border-gray-200 {
border-color: #4a5568 !important;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;