WizardImon commited on
Commit
2ad57bc
·
verified ·
1 Parent(s): 29b697b

add location block on the location tab - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +491 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sasthya Seba Clone
3
- emoji:
4
- colorFrom: green
5
- colorTo: red
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: sasthya-seba-clone
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,491 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Assoc. Prof. Dr. M. S. Arefin Patwary | Rheumatic Medicine Specialist</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .doctor-gradient {
11
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
12
+ }
13
+ .appointment-card {
14
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
15
+ }
16
+ .specialization-badge {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .specialization-badge:hover {
20
+ transform: translateY(-2px);
21
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
22
+ }
23
+ .tab-active {
24
+ position: relative;
25
+ }
26
+ .tab-active:after {
27
+ content: '';
28
+ position: absolute;
29
+ bottom: -1px;
30
+ left: 0;
31
+ right: 0;
32
+ height: 2px;
33
+ background: #3b82f6;
34
+ }
35
+ .location-card {
36
+ transition: all 0.3s ease;
37
+ }
38
+ .location-card:hover {
39
+ transform: translateY(-5px);
40
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="font-sans antialiased text-gray-800">
45
+ <!-- Header/Navigation -->
46
+ <header class="bg-white shadow-sm sticky top-0 z-50">
47
+ <div class="container mx-auto px-4 py-3">
48
+ <div class="flex justify-between items-center">
49
+ <div class="flex items-center space-x-8">
50
+ <a href="#" class="text-2xl font-bold text-blue-600">Sasthya Seba</a>
51
+ <nav class="hidden md:flex space-x-6">
52
+ <a href="#" class="text-gray-700 hover:text-blue-600">Find Doctor</a>
53
+ <a href="#" class="text-gray-700 hover:text-blue-600">Find Hospital</a>
54
+ <a href="#" class="text-gray-700 hover:text-blue-600">Find Ambulance</a>
55
+ </nav>
56
+ </div>
57
+ <div class="flex items-center space-x-4">
58
+ <button class="p-2 rounded-full hover:bg-gray-100">
59
+ <i class="fas fa-search text-gray-600"></i>
60
+ </button>
61
+ <a href="#" class="hidden md:block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Login/Register</a>
62
+ <button class="md:hidden p-2 rounded-full hover:bg-gray-100">
63
+ <i class="fas fa-bars text-gray-600"></i>
64
+ </button>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </header>
69
+
70
+ <!-- Doctor Profile Section -->
71
+ <div class="doctor-gradient py-8">
72
+ <div class="container mx-auto px-4">
73
+ <div class="flex flex-col md:flex-row gap-8">
74
+ <!-- Doctor Image and Basic Info -->
75
+ <div class="md:w-1/3 lg:w-1/4">
76
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
77
+ <img src="https://img.sasthyaseba.com/LBUDK0RCAzICFSpfVWcGCwhkWz0/doctors/1981/KCQ2hMqOH3kHN9OOnshUgUmMvcMtly0C3sjAxB1P/asst-prof-dr-m-s-arefin-patwary.webp"
78
+ alt="Dr. M. S. Arefin Patwary"
79
+ class="w-full h-64 object-cover">
80
+ <div class="p-6">
81
+ <h1 class="text-2xl font-bold text-gray-800">Assoc. Prof. Dr. M. S. Arefin Patwary</h1>
82
+ <div class="mt-2">
83
+ <span class="text-sm font-medium text-blue-600">Rheumatologist</span>
84
+ <span class="mx-2 text-gray-300">|</span>
85
+ <span class="text-sm font-medium text-blue-600">Medicine Specialist</span>
86
+ </div>
87
+ <div class="mt-4 flex items-center">
88
+ <i class="fas fa-star text-yellow-400 mr-1"></i>
89
+ <span class="text-gray-700 font-medium">4.8</span>
90
+ <span class="mx-2 text-gray-300">|</span>
91
+ <span class="text-gray-600">15 Years Experience</span>
92
+ </div>
93
+ <div class="mt-4">
94
+ <p class="text-gray-600 text-sm">
95
+ <i class="fas fa-id-card text-blue-500 mr-2"></i>
96
+ BMDC Reg.: Coming Soon
97
+ </p>
98
+ <p class="text-gray-600 text-sm mt-1">
99
+ <i class="fas fa-id-badge text-blue-500 mr-2"></i>
100
+ ID: D14AP42
101
+ </p>
102
+ </div>
103
+ <div class="mt-6">
104
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition">
105
+ Book Appointment
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <!-- Doctor Details -->
113
+ <div class="md:w-2/3 lg:w-3/4">
114
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
115
+ <!-- Tabs -->
116
+ <div class="border-b border-gray-200">
117
+ <div class="flex overflow-x-auto">
118
+ <button data-tab="overview-tab" class="px-6 py-4 font-medium text-gray-700 tab-active">Overview</button>
119
+ <button data-tab="locations-tab" class="px-6 py-4 font-medium text-gray-500 hover:text-blue-600">Locations</button>
120
+ <button data-tab="specializations-tab" class="px-6 py-4 font-medium text-gray-500 hover:text-blue-600">Specializations</button>
121
+ <button data-tab="experience-tab" class="px-6 py-4 font-medium text-gray-500 hover:text-blue-600">Experience</button>
122
+ <button data-tab="education-tab" class="px-6 py-4 font-medium text-gray-500 hover:text-blue-600">Education</button>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Tab Content -->
127
+ <div class="p-6">
128
+ <!-- Overview Tab -->
129
+ <div id="overview-tab" class="tab-content">
130
+ <!-- Locations Tab -->
131
+ <div id="locations-tab" class="tab-content hidden">
132
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Chamber Locations</h2>
133
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
134
+ <!-- New Chamber -->
135
+ <div class="location-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
136
+ <h3 class="font-bold text-gray-800 mb-2">Popular Diagnostic Centre Ltd. | Uttara</h3>
137
+ <p class="text-gray-600 text-sm mb-3">
138
+ <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>
139
+ House # 1, Road # 12, Sector # 4, Uttara, Dhaka-1230, Bangladesh
140
+ </p>
141
+ <div class="mt-2 mb-3">
142
+ <p class="text-sm text-gray-600">
143
+ <i class="far fa-calendar-alt text-blue-500 mr-2"></i>
144
+ Tue, Thu: 5:00 PM - 8:00 PM
145
+ </p>
146
+ </div>
147
+ <div class="flex justify-between items-center mt-2">
148
+ <a href="#" class="text-blue-600 text-sm font-medium flex items-center">
149
+ <i class="fas fa-map-marked-alt mr-1"></i> Get Direction
150
+ </a>
151
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition">
152
+ Book Appointment
153
+ </button>
154
+ </div>
155
+ </div>
156
+ <!-- Current Chamber -->
157
+ <div class="location-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
158
+ <h3 class="font-bold text-gray-800 mb-2">Popular Diagnostic Centre Ltd. | Shantinagar (Unit 1)</h3>
159
+ <p class="text-gray-600 text-sm mb-3">
160
+ <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>
161
+ House # 11, Shantinagar, Motijheel, 4, Paltan, Dhaka-1217, Bangladesh
162
+ </p>
163
+ <div class="flex justify-between items-center mt-4">
164
+ <a href="#" class="text-blue-600 text-sm font-medium flex items-center">
165
+ <i class="fas fa-map-marked-alt mr-1"></i> Get Direction
166
+ </a>
167
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition">
168
+ Book Appointment
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Other Chamber -->
174
+ <div class="location-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
175
+ <h3 class="font-bold text-gray-800 mb-2">Popular Diagnostic Centre Ltd. | JatraBari</h3>
176
+ <p class="text-gray-600 text-sm mb-3">
177
+ <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>
178
+ Tony Tower, 33 Shahid Faroque Rd, Dhaka, Dhaka-1204, Bangladesh
179
+ </p>
180
+ <div class="mt-2 mb-3">
181
+ <p class="text-sm text-gray-600">
182
+ <i class="far fa-calendar-alt text-blue-500 mr-2"></i>
183
+ Sat, Sun, Mon, Wed, Thur: 4:30 PM - 7:00 PM
184
+ </p>
185
+ <p class="text-sm text-gray-600 mt-1">
186
+ <i class="far fa-calendar-alt text-blue-500 mr-2"></i>
187
+ Fri: 9:30 AM - 12:00 PM
188
+ </p>
189
+ </div>
190
+ <div class="flex justify-between items-center mt-2">
191
+ <a href="#" class="text-blue-600 text-sm font-medium flex items-center">
192
+ <i class="fas fa-map-marked-alt mr-1"></i> Get Direction
193
+ </a>
194
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition">
195
+ Book Appointment
196
+ </button>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Specializations Tab -->
203
+ <div id="specializations-tab" class="tab-content hidden">
204
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Specializations</h2>
205
+ <div class="flex flex-wrap gap-2 mb-6">
206
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Adolescent Medicine</span>
207
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Aesthetic Medicine</span>
208
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Arthritis</span>
209
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">General Health</span>
210
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">General Illness</span>
211
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">General Medicine</span>
212
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Geriatric Medicine</span>
213
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Infectious Disease Treatment</span>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Experience Tab -->
218
+ <div id="experience-tab" class="tab-content hidden">
219
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Professional Experience</h2>
220
+ <div class="space-y-4">
221
+ <div>
222
+ <h3 class="font-semibold text-gray-800">Associate Professor</h3>
223
+ <p class="text-gray-600 text-sm">Rheumatology Department, Popular Medical College</p>
224
+ <p class="text-gray-500 text-xs">2018 - Present</p>
225
+ </div>
226
+ <div>
227
+ <h3 class="font-semibold text-gray-800">Consultant Rheumatologist</h3>
228
+ <p class="text-gray-600 text-sm">Popular Diagnostic Centre Ltd.</p>
229
+ <p class="text-gray-500 text-xs">2015 - 2018</p>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Education Tab -->
235
+ <div id="education-tab" class="tab-content hidden">
236
+ <h2 class="text-xl font-bold text-gray-800 mb-4">Education</h2>
237
+ <div class="space-y-4">
238
+ <div>
239
+ <h3 class="font-semibold text-gray-800">Fellowship in Rheumatology</h3>
240
+ <p class="text-gray-600 text-sm">Bangladesh College of Physicians and Surgeons</p>
241
+ <p class="text-gray-500 text-xs">2014</p>
242
+ </div>
243
+ <div>
244
+ <h3 class="font-semibold text-gray-800">FCPS (Medicine)</h3>
245
+ <p class="text-gray-600 text-sm">Bangladesh College of Physicians and Surgeons</p>
246
+ <p class="text-gray-500 text-xs">2012</p>
247
+ </div>
248
+ <div>
249
+ <h3 class="font-semibold text-gray-800">MBBS</h3>
250
+ <p class="text-gray-600 text-sm">Dhaka Medical College</p>
251
+ <p class="text-gray-500 text-xs">2005</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ <h2 class="text-xl font-bold text-gray-800 mb-4">About Dr. Arefin Patwary</h2>
256
+ <p class="text-gray-700 mb-6">
257
+ Associate Professor Dr. M. S. Arefin Patwary is a highly qualified specialist in Rheumatic Medicine with a focus on managing rheumatological conditions. His qualifications include an MBBS degree, FCPS (Fellow of the College of Physicians and Surgeons) in Medicine, MCPS (Member of the College of Physicians and Surgeons), and a Fellowship in Rheumatology. These qualifications demonstrate his dedication to providing specialized care in the field of rheumatology.
258
+ </p>
259
+
260
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Qualifications</h3>
261
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">
262
+ <span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">MBBS</span>
263
+ <span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">FCPS (Medicine)</span>
264
+ <span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">MCPS</span>
265
+ <span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">Fellow in Rheumatology</span>
266
+ </div>
267
+
268
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Field of Concentration</h3>
269
+ <div class="flex flex-wrap gap-2 mb-6">
270
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Adolescent Medicine</span>
271
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Aesthetic Medicine</span>
272
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Arthritis</span>
273
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">General Health</span>
274
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">General Illness</span>
275
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">General Medicine</span>
276
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Geriatric Medicine</span>
277
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">Infectious Disease Treatment</span>
278
+ <span class="specialization-badge bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">View more</span>
279
+ </div>
280
+
281
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
282
+ <!-- Current Chamber -->
283
+ <div class="location-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
284
+ <h3 class="font-bold text-gray-800 mb-2">Popular Diagnostic Centre Ltd. | Shantinagar (Unit 1)</h3>
285
+ <p class="text-gray-600 text-sm mb-3">
286
+ <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>
287
+ House # 11, Shantinagar, Motijheel, 4, Paltan, Dhaka-1217, Bangladesh
288
+ </p>
289
+ <div class="flex justify-between items-center mt-4">
290
+ <a href="#" class="text-blue-600 text-sm font-medium flex items-center">
291
+ <i class="fas fa-map-marked-alt mr-1"></i> Get Direction
292
+ </a>
293
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition">
294
+ Book Appointment
295
+ </button>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Other Chamber -->
300
+ <div class="location-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
301
+ <h3 class="font-bold text-gray-800 mb-2">Popular Diagnostic Centre Ltd. | JatraBari</h3>
302
+ <p class="text-gray-600 text-sm mb-3">
303
+ <i class="fas fa-map-marker-alt text-blue-500 mr-2"></i>
304
+ Tony Tower, 33 Shahid Faroque Rd, Dhaka, Dhaka-1204, Bangladesh
305
+ </p>
306
+ <div class="mt-2 mb-3">
307
+ <p class="text-sm text-gray-600">
308
+ <i class="far fa-calendar-alt text-blue-500 mr-2"></i>
309
+ Sat, Sun, Mon, Wed, Thur: 4:30 PM - 7:00 PM
310
+ </p>
311
+ <p class="text-sm text-gray-600 mt-1">
312
+ <i class="far fa-calendar-alt text-blue-500 mr-2"></i>
313
+ Fri: 9:30 AM - 12:00 PM
314
+ </p>
315
+ </div>
316
+ <div class="flex justify-between items-center mt-2">
317
+ <a href="#" class="text-blue-600 text-sm font-medium flex items-center">
318
+ <i class="fas fa-map-marked-alt mr-1"></i> Get Direction
319
+ </a>
320
+ <button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition">
321
+ Book Appointment
322
+ </button>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <!-- Appointment Modal (Hidden by default) -->
335
+ <div id="appointment-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
336
+ <div class="bg-white rounded-xl max-w-md w-full mx-4 appointment-card">
337
+ <div class="p-6">
338
+ <div class="flex justify-between items-center mb-4">
339
+ <h3 class="text-xl font-bold text-gray-800">Book Appointment</h3>
340
+ <button id="close-modal" class="text-gray-500 hover:text-gray-700">
341
+ <i class="fas fa-times"></i>
342
+ </button>
343
+ </div>
344
+
345
+ <div class="mb-4">
346
+ <label class="block text-gray-700 text-sm font-medium mb-2">Select Location</label>
347
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
348
+ <option>Popular Diagnostic Centre Ltd. | Shantinagar (Unit 1)</option>
349
+ <option>Popular Diagnostic Centre Ltd. | JatraBari</option>
350
+ </select>
351
+ </div>
352
+
353
+ <div class="mb-4">
354
+ <label class="block text-gray-700 text-sm font-medium mb-2">Select Consultation Type</label>
355
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
356
+ <option>In-Person Consultation</option>
357
+ <option>Video Consultation</option>
358
+ </select>
359
+ </div>
360
+
361
+ <div class="mb-4">
362
+ <label class="block text-gray-700 text-sm font-medium mb-2">Appointment Type</label>
363
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
364
+ <option>New Patient</option>
365
+ <option>Follow-up</option>
366
+ </select>
367
+ </div>
368
+
369
+ <button class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition mt-4">
370
+ Confirm Appointment
371
+ </button>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Footer -->
377
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
378
+ <div class="container mx-auto px-4">
379
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
380
+ <div>
381
+ <h3 class="text-lg font-bold mb-4">Sasthya Seba Ltd.</h3>
382
+ <p class="text-gray-400 mb-4">We are on a mission to make quality healthcare affordable and accessible for the people of Bangladesh.</p>
383
+ <div class="flex space-x-4">
384
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
385
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
386
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
387
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
388
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
389
+ </div>
390
+ </div>
391
+
392
+ <div>
393
+ <h3 class="text-lg font-bold mb-4">Quick Links</h3>
394
+ <ul class="space-y-2">
395
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
397
+ <li><a href="#" class="text-gray-400 hover:text-white">Services</a></li>
398
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
399
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
400
+ </ul>
401
+ </div>
402
+
403
+ <div>
404
+ <h3 class="text-lg font-bold mb-4">For Patients</h3>
405
+ <ul class="space-y-2">
406
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ's</a></li>
407
+ <li><a href="#" class="text-gray-400 hover:text-white">Find Doctors</a></li>
408
+ <li><a href="#" class="text-gray-400 hover:text-white">Find Ambulances</a></li>
409
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms & Conditions</a></li>
410
+ <li><a href="#" class="text-gray-400 hover:text-white">Cancellation Policy</a></li>
411
+ </ul>
412
+ </div>
413
+
414
+ <div>
415
+ <h3 class="text-lg font-bold mb-4">Contact Us</h3>
416
+ <div class="space-y-2">
417
+ <p class="text-gray-400 flex items-center">
418
+ <i class="fas fa-phone-alt mr-2"></i> 09611 530 530
419
+ </p>
420
+ <p class="text-gray-400 flex items-center">
421
+ <i class="fas fa-phone-alt mr-2"></i> 01405 600 700
422
+ </p>
423
+ <p class="text-gray-400">
424
+ <i class="fas fa-envelope mr-2"></i> [email protected]
425
+ </p>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="border-t border-gray-800 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
431
+ <p class="text-gray-400 text-sm">Copyright © 2023 Sasthya Seba Limited. All rights reserved.</p>
432
+ <div class="flex space-x-4 mt-4 md:mt-0">
433
+ <img src="https://via.placeholder.com/80x30" alt="Payment Method" class="h-8">
434
+ <img src="https://via.placeholder.com/80x30" alt="Payment Method" class="h-8">
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </footer>
439
+
440
+ <script>
441
+ // Tab switching functionality
442
+ const tabs = document.querySelectorAll('[data-tab]');
443
+ tabs.forEach(tab => {
444
+ tab.addEventListener('click', () => {
445
+ // Remove active class from all tabs
446
+ tabs.forEach(t => {
447
+ t.classList.remove('tab-active');
448
+ t.classList.add('text-gray-500');
449
+ t.classList.remove('text-gray-700');
450
+ });
451
+
452
+ // Add active class to clicked tab
453
+ tab.classList.add('tab-active');
454
+ tab.classList.remove('text-gray-500');
455
+ tab.classList.add('text-gray-700');
456
+
457
+ // Hide all tab contents
458
+ document.querySelectorAll('.tab-content').forEach(content => {
459
+ content.classList.add('hidden');
460
+ });
461
+
462
+ // Show selected tab content
463
+ const tabId = tab.getAttribute('data-tab');
464
+ document.getElementById(tabId).classList.remove('hidden');
465
+ });
466
+ });
467
+
468
+ // Simple modal toggle functionality
469
+ const bookButtons = document.querySelectorAll('button:contains("Book Appointment")');
470
+ const modal = document.getElementById('appointment-modal');
471
+ const closeModal = document.getElementById('close-modal');
472
+
473
+ bookButtons.forEach(button => {
474
+ button.addEventListener('click', () => {
475
+ modal.classList.remove('hidden');
476
+ });
477
+ });
478
+
479
+ closeModal.addEventListener('click', () => {
480
+ modal.classList.add('hidden');
481
+ });
482
+
483
+ // Close modal when clicking outside
484
+ modal.addEventListener('click', (e) => {
485
+ if (e.target === modal) {
486
+ modal.classList.add('hidden');
487
+ }
488
+ });
489
+ </script>
490
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=WizardImon/sasthya-seba-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
491
+ </html>