Spaces:

kalhdrawi
/

undefined

Running

App Files Files Community

undefined / appointment-scheduling.html

kalhdrawi

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

96637b1 verified 5 months ago

raw

history blame contribute delete

8.77 kB

	<!DOCTYPE html>
	<html lang="ar" dir="rtl">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>حجز موعد - نظام إدارة المستشفى</title>
	<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>
	<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-gray-600 hover:text-blue-600">الأقسام</a>
	<a href="emergency.html" class="text-gray-600 hover:text-blue-600">الطوارئ</a>
	</div>
	</div>
	</div>
	</nav>

	<div class="max-w-4xl mx-auto px-4 py-8">
	<h1 class="text-3xl font-bold text-gray-800 mb-8">حجز موعد جديد</h1>

	<div class="bg-white rounded-lg shadow-md p-6">
	<form class="space-y-6">
	<!-- Patient Selection -->
	<div>
	<h2 class="text-xl font-semibold text-gray-800 mb-4">اختيار المريض</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">البحث عن مريض</label>
	<input type="text" placeholder="اكتب اسم أو رقم الملف" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">أو مريض جديد</label>
	<a href="patient-registration.html" class="inline-block px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">تسجيل مريض جديد</a>
	</div>
	</div>
	</div>

	<!-- Doctor Selection -->
	<div>
	<h2 class="text-xl font-semibold text-gray-800 mb-4">اختيار الطبيب</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">التخصص</label>
	<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
	<option>اختر التخصص</option>
	<option>قلب</option>
	<option>نساء وتوليد</option>
	<option>أطفال</option>
	<option>جراحة</option>
	<option>باطنية</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">الطبيب</label>
	<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
	<option>اختر الطبيب</option>
	<option>د. أحمد محمد</option>
	<option>د. سارة أحمد</option>
	<option>د. محمود علي</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Date and Time Selection -->
	<div>
	<h2 class="text-xl font-semibold text-gray-800 mb-4">اختيار الموعد</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">التاريخ</label>
	<input type="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">الوقت</label>
	<div class="grid grid-cols-3 gap-2">
	<button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">9:00 ص</button>
	<button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">9:30 ص</button>
	<button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">10:00 ص</button>
	<button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">10:30 ص</button>
	<button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">11:00 ص</button>
	<button type="button" class="px-3 py-2 border rounded hover:bg-blue-600 hover:text-white">11:30 ص</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Appointment Type -->
	<div>
	<h2 class="text-xl font-semibold text-gray-800 mb-4">نوع الموعد</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">نوع الزيارة</label>
	<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
	<option>زيارة أولى</option>
	<option>متابعة</option>
	<option>استشارة</option>
	<option>طوارئ</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-2">طريقة الدفع</label>
	<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
	<option>نقداً</option>
	<option>بطاقة ائتمان</option>
	<option>تأمين</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Notes -->
	<div>
	<h2 class="text-xl font-semibold text-gray-800 mb-4">ملاحظات</h2>
	<textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500" rows="4" placeholder="أي ملاحظات إضافية..."></textarea>
	</div>

	<!-- Submit Buttons -->
	<div class="flex justify-end space-x-reverse space-x-4">
	<a href="appointments.html" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">إلغاء</a>
	<button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">حجز الموعد</button>
	</div>
	</form>
	</div>
	</div>

	<script>
	feather.replace();
	</script>
	</body>
	</html>