Hugging Face's logo

Spaces:
kalhdrawi
/
undefined
Running

App Files Community
undefined
File size: 8,774 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
 
<!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>