WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
GESTIÓN ESCOLAR
1,732
ALIDEV
Abrir en el editor
Publica tu código
4
HTML
Copy
<!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"> <link rel="stylesheet" href="style.css"> </head> <body class="flex flex-col md:flex-row min-h-screen"> <div class="control-panel w-full md:w-64 bg-indigo-900 text-white p-4 flex flex-col"> <div class="flex flex-col items-center mb-8"> <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mb-2"> <i class="fas fa-school text-indigo-900 text-3xl"></i> </div> <h1 class="text-xl font-bold">مدرسة النجاح</h1> <p class="text-sm text-indigo-200">نظام الإدارة المدرسية</p> </div> <div class="flex items-center mb-6 p-2 bg-indigo-800 rounded-lg"> <div class="w-12 h-12 bg-indigo-200 rounded-full flex items-center justify-center mr-3"> <i class="fas fa-user text-indigo-800"></i> </div> <div> <h3 class="font-bold">أحمد محمد</h3> <p class="text-xs text-indigo-300">مدير المدرسة</p> </div> </div> <nav class="flex-1"> <ul class="space-y-2"> <li> <a href="#" class="menu-item flex items-center p-3 rounded-lg bg-indigo-800"> <i class="fas fa-tachometer-alt ml-2"></i> <span>لوحة التحكم</span> </a> </li> <li> <a href="#" class="menu-item flex items-center p-3 rounded-lg hover:bg-indigo-800 relative"> <i class="fas fa-chalkboard-teacher ml-2"></i> <span>المعلمين</span> <span class="notification-badge bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> </a> </li> <li> <a href="#" class="menu-item flex items-center p-3 rounded-lg hover:bg-indigo-800"> <i class="fas fa-users ml-2"></i> <span>الطلاب</span> </a> </li> <li> <a href="#" class="menu-item flex items-center p-3 rounded-lg hover:bg-indigo-800"> <i class="fas fa-utensils ml-2"></i> <span>المطعم</span> </a> </li> <li> <a href="#" class="menu-item flex items-center p-3 rounded-lg hover:bg-indigo-800 relative"> <i class="fas fa-book ml-2"></i> <span>المكتبة</span> <span class="notification-badge bg-yellow-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">5</span> </a> </li> <li> <a href="#" class="menu-item flex items-center p-3 rounded-lg hover:bg-indigo-800"> <i class="fas fa-cog ml-2"></i> <span>الإعدادات</span> </a> </li> </ul> </nav> <div class="mt-auto"> <button class="w-full py-2 px-4 bg-red-600 hover:bg-red-700 rounded-lg flex items-center justify-center"> <i class="fas fa-sign-out-alt ml-2"></i> <span>تسجيل الخروج</span> </button> </div> </div> <div class="main-content flex-1"> <header class="school-bg text-white p-6"> <div class="flex justify-between items-center"> <h1 class="text-2xl md:text-3xl font-bold">مرحباً بك في نظام إدارة المدرسة</h1> <div class="flex items-center space-x-4 space-x-reverse"> <div class="relative"> <i class="fas fa-bell text-xl cursor-pointer"></i> <span class="notification-badge bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">2</span> </div> <div class="relative"> <i class="fas fa-envelope text-xl cursor-pointer"></i> <span class="notification-badge bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">4</span> </div> </div> </div> <p class="mt-2 text-indigo-100">إدارة جميع جوانب المدرسة من مكان واحد</p> </header> <div class="p-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> <div class="bg-white p-6 rounded-lg shadow flex items-center"> <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-users text-blue-600"></i> </div> <div> <p class="text-gray-500">عدد الطلاب</p> <h3 class="text-2xl font-bold">1,245</h3> </div> </div> <div class="bg-white p-6 rounded-lg shadow flex items-center"> <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-chalkboard-teacher text-green-600"></i> </div> <div> <p class="text-gray-500">عدد المعلمين</p> <h3 class="text-2xl font-bold">68</h3> </div> </div> <div class="bg-white p-6 rounded-lg shadow flex items-center"> <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-book text-purple-600"></i> </div> <div> <p class="text-gray-500">الكتب في المكتبة</p> <h3 class="text-2xl font-bold">3,784</h3> </div> </div> <div class="bg-white p-6 rounded-lg shadow flex items-center"> <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mr-4"> <i class="fas fa-utensils text-yellow-600"></i> </div> <div> <p class="text-gray-500">الوجبات اليومية</p> <h3 class="text-2xl font-bold">850</h3> </div> </div> </div> <h2 class="text-xl font-bold mb-4 text-gray-800">أقسام المدرسة</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> <div class="department-card bg-white rounded-lg shadow overflow-hidden transition duration-300"> <div class="h-32 bg-blue-600 flex items-center justify-center"> <i class="fas fa-flask text-white text-5xl"></i> </div> <div class="p-6"> <h3 class="font-bold text-lg mb-2">القسم العلمي</h3> <p class="text-gray-600 mb-4">يضم القسم العلمي فصول الفيزياء، الكيمياء، والأحياء مع أحدث المختبرات.</p> <div class="flex justify-between text-sm text-gray-500"> <span><i class="fas fa-users mr-1"></i> 12 فصل</span> <span><i class="fas fa-user-graduate mr-1"></i> 420 طالب</span> </div> </div> </div> <div class="department-card bg-white rounded-lg shadow overflow-hidden transition duration-300"> <div class="h-32 bg-green-600 flex items-center justify-center"> <i class="fas fa-pen-fancy text-white text-5xl"></i> </div> <div class="p-6"> <h3 class="font-bold text-lg mb-2">القسم الأدبي</h3> <p class="text-gray-600 mb-4">يقدم القسم الأدبي برامج متكاملة في اللغة العربية، التاريخ، والجغرافيا.</p> <div class="flex justify-between text-sm text-gray-500"> <span><i class="fas fa-users mr-1"></i> 8 فصل</span> <span><i class="fas fa-user-graduate mr-1"></i> 280 طالب</span> </div> </div> </div> <div class="department-card bg-white rounded-lg shadow overflow-hidden transition duration-300"> <div class="h-32 bg-purple-600 flex items-center justify-center"> <i class="fas fa-laptop-code text-white text-5xl"></i> </div> <div class="p-6"> <h3 class="font-bold text-lg mb-2">قسم الحاسوب</h3> <p class="text-gray-600 mb-4">يقدم دورات في البرمجة، الشبكات، وأمن المعلومات مع مختبرات متطورة.</p> <div class="flex justify-between text-sm text-gray-500"> <span><i class="fas fa-users mr-1"></i> 6 فصل</span> <span><i class="fas fa-user-graduate mr-1"></i> 180 طالب</span> </div> </div> </div> </div> <h2 class="text-xl font-bold mb-4 text-gray-800">النشاطات الحديثة</h2> <div class="bg-white rounded-lg shadow overflow-hidden mb-8"> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">النشاط</th> <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المستخدم</th> <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الوقت</th> <th 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> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">تسجيل طالب جديد</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">أحمد محمد</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">منذ 5 دقائق</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">مكتمل</span> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">إضافة كتاب جديد للمكتبة</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">سارة عبدالله</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">منذ 15 دقيقة</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">مكتمل</span> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">تحديث بيانات المعلم</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">خالد حسن</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">منذ 30 دقيقة</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">قيد الانتظار</span> </td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">حجز وجبات المطعم</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">نورا سعيد</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">منذ ساعة</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">مكتمل</span> </td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); body { font-family: 'Tajawal', sans-serif; background-color: #f5f7fa; } .school-bg { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; background-repeat: no-repeat; } .control-panel { box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .menu-item:hover { transform: translateX(-5px); background-color: rgba(255, 255, 255, 0.1); } .department-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .notification-badge { position: absolute; top: -5px; right: -5px; } @media (max-width: 768px) { .control-panel { width: 100%; height: auto; position: relative; } .main-content { width: 100%; } }
JS
Copy
<script> // Simple JavaScript for interactive elements document.addEventListener('DOMContentLoaded', function() { // Highlight active menu item const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); menuItems.forEach(i => i.classList.remove('bg-indigo-800')); this.classList.add('bg-indigo-800'); }); }); // Department card click effect const departmentCards = document.querySelectorAll('.department-card'); departmentCards.forEach(card => { card.addEventListener('click', function() { // Here you can add navigation logic console.log('Navigating to department'); }); }); // Notification bell click const notificationBell = document.querySelector('.fa-bell'); if (notificationBell) { notificationBell.addEventListener('click', function() { alert('عرض الإشعارات'); }); } }); </script>
