| <!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-item:hover { |
| background-color: rgba(255, 255, 255, 0.1); |
| border-right: 3px solid #3b82f6; |
| } |
| |
| .activity-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
| } |
| |
| .dashboard-card:hover { |
| transform: scale(1.02); |
| } |
| |
| |
| @keyframes slideIn { |
| from { transform: translateX(100%); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| |
| .notification { |
| animation: slideIn 0.3s ease-out; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="hidden md:flex md:flex-shrink-0"> |
| <div class="flex flex-col w-64 bg-blue-800 text-white"> |
| <div class="flex items-center justify-center h-16 px-4 border-b border-blue-700"> |
| <div class="flex items-center"> |
| <i class="fas fa-school text-2xl text-blue-300 mr-2"></i> |
| <span class="text-xl font-bold">نظام الأنشطة</span> |
| </div> |
| </div> |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> |
| <div class="space-y-1"> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white bg-blue-900"> |
| <i class="fas fa-tachometer-alt mr-3 text-blue-200"></i> |
| لوحة التحكم |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-blue-700"> |
| <i class="fas fa-calendar-alt mr-3 text-blue-200"></i> |
| جدول الأنشطة |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-blue-700"> |
| <i class="fas fa-users mr-3 text-blue-200"></i> |
| إدارة الطلاب |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-blue-700"> |
| <i class="fas fa-chalkboard-teacher mr-3 text-blue-200"></i> |
| المشرفون |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-blue-700"> |
| <i class="fas fa-trophy mr-3 text-blue-200"></i> |
| المسابقات |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-blue-700"> |
| <i class="fas fa-file-invoice mr-3 text-blue-200"></i> |
| التقارير |
| </a> |
| <a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-white hover:bg-blue-700"> |
| <i class="fas fa-cog mr-3 text-blue-200"></i> |
| الإعدادات |
| </a> |
| </div> |
| </div> |
| <div class="p-4 border-t border-blue-700"> |
| <div class="flex items-center"> |
| <img class="h-10 w-10 rounded-full" src="https://ui-avatars.com/api/?name=مدير+المدرسة&background=random" alt=""> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-white">مدير المدرسة</p> |
| <p class="text-xs font-medium text-blue-200">admin@school.edu</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-col flex-1 overflow-hidden"> |
| |
| <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 bg-white"> |
| <div class="flex items-center"> |
| <button class="md:hidden text-gray-500 focus:outline-none"> |
| <i class="fas fa-bars"></i> |
| </button> |
| <h1 class="text-lg font-semibold text-gray-800 mr-4">لوحة التحكم</h1> |
| </div> |
| <div class="flex items-center space-x-4 space-x-reverse"> |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none relative"> |
| <i class="fas fa-bell"></i> |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
| </button> |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none"> |
| <i class="fas fa-envelope"></i> |
| </button> |
| <button class="p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="md:hidden bg-blue-800 text-white py-2 px-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-school text-xl text-blue-300 mr-2"></i> |
| <span class="text-lg font-bold">نظام الأنشطة</span> |
| </div> |
| <button class="text-white focus:outline-none"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| |
| <div class="flex-1 overflow-y-auto p-4"> |
| |
| <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-md p-6 mb-6 text-white"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div> |
| <h2 class="text-2xl font-bold">مرحباً بك، مدير المدرسة!</h2> |
| <p class="mt-2">هنا يمكنك إدارة جميع الأنشطة الطلابية في مدرستك.</p> |
| </div> |
| <button class="mt-4 md:mt-0 bg-white text-blue-600 px-4 py-2 rounded-lg font-medium hover:bg-blue-50 transition duration-150"> |
| <i class="fas fa-plus mr-2"></i> نشاط جديد |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="dashboard-card bg-white rounded-lg shadow-md p-6 transition duration-300"> |
| <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-sm text-gray-500">الطلاب المسجلين</p> |
| <p class="text-2xl font-bold">248</p> |
| </div> |
| </div> |
| </div> |
| <div class="dashboard-card bg-white rounded-lg shadow-md p-6 transition duration-300"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> |
| <i class="fas fa-calendar-check text-xl"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm text-gray-500">الأنشطة النشطة</p> |
| <p class="text-2xl font-bold">12</p> |
| </div> |
| </div> |
| </div> |
| <div class="dashboard-card bg-white rounded-lg shadow-md p-6 transition duration-300"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
| <i class="fas fa-chalkboard-teacher text-xl"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm text-gray-500">المشرفون</p> |
| <p class="text-2xl font-bold">8</p> |
| </div> |
| </div> |
| </div> |
| <div class="dashboard-card bg-white rounded-lg shadow-md p-6 transition duration-300"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
| <i class="fas fa-trophy text-xl"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm text-gray-500">المسابقات</p> |
| <p class="text-2xl font-bold">5</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">الأنشطة القادمة</h2> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| عرض الكل <i class="fas fa-chevron-left mr-1"></i> |
| </button> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| <div class="activity-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition duration-300"> |
| <div class="bg-green-500 p-4 text-white"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-bold">مسابقة القرآن الكريم</h3> |
| <span class="bg-green-600 text-xs px-2 py-1 rounded-full">نشط</span> |
| </div> |
| <p class="text-sm mt-1">المسجد الكبير</p> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-center text-sm text-gray-600 mb-2"> |
| <i class="far fa-calendar-alt mr-2"></i> |
| <span>15 مايو 2023 - 10:00 ص</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-600 mb-3"> |
| <i class="fas fa-user-tie mr-2"></i> |
| <span>أ. محمد أحمد</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">25 طالب</span> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| التفاصيل <i class="fas fa-chevron-left mr-1"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="activity-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition duration-300"> |
| <div class="bg-blue-500 p-4 text-white"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-bold">دورة البرمجة</h3> |
| <span class="bg-blue-600 text-xs px-2 py-1 rounded-full">قريباً</span> |
| </div> |
| <p class="text-sm mt-1">معمل الحاسوب</p> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-center text-sm text-gray-600 mb-2"> |
| <i class="far fa-calendar-alt mr-2"></i> |
| <span>20 مايو 2023 - 2:00 م</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-600 mb-3"> |
| <i class="fas fa-user-tie mr-2"></i> |
| <span>أ. علي محمود</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">15 طالب</span> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| التفاصيل <i class="fas fa-chevron-left mr-1"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="activity-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm transition duration-300"> |
| <div class="bg-purple-500 p-4 text-white"> |
| <div class="flex justify-between items-center"> |
| <h3 class="font-bold">معرض العلوم</h3> |
| <span class="bg-purple-600 text-xs px-2 py-1 rounded-full">تحت الإعداد</span> |
| </div> |
| <p class="text-sm mt-1">قاعة الأنشطة</p> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-center text-sm text-gray-600 mb-2"> |
| <i class="far fa-calendar-alt mr-2"></i> |
| <span>25 مايو 2023 - 9:00 ص</span> |
| </div> |
| <div class="flex items-center text-sm text-gray-600 mb-3"> |
| <i class="fas fa-user-tie mr-2"></i> |
| <span>أ. سارة خالد</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">8 فرق</span> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| التفاصيل <i class="fas fa-chevron-left mr-1"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <h2 class="text-xl font-bold text-gray-800 mb-4">أحدث الأنشطة</h2> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-green-100 p-2 rounded-full text-green-600"> |
| <i class="fas fa-check"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-gray-900">تم إكمال نشاط كرة القدم بنجاح</p> |
| <p class="text-xs text-gray-500">منذ يومين - 35 مشارك</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full text-blue-600"> |
| <i class="fas fa-trophy"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-gray-900">فريق المدرسة فاز بمسابقة الخطابة</p> |
| <p class="text-xs text-gray-500">منذ أسبوع - المركز الأول</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-yellow-100 p-2 rounded-full text-yellow-600"> |
| <i class="fas fa-exclamation"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-gray-900">تأجيل دورة الرسم إلى الأسبوع القادم</p> |
| <p class="text-xs text-gray-500">منذ 3 أيام - بسبب إجازة المعلم</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full text-purple-600"> |
| <i class="fas fa-user-plus"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-gray-900">تم تعيين مشرف جديد لنشاط الروبوتات</p> |
| <p class="text-xs text-gray-500">منذ 5 أيام - أ. خالد سعد</p> |
| </div> |
| </div> |
| </div> |
| <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| عرض المزيد <i class="fas fa-chevron-left mr-1"></i> |
| </button> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <h2 class="text-xl font-bold text-gray-800 mb-4">الإشعارات</h2> |
| <div class="space-y-3"> |
| <div class="notification flex items-start p-3 bg-blue-50 rounded-lg"> |
| <div class="flex-shrink-0 text-blue-500"> |
| <i class="fas fa-info-circle"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-gray-900">يوجد طلب جديد للانضمام إلى نادي التصوير</p> |
| <p class="text-xs text-gray-500">منذ ساعتين - من الطالب أحمد محمد</p> |
| </div> |
| </div> |
| <div class="notification flex items-start p-3 bg-green-50 rounded-lg"> |
| <div class="flex-shrink-0 text-green-500"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-gray-900">تمت الموافقة على نشاط المسرح المدرسي</p> |
| <p class="text-xs text-gray-500">منذ يوم - يبدأ الأسبوع القادم</p> |
| </div> |
| </div> |
| <div class="notification flex items-start p-3 bg-red-50 rounded-lg"> |
| <div class="flex-shrink-0 text-red-500"> |
| <i class="fas fa-exclamation-triangle"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-gray-900">تحذير: نقص في المعدات لنشاط الكشافة</p> |
| <p class="text-xs text-gray-500">منذ 3 أيام - يرجى التزويد قبل 15 مايو</p> |
| </div> |
| </div> |
| <div class="notification flex items-start p-3 bg-yellow-50 rounded-lg"> |
| <div class="flex-shrink-0 text-yellow-500"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div class="mr-3"> |
| <p class="text-sm font-medium text-gray-900">تذكير: اجتماع مشرفي الأنشطة غداً</p> |
| <p class="text-xs text-gray-500">منذ يوم - الساعة 10:00 ص في الإدارة</p> |
| </div> |
| </div> |
| </div> |
| <button class="mt-4 text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| عرض المزيد <i class="fas fa-chevron-left mr-1"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="addActivityModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> |
| <div class="flex justify-between items-center border-b p-4"> |
| <h3 class="text-lg font-bold">إضافة نشاط جديد</h3> |
| <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <form> |
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="activity-name"> |
| اسم النشاط |
| </label> |
| <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="activity-name" type="text" placeholder="أدخل اسم النشاط"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="activity-type"> |
| نوع النشاط |
| </label> |
| <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="activity-type"> |
| <option>ثقافي</option> |
| <option>رياضي</option> |
| <option>علمي</option> |
| <option>فني</option> |
| <option>اجتماعي</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="activity-date"> |
| تاريخ النشاط |
| </label> |
| <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="activity-date" type="date"> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="activity-supervisor"> |
| المشرف |
| </label> |
| <select class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="activity-supervisor"> |
| <option>أ. محمد أحمد</option> |
| <option>أ. علي محمود</option> |
| <option>أ. سارة خالد</option> |
| <option>أ. خالد سعد</option> |
| </select> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="activity-location"> |
| المكان |
| </label> |
| <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="activity-location" type="text" placeholder="أدخل مكان النشاط"> |
| </div> |
| </form> |
| </div> |
| <div class="flex justify-end p-4 border-t"> |
| <button onclick="closeModal()" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg mr-2"> |
| إلغاء |
| </button> |
| <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg"> |
| حفظ النشاط |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('[class*="fa-bars"]').forEach(button => { |
| button.addEventListener('click', () => { |
| const sidebar = document.querySelector('.md\\:hidden + div'); |
| sidebar.classList.toggle('hidden'); |
| }); |
| }); |
| |
| |
| function openModal() { |
| document.getElementById('addActivityModal').classList.remove('hidden'); |
| } |
| |
| function closeModal() { |
| document.getElementById('addActivityModal').classList.add('hidden'); |
| } |
| |
| |
| document.querySelector('.bg-white.text-blue-600').addEventListener('click', openModal); |
| |
| |
| document.querySelectorAll('.activity-card').forEach(card => { |
| card.addEventListener('mouseenter', () => { |
| card.classList.add('shadow-lg'); |
| }); |
| card.addEventListener('mouseleave', () => { |
| card.classList.remove('shadow-lg'); |
| }); |
| }); |
| |
| |
| let notificationCount = 3; |
| const notificationBadge = document.createElement('span'); |
| notificationBadge.className = 'absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500'; |
| document.querySelector('.fa-bell').parentNode.appendChild(notificationBadge); |
| |
| |
| document.querySelectorAll('.notification').forEach(notification => { |
| notification.addEventListener('click', () => { |
| notification.classList.add('opacity-50'); |
| notificationCount--; |
| if (notificationCount === 0) { |
| notificationBadge.classList.add('hidden'); |
| } |
| }); |
| }); |
| </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=Mazenss/mn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
