Download index.html from azbarga/test: direct link, hf CLI and curl.
- Browser
- Download file 77.5 kB
-
https://huggingface.co/spaces/azbarga/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/azbarga/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/azbarga/test/resolve/main/index.html
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>
<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 ;
color: #f7fafc ;
}
.dark-mode .text-gray-800 {
color: #f7fafc ;
}
.dark-mode .border-gray-200 {
border-color: #4a5568 ;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;