File size: 11,725 Bytes
96637b1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 |
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>الأقسام - نظام إدارة المستشفى</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
body { font-family: 'Tajawal', sans-serif; }
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-reverse space-x-2">
<i data-feather="activity" class="w-8 h-8 text-blue-600"></i>
<span class="text-xl font-bold text-gray-800">نظام إدارة المستشفى</span>
</div>
<div class="hidden md:flex space-x-reverse space-x-6">
<a href="index.html" class="text-gray-600 hover:text-blue-600">الرئيسية</a>
<a href="patients.html" class="text-gray-600 hover:text-blue-600">المرضى</a>
<a href="doctors.html" class="text-gray-600 hover:text-blue-600">الأطباء</a>
<a href="appointments.html" class="text-gray-600 hover:text-blue-600">المواعيد</a>
<a href="departments.html" class="text-blue-600 font-medium">الأقسام</a>
<a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
</div>
</div>
</div>
</nav>
<div class="max-w-7xl mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-gray-800 mb-8">أقسام المستشفى</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<div class="bg-gradient-to-r from-blue-500 to-blue-600 p-6">
<i data-feather="heart" class="w-12 h-12 text-white"></i>
<h3 class="text-xl font-semibold text-white mt-2">القلب</h3>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">تخصص في تشخيص وعلاج أمراض القلب والأوعية الدموية</p>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-600">عدد الأطباء:</span>
<span class="font-semibold">8</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">المرضى اليوم:</span>
<span class="font-semibold">24</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">الطابق:</span>
<span class="font-semibold">الثاني</span>
</div>
</div>
<button class="mt-4 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">عرض التفاصيل</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<div class="bg-gradient-to-r from-pink-500 to-pink-600 p-6">
<i data-feather="users" class="w-12 h-12 text-white"></i>
<h3 class="text-xl font-semibold text-white mt-2">النساء والتوليد</h3>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">العناية بصحة المرأة خلال فترة الحمل والولادة</p>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-600">عدد الأطباء:</span>
<span class="font-semibold">6</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">المرضى اليوم:</span>
<span class="font-semibold">18</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">الطابق:</span>
<span class="font-semibold">الثالث</span>
</div>
</div>
<button class="mt-4 w-full bg-pink-600 text-white py-2 rounded hover:bg-pink-700">عرض التفاصيل</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<div class="bg-gradient-to-r from-green-500 to-green-600 p-6">
<i data-feather="user" class="w-12 h-12 text-white"></i>
<h3 class="text-xl font-semibold text-white mt-2">الأطفال</h3>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">الرعاية الصحية للأطفال من الولادة حتى سن المراهقة</p>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-600">عدد الأطباء:</span>
<span class="font-semibold">5</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">المرضى اليوم:</span>
<span class="font-semibold">32</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">الطابق:</span>
<span class="font-semibold">الأول</span>
</div>
</div>
<button class="mt-4 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700">عرض التفاصيل</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<div class="bg-gradient-to-r from-purple-500 to-purple-600 p-6">
<i data-feather="scissors" class="w-12 h-12 text-white"></i>
<h3 class="text-xl font-semibold text-white mt-2">الجراحة</h3>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">إجراء العمليات الجراحية المختلفة بكفاءة عالية</p>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-600">عدد الأطباء:</span>
<span class="font-semibold">10</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">المرضى اليوم:</span>
<span class="font-semibold">12</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">الطابق:</span>
<span class="font-semibold">الرابع</span>
</div>
</div>
<button class="mt-4 w-full bg-purple-600 text-white py-2 rounded hover:bg-purple-700">عرض التفاصيل</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<div class="bg-gradient-to-r from-yellow-500 to-yellow-600 p-6">
<i data-feather="eye" class="w-12 h-12 text-white"></i>
<h3 class="text-xl font-semibold text-white mt-2">العيون</h3>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">تشخيص وعلاج أمراض العيون وجراحاتها</p>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-600">عدد الأطباء:</span>
<span class="font-semibold">4</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">المرضى اليوم:</span>
<span class="font-semibold">15</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">الطابق:</span>
<span class="font-semibold">الأول</span>
</div>
</div>
<button class="mt-4 w-full bg-yellow-600 text-white py-2 rounded hover:bg-yellow-700">عرض التفاصيل</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow">
<div class="bg-gradient-to-r from-red-500 to-red-600 p-6">
<i data-feather="alert-triangle" class="w-12 h-12 text-white"></i>
<h3 class="text-xl font-semibold text-white mt-2">الطوارئ</h3>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">استقبال الحالات الطارئة على مدار الساعة</p>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-gray-600">عدد الأطباء:</span>
<span class="font-semibold">12</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">المرضى اليوم:</span>
<span class="font-semibold">45</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">الطابق:</span>
<span class="font-semibold">الأرضي</span>
</div>
</div>
<button class="mt-4 w-full bg-red-600 text-white py-2 rounded hover:bg-red-700">عرض التفاصيل</button>
</div>
</div>
</div>
</div>
<script>
feather.replace();
anime({
targets: '.bg-white',
scale: [0.9, 1],
opacity: [0, 1],
delay: anime.stagger(100),
duration: 600,
easing: 'easeOutQuad'
});
</script>
</body>
</html> |