Hugging Face's logo

Spaces:
kalhdrawi
/
undefined
Running

App Files Community
kalhdrawi commited on
Commit
96637b1
·
verified ·
1 Parent(s): cd0b305

قم ببناء موقع احترافي لادارة المستشفى متكون من 20 صفحة

Browse files
Files changed (16) hide show
  1. README.md +9 -5
  2. appointment-scheduling.html +148 -0
  3. appointments.html +151 -0
  4. billing.html +4 -0
  5. departments.html +205 -0
  6. doctor-details.html +197 -0
  7. doctor-registration.html +175 -0
  8. doctors.html +164 -0
  9. emergency.html +215 -0
  10. index.html +152 -19
  11. laboratory.html +160 -0
  12. patient-details.html +188 -0
  13. patient-registration.html +150 -0
  14. patients.html +143 -0
  15. pharmacy.html +175 -0
  16. radiology.html +178 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: blue
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
appointment-scheduling.html ADDED
@@ -0,0 +1,148 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>حجز موعد - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
12
+ body { font-family: 'Tajawal', sans-serif; }
13
+ </style>
14
+ </head>
15
+ <body class="bg-gray-50">
16
+ <!-- Navigation -->
17
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
18
+ <div class="max-w-7xl mx-auto px-4">
19
+ <div class="flex justify-between items-center py-4">
20
+ <div class="flex items-center space-x-reverse space-x-2">
21
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
22
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
23
+ </div>
24
+ <div class="hidden md:flex space-x-reverse space-x-6">
25
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
26
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
27
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
28
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
29
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
30
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </nav>
35
+
36
+ <div class="max-w-4xl mx-auto px-4 py-8">
37
+ <h1 class="text-3xl font-bold text-gray-800 mb-8">حجز موعد جديد</h1>
38
+
39
+ <div class="bg-white rounded-lg shadow-md p-6">
40
+ <form class="space-y-6">
41
+ <!-- Patient Selection -->
42
+ <div>
43
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">اختيار المريض</h2>
44
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
45
+ <div>
46
+ <label class="block text-sm font-medium text-gray-700 mb-2">البحث عن مريض</label>
47
+ <input type="text" placeholder="اكتب اسم أو رقم الملف" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
48
+ </div>
49
+ <div>
50
+ <label class="block text-sm font-medium text-gray-700 mb-2">أو مريض جديد</label>
51
+ <a href="patient-registration.html" class="inline-block px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">تسجيل مريض جديد</a>
52
+ </div>
53
+ </div>
54
+ </div>
55
+
56
+ <!-- Doctor Selection -->
57
+ <div>
58
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">اختيار الطبيب</h2>
59
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
60
+ <div>
61
+ <label class="block text-sm font-medium text-gray-700 mb-2">التخصص</label>
62
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
63
+ <option>اختر التخصص</option>
64
+ <option>قلب</option>
65
+ <option>نساء وتوليد</option>
66
+ <option>أطفال</option>
67
+ <option>جراحة</option>
68
+ <option>باطنية</option>
69
+ </select>
70
+ </div>
71
+ <div>
72
+ <label class="block text-sm font-medium text-gray-700 mb-2">الطبيب</label>
73
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
74
+ <option>اختر الطبيب</option>
75
+ <option>د. أحمد محمد</option>
76
+ <option>د. سارة أحمد</option>
77
+ <option>د. محمود علي</option>
78
+ </select>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Date and Time Selection -->
84
+ <div>
85
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">اختيار الموعد</h2>
86
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
87
+ <div>
88
+ <label class="block text-sm font-medium text-gray-700 mb-2">التاريخ</label>
89
+ <input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
90
+ </div>
91
+ <div>
92
+ <label class="block text-sm font-medium text-gray-700 mb-2">الوقت</label>
93
+ <div class="grid grid-cols-3 gap-2">
94
+ <button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">9:00 ص</button>
95
+ <button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">9:30 ص</button>
96
+ <button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">10:00 ص</button>
97
+ <button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">10:30 ص</button>
98
+ <button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">11:00 ص</button>
99
+ <button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">11:30 ص</button>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Appointment Type -->
106
+ <div>
107
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">نوع الموعد</h2>
108
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
109
+ <div>
110
+ <label class="block text-sm font-medium text-gray-700 mb-2">نوع الزيارة</label>
111
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
112
+ <option>زيارة أولى</option>
113
+ <option>متابعة</option>
114
+ <option>استشارة</option>
115
+ <option>طوارئ</option>
116
+ </select>
117
+ </div>
118
+ <div>
119
+ <label class="block text-sm font-medium text-gray-700 mb-2">طريقة الدفع</label>
120
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
121
+ <option>نقداً</option>
122
+ <option>بطاقة ائتمان</option>
123
+ <option>تأمين</option>
124
+ </select>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Notes -->
130
+ <div>
131
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">ملاحظات</h2>
132
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" rows="4" placeholder="أي ملاحظات إضافية..."></textarea>
133
+ </div>
134
+
135
+ <!-- Submit Buttons -->
136
+ <div class="flex justify-end space-x-reverse space-x-4">
137
+ <a href="appointments.html" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">إلغاء</a>
138
+ <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">حجز الموعد</button>
139
+ </div>
140
+ </form>
141
+ </div>
142
+ </div>
143
+
144
+ <script>
145
+ feather.replace();
146
+ </script>
147
+ </body>
148
+ </html>
appointments.html ADDED
@@ -0,0 +1,151 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>إدارة المواعيد - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
28
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
29
+ <a href="appointments.html" class="text-blue-600 font-medium">المواعيد</a>
30
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <div class="flex justify-between items-center mb-8">
39
+ <h1 class="text-3xl font-bold text-gray-800">إدارة المواعيد</h1>
40
+ <a href="appointment-scheduling.html" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
41
+ <i data-feather="calendar-plus" class="w-5 h-5"></i>
42
+ <span>حجز موعد جديد</span>
43
+ </a>
44
+ </div>
45
+
46
+ <!-- Calendar View -->
47
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
48
+ <div class="flex justify-between items-center mb-4">
49
+ <h2 class="text-xl font-semibold text-gray-800">ديسمبر 2024</h2>
50
+ <div class="flex space-x-reverse space-x-2">
51
+ <button class="p-2 hover:bg-gray-100 rounded">
52
+ <i data-feather="chevron-right" class="w-5 h-5"></i>
53
+ </button>
54
+ <button class="p-2 hover:bg-gray-100 rounded">
55
+ <i data-feather="chevron-left" class="w-5 h-5"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ <div class="grid grid-cols-7 gap-2 text-center">
60
+ <div class="font-semibold text-gray-600 py-2">الأحد</div>
61
+ <div class="font-semibold text-gray-600 py-2">الإثنين</div>
62
+ <div class="font-semibold text-gray-600 py-2">الثلاثاء</div>
63
+ <div class="font-semibold text-gray-600 py-2">الأربعاء</div>
64
+ <div class="font-semibold text-gray-600 py-2">الخميس</div>
65
+ <div class="font-semibold text-gray-600 py-2">الجمعة</div>
66
+ <div class="font-semibold text-gray-600 py-2">السبت</div>
67
+
68
+ <div class="py-4 text-gray-400">29</div>
69
+ <div class="py-4 text-gray-400">30</div>
70
+ <div class="py-4 hover:bg-gray-100 rounded cursor-pointer">1</div>
71
+ <div class="py-4 hover:bg-gray-100 rounded cursor-pointer">2</div>
72
+ <div class="py-4 hover:bg-gray-100 rounded cursor-pointer relative">
73
+ 3
74
+ <span class="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-blue-600 rounded-full"></span>
75
+ </div>
76
+ <div class="py-4 hover:bg-gray-100 rounded cursor-pointer">4</div>
77
+ <div class="py-4 hover:bg-gray-100 rounded cursor-pointer relative">
78
+ 5
79
+ <span class="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-blue-600 rounded-full"></span>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Today's Appointments -->
85
+ <div class="bg-white rounded-lg shadow-md p-6">
86
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">مواعيد اليوم</h2>
87
+ <div class="space-y-4">
88
+ <div class="flex items-center justify-between p-4 bg-blue-50 rounded-lg border-r-4 border-blue-600">
89
+ <div class="flex items-center space-x-reverse space-x-4">
90
+ <div class="text-center">
91
+ <p class="text-sm text-gray-600">9:00 ص</p>
92
+ <p class="text-xs text-gray-500">30 دقيقة</p>
93
+ </div>
94
+ <div>
95
+ <h4 class="font-semibold text-gray-800">أحمد محمد</h4>
96
+ <p class="text-sm text-gray-600">مع د. أحمد محمد - القلب</p>
97
+ </div>
98
+ </div>
99
+ <div class="flex space-x-reverse space-x-2">
100
+ <button class="p-2 text-green-600 hover:bg-green-100 rounded">
101
+ <i data-feather="check" class="w-5 h-5"></i>
102
+ </button>
103
+ <button class="p-2 text-red-600 hover:bg-red-100 rounded">
104
+ <i data-feather="x" class="w-5 h-5"></i>
105
+ </button>
106
+ <button class="p-2 text-gray-600 hover:bg-gray-100 rounded">
107
+ <i data-feather="clock" class="w-5 h-5"></i>
108
+ </button>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
113
+ <div class="flex items-center space-x-reverse space-x-4">
114
+ <div class="text-center">
115
+ <p class="text-sm text-gray-600">10:00 ص</p>
116
+ <p class="text-xs text-gray-500">30 دقيقة</p>
117
+ </div>
118
+ <div>
119
+ <h4 class="font-semibold text-gray-800">فاطمة أحمد</h4>
120
+ <p class="text-sm text-gray-600">مع د. سارة أحمد - نساء وتوليد</p>
121
+ </div>
122
+ </div>
123
+ <div class="flex space-x-reverse space-x-2">
124
+ <button class="p-2 text-green-600 hover:bg-green-100 rounded">
125
+ <i data-feather="check" class="w-5 h-5"></i>
126
+ </button>
127
+ <button class="p-2 text-red-600 hover:bg-red-100 rounded">
128
+ <i data-feather="x" class="w-5 h-5"></i>
129
+ </button>
130
+ <button class="p-2 text-gray-600 hover:bg-gray-100 rounded">
131
+ <i data-feather="clock" class="w-5 h-5"></i>
132
+ </button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <script>
140
+ feather.replace();
141
+ anime({
142
+ targets: '.bg-white',
143
+ translateY: [20, 0],
144
+ opacity: [0, 1],
145
+ delay: anime.stagger(100),
146
+ duration: 600,
147
+ easing: 'easeOutQuad'
148
+ });
149
+ </script>
150
+ </body>
151
+ </html>
billing.html ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="ar" dir="rtl">
4
+ <head>
departments.html ADDED
@@ -0,0 +1,205 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>الأقسام - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
28
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
29
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
30
+ <a href="departments.html" class="text-blue-600 font-medium">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <h1 class="text-3xl font-bold text-gray-800 mb-8">أقسام المستشفى</h1>
39
+
40
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
41
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
42
+ <div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
43
+ <i data-feather="heart" class="w-12 h-12 text-white"></i>
44
+ <h3 class="text-xl font-semibold text-white mt-2">القلب</h3>
45
+ </div>
46
+ <div class="p-6">
47
+ <p class="text-gray-600 mb-4">تخصص في تشخيص وعلاج أمراض القلب والأوعية الدموية</p>
48
+ <div class="space-y-2 text-sm">
49
+ <div class="flex justify-between">
50
+ <span class="text-gray-600">عدد الأطباء:</span>
51
+ <span class="font-semibold">8</span>
52
+ </div>
53
+ <div class="flex justify-between">
54
+ <span class="text-gray-600">المرضى اليوم:</span>
55
+ <span class="font-semibold">24</span>
56
+ </div>
57
+ <div class="flex justify-between">
58
+ <span class="text-gray-600">الطابق:</span>
59
+ <span class="font-semibold">الثاني</span>
60
+ </div>
61
+ </div>
62
+ <button class="mt-4 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">عرض التفاصيل</button>
63
+ </div>
64
+ </div>
65
+
66
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
67
+ <div class="bg-gradient-to-r from-pink-500 to-pink-600 p-6">
68
+ <i data-feather="users" class="w-12 h-12 text-white"></i>
69
+ <h3 class="text-xl font-semibold text-white mt-2">النساء والتوليد</h3>
70
+ </div>
71
+ <div class="p-6">
72
+ <p class="text-gray-600 mb-4">العناية بصحة المرأة خلال فترة الحمل والولادة</p>
73
+ <div class="space-y-2 text-sm">
74
+ <div class="flex justify-between">
75
+ <span class="text-gray-600">عدد الأطباء:</span>
76
+ <span class="font-semibold">6</span>
77
+ </div>
78
+ <div class="flex justify-between">
79
+ <span class="text-gray-600">المرضى اليوم:</span>
80
+ <span class="font-semibold">18</span>
81
+ </div>
82
+ <div class="flex justify-between">
83
+ <span class="text-gray-600">الطابق:</span>
84
+ <span class="font-semibold">الثالث</span>
85
+ </div>
86
+ </div>
87
+ <button class="mt-4 w-full bg-pink-600 text-white py-2 rounded hover:bg-pink-700">عرض التفاصيل</button>
88
+ </div>
89
+ </div>
90
+
91
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
92
+ <div class="bg-gradient-to-r from-green-500 to-green-600 p-6">
93
+ <i data-feather="user" class="w-12 h-12 text-white"></i>
94
+ <h3 class="text-xl font-semibold text-white mt-2">الأطفال</h3>
95
+ </div>
96
+ <div class="p-6">
97
+ <p class="text-gray-600 mb-4">الرعاية الصحية للأطفال من الولادة حتى سن المراهقة</p>
98
+ <div class="space-y-2 text-sm">
99
+ <div class="flex justify-between">
100
+ <span class="text-gray-600">عدد الأطباء:</span>
101
+ <span class="font-semibold">5</span>
102
+ </div>
103
+ <div class="flex justify-between">
104
+ <span class="text-gray-600">المرضى اليوم:</span>
105
+ <span class="font-semibold">32</span>
106
+ </div>
107
+ <div class="flex justify-between">
108
+ <span class="text-gray-600">الطابق:</span>
109
+ <span class="font-semibold">الأول</span>
110
+ </div>
111
+ </div>
112
+ <button class="mt-4 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">عرض التفاصيل</button>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
117
+ <div class="bg-gradient-to-r from-purple-500 to-purple-600 p-6">
118
+ <i data-feather="scissors" class="w-12 h-12 text-white"></i>
119
+ <h3 class="text-xl font-semibold text-white mt-2">الجراحة</h3>
120
+ </div>
121
+ <div class="p-6">
122
+ <p class="text-gray-600 mb-4">إجراء العمليات الجراحية المختلفة بكفاءة عالية</p>
123
+ <div class="space-y-2 text-sm">
124
+ <div class="flex justify-between">
125
+ <span class="text-gray-600">عدد الأطباء:</span>
126
+ <span class="font-semibold">10</span>
127
+ </div>
128
+ <div class="flex justify-between">
129
+ <span class="text-gray-600">المرضى اليوم:</span>
130
+ <span class="font-semibold">12</span>
131
+ </div>
132
+ <div class="flex justify-between">
133
+ <span class="text-gray-600">الطابق:</span>
134
+ <span class="font-semibold">الرابع</span>
135
+ </div>
136
+ </div>
137
+ <button class="mt-4 w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700">عرض التفاصيل</button>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
142
+ <div class="bg-gradient-to-r from-yellow-500 to-yellow-600 p-6">
143
+ <i data-feather="eye" class="w-12 h-12 text-white"></i>
144
+ <h3 class="text-xl font-semibold text-white mt-2">العيون</h3>
145
+ </div>
146
+ <div class="p-6">
147
+ <p class="text-gray-600 mb-4">تشخيص وعلاج أمراض العيون وجراحاتها</p>
148
+ <div class="space-y-2 text-sm">
149
+ <div class="flex justify-between">
150
+ <span class="text-gray-600">عدد الأطباء:</span>
151
+ <span class="font-semibold">4</span>
152
+ </div>
153
+ <div class="flex justify-between">
154
+ <span class="text-gray-600">المرضى اليوم:</span>
155
+ <span class="font-semibold">15</span>
156
+ </div>
157
+ <div class="flex justify-between">
158
+ <span class="text-gray-600">الطابق:</span>
159
+ <span class="font-semibold">الأول</span>
160
+ </div>
161
+ </div>
162
+ <button class="mt-4 w-full bg-yellow-600 text-white py-2 rounded hover:bg-yellow-700">عرض التفاصيل</button>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
167
+ <div class="bg-gradient-to-r from-red-500 to-red-600 p-6">
168
+ <i data-feather="alert-triangle" class="w-12 h-12 text-white"></i>
169
+ <h3 class="text-xl font-semibold text-white mt-2">الطوارئ</h3>
170
+ </div>
171
+ <div class="p-6">
172
+ <p class="text-gray-600 mb-4">استقبال الحالات الطارئة على مدار الساعة</p>
173
+ <div class="space-y-2 text-sm">
174
+ <div class="flex justify-between">
175
+ <span class="text-gray-600">عدد الأطباء:</span>
176
+ <span class="font-semibold">12</span>
177
+ </div>
178
+ <div class="flex justify-between">
179
+ <span class="text-gray-600">المرضى اليوم:</span>
180
+ <span class="font-semibold">45</span>
181
+ </div>
182
+ <div class="flex justify-between">
183
+ <span class="text-gray-600">الطابق:</span>
184
+ <span class="font-semibold">الأرضي</span>
185
+ </div>
186
+ </div>
187
+ <button class="mt-4 w-full bg-red-600 text-white py-2 rounded hover:bg-red-700">عرض التفاصيل</button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <script>
194
+ feather.replace();
195
+ anime({
196
+ targets: '.bg-white',
197
+ scale: [0.9, 1],
198
+ opacity: [0, 1],
199
+ delay: anime.stagger(100),
200
+ duration: 600,
201
+ easing: 'easeOutQuad'
202
+ });
203
+ </script>
204
+ </body>
205
+ </html>
doctor-details.html ADDED
@@ -0,0 +1,197 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تفاصيل الطبيب - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
28
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
29
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
30
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <!-- Doctor Header -->
39
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
40
+ <div class="flex justify-between items-start">
41
+ <div class="flex items-center space-x-reverse space-x-4">
42
+ <img src="http://static.photos/people/200x200/5" alt="Doctor" class="w-24 h-24 rounded-full">
43
+ <div>
44
+ <h1 class="text-2xl font-bold text-gray-800">د. أحمد محمد</h1>
45
+ <p class="text-gray-600">استشاري أمراض القلب</p>
46
+ <div class="flex items-center space-x-reverse space-x-4 mt-2 text-sm text-gray-600">
47
+ <span>15 سنة خبرة</span>
48
+ <span>الطابق الثاني - غرفة 201</span>
49
+ </div>
50
+ <div class="flex items-center mt-2">
51
+ <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current"></i>
52
+ <span class="text-sm text-gray-600 mr-1">4.8 (124 تقييم)</span>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ <div class="flex space-x-reverse space-x-2">
57
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
58
+ <i data-feather="edit" class="w-4 h-4"></i>
59
+ <span>تعديل</span>
60
+ </button>
61
+ <a href="appointment-scheduling.html" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center space-x-reverse space-x-2">
62
+ <i data-feather="calendar" class="w-4 h-4"></i>
63
+ <span>حجز موعد</span>
64
+ </a>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Doctor Information Tabs -->
70
+ <div class="bg-white rounded-lg shadow-md">
71
+ <div class="border-b">
72
+ <div class="flex space-x-reverse space-x-8 px-6">
73
+ <button class="py-4 border-b-2 border-blue-600 text-blue-600 font-medium">المعلومات الشخصية</button>
74
+ <button class="py-4 text-gray-600 hover:text-blue-600">الجدول</button>
75
+ <button class="py-4 text-gray-600 hover:text-blue-600">المرضى</button>
76
+ <button class="py-4 text-gray-600 hover:text-blue-600">المواعيد</button>
77
+ <button class="py-4 text-gray-600 hover:text-blue-600">الإحصائيات</button>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Personal Information Tab -->
82
+ <div class="p-6">
83
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">المعلومات الشخصية</h2>
84
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
85
+ <div>
86
+ <h3 class="text-lg font-medium text-gray-700 mb-3">معلومات أساسية</h3>
87
+ <div class="space-y-2">
88
+ <div class="flex justify-between">
89
+ <span class="text-gray-600">تاريخ الميلاد:</span>
90
+ <span>10/03/1975</span>
91
+ </div>
92
+ <div class="flex justify-between">
93
+ <span class="text-gray-600">الجنسية:</span>
94
+ <span>سعودي</span>
95
+ </div>
96
+ <div class="flex justify-between">
97
+ <span class="text-gray-600">الجنس:</span>
98
+ <span>ذكر</span>
99
+ </div>
100
+ <div class="flex justify-between">
101
+ <span class="text-gray-600">الحالة الاجتماعية:</span>
102
+ <span>متزوج</span>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div>
107
+ <h3 class="text-lg font-medium text-gray-700 mb-3">معلومات الاتصال</h3>
108
+ <div class="space-y-2">
109
+ <div class="flex justify-between">
110
+ <span class="text-gray-600">الهاتف:</span>
111
+ <span>01234567890</span>
112
+ </div>
113
+ <div class="flex justify-between">
114
+ <span class="text-gray-600">البريد الإلكتروني:</span>
115
+ <span>dr.ahmed@hospital.com</span>
116
+ </div>
117
+ <div class="flex justify-between">
118
+ <span class="text-gray-600">العنوان:</span>
119
+ <span>الرياض - حي الملز</span>
120
+ </div>
121
+ <div class="flex justify-between">
122
+ <span class="text-gray-600">رقم الترخيص:</span>
123
+ <span>123456789</span>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="mt-6">
130
+ <h3 class="text-lg font-medium text-gray-700 mb-3">المعلومات المهنية</h3>
131
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
132
+ <div>
133
+ <h4 class="font-medium text-gray-600 mb-2">التعليم:</h4>
134
+ <ul class="list-disc list-inside text-gray-600">
135
+ <li>بكالوريوس الطب والجراحة - جامعة الملك سعود</li>
136
+ <li>زمالة أمراض القلب - جامعة هارفارد</li>
137
+ </ul>
138
+ </div>
139
+ <div>
140
+ <h4 class="font-medium text-gray-600 mb-2">الخبرات:</h4>
141
+ <ul class="list-disc list-inside text-gray-600">
142
+ <li>استشاري قلب - المستشفى التخصصي (5 سنوات)</li>
143
+ <li>أخصائي قلب - مستشفى الملك فيصل (7 سنوات)</li>
144
+ </ul>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Today's Schedule -->
152
+ <div class="bg-white rounded-lg shadow-md p-6 mt-6">
153
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">جدول اليوم</h2>
154
+ <div class="space-y-4">
155
+ <div class="flex items-center justify-between p-4 bg-blue-50 rounded-lg">
156
+ <div class="flex items-center space-x-reverse space-x-4">
157
+ <div class="text-center">
158
+ <p class="text-sm text-gray-600">9:00 ص</p>
159
+ <p class="text-xs text-gray-500">30 دقيقة</p>
160
+ </div>
161
+ <div>
162
+ <h4 class="font-semibold text-gray-800">أحمد محمد</h4>
163
+ <p class="text-sm text-gray-600">#1001 - متابعة ضغط الدم</p>
164
+ </div>
165
+ </div>
166
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">قادم</span>
167
+ </div>
168
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
169
+ <div class="flex items-center space-x-reverse space-x-4">
170
+ <div class="text-center">
171
+ <p class="text-sm text-gray-600">9:30 ص</p>
172
+ <p class="text-xs text-gray-500">30 دقيقة</p>
173
+ </div>
174
+ <div>
175
+ <h4 class="font-semibold text-gray-800">فاطمة أحمد</h4>
176
+ <p class="text-sm text-gray-600">#1002 - فحص أولي</p>
177
+ </div>
178
+ </div>
179
+ <span class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded">قادم</span>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <script>
186
+ feather.replace();
187
+ anime({
188
+ targets: '.bg-white',
189
+ translateY: [20, 0],
190
+ opacity: [0, 1],
191
+ delay: anime.stagger(100),
192
+ duration: 600,
193
+ easing: 'easeOutQuad'
194
+ });
195
+ </script>
196
+ </body>
197
+ </html>
doctor-registration.html ADDED
@@ -0,0 +1,175 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تسجيل طبيب جديد - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
12
+ body { font-family: 'Tajawal', sans-serif; }
13
+ </style>
14
+ </head>
15
+ <body class="bg-gray-50">
16
+ <!-- Navigation -->
17
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
18
+ <div class="max-w-7xl mx-auto px-4">
19
+ <div class="flex justify-between items-center py-4">
20
+ <div class="flex items-center space-x-reverse space-x-2">
21
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
22
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
23
+ </div>
24
+ <div class="hidden md:flex space-x-reverse space-x-6">
25
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
26
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
27
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
28
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
29
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
30
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </nav>
35
+
36
+ <div class="max-w-4xl mx-auto px-4 py-8">
37
+ <h1 class="text-3xl font-bold text-gray-800 mb-8">تسجيل طبيب جديد</h1>
38
+
39
+ <div class="bg-white rounded-lg shadow-md p-6">
40
+ <form class="space-y-6">
41
+ <!-- Personal Information -->
42
+ <div>
43
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">المعلومات الشخصية</h2>
44
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
45
+ <div>
46
+ <label class="block text-sm font-medium text-gray-700 mb-2">الاسم الكامل</label>
47
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required>
48
+ </div>
49
+ <div>
50
+ <label class="block text-sm font-medium text-gray-700 mb-2">الجنسية</label>
51
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
52
+ </div>
53
+ <div>
54
+ <label class="block text-sm font-medium text-gray-700 mb-2">تاريخ الميلاد</label>
55
+ <input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
56
+ </div>
57
+ <div>
58
+ <label class="block text-sm font-medium text-gray-700 mb-2">الجنس</label>
59
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
60
+ <option>ذكر</option>
61
+ <option>أنثى</option>
62
+ </select>
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Professional Information -->
68
+ <div>
69
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">المعلومات المهنية</h2>
70
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
71
+ <div>
72
+ <label class="block text-sm font-medium text-gray-700 mb-2">التخصص</label>
73
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
74
+ <option>قلب</option>
75
+ <option>نساء وتوليد</option>
76
+ <option>أطفال</option>
77
+ <option>جراحة</option>
78
+ <option>باطنية</option>
79
+ <option>عيون</option>
80
+ <option>أمراض جلدية</option>
81
+ <option>عظام</option>
82
+ </select>
83
+ </div>
84
+ <div>
85
+ <label class="block text-sm font-medium text-gray-700 mb-2">الدرجة العلمية</label>
86
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
87
+ <option>طبيب عام</option>
88
+ <option>أخصائي</option>
89
+ <option>استشاري</option>
90
+ <option>أستاذ استشاري</option>
91
+ </select>
92
+ </div>
93
+ <div>
94
+ <label class="block text-sm font-medium text-gray-700 mb-2">سنوات الخبرة</label>
95
+ <input type="number" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
96
+ </div>
97
+ <div>
98
+ <label class="block text-sm font-medium text-gray-700 mb-2">رقم الترخيص</label>
99
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Contact Information -->
105
+ <div>
106
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">معلومات الاتصال</h2>
107
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
108
+ <div>
109
+ <label class="block text-sm font-medium text-gray-700 mb-2">رقم الهاتف</label>
110
+ <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required>
111
+ </div>
112
+ <div>
113
+ <label class="block text-sm font-medium text-gray-700 mb-2">البريد الإلكتروني</label>
114
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
115
+ </div>
116
+ <div class="md:col-span-2">
117
+ <label class="block text-sm font-medium text-gray-700 mb-2">العنوان</label>
118
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Work Schedule -->
124
+ <div>
125
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">مواعيد العمل</h2>
126
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
127
+ <div>
128
+ <label class="block text-sm font-medium text-gray-700 mb-2">أيام العمل</label>
129
+ <div class="space-y-2">
130
+ <label class="flex items-center">
131
+ <input type="checkbox" class="ml-2" checked>
132
+ <span>الأحد</span>
133
+ </label>
134
+ <label class="flex items-center">
135
+ <input type="checkbox" class="ml-2" checked>
136
+ <span>الإثنين</span>
137
+ </label>
138
+ <label class="flex items-center">
139
+ <input type="checkbox" class="ml-2" checked>
140
+ <span>الثلاثاء</span>
141
+ </label>
142
+ <label class="flex items-center">
143
+ <input type="checkbox" class="ml-2" checked>
144
+ <span>الأربعاء</span>
145
+ </label>
146
+ <label class="flex items-center">
147
+ <input type="checkbox" class="ml-2" checked>
148
+ <span>الخميس</span>
149
+ </label>
150
+ </div>
151
+ </div>
152
+ <div>
153
+ <label class="block text-sm font-medium text-gray-700 mb-2">ساعات العمل</label>
154
+ <div class="grid grid-cols-2 gap-2">
155
+ <input type="time" class="px-3 py-2 border rounded-lg focus:outline-none focus:border-blue-500" value="08:00">
156
+ <input type="time" class="px-3 py-2 border rounded-lg focus:outline-none focus:border-blue-500" value="16:00">
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Submit Buttons -->
163
+ <div class="flex justify-end space-x-reverse space-x-4">
164
+ <a href="doctors.html" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">إلغاء</a>
165
+ <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">حفظ الطبيب</button>
166
+ </div>
167
+ </form>
168
+ </div>
169
+ </div>
170
+
171
+ <script>
172
+ feather.replace();
173
+ </script>
174
+ </body>
175
+ </html>
doctors.html ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>إدارة الأطباء - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
28
+ <a href="doctors.html" class="text-blue-600 font-medium">الأطباء</a>
29
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
30
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <div class="flex justify-between items-center mb-8">
39
+ <h1 class="text-3xl font-bold text-gray-800">إدارة الأطباء</h1>
40
+ <a href="doctor-registration.html" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
41
+ <i data-feather="user-plus" class="w-5 h-5"></i>
42
+ <span>إضافة طبيب جديد</span>
43
+ </a>
44
+ </div>
45
+
46
+ <!-- Doctors Grid -->
47
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
48
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
49
+ <div class="p-6">
50
+ <div class="flex items-center space-x-reverse space-x-4 mb-4">
51
+ <img src="http://static.photos/people/200x200/1" alt="Doctor" class="w-20 h-20 rounded-full">
52
+ <div>
53
+ <h3 class="text-lg font-semibold text-gray-800">د. أحمد محمد</h3>
54
+ <p class="text-sm text-gray-600">استشاري قلب</p>
55
+ <div class="flex items-center mt-1">
56
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
57
+ <span class="text-sm text-gray-600 mr-1">4.8</span>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ <div class="space-y-2 text-sm text-gray-600">
62
+ <div class="flex items-center">
63
+ <i data-feather="briefcase" class="w-4 h-4 ml-2"></i>
64
+ <span>15 سنة خبرة</span>
65
+ </div>
66
+ <div class="flex items-center">
67
+ <i data-feather="map-pin" class="w-4 h-4 ml-2"></i>
68
+ <span>الطابق الثاني - غرفة 201</span>
69
+ </div>
70
+ <div class="flex items-center">
71
+ <i data-feather="calendar" class="w-4 h-4 ml-2"></i>
72
+ <span>الأحد - الخميس</span>
73
+ </div>
74
+ </div>
75
+ <div class="mt-4 flex space-x-reverse space-x-2">
76
+ <a href="doctor-details.html" class="flex-1 bg-blue-600 text-white text-center py-2 rounded hover:bg-blue-700">الملف</a>
77
+ <a href="appointment-scheduling.html" class="flex-1 bg-green-600 text-white text-center py-2 rounded hover:bg-green-700">حجز</a>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
83
+ <div class="p-6">
84
+ <div class="flex items-center space-x-reverse space-x-4 mb-4">
85
+ <img src="http://static.photos/people/200x200/2" alt="Doctor" class="w-20 h-20 rounded-full">
86
+ <div>
87
+ <h3 class="text-lg font-semibold text-gray-800">د. سارة أحمد</h3>
88
+ <p class="text-sm text-gray-600">استشارية نساء وتوليد</p>
89
+ <div class="flex items-center mt-1">
90
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
91
+ <span class="text-sm text-gray-600 mr-1">4.9</span>
92
+ </div>
93
+ </div>
94
+ </div>
95
+ <div class="space-y-2 text-sm text-gray-600">
96
+ <div class="flex items-center">
97
+ <i data-feather="briefcase" class="w-4 h-4 ml-2"></i>
98
+ <span>12 سنة خبرة</span>
99
+ </div>
100
+ <div class="flex items-center">
101
+ <i data-feather="map-pin" class="w-4 h-4 ml-2"></i>
102
+ <span>الطابق الثالث - غرفة 305</span>
103
+ </div>
104
+ <div class="flex items-center">
105
+ <i data-feather="calendar" class="w-4 h-4 ml-2"></i>
106
+ <span>الأحد - السبت</span>
107
+ </div>
108
+ </div>
109
+ <div class="mt-4 flex space-x-reverse space-x-2">
110
+ <a href="doctor-details.html" class="flex-1 bg-blue-600 text-white text-center py-2 rounded hover:bg-blue-700">الملف</a>
111
+ <a href="appointment-scheduling.html" class="flex-1 bg-green-600 text-white text-center py-2 rounded hover:bg-green-700">حجز</a>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
117
+ <div class="p-6">
118
+ <div class="flex items-center space-x-reverse space-x-4 mb-4">
119
+ <img src="http://static.photos/people/200x200/3" alt="Doctor" class="w-20 h-20 rounded-full">
120
+ <div>
121
+ <h3 class="text-lg font-semibold text-gray-800">د. محمود علي</h3>
122
+ <p class="text-sm text-gray-600">استشاري أطفال</p>
123
+ <div class="flex items-center mt-1">
124
+ <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
125
+ <span class="text-sm text-gray-600 mr-1">4.7</span>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <div class="space-y-2 text-sm text-gray-600">
130
+ <div class="flex items-center">
131
+ <i data-feather="briefcase" class="w-4 h-4 ml-2"></i>
132
+ <span>10 سنة خبرة</span>
133
+ </div>
134
+ <div class="flex items-center">
135
+ <i data-feather="map-pin" class="w-4 h-4 ml-2"></i>
136
+ <span>الطابق الأول - غرفة 105</span>
137
+ </div>
138
+ <div class="flex items-center">
139
+ <i data-feather="calendar" class="w-4 h-4 ml-2"></i>
140
+ <span>السبت - الأربعاء</span>
141
+ </div>
142
+ </div>
143
+ <div class="mt-4 flex space-x-reverse space-x-2">
144
+ <a href="doctor-details.html" class="flex-1 bg-blue-600 text-white text-center py-2 rounded hover:bg-blue-700">الملف</a>
145
+ <a href="appointment-scheduling.html" class="flex-1 bg-green-600 text-white text-center py-2 rounded hover:bg-green-700">حجز</a>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <script>
153
+ feather.replace();
154
+ anime({
155
+ targets: '.bg-white',
156
+ scale: [0.9, 1],
157
+ opacity: [0, 1],
158
+ delay: anime.stagger(100),
159
+ duration: 600,
160
+ easing: 'easeOutQuad'
161
+ });
162
+ </script>
163
+ </body>
164
+ </html>
emergency.html ADDED
@@ -0,0 +1,215 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>الطوارئ - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ @keyframes pulse {
15
+ 0%, 100% { opacity: 1; }
16
+ 50% { opacity: 0.5; }
17
+ }
18
+ .pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50">
22
+ <!-- Navigation -->
23
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
24
+ <div class="max-w-7xl mx-auto px-4">
25
+ <div class="flex justify-between items-center py-4">
26
+ <div class="flex items-center space-x-reverse space-x-2">
27
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
28
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
29
+ </div>
30
+ <div class="hidden md:flex space-x-reverse space-x-6">
31
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
32
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
33
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
34
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
35
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
36
+ <a href="emergency.html" class="text-blue-600 font-medium">الطوارئ</a>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ </nav>
41
+
42
+ <div class="max-w-7xl mx-auto px-4 py-8">
43
+ <div class="flex justify-between items-center mb-8">
44
+ <h1 class="text-3xl font-bold text-gray-800">قسم الطوارئ</h1>
45
+ <div class="flex items-center space-x-reverse space-x-4">
46
+ <div class="bg-red-600 text-white px-4 py-2 rounded-lg flex items-center space-x-reverse space-x-2 pulse">
47
+ <i data-feather="alert-triangle" class="w-5 h-5"></i>
48
+ <span>3 حالات حرجة</span>
49
+ </div>
50
+ <button class="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 flex items-center space-x-reverse space-x-2">
51
+ <i data-feather="phone" class="w-5 h-5"></i>
52
+ <span>اتصال طارئ</span>
53
+ </button>
54
+ </div>
55
+ </div>
56
+
57
+ <!-- Emergency Statistics -->
58
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
59
+ <div class="bg-red-50 border border-red-200 rounded-lg p-4">
60
+ <div class="flex items-center justify-between">
61
+ <div>
62
+ <p class="text-sm text-red-600">حالات حرجة</p>
63
+ <p class="text-2xl font-bold text-red-700">3</p>
64
+ </div>
65
+ <i data-feather="alert-circle" class="w-8 h-8 text-red-500"></i>
66
+ </div>
67
+ </div>
68
+ <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
69
+ <div class="flex items-center justify-between">
70
+ <div>
71
+ <p class="text-sm text-yellow-600">حالات متوسطة</p>
72
+ <p class="text-2xl font-bold text-yellow-700">7</p>
73
+ </div>
74
+ <i data-feather="alert-triangle" class="w-8 h-8 text-yellow-500"></i>
75
+ </div>
76
+ </div>
77
+ <div class="bg-green-50 border border-green-200 rounded-lg p-4">
78
+ <div class="flex items-center justify-between">
79
+ <div>
80
+ <p class="text-sm text-green-600">حالات بسيطة</p>
81
+ <p class="text-2xl font-bold text-green-700">12</p>
82
+ </div>
83
+ <i data-feather="check-circle" class="w-8 h-8 text-green-500"></i>
84
+ </div>
85
+ </div>
86
+ <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
87
+ <div class="flex items-center justify-between">
88
+ <div>
89
+ <p class="text-sm text-blue-600">الأطباء المتاحون</p>
90
+ <p class="text-2xl font-bold text-blue-700">5</p>
91
+ </div>
92
+ <i data-feather="user" class="w-8 h-8 text-blue-500"></i>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <!-- Current Emergency Cases -->
98
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
99
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">الحالات الحالية</h2>
100
+ <div class="space-y-4">
101
+ <div class="border-r-4 border-red-600 bg-red-50 p-4 rounded-lg">
102
+ <div class="flex justify-between items-start">
103
+ <div>
104
+ <div class="flex items-center space-x-reverse space-x-2 mb-2">
105
+ <span class="bg-red-600 text-white text-xs px-2 py-1 rounded">حرج</span>
106
+ <h3 class="font-semibold text-gray-800">محمد أحمد - 45 سنة</h3>
107
+ </div>
108
+ <p class="text-sm text-gray-600 mb-2">ألم صدر حاد - ضيق تنفس</p>
109
+ <div class="flex items-center space-x-reverse space-x-4 text-sm text-gray-500">
110
+ <span class="flex items-center">
111
+ <i data-feather="clock" class="w-4 h-4 ml-1"></i>
112
+ منذ 15 دقيقة
113
+ </span>
114
+ <span class="flex items-center">
115
+ <i data-feather="user" class="w-4 h-4 ml-1"></i>
116
+ د. أحمد محمد
117
+ </span>
118
+ <span class="flex items-center">
119
+ <i data-feather="map-pin" class="w-4 h-4 ml-1"></i>
120
+ غرفة الطوارئ 1
121
+ </span>
122
+ </div>
123
+ </div>
124
+ <div class="flex space-x-reverse space-x-2">
125
+ <button class="p-2 bg-blue-600 text-white rounded hover:bg-blue-700">
126
+ <i data-feather="eye" class="w-4 h-4"></i>
127
+ </button>
128
+ <button class="p-2 bg-green-600 text-white rounded hover:bg-green-700">
129
+ <i data-feather="check" class="w-4 h-4"></i>
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="border-r-4 border-yellow-600 bg-yellow-50 p-4 rounded-lg">
136
+ <div class="flex justify-between items-start">
137
+ <div>
138
+ <div class="flex items-center space-x-reverse space-x-2 mb-2">
139
+ <span class="bg-yellow-600 text-white text-xs px-2 py-1 rounded">متوسط</span>
140
+ <h3 class="font-semibold text-gray-800">فاطمة علي - 28 سنة</h3>
141
+ </div>
142
+ <p class="text-sm text-gray-600 mb-2">كسر في الذراع - ألم شديد</p>
143
+ <div class="flex items-center space-x-reverse space-x-4 text-sm text-gray-500">
144
+ <span class="flex items-center">
145
+ <i data-feather="clock" class="w-4 h-4 ml-1"></i>
146
+ منذ 30 دقيقة
147
+ </span>
148
+ <span class="flex items-center">
149
+ <i data-feather="user" class="w-4 h-4 ml-1"></i>
150
+ د. سارة أحمد
151
+ </span>
152
+ <span class="flex items-center">
153
+ <i data-feather="map-pin" class="w-4 h-4 ml-1"></i>
154
+ غرفة الطوارئ 3
155
+ </span>
156
+ </div>
157
+ </div>
158
+ <div class="flex space-x-reverse space-x-2">
159
+ <button class="p-2 bg-blue-600 text-white rounded hover:bg-blue-700">
160
+ <i data-feather="eye" class="w-4 h-4"></i>
161
+ </button>
162
+ <button class="p-2 bg-green-600 text-white rounded hover:bg-green-700">
163
+ <i data-feather="check" class="w-4 h-4"></i>
164
+ </button>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Ambulance Status -->
172
+ <div class="bg-white rounded-lg shadow-md p-6">
173
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">حالة سيارات الإسعاف</h2>
174
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
175
+ <div class="border rounded-lg p-4">
176
+ <div class="flex items-center justify-between mb-2">
177
+ <h3 class="font-semibold">إسعاف 1</h3>
178
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">متاح</span>
179
+ </div>
180
+ <p class="text-sm text-gray-600">السائق: علي محمد</p>
181
+ <p class="text-sm text-gray-600">الموقع: المستشفى</p>
182
+ </div>
183
+ <div class="border rounded-lg p-4">
184
+ <div class="flex items-center justify-between mb-2">
185
+ <h3 class="font-semibold">إسعاف 2</h3>
186
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">في مهمة</span>
187
+ </div>
188
+ <p class="text-sm text-gray-600">السائق: حسن أحمد</p>
189
+ <p class="text-sm text-gray-600">الموقع: شارع الملك فهد</p>
190
+ </div>
191
+ <div class="border rounded-lg p-4">
192
+ <div class="flex items-center justify-between mb-2">
193
+ <h3 class="font-semibold">إسعاف 3</h3>
194
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">العودة</span>
195
+ </div>
196
+ <p class="text-sm text-gray-600">السائق: خالد علي</p>
197
+ <p class="text-sm text-gray-600">الموقع: طريق العودة</p>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <script>
204
+ feather.replace();
205
+ anime({
206
+ targets: '.border-r-4',
207
+ translateX: [20, 0],
208
+ opacity: [0, 1],
209
+ delay: anime.stagger(100),
210
+ duration: 600,
211
+ easing: 'easeOutQuad'
212
+ });
213
+ </script>
214
+ </body>
215
+ </html>
index.html CHANGED
@@ -1,19 +1,152 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نظام إدارة المستشفى - الصفحة الرئيسية</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
14
+ body { font-family: 'Tajawal', sans-serif; }
15
+ </style>
16
+ </head>
17
+ <body class="bg-gray-50">
18
+ <!-- Navigation -->
19
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
20
+ <div class="max-w-7xl mx-auto px-4">
21
+ <div class="flex justify-between items-center py-4">
22
+ <div class="flex items-center space-x-reverse space-x-2">
23
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
24
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
25
+ </div>
26
+ <div class="hidden md:flex space-x-reverse space-x-6">
27
+ <a href="index.html" class="text-blue-600 font-medium">الرئيسية</a>
28
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
29
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
30
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
31
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
32
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
33
+ </div>
34
+ <button class="md:hidden" onclick="toggleMenu()">
35
+ <i data-feather="menu" class="w-6 h-6"></i>
36
+ </button>
37
+ </div>
38
+ </div>
39
+ </nav>
40
+
41
+ <!-- Hero Section -->
42
+ <section class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20">
43
+ <div class="max-w-7xl mx-auto px-4 text-center">
44
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">مرحباً بك في نظام إدارة المستشفى</h1>
45
+ <p class="text-xl mb-8">نظام متكامل لإدارة جميع عمليات المستشفى بكفاءة واحترافية</p>
46
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12">
47
+ <div class="bg-white/10 backdrop-blur rounded-lg p-6">
48
+ <i data-feather="users" class="w-12 h-12 mx-auto mb-3"></i>
49
+ <h3 class="text-2xl font-bold">1,234</h3>
50
+ <p>مريض</p>
51
+ </div>
52
+ <div class="bg-white/10 backdrop-blur rounded-lg p-6">
53
+ <i data-feather="user" class="w-12 h-12 mx-auto mb-3"></i>
54
+ <h3 class="text-2xl font-bold">89</h3>
55
+ <p>طبيب</p>
56
+ </div>
57
+ <div class="bg-white/10 backdrop-blur rounded-lg p-6">
58
+ <i data-feather="calendar" class="w-12 h-12 mx-auto mb-3"></i>
59
+ <h3 class="text-2xl font-bold">456</h3>
60
+ <p>موعد اليوم</p>
61
+ </div>
62
+ <div class="bg-white/10 backdrop-blur rounded-lg p-6">
63
+ <i data-feather="home" class="w-12 h-12 mx-auto mb-3"></i>
64
+ <h3 class="text-2xl font-bold">12</h3>
65
+ <p>قسم</p>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </section>
70
+
71
+ <!-- Quick Actions -->
72
+ <section class="py-12">
73
+ <div class="max-w-7xl mx-auto px-4">
74
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">الوصول السريع</h2>
75
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
76
+ <a href="patient-registration.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow">
77
+ <i data-feather="user-plus" class="w-10 h-10 text-green-600 mb-3"></i>
78
+ <h3 class="font-semibold text-gray-800">تسجيل مريض جديد</h3>
79
+ </a>
80
+ <a href="appointment-scheduling.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow">
81
+ <i data-feather="calendar-plus" class="w-10 h-10 text-blue-600 mb-3"></i>
82
+ <h3 class="font-semibold text-gray-800">حجز موعد</h3>
83
+ </a>
84
+ <a href="emergency.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow">
85
+ <i data-feather="alert-triangle" class="w-10 h-10 text-red-600 mb-3"></i>
86
+ <h3 class="font-semibold text-gray-800">حالات الطوارئ</h3>
87
+ </a>
88
+ <a href="laboratory.html" class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition-shadow">
89
+ <i data-feather="flask" class="w-10 h-10 text-purple-600 mb-3"></i>
90
+ <h3 class="font-semibold text-gray-800">المختبر</h3>
91
+ </a>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <!-- Recent Activities -->
97
+ <section class="py-12 bg-white">
98
+ <div class="max-w-7xl mx-auto px-4">
99
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">الأنشطة الحديثة</h2>
100
+ <div class="space-y-4">
101
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
102
+ <div class="flex items-center space-x-reverse space-x-3">
103
+ <i data-feather="user-check" class="w-5 h-5 text-green-600"></i>
104
+ <span>تم تسجيل مريض جديد: أحمد محمد</span>
105
+ </div>
106
+ <span class="text-sm text-gray-500">منذ 5 دقائق</span>
107
+ </div>
108
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
109
+ <div class="flex items-center space-x-reverse space-x-3">
110
+ <i data-feather="calendar" class="w-5 h-5 text-blue-600"></i>
111
+ <span>موعد جديد مع د. سارة أحمد</span>
112
+ </div>
113
+ <span class="text-sm text-gray-500">منذ 15 دقيقة</span>
114
+ </div>
115
+ <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
116
+ <div class="flex items-center space-x-reverse space-x-3">
117
+ <i data-feather="file-text" class="w-5 h-5 text-purple-600"></i>
118
+ <span>تم تحديث نتائج المختبر</span>
119
+ </div>
120
+ <span class="text-sm text-gray-500">منذ 30 دقيقة</span>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </section>
125
+
126
+ <script>
127
+ feather.replace();
128
+
129
+ function toggleMenu() {
130
+ const nav = document.querySelector('nav .hidden');
131
+ nav.classList.toggle('hidden');
132
+ }
133
+
134
+ anime({
135
+ targets: '.bg-gradient-to-r > div > h1',
136
+ translateY: [-50, 0],
137
+ opacity: [0, 1],
138
+ duration: 1000,
139
+ easing: 'easeOutQuad'
140
+ });
141
+
142
+ anime({
143
+ targets: '.grid > div',
144
+ scale: [0.8, 1],
145
+ opacity: [0, 1],
146
+ delay: anime.stagger(100),
147
+ duration: 800,
148
+ easing: 'easeOutQuad'
149
+ });
150
+ </script>
151
+ </body>
152
+ </html>
laboratory.html ADDED
@@ -0,0 +1,160 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>المختبر - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
28
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
29
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
30
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <div class="flex justify-between items-center mb-8">
39
+ <h1 class="text-3xl font-bold text-gray-800">المختبر</h1>
40
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
41
+ <i data-feather="plus" class="w-5 h-5"></i>
42
+ <span>طلب تحليل جديد</span>
43
+ </button>
44
+ </div>
45
+
46
+ <!-- Statistics -->
47
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
48
+ <div class="bg-white rounded-lg shadow-md p-6">
49
+ <div class="flex items-center justify-between">
50
+ <div>
51
+ <p class="text-sm text-gray-600">التحاليل اليوم</p>
52
+ <p class="text-2xl font-bold text-gray-800">45</p>
53
+ </div>
54
+ <i data-feather="flask" class="w-8 h-8 text-blue-500"></i>
55
+ </div>
56
+ </div>
57
+ <div class="bg-white rounded-lg shadow-md p-6">
58
+ <div class="flex items-center justify-between">
59
+ <div>
60
+ <p class="text-sm text-gray-600">قيد الانتظار</p>
61
+ <p class="text-2xl font-bold text-yellow-600">12</p>
62
+ </div>
63
+ <i data-feather="clock" class="w-8 h-8 text-yellow-500"></i>
64
+ </div>
65
+ </div>
66
+ <div class="bg-white rounded-lg shadow-md p-6">
67
+ <div class="flex items-center justify-between">
68
+ <div>
69
+ <p class="text-sm text-gray-600">مكتملة</p>
70
+ <p class="text-2xl font-bold text-green-600">28</p>
71
+ </div>
72
+ <i data-feather="check-circle" class="w-8 h-8 text-green-500"></i>
73
+ </div>
74
+ </div>
75
+ <div class="bg-white rounded-lg shadow-md p-6">
76
+ <div class="flex items-center justify-between">
77
+ <div>
78
+ <p class="text-sm text-gray-600">طارئة</p>
79
+ <p class="text-2xl font-bold text-red-600">5</p>
80
+ </div>
81
+ <i data-feather="alert-triangle" class="w-8 h-8 text-red-500"></i>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Lab Tests Table -->
87
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
88
+ <div class="p-6 border-b">
89
+ <h2 class="text-xl font-semibold text-gray-800">التحاليل الحالية</h2>
90
+ </div>
91
+ <table class="w-full">
92
+ <thead class="bg-gray-50">
93
+ <tr>
94
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th>
95
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المريض</th>
96
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع التحليل</th>
97
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الطبيب</th>
98
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
99
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
100
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
101
+ </tr>
102
+ </thead>
103
+ <tbody class="bg-white divide-y divide-gray-200">
104
+ <tr class="hover:bg-gray-50">
105
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#L2024001</td>
106
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">أحمد محمد</td>
107
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">CBC</td>
108
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. أحمد محمد</td>
109
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
110
+ <td class="px-6 py-4 whitespace-nowrap">
111
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">قيد التنفيذ</span>
112
+ </td>
113
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
114
+ <button class="text-blue-600 hover:text-blue-900">عرض</button>
115
+ </td>
116
+ </tr>
117
+ <tr class="hover:bg-gray-50">
118
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#L2024002</td>
119
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">فاطمة أحمد</td>
120
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">كيمياء حيوية</td>
121
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. سارة أحمد</td>
122
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
123
+ <td class="px-6 py-4 whitespace-nowrap">
124
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مكتمل</span>
125
+ </td>
126
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
127
+ <button class="text-blue-600 hover:text-blue-900">عرض</button>
128
+ </td>
129
+ </tr>
130
+ <tr class="hover:bg-gray-50">
131
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#L2024003</td>
132
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">محمود علي</td>
133
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">هرمونات</td>
134
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. محمود علي</td>
135
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
136
+ <td class="px-6 py-4 whitespace-nowrap">
137
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">طارئ</span>
138
+ </td>
139
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
140
+ <button class="text-blue-600 hover:text-blue-900">عرض</button>
141
+ </td>
142
+ </tr>
143
+ </tbody>
144
+ </table>
145
+ </div>
146
+ </div>
147
+
148
+ <script>
149
+ feather.replace();
150
+ anime({
151
+ targets: 'tr',
152
+ translateX: [-20, 0],
153
+ opacity: [0, 1],
154
+ delay: anime.stagger(50),
155
+ duration: 600,
156
+ easing: 'easeOutQuad'
157
+ });
158
+ </script>
159
+ </body>
160
+ </html>
patient-details.html ADDED
@@ -0,0 +1,188 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تفاصيل المريض - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
28
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
29
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
30
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <!-- Patient Header -->
39
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
40
+ <div class="flex justify-between items-start">
41
+ <div class="flex items-center space-x-reverse space-x-4">
42
+ <img src="http://static.photos/people/200x200/10" alt="Patient" class="w-24 h-24 rounded-full">
43
+ <div>
44
+ <h1 class="text-2xl font-bold text-gray-800">أحمد محمد علي</h1>
45
+ <p class="text-gray-600">رقم الملف: #1001</p>
46
+ <div class="flex items-center space-x-reverse space-x-4 mt-2 text-sm text-gray-600">
47
+ <span>45 سنة</span>
48
+ <span>ذكر</span>
49
+ <span>O+</span>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ <div class="flex space-x-reverse space-x-2">
54
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
55
+ <i data-feather="edit" class="w-4 h-4"></i>
56
+ <span>تعديل</span>
57
+ </button>
58
+ <a href="appointment-scheduling.html" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 flex items-center space-x-reverse space-x-2">
59
+ <i data-feather="calendar-plus" class="w-4 h-4"></i>
60
+ <span>حجز موعد</span>
61
+ </a>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- Patient Information Tabs -->
67
+ <div class="bg-white rounded-lg shadow-md">
68
+ <div class="border-b">
69
+ <div class="flex space-x-reverse space-x-8 px-6">
70
+ <button class="py-4 border-b-2 border-blue-600 text-blue-600 font-medium">المعلومات الشخصية</button>
71
+ <button class="py-4 text-gray-600 hover:text-blue-600">التاريخ الطبي</button>
72
+ <button class="py-4 text-gray-600 hover:text-blue-600">المواعيد</button>
73
+ <button class="py-4 text-gray-600 hover:text-blue-600">الفواتير</button>
74
+ <button class="py-4 text-gray-600 hover:text-blue-600">الملفات</button>
75
+ </div>
76
+ </div>
77
+
78
+ <!-- Personal Information Tab -->
79
+ <div class="p-6">
80
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">المعلومات الشخصية</h2>
81
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
82
+ <div>
83
+ <h3 class="text-lg font-medium text-gray-700 mb-3">معلومات أساسية</h3>
84
+ <div class="space-y-2">
85
+ <div class="flex justify-between">
86
+ <span class="text-gray-600">تاريخ الميلاد:</span>
87
+ <span>15/05/1979</span>
88
+ </div>
89
+ <div class="flex justify-between">
90
+ <span class="text-gray-600">الجنسية:</span>
91
+ <span>سعودي</span>
92
+ </div>
93
+ <div class="flex justify-between">
94
+ <span class="text-gray-600">الحالة الاجتماعية:</span>
95
+ <span>متزوج</span>
96
+ </div>
97
+ <div class="flex justify-between">
98
+ <span class="text-gray-600">فصيلة الدم:</span>
99
+ <span>O+</span>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ <div>
104
+ <h3 class="text-lg font-medium text-gray-700 mb-3">معلومات الاتصال</h3>
105
+ <div class="space-y-2">
106
+ <div class="flex justify-between">
107
+ <span class="text-gray-600">الهاتف:</span>
108
+ <span>01234567890</span>
109
+ </div>
110
+ <div class="flex justify-between">
111
+ <span class="text-gray-600">البريد الإلكتروني:</span>
112
+ <span>ahmed@email.com</span>
113
+ </div>
114
+ <div class="flex justify-between">
115
+ <span class="text-gray-600">العنوان:</span>
116
+ <span>الرياض - حي النخيل</span>
117
+ </div>
118
+ <div class="flex justify-between">
119
+ <span class="text-gray-600">العمل:</span>
120
+ <span>مهندس</span>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="mt-6">
127
+ <h3 class="text-lg font-medium text-gray-700 mb-3">المعلومات الطبية</h3>
128
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
129
+ <div>
130
+ <h4 class="font-medium text-gray-600 mb-2">أمراض مزمنة:</h4>
131
+ <ul class="list-disc list-inside text-gray-600">
132
+ <li>ضغط الدم المرتفع</li>
133
+ <li>داء السكري من النوع 2</li>
134
+ </ul>
135
+ </div>
136
+ <div>
137
+ <h4 class="font-medium text-gray-600 mb-2">حساسية دوائية:</h4>
138
+ <ul class="list-disc list-inside text-gray-600">
139
+ <li>البنسلين</li>
140
+ <li>الأسبرين</li>
141
+ </ul>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Recent Visits -->
149
+ <div class="bg-white rounded-lg shadow-md p-6 mt-6">
150
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">الزيارات الأخيرة</h2>
151
+ <div class="space-y-4">
152
+ <div class="border rounded-lg p-4">
153
+ <div class="flex justify-between items-start">
154
+ <div>
155
+ <h4 class="font-semibold text-gray-800">زيارة لد. أحمد محمد</h4>
156
+ <p class="text-sm text-gray-600">قسم القلب - 20/11/2024</p>
157
+ <p class="text-sm text-gray-600 mt-2">فحص دوري - ضغط الدم مستقر</p>
158
+ </div>
159
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">مكتملة</span>
160
+ </div>
161
+ </div>
162
+ <div class="border rounded-lg p-4">
163
+ <div class="flex justify-between items-start">
164
+ <div>
165
+ <h4 class="font-semibold text-gray-800">زيارة لد. سارة أحمد</h4>
166
+ <p class="text-sm text-gray-600">قسم الباطنية - 15/11/2024</p>
167
+ <p class="text-sm text-gray-600 mt-2">متابعة داء السكري</p>
168
+ </div>
169
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">مكتملة</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <script>
177
+ feather.replace();
178
+ anime({
179
+ targets: '.bg-white',
180
+ translateY: [20, 0],
181
+ opacity: [0, 1],
182
+ delay: anime.stagger(100),
183
+ duration: 600,
184
+ easing: 'easeOutQuad'
185
+ });
186
+ </script>
187
+ </body>
188
+ </html>
patient-registration.html ADDED
@@ -0,0 +1,150 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تسجيل مريض جديد - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
12
+ body { font-family: 'Tajawal', sans-serif; }
13
+ </style>
14
+ </head>
15
+ <body class="bg-gray-50">
16
+ <!-- Navigation -->
17
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
18
+ <div class="max-w-7xl mx-auto px-4">
19
+ <div class="flex justify-between items-center py-4">
20
+ <div class="flex items-center space-x-reverse space-x-2">
21
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
22
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
23
+ </div>
24
+ <div class="hidden md:flex space-x-reverse space-x-6">
25
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
26
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
27
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
28
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
29
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
30
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </nav>
35
+
36
+ <div class="max-w-4xl mx-auto px-4 py-8">
37
+ <h1 class="text-3xl font-bold text-gray-800 mb-8">تسجيل مريض جديد</h1>
38
+
39
+ <div class="bg-white rounded-lg shadow-md p-6">
40
+ <form class="space-y-6">
41
+ <!-- Personal Information -->
42
+ <div>
43
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">المعلومات الشخصية</h2>
44
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
45
+ <div>
46
+ <label class="block text-sm font-medium text-gray-700 mb-2">الاسم الكامل</label>
47
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required>
48
+ </div>
49
+ <div>
50
+ <label class="block text-sm font-medium text-gray-700 mb-2">تاريخ الميلاد</label>
51
+ <input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required>
52
+ </div>
53
+ <div>
54
+ <label class="block text-sm font-medium text-gray-700 mb-2">الجنس</label>
55
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
56
+ <option>ذكر</option>
57
+ <option>أنثى</option>
58
+ </select>
59
+ </div>
60
+ <div>
61
+ <label class="block text-sm font-medium text-gray-700 mb-2">الجنسية</label>
62
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
63
+ </div>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Contact Information -->
68
+ <div>
69
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">معلومات الاتصال</h2>
70
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
71
+ <div>
72
+ <label class="block text-sm font-medium text-gray-700 mb-2">رقم الهاتف</label>
73
+ <input type="tel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" required>
74
+ </div>
75
+ <div>
76
+ <label class="block text-sm font-medium text-gray-700 mb-2">البريد الإلكتروني</label>
77
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
78
+ </div>
79
+ <div class="md:col-span-2">
80
+ <label class="block text-sm font-medium text-gray-700 mb-2">العنوان</label>
81
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Medical Information -->
87
+ <div>
88
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">المعلومات الطبية</h2>
89
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
90
+ <div>
91
+ <label class="block text-sm font-medium text-gray-700 mb-2">فصيلة الدم</label>
92
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
93
+ <option>A+</option>
94
+ <option>A-</option>
95
+ <option>B+</option>
96
+ <option>B-</option>
97
+ <option>O+</option>
98
+ <option>O-</option>
99
+ <option>AB+</option>
100
+ <option>AB-</option>
101
+ </select>
102
+ </div>
103
+ <div>
104
+ <label class="block text-sm font-medium text-gray-700 mb-2">الحالة الصحية العامة</label>
105
+ <select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
106
+ <option>جيدة</option>
107
+ <option>متوسطة</option>
108
+ <option>سيئة</option>
109
+ </select>
110
+ </div>
111
+ <div class="md:col-span-2">
112
+ <label class="block text-sm font-medium text-gray-700 mb-2">أمراض مزمنة</label>
113
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" rows="3"></textarea>
114
+ </div>
115
+ <div class="md:col-span-2">
116
+ <label class="block text-sm font-medium text-gray-700 mb-2">حساسية دوائية</label>
117
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" rows="3"></textarea>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Insurance Information -->
123
+ <div>
124
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">معلومات التأمين</h2>
125
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
126
+ <div>
127
+ <label class="block text-sm font-medium text-gray-700 mb-2">شركة التأمين</label>
128
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
129
+ </div>
130
+ <div>
131
+ <label class="block text-sm font-medium text-gray-700 mb-2">رقم البوليصة</label>
132
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Submit Buttons -->
138
+ <div class="flex justify-end space-x-reverse space-x-4">
139
+ <a href="patients.html" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">إلغاء</a>
140
+ <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">حفظ المريض</button>
141
+ </div>
142
+ </form>
143
+ </div>
144
+ </div>
145
+
146
+ <script>
147
+ feather.replace();
148
+ </script>
149
+ </body>
150
+ </html>
patients.html ADDED
@@ -0,0 +1,143 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>إدارة المرضى - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-blue-600 font-medium">المرضى</a>
28
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
29
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
30
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <div class="flex justify-between items-center mb-8">
39
+ <h1 class="text-3xl font-bold text-gray-800">إدارة المرضى</h1>
40
+ <a href="patient-registration.html" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
41
+ <i data-feather="user-plus" class="w-5 h-5"></i>
42
+ <span>إضافة مريض جديد</span>
43
+ </a>
44
+ </div>
45
+
46
+ <!-- Search and Filter -->
47
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
48
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
49
+ <div class="relative">
50
+ <i data-feather="search" class="absolute right-3 top-3 w-5 h-5 text-gray-400"></i>
51
+ <input type="text" placeholder="البحث عن مريض..." class="w-full pr-10 pl-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
52
+ </div>
53
+ <select class="px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
54
+ <option>جميع الأقسام</option>
55
+ <option>الباطنية</option>
56
+ <option>الجراحة</option>
57
+ <option>الأطفال</option>
58
+ <option>النساء والتوليد</option>
59
+ </select>
60
+ <select class="px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
61
+ <option>جميع الحالات</option>
62
+ <option>داخلي</option>
63
+ <option>خارجي</option>
64
+ <option>طوارئ</option>
65
+ </select>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Patients Table -->
70
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
71
+ <table class="w-full">
72
+ <thead class="bg-gray-50">
73
+ <tr>
74
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الملف</th>
75
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الاسم</th>
76
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">العمر</th>
77
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الهاتف</th>
78
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">القسم</th>
79
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
80
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
81
+ </tr>
82
+ </thead>
83
+ <tbody class="bg-white divide-y divide-gray-200">
84
+ <tr class="hover:bg-gray-50">
85
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1001</td>
86
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">أحمد محمد علي</td>
87
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">45</td>
88
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">01234567890</td>
89
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">الباطنية</td>
90
+ <td class="px-6 py-4 whitespace-nowrap">
91
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">داخلي</span>
92
+ </td>
93
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
94
+ <a href="patient-details.html" class="text-blue-600 hover:text-blue-900 ml-3">عرض</a>
95
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 ml-3">تعديل</a>
96
+ <a href="#" class="text-red-600 hover:text-red-900">حذف</a>
97
+ </td>
98
+ </tr>
99
+ <tr class="hover:bg-gray-50">
100
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#1002</td>
101
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">فاطمة أحمد حسن</td>
102
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">32</td>
103
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">01234567891</td>
104
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">النساء والتوليد</td>
105
+ <td class="px-6 py-4 whitespace-nowrap">
106
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">خارجي</span>
107
+ </td>
108
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
109
+ <a href="patient-details.html" class="text-blue-600 hover:text-blue-900 ml-3">عرض</a>
110
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 ml-3">تعديل</a>
111
+ <a href="#" class="text-red-600 hover:text-red-900">حذف</a>
112
+ </td>
113
+ </tr>
114
+ </tbody>
115
+ </table>
116
+ </div>
117
+
118
+ <!-- Pagination -->
119
+ <div class="flex justify-between items-center mt-6">
120
+ <span class="text-sm text-gray-700">عرض 1-10 من 1234 مريض</span>
121
+ <div class="flex space-x-reverse space-x-2">
122
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">السابق</button>
123
+ <button class="px-3 py-1 bg-blue-600 text-white rounded">1</button>
124
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">2</button>
125
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">3</button>
126
+ <button class="px-3 py-1 border rounded hover:bg-gray-100">التالي</button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <script>
132
+ feather.replace();
133
+ anime({
134
+ targets: 'tr',
135
+ translateX: [-20, 0],
136
+ opacity: [0, 1],
137
+ delay: anime.stagger(50),
138
+ duration: 600,
139
+ easing: 'easeOutQuad'
140
+ });
141
+ </script>
142
+ </body>
143
+ </html>
pharmacy.html ADDED
@@ -0,0 +1,175 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>الصيدلية - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
28
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
29
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
30
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <div class="flex justify-between items-center mb-8">
39
+ <h1 class="text-3xl font-bold text-gray-800">الصيدلية</h1>
40
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
41
+ <i data-feather="plus" class="w-5 h-5"></i>
42
+ <span>وصفة جديدة</span>
43
+ </button>
44
+ </div>
45
+
46
+ <!-- Statistics -->
47
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
48
+ <div class="bg-white rounded-lg shadow-md p-6">
49
+ <div class="flex items-center justify-between">
50
+ <div>
51
+ <p class="text-sm text-gray-600">الوصفات اليوم</p>
52
+ <p class="text-2xl font-bold text-gray-800">62</p>
53
+ </div>
54
+ <i data-feather="file-text" class="w-8 h-8 text-blue-500"></i>
55
+ </div>
56
+ </div>
57
+ <div class="bg-white rounded-lg shadow-md p-6">
58
+ <div class="flex items-center justify-between">
59
+ <div>
60
+ <p class="text-sm text-gray-600">قيد الانتظار</p>
61
+ <p class="text-2xl font-bold text-yellow-600">8</p>
62
+ </div>
63
+ <i data-feather="clock" class="w-8 h-8 text-yellow-500"></i>
64
+ </div>
65
+ </div>
66
+ <div class="bg-white rounded-lg shadow-md p-6">
67
+ <div class="flex items-center justify-between">
68
+ <div>
69
+ <p class="text-sm text-gray-600">مكتملة</p>
70
+ <p class="text-2xl font-bold text-green-600">52</p>
71
+ </div>
72
+ <i data-feather="check-circle" class="w-8 h-8 text-green-500"></i>
73
+ </div>
74
+ </div>
75
+ <div class="bg-white rounded-lg shadow-md p-6">
76
+ <div class="flex items-center justify-between">
77
+ <div>
78
+ <p class="text-sm text-gray-600">الأدوية المنتهية</p>
79
+ <p class="text-2xl font-bold text-red-600">3</p>
80
+ </div>
81
+ <i data-feather="alert-triangle" class="w-8 h-8 text-red-500"></i>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Prescriptions Table -->
87
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
88
+ <div class="p-6 border-b">
89
+ <h2 class="text-xl font-semibold text-gray-800">الوصفات الطبية</h2>
90
+ </div>
91
+ <table class="w-full">
92
+ <thead class="bg-gray-50">
93
+ <tr>
94
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الوصفة</th>
95
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المريض</th>
96
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الطبيب</th>
97
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
98
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
99
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
100
+ </tr>
101
+ </thead>
102
+ <tbody class="bg-white divide-y divide-gray-200">
103
+ <tr class="hover:bg-gray-50">
104
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#P2024001</td>
105
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">أحمد محمد</td>
106
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. أحمد محمد</td>
107
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
108
+ <td class="px-6 py-4 whitespace-nowrap">
109
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">قيد التحضير</span>
110
+ </td>
111
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
112
+ <button class="text-blue-600 hover:text-blue-900">عرض</button>
113
+ </td>
114
+ </tr>
115
+ <tr class="hover:bg-gray-50">
116
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#P2024002</td>
117
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">فاطمة أحمد</td>
118
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. سارة أحمد</td>
119
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
120
+ <td class="px-6 py-4 whitespace-nowrap">
121
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">جاهزة</span>
122
+ </td>
123
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
124
+ <button class="text-blue-600 hover:text-blue-900">عرض</button>
125
+ </td>
126
+ </tr>
127
+ </tbody>
128
+ </table>
129
+ </div>
130
+
131
+ <!-- Inventory -->
132
+ <div class="bg-white rounded-lg shadow-md p-6">
133
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">المخزون</h2>
134
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
135
+ <div class="border rounded-lg p-4">
136
+ <div class="flex justify-between items-start mb-2">
137
+ <h3 class="font-semibold">باراسيتامول</h3>
138
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">متوفر</span>
139
+ </div>
140
+ <p class="text-sm text-gray-600">الكمية: 500 علبة</p>
141
+ <p class="text-sm text-gray-600">تاريخ الانتهاء: 2025-12</p>
142
+ </div>
143
+ <div class="border rounded-lg p-4">
144
+ <div class="flex justify-between items-start mb-2">
145
+ <h3 class="font-semibold">أموكسيسيلين</h3>
146
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">منخفض</span>
147
+ </div>
148
+ <p class="text-sm text-gray-600">الكمية: 50 علبة</p>
149
+ <p class="text-sm text-gray-600">تاريخ الانتهاء: 2024-06</p>
150
+ </div>
151
+ <div class="border rounded-lg p-4">
152
+ <div class="flex justify-between items-start mb-2">
153
+ <h3 class="font-semibold">إيبوبروفين</h3>
154
+ <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">نافد</span>
155
+ </div>
156
+ <p class="text-sm text-gray-600">الكمية: 0 علبة</p>
157
+ <p class="text-sm text-gray-600">تاريخ الانتهاء: -</p>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+
163
+ <script>
164
+ feather.replace();
165
+ anime({
166
+ targets: 'tr',
167
+ translateX: [-20, 0],
168
+ opacity: [0, 1],
169
+ delay: anime.stagger(50),
170
+ duration: 600,
171
+ easing: 'easeOutQuad'
172
+ });
173
+ </script>
174
+ </body>
175
+ </html>
radiology.html ADDED
@@ -0,0 +1,178 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>الأشعة - نظام إدارة المستشفى</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
13
+ body { font-family: 'Tajawal', sans-serif; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-50">
17
+ <!-- Navigation -->
18
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
19
+ <div class="max-w-7xl mx-auto px-4">
20
+ <div class="flex justify-between items-center py-4">
21
+ <div class="flex items-center space-x-reverse space-x-2">
22
+ <i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
23
+ <span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
24
+ </div>
25
+ <div class="hidden md:flex space-x-reverse space-x-6">
26
+ <a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
27
+ <a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
28
+ <a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
29
+ <a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
30
+ <a href="departments.html" class="text-gray-600 hover:text-blue-600">الأقسام</a>
31
+ <a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </nav>
36
+
37
+ <div class="max-w-7xl mx-auto px-4 py-8">
38
+ <div class="flex justify-between items-center mb-8">
39
+ <h1 class="text-3xl font-bold text-gray-800">قسم الأشعة</h1>
40
+ <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 flex items-center space-x-reverse space-x-2">
41
+ <i data-feather="plus" class="w-5 h-5"></i>
42
+ <span>طلب أشعة جديد</span>
43
+ </button>
44
+ </div>
45
+
46
+ <!-- Statistics -->
47
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
48
+ <div class="bg-white rounded-lg shadow-md p-6">
49
+ <div class="flex items-center justify-between">
50
+ <div>
51
+ <p class="text-sm text-gray-600">الأشعة اليوم</p>
52
+ <p class="text-2xl font-bold text-gray-800">28</p>
53
+ </div>
54
+ <i data-feather="image" class="w-8 h-8 text-blue-500"></i>
55
+ </div>
56
+ </div>
57
+ <div class="bg-white rounded-lg shadow-md p-6">
58
+ <div class="flex items-center justify-between">
59
+ <div>
60
+ <p class="text-sm text-gray-600">قيد الانتظار</p>
61
+ <p class="text-2xl font-bold text-yellow-600">5</p>
62
+ </div>
63
+ <i data-feather="clock" class="w-8 h-8 text-yellow-500"></i>
64
+ </div>
65
+ </div>
66
+ <div class="bg-white rounded-lg shadow-md p-6">
67
+ <div class="flex items-center justify-between">
68
+ <div>
69
+ <p class="text-sm text-gray-600">مكتملة</p>
70
+ <p class="text-2xl font-bold text-green-600">20</p>
71
+ </div>
72
+ <i data-feather="check-circle" class="w-8 h-8 text-green-500"></i>
73
+ </div>
74
+ </div>
75
+ <div class="bg-white rounded-lg shadow-md p-6">
76
+ <div class="flex items-center justify-between">
77
+ <div>
78
+ <p class="text-sm text-gray-600">طارئة</p>
79
+ <p class="text-2xl font-bold text-red-600">3</p>
80
+ </div>
81
+ <i data-feather="alert-triangle" class="w-8 h-8 text-red-500"></i>
82
+ </div>
83
+ </div>
84
+ </div>
85
+
86
+ <!-- Radiology Requests -->
87
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
88
+ <div class="p-6 border-b">
89
+ <h2 class="text-xl font-semibold text-gray-800">طلبات الأشعة</h2>
90
+ </div>
91
+ <table class="w-full">
92
+ <thead class="bg-gray-50">
93
+ <tr>
94
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">رقم الطلب</th>
95
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">المريض</th>
96
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع الأشعة</th>
97
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الطبيب</th>
98
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">التاريخ</th>
99
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الحالة</th>
100
+ <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
101
+ </tr>
102
+ </thead>
103
+ <tbody class="bg-white divide-y divide-gray-200">
104
+ <tr class="hover:bg-gray-50">
105
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#R2024001</td>
106
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">أحمد محمد</td>
107
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">أشعة على الصدر</td>
108
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. أحمد محمد</td>
109
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
110
+ <td class="px-6 py-4 whitespace-nowrap">
111
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">مكتملة</span>
112
+ </td>
113
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
114
+ <button class="text-blue-600 hover:text-blue-900">عرض</button>
115
+ </td>
116
+ </tr>
117
+ <tr class="hover:bg-gray-50">
118
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#R2024002</td>
119
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">فاطمة أحمد</td>
120
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">رنين مغناطيسي</td>
121
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">د. سارة أحمد</td>
122
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20/11/2024</td>
123
+ <td class="px-6 py-4 whitespace-nowrap">
124
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">قيد التنفيذ</span>
125
+ </td>
126
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
127
+ <button class="text-blue-600 hover:text-blue-900">عرض</button>
128
+ </td>
129
+ </tr>
130
+ </tbody>
131
+ </table>
132
+ </div>
133
+
134
+ <!-- Equipment Status -->
135
+ <div class="bg-white rounded-lg shadow-md p-6">
136
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">حالة الأجهزة</h2>
137
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
138
+ <div class="border rounded-lg p-4">
139
+ <div class="flex justify-between items-start mb-2">
140
+ <h3 class="font-semibold">جهاز الأشعة السينية 1</h3>
141
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">يعمل</span>
142
+ </div>
143
+ <p class="text-sm text-gray-600">آخر صيانة: 2024-10-15</p>
144
+ <p class="text-sm text-gray-600">الصيانة القادمة: 2025-01-15</p>
145
+ </div>
146
+ <div class="border rounded-lg p-4">
147
+ <div class="flex justify-between items-start mb-2">
148
+ <h3 class="font-semibold">جهاز الرنين المغناطيسي</h3>
149
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">يعمل</span>
150
+ </div>
151
+ <p class="text-sm text-gray-600">آخر صيانة: 2024-11-01</p>
152
+ <p class="text-sm text-gray-600">الصيانة القادمة: 2025-02-01</p>
153
+ </div>
154
+ <div class="border rounded-lg p-4">
155
+ <div class="flex justify-between items-start mb-2">
156
+ <h3 class="font-semibold">جهاز الأشعة المقطعية</h3>
157
+ <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">صيانة</span>
158
+ </div>
159
+ <p class="text-sm text-gray-600">آخر صيانة: 2024-09-20</p>
160
+ <p class="text-sm text-gray-600">الصيانة القادمة: تحت الصيانة</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <script>
167
+ feather.replace();
168
+ anime({
169
+ targets: 'tr',
170
+ translateX: [-20, 0],
171
+ opacity: [0, 1],
172
+ delay: anime.stagger(50),
173
+ duration: 600,
174
+ easing: 'easeOutQuad'
175
+ });
176
+ </script>
177
+ </body>
178
+ </html>