HTML Template (Medical Search)
?
S
MarkupSimple page with search
1<div class="min-h-screen bg-sky-100">
2 <div class="flex min-h-screen flex-col">
3 <!-- Header -->
4 <nav class="bg-white p-4 shadow-sm">
5 <div class="container mx-auto flex items-center justify-between">
6 <div class="text-2xl font-semibold text-sky-600">SafePregnancy</div>
7 <button class="rounded-full bg-pink-500 px-6 py-2 text-white hover:bg-pink-600">Contact</button>
8 </div>
9 </nav>
10
11 <!-- Main Content -->
12 <main class="flex-grow">
13 <div class="container mx-auto px-4 pt-12 text-center">
14 <h1 class="mb-4 text-4xl font-bold text-gray-800">Is it safe during pregnancy?</h1>
15
16 <!-- Search Box -->
17 <div class="mx-auto mb-12 max-w-xl">
18 <input type="text" placeholder="Enter medicine name or food item" class="w-full rounded-lg border-2 border-sky-200 px-6 py-4 text-lg shadow-md focus:border-sky-400 focus:outline-none" />
19 </div>
20
21 <!-- Example Cards -->
22 <div class="mx-auto grid max-w-4xl grid-cols-2 gap-4 md:grid-cols-4">
23 <!-- Example 1 -->
24 <div class="cursor-pointer rounded-lg bg-white p-4 shadow-md transition-shadow hover:shadow-lg">
25 <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
26 <span class="text-2xl text-green-600">✓</span>
27 </div>
28 <h3 class="font-semibold text-gray-800">Ginger Tea</h3>
29 <p class="text-sm text-green-600">Safe to consume</p>
30 </div>
31
32 <!-- Example 2 -->
33 <div class="cursor-pointer rounded-lg bg-white p-4 shadow-md transition-shadow hover:shadow-lg">
34 <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
35 <span class="text-2xl text-red-600">×</span>
36 </div>
37 <h3 class="font-semibold text-gray-800">Raw Fish</h3>
38 <p class="text-sm text-red-600">Not recommended</p>
39 </div>
40
41 <!-- Example 3 -->
42 <div class="cursor-pointer rounded-lg bg-white p-4 shadow-md transition-shadow hover:shadow-lg">
43 <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
44 <span class="text-2xl text-yellow-600">!</span>
45 </div>
46 <h3 class="font-semibold text-gray-800">Coffee</h3>
47 <p class="text-sm text-yellow-600">Limited intake</p>
48 </div>
49
50 <!-- Example 4 -->
51 <div class="cursor-pointer rounded-lg bg-white p-4 shadow-md transition-shadow hover:shadow-lg">
52 <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
53 <span class="text-2xl text-green-600">✓</span>
54 </div>
55 <h3 class="font-semibold text-gray-800">Greek Yogurt</h3>
56 <p class="text-sm text-green-600">Safe to consume</p>
57 </div>
58 </div>
59
60 <!-- Info Links Section -->
61 <div class="container mx-auto mb-12 mt-16 px-4">
62 <div class="mx-auto grid max-w-4xl gap-8 text-center md:grid-cols-3">
63 <!-- Common Questions -->
64 <a href="/faq" class="rounded-lg bg-white p-6 shadow-md transition-all hover:shadow-lg">
65 <div class="mb-2 text-3xl">❓</div>
66 <h3 class="mb-2 font-semibold text-gray-800">Common Questions</h3>
67 <p class="text-sm text-gray-600">Find answers to frequently asked questions</p>
68 </a>
69
70 <!-- Medical Guidelines -->
71 <a href="/guidelines" class="rounded-lg bg-white p-6 shadow-md transition-all hover:shadow-lg">
72 <div class="mb-2 text-3xl">📋</div>
73 <h3 class="mb-2 font-semibold text-gray-800">Medical Guidelines</h3>
74 <p class="text-sm text-gray-600">Understanding safety categories</p>
75 </a>
76
77 <!-- About Database -->
78 <a href="/about" class="rounded-lg bg-white p-6 shadow-md transition-all hover:shadow-lg">
79 <div class="mb-2 text-3xl">🔍</div>
80 <h3 class="mb-2 font-semibold text-gray-800">About Our Data</h3>
81 <p class="text-sm text-gray-600">FDA and medical sources explained</p>
82 </a>
83 </div>
84 </div>
85 </div>
86 </main>
87
88 <!-- Footer -->
89 <footer class="mt-auto bg-white">
90 <div class="container mx-auto px-4 py-8">
91 <!-- Upper Footer -->
92 <div class="mb-8 grid gap-8 md:grid-cols-4">
93 <div>
94 <h4 class="mb-4 font-semibold text-gray-800">About</h4>
95 <ul class="space-y-2 text-sm text-gray-600">
96 <li><a href="/about" class="hover:text-sky-600">About Us</a></li>
97 <li><a href="/team" class="hover:text-sky-600">Medical Team</a></li>
98 <li><a href="/sources" class="hover:text-sky-600">Data Sources</a></li>
99 </ul>
100 </div>
101
102 <div>
103 <h4 class="mb-4 font-semibold text-gray-800">Legal</h4>
104 <ul class="space-y-2 text-sm text-gray-600">
105 <li><a href="/disclaimer" class="hover:text-sky-600">Medical Disclaimer</a></li>
106 <li><a href="/privacy" class="hover:text-sky-600">Privacy Policy</a></li>
107 <li><a href="/terms" class="hover:text-sky-600">Terms of Use</a></li>
108 </ul>
109 </div>
110
111 <div>
112 <h4 class="mb-4 font-semibold text-gray-800">Resources</h4>
113 <ul class="space-y-2 text-sm text-gray-600">
114 <li><a href="/faq" class="hover:text-sky-600">FAQ</a></li>
115 <li><a href="/blog" class="hover:text-sky-600">Blog</a></li>
116 <li><a href="/contact" class="hover:text-sky-600">Contact Us</a></li>
117 </ul>
118 </div>
119
120 <div>
121 <h4 class="mb-4 font-semibold text-gray-800">Connect</h4>
122 <div class="flex space-x-4">
123 <a href="#" class="text-gray-400 hover:text-sky-600">
124 <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg>
125 </a>
126 <a href="#" class="text-gray-400 hover:text-sky-600">
127 <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" /></svg>
128 </a>
129 </div>
130 </div>
131 </div>
132
133 <!-- Bottom Footer -->
134 <div class="border-t border-gray-200 pt-8 text-center text-sm text-gray-600">
135 <p>© 2024 SafePregnancy. All information is for educational purposes only.</p>
136 <p class="mt-2">Always consult with your healthcare provider before making any medical decisions.</p>
137 </div>
138 </div>
139 </footer>
140 </div>
141</div>
142
143=============================
144
145<!-- During typing: Autocomplete dropdown -->
146<div class="relative max-w-xl mx-auto">
147 <input type="text"
148 placeholder="Enter medicine name or food item"
149 class="w-full px-6 py-4 rounded-lg shadow-md border-2 border-sky-200 focus:border-sky-400 focus:outline-none text-lg"
150 >
151 <div class="absolute w-full bg-white mt-1 rounded-lg shadow-lg border border-gray-200">
152 <div class="p-3 hover:bg-gray-50 cursor-pointer">Paracetamol (Medicine)</div>
153 <div class="p-3 hover:bg-gray-50 cursor-pointer">Panadol (Brand)</div>
154 </div>
155</div>
156
157<!-- Single Result View -->
158<div class="max-w-2xl mx-auto mt-8 bg-white rounded-lg shadow-lg p-6">
159 <div class="flex items-center mb-6">
160 <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center">
161 <span class="text-green-600 text-2xl">✓</span>
162 </div>
163 <div class="ml-4">
164 <h2 class="text-2xl font-bold text-gray-800">Paracetamol</h2>
165 <p class="text-green-600 font-medium">Generally considered safe during pregnancy</p>
166 </div>
167 </div>
168
169 <div class="space-y-4">
170 <div class="border-b pb-4">
171 <h3 class="font-semibold mb-2">Safety Category</h3>
172 <p>Category B - No evidence of risk in humans</p>
173 </div>
174
175 <div class="border-b pb-4">
176 <h3 class="font-semibold mb-2">Important Notes</h3>
177 <ul class="list-disc list-inside space-y-2">
178 <li>Use only as prescribed</li>
179 <li>Regular dose: 500-1000mg every 4-6 hours</li>
180 <li>Maximum 4000mg per day</li>
181 </ul>
182 </div>
183
184 <div>
185 <h3 class="font-semibold mb-2">Medical References</h3>
186 <p class="text-sm text-gray-600">Based on FDA guidelines and multiple clinical studies</p>
187 </div>
188 </div>
189
190 <div class="mt-6 p-4 bg-blue-50 rounded-lg">
191 <p class="text-sm text-blue-800">Always consult your healthcare provider before taking any medication during pregnancy.</p>
192 </div>
193</div>
194
195<!-- No Results View -->
196<div class="max-w-xl mx-auto mt-8 text-center">
197 <div class="bg-white rounded-lg shadow-lg p-6">
198 <div class="text-4xl mb-4">🔍</div>
199 <h2 class="text-xl font-semibold mb-2">No results found</h2>
200 <p class="text-gray-600 mb-4">We couldn't find information about this item in our database.</p>
201 <button class="bg-sky-600 text-white px-6 py-2 rounded-full hover:bg-sky-700">
202 Contact Healthcare Provider
203 </button>
204 </div>
205</div>
206
207
208=========================
209<!-- Single Result View -->
210<div class="max-w-2xl mx-auto mt-8 bg-green-50 rounded-lg shadow-lg p-6">
211 <div class="flex items-center mb-6">
212 <div class="bg-green-200 w-12 h-12 rounded-full flex items-center justify-center">
213 <span class="text-green-700 text-2xl">✓</span>
214 </div>
215 <div class="ml-4">
216 <h2 class="text-2xl font-bold text-gray-800">Paracetamol</h2>
217 <p class="text-green-700 font-medium">Generally considered safe during pregnancy</p>
218 </div>
219 </div>
220
221 <div class="space-y-4">
222 <div class="border-b border-green-100 pb-4">
223 <h3 class="font-semibold mb-2">Safety Category</h3>
224 <p>Category B - No evidence of risk in humans</p>
225 </div>
226
227 <div class="border-b border-green-100 pb-4">
228 <h3 class="font-semibold mb-2">Important Notes</h3>
229 <ul class="list-disc list-inside space-y-2">
230 <li>Use only as prescribed</li>
231 <li>Regular dose: 500-1000mg every 4-6 hours</li>
232 <li>Maximum 4000mg per day</li>
233 </ul>
234 </div>
235
236 <div>
237 <h3 class="font-semibold mb-2">Medical References</h3>
238 <p class="text-sm text-gray-600">Based on FDA guidelines and multiple clinical studies</p>
239 </div>
240 </div>
241
242 <div class="mt-6 p-4 bg-white rounded-lg border border-green-200">
243 <p class="text-sm text-gray-800">Always consult your healthcare provider before taking any medication during pregnancy.</p>
244 </div>
245</div>
246
247==========================
248
249<div class="min-h-screen bg-sky-100">
250 <!-- Header (same as main page) -->
251 <nav class="bg-white p-4 shadow-sm">
252 <div class="container mx-auto flex justify-between items-center">
253 <div class="text-2xl text-sky-600 font-semibold">SafePregnancy</div>
254 <button class="bg-pink-500 text-white px-6 py-2 rounded-full hover:bg-pink-600">
255 Contact
256 </button>
257 </div>
258 </nav>
259
260 <!-- Content Section -->
261 <div class="container mx-auto px-4 py-8">
262 <!-- Breadcrumb -->
263 <div class="text-sm mb-6 text-gray-600">
264 <a href="/" class="hover:text-sky-600">Home</a>
265 <span class="mx-2">›</span>
266 <span>FAQ</span>
267 </div>
268
269 <!-- Main Content Container -->
270 <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-8">
271 <!-- Page Title -->
272 <h1 class="text-3xl font-bold text-gray-800 mb-6">Frequently Asked Questions</h1>
273
274 <!-- Optional Subtitle/Description -->
275 <p class="text-gray-600 mb-8">
276 Common questions about medication and food safety during pregnancy.
277 </p>
278
279 <!-- Content Sections -->
280 <div class="space-y-8">
281 <!-- Section -->
282 <section class="border-b border-gray-200 pb-6">
283 <h2 class="text-xl font-semibold text-gray-800 mb-4">General Questions</h2>
284 <div class="space-y-4">
285 <div class="rounded-lg bg-gray-50 p-4">
286 <h3 class="font-medium text-gray-800 mb-2">How reliable is this information?</h3>
287 <p class="text-gray-600">Our data is sourced from FDA guidelines, peer-reviewed medical journals, and verified by licensed healthcare professionals.</p>
288 </div>
289 <!-- More QA items -->
290 </div>
291 </section>
292
293 <!-- Additional Sections as needed -->
294 </div>
295
296 <!-- Bottom Notice -->
297 <div class="mt-8 p-4 bg-blue-50 rounded-lg">
298 <p class="text-sm text-blue-800">
299 Last updated: January 2024. This information is for educational purposes only.
300 </p>
301 </div>
302 </div>
303
304 <!-- Optional Side Navigation for longer pages -->
305 <div class="hidden lg:block fixed right-8 top-32 w-48">
306 <div class="bg-white rounded-lg shadow-md p-4">
307 <h4 class="font-medium text-gray-800 mb-3">On this page</h4>
308 <ul class="space-y-2 text-sm">
309 <li><a href="#section1" class="text-gray-600 hover:text-sky-600">General Questions</a></li>
310 <li><a href="#section2" class="text-gray-600 hover:text-sky-600">Medications</a></li>
311 <li><a href="#section3" class="text-gray-600 hover:text-sky-600">Food Safety</a></li>
312 </ul>
313 </div>
314 </div>
315 </div>
316
317 <!-- Footer (same as main page) -->
318</div>Created on 11/6/2024