Spaces:
Running
Running
| <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;900&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .nav-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar.collapsed .user-info { | |
| display: none; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| .behavior-positive { | |
| border-left: 4px solid #10B981; | |
| } | |
| .behavior-negative { | |
| border-left: 4px solid #EF4444; | |
| } | |
| .behavior-neutral { | |
| border-left: 4px solid #3B82F6; | |
| } | |
| /* Animation for notification bell */ | |
| @keyframes ring { | |
| 0% { transform: rotate(0deg); } | |
| 25% { transform: rotate(10deg); } | |
| 50% { transform: rotate(-10deg); } | |
| 75% { transform: rotate(10deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| .notification-bell { | |
| transition: all 0.3s ease; | |
| } | |
| .notification-bell.ringing { | |
| animation: ring 0.5s ease-in-out 2; | |
| } | |
| /* Student card hover effect */ | |
| .student-card { | |
| transition: all 0.3s ease; | |
| } | |
| .student-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Behavior chart animation */ | |
| .bar { | |
| animation: grow 1.5s ease-out; | |
| } | |
| @keyframes grow { | |
| from { height: 0; opacity: 0; } | |
| to { height: var(--h); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-800 text-white flex flex-col w-64"> | |
| <div class="flex items-center justify-between p-4 border-b border-indigo-700"> | |
| <div class="flex items-center space-x-2 rtl:space-x-reverse"> | |
| <i class="fas fa-user-shield text-2xl text-indigo-300"></i> | |
| <span class="logo-text text-xl font-bold">منصة سلوك</span> | |
| </div> | |
| <button id="toggleSidebar" class="text-indigo-300 hover:text-white focus:outline-none"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="user-info p-4 flex items-center space-x-3 rtl:space-x-reverse border-b border-indigo-700"> | |
| <div class="h-12 w-12 rounded-full bg-indigo-600 flex items-center justify-center"> | |
| <span class="text-xl font-bold">أ</span> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">أحمد محمد</h3> | |
| <p class="text-sm text-indigo-300">معلم رياضيات</p> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <ul class="py-2"> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse px-4 py-3 hover:bg-indigo-700 text-indigo-100 hover:text-white"> | |
| <i class="fas fa-tachometer-alt w-6 text-center"></i> | |
| <span class="nav-text">لوحة التحكم</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse px-4 py-3 bg-indigo-900 text-white"> | |
| <i class="fas fa-users w-6 text-center"></i> | |
| <span class="nav-text">الطلاب</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse px-4 py-3 hover:bg-indigo-700 text-indigo-100 hover:text-white"> | |
| <i class="fas fa-chart-line w-6 text-center"></i> | |
| <span class="nav-text">التقارير</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse px-4 py-3 hover:bg-indigo-700 text-indigo-100 hover:text-white"> | |
| <i class="fas fa-bell w-6 text-center"></i> | |
| <span class="nav-text">الإشعارات</span> | |
| <span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse px-4 py-3 hover:bg-indigo-700 text-indigo-100 hover:text-white"> | |
| <i class="fas fa-comments w-6 text-center"></i> | |
| <span class="nav-text">الرسائل</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse px-4 py-3 hover:bg-indigo-700 text-indigo-100 hover:text-white"> | |
| <i class="fas fa-cog w-6 text-center"></i> | |
| <span class="nav-text">الإعدادات</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <!-- Logout --> | |
| <div class="p-4 border-t border-indigo-700"> | |
| <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse text-indigo-200 hover:text-white"> | |
| <i class="fas fa-sign-out-alt w-6 text-center"></i> | |
| <span class="nav-text">تسجيل الخروج</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Topbar --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between px-6 py-4"> | |
| <div> | |
| <h1 class="text-xl font-bold text-gray-800">إدارة سلوك الطلاب</h1> | |
| <p class="text-sm text-gray-600">مراقبة وتحليل السلوكيات اليومية</p> | |
| </div> | |
| <div class="flex items-center space-x-4 rtl:space-x-reverse"> | |
| <div class="relative"> | |
| <button id="notificationBtn" class="notification-bell p-2 rounded-full hover:bg-gray-100 focus:outline-none relative"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| <!-- Notification Dropdown --> | |
| <div id="notificationDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-lg shadow-xl z-10 border border-gray-200"> | |
| <div class="p-3 border-b border-gray-200 bg-indigo-600 text-white rounded-t-lg"> | |
| <h3 class="font-bold">الإشعارات (3)</h3> | |
| </div> | |
| <div class="overflow-y-auto max-h-80"> | |
| <a href="#" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100"> | |
| <div class="flex items-start space-x-3 rtl:space-x-reverse"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-check text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">سلوك إيجابي</p> | |
| <p class="text-sm text-gray-600">سجل الطالب أحمد حسن سلوك إيجابي في الصف</p> | |
| <p class="text-xs text-gray-500 mt-1">منذ 5 دقائق</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 hover:bg-gray-50 border-b border-gray-100"> | |
| <div class="flex items-start space-x-3 rtl:space-x-reverse"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-exclamation text-red-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">تحذير سلوكي</p> | |
| <p class="text-sm text-gray-600">تأخر الطالب محمد علي عن الحصة الصباحية</p> | |
| <p class="text-xs text-gray-500 mt-1">منذ ساعة</p> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="block px-4 py-3 hover:bg-gray-50"> | |
| <div class="flex items-start space-x-3 rtl:space-x-reverse"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-info-circle text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">تقرير أسبوعي</p> | |
| <p class="text-sm text-gray-600">تم إرسال التقرير الأسبوعي لأولياء الأمور</p> | |
| <p class="text-xs text-gray-500 mt-1">منذ 3 ساعات</p> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| <a href="#" class="block px-4 py-2 text-center bg-gray-50 text-indigo-600 font-medium rounded-b-lg hover:bg-gray-100"> | |
| عرض جميع الإشعارات | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2 rtl:space-x-reverse"> | |
| <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <span class="text-indigo-800 font-bold">أ</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <p class="font-medium">أحمد محمد</p> | |
| <p class="text-xs text-gray-500">معلم رياضيات</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800">الصف الخامس - أ</h2> | |
| <p class="text-gray-600">قائمة الطلاب وسلوكياتهم اليومية</p> | |
| </div> | |
| <div class="mt-3 md:mt-0 flex space-x-2 rtl:space-x-reverse"> | |
| <div class="relative"> | |
| <input type="text" placeholder="بحث عن طالب..." class="w-full md:w-64 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> | |
| <button class="absolute right-3 top-2 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 rtl:space-x-reverse"> | |
| <i class="fas fa-plus"></i> | |
| <span>تسجيل سلوك جديد</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-4 border-r-4 border-blue-500"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-gray-500 text-sm font-medium">عدد الطلاب</h3> | |
| <p class="text-2xl font-bold mt-1">24</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 border-r-4 border-green-500"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-gray-500 text-sm font-medium">سلوكيات إيجابية</h3> | |
| <p class="text-2xl font-bold mt-1">42</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-thumbs-up"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 border-r-4 border-red-500"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-gray-500 text-sm font-medium">سلوكيات سلبية</h3> | |
| <p class="text-2xl font-bold mt-1">15</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> | |
| <i class="fas fa-thumbs-down"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 border-r-4 border-yellow-500"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-gray-500 text-sm font-medium">متوسط النقاط</h3> | |
| <p class="text-2xl font-bold mt-1">56.3</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Students List --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-bold text-lg">قائمة الطلاب</h3> | |
| <div class="flex space-x-2 rtl:space-x-reverse"> | |
| <select class="px-3 py-1 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm"> | |
| <option>ترتيب حسب النقاط</option> | |
| <option>ترتيب حسب الأبجدي</option> | |
| <option>الطلاب المتميزون</option> | |
| <option>الطلاب المحتاجون لمتابعة</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| الطالب | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| النقاط | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"> | |
| آخر سلوك | |
| </th> | |
| <th scope="col" class="px-6 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"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <span class="text-purple-800 font-bold">م</span> | |
| </div> | |
| <div class="mr-4"> | |
| <div class="text-sm font-medium text-gray-900">محمد سعيد</div> | |
| <div class="text-sm text-gray-500">الرقم الأكاديمي: 10025</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| 84 نقطة | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600"> | |
| <i class="fas fa-check-circle mr-1"></i> التزام (اليوم) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mx-2"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mx-2"><i class="fas fa-plus"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mx-2"><i class="fas fa-comment"></i></a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <span class="text-blue-800 font-bold">ع</span> | |
| </div> | |
| <div class="mr-4"> | |
| <div class="text-sm font-medium text-gray-900">علي أحمد</div> | |
| <div class="text-sm text-gray-500">الرقم الأكاديمي: 10018</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| 62 نقطة | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-blue-600"> | |
| <i class="fas fa-info-circle mr-1"></i> سلوك طبيعي (اليوم) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mx-2"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mx-2"><i class="fas fa-plus"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mx-2"><i class="fas fa-comment"></i></a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 bg-red-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center"> | |
| <span class="text-red-800 font-bold">س</span> | |
| </div> | |
| <div class="mr-4"> | |
| <div class="text-sm font-medium text-gray-900">سالم خالد</div> | |
| <div class="text-sm text-gray-500">الرقم الأكاديمي: 10030</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"> | |
| 35 نقطة | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> شغب (اليوم) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mx-2"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mx-2"><i class="fas fa-plus"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mx-2"><i class="fas fa-comment"></i></a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <span class="text-green-800 font-bold">ف</span> | |
| </div> | |
| <div class="mr-4"> | |
| <div class="text-sm font-medium text-gray-900">فاطمة علي</div> | |
| <div class="text-sm text-gray-500">الرقم الأكاديمي: 10022</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| 91 نقطة | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600"> | |
| <i class="fas fa-check-circle mr-1"></i> تعاون (أمس) | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mx-2"><i class="fas fa-eye"></i></a> | |
| <a href="#" class="text-green-600 hover:text-green-900 mx-2"><i class="fas fa-plus"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-900 mx-2"><i class="fas fa-comment"></i></a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500"> | |
| عرض <span class="font-medium">1</span> إلى <span class="font-medium">4</span> من <span class="font-medium">24</span> طالب | |
| </div> | |
| <div class="flex space-x-2 rtl:space-x-reverse"> | |
| <button class="px-3 py-1 rounded-lg border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50" disabled> | |
| السابق | |
| </button> | |
| <button class="px-3 py-1 rounded-lg border border-gray-300 bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700"> | |
| التالي | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Student Behavior Chart --> | |
| <div> | |
| <div class="bg-white rounded-lg shadow mb-6"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="font-bold text-lg">تحليل السلوك الأسبوعي</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between h-40 mb-4"> | |
| <div class="flex flex-col items-center justify-end"> | |
| <div class="bar bg-green-500 w-8 rounded-t" style="--h: 80%; height: 80%;"></div> | |
| <span class="text-xs mt-2">الإثنين</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-end"> | |
| <div class="bar bg-green-500 w-8 rounded-t" style="--h: 65%; height: 65%;"></div> | |
| <span class="text-xs mt-2">الثلاثاء</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-end"> | |
| <div class="bar bg-yellow-500 w-8 rounded-t" style="--h: 50%; height: 50%;"></div> | |
| <span class="text-xs mt-2">الأربعاء</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-end"> | |
| <div class="bar bg-red-500 w-8 rounded-t" style="--h: 30%; height: 30%;"></div> | |
| <span class="text-xs mt-2">الخميس</span> | |
| </div> | |
| <div class="flex flex-col items-center justify-end"> | |
| <div class="bar bg-green-500 w-8 rounded-t" style="--h: 70%; height: 70%;"></div> | |
| <span class="text-xs mt-2">اليوم</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 px-2"> | |
| <span>0</span> | |
| <span>10</span> | |
| <span>20</span> | |
| <span>30</span> | |
| <span>40</span> | |
| <span>50</span> | |
| <span>60</span> | |
| <span>70</span> | |
| <span>80</span> | |
| <span>90</span> | |
| <span>100</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="font-bold text-lg">أحدث السلوكيات</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200 max-h-96 overflow-y-auto"> | |
| <div class="p-4 hover:bg-gray-50 behavior-positive"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">التزام وانضباط</p> | |
| <p class="text-sm text-gray-600">محمد سعيد</p> | |
| </div> | |
| <div class="text-xs text-gray-500">اليوم 10:30 ص</div> | |
| </div> | |
| <p class="text-sm mt-2 text-gray-700">تم إعطاء الطالب 5 نقاط لأنه كان منضبطًا خلال الحصة الأولى</p> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">+5 نقاط</span> | |
| <span class="text-xs text-gray-500">أحمد محمد</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 behavior-negative"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">إزعاج أثناء الشرح</p> | |
| <p class="text-sm text-gray-600">سالم خالد</p> | |
| </div> | |
| <div class="text-xs text-gray-500">اليوم 09:45 ص</div> | |
| </div> | |
| <p class="text-sm mt-2 text-gray-700">تم تنبيه الطالب مرتين ثم سجلت ملاحظة سلوكية</p> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">-3 نقاط</span> | |
| <span class="text-xs text-gray-500">منى عبدالله</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 behavior-positive"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">تعاون مع زملائه</p> | |
| <p class="text-sm text-gray-600">فاطمة علي</p> | |
| </div> | |
| <div class="text-xs text-gray-500">أمس 12:30 م</div> | |
| </div> | |
| <p class="text-sm mt-2 text-gray-700">ساعدت زملائها في حل التمارين الصعبة</p> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">+4 نقاط</span> | |
| <span class="text-xs text-gray-500">يوسف أحمد</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 behavior-neutral"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="font-medium">تأخر عن الحصة</p> | |
| <p class="text-sm text-gray-600">خالد محمد</p> | |
| </div> | |
| <div class="text-xs text-gray-500">أمس 08:15 ص</div> | |
| </div> | |
| <p class="text-sm mt-2 text-gray-700">تأخر 10 دقائق عن بداية الحصة بدون عذر</p> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">0 نقاط</span> | |
| <span class="text-xs text-gray-500">نادية حسين</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 border-t border-gray-200 text-center"> | |
| <a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-900">عرض جميع السجلات</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar | |
| document.getElementById('toggleSidebar').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('collapsed'); | |
| if (document.querySelector('.sidebar').classList.contains('collapsed')) { | |
| this.innerHTML = '<i class="fas fa-bars"></i>'; | |
| } else { | |
| this.innerHTML = '<i class="fas fa-times"></i>'; | |
| } | |
| }); | |
| // Toggle notification dropdown | |
| const notificationBtn = document.getElementById('notificationBtn'); | |
| const notificationDropdown = document.getElementById('notificationDropdown'); | |
| notificationBtn.addEventListener('click', function() { | |
| notificationDropdown.classList.toggle('hidden'); | |
| notificationBtn.classList.toggle('ringing'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| if (!notificationBtn.contains(event.target) && !notificationDropdown.contains(event.target)) { | |
| notificationDropdown.classList.add('hidden'); | |
| notificationBtn.classList.remove('ringing'); | |
| } | |
| }); | |
| // Animate the bars when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const bars = document.querySelectorAll('.bar'); | |
| bars.forEach(bar => { | |
| const height = bar.style.getPropertyValue('--h'); | |
| bar.style.height = height; | |
| }); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| observer.observe(document.querySelector('.bg-white')); | |
| // Sample data for the behavior chart (can be replaced with real data) | |
| const behaviorData = { | |
| days: ['الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'اليوم'], | |
| values: [80, 65, 50, 30, 70], | |
| colors: ['green', 'green', 'yellow', 'red', 'green'] | |
| }; | |
| </script> | |
| </html> |