WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
GESTIÓN ESCOLAR
1021
ALIDEV
Abrir en el editor
Publica tu código
18 June 2025
Portal Escolar: Consulta de Resultados y Pago de Matrícula
7 July 2025
TaskMaster Pro - Gestión dinámica de tareas inteligentes de TheDoc
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>
