Hugging Face's logo

Spaces:
Debanjan455
/
undefined
Running

App Files Community
Debanjan455 commited on
Commit
2790c45
·
verified ·
1 Parent(s): 6282f99

it is about health and care make it on that and also add a LMM for chatbot which would give all information

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +664 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🚀
4
- colorFrom: pink
5
- colorTo: indigo
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: undefined
3
+ colorFrom: green
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,665 @@
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>HealthHarbor Guardians | AI-Powered Health Companion</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
10
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
11
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <style>
15
+ @keyframes float {
16
+ 0% { transform: translateY(0px); }
17
+ 50% { transform: translateY(-20px); }
18
+ 100% { transform: translateY(0px); }
19
+ }
20
+ .floating {
21
+ animation: float 6s ease-in-out infinite;
22
+ }
23
+ .btn-grow {
24
+ transition: all 0.3s ease;
25
+ }
26
+ .btn-grow:hover {
27
+ transform: scale(1.05);
28
+ }
29
+ .fade-in {
30
+ animation: fadeIn 1.5s ease-in;
31
+ }
32
+ @keyframes fadeIn {
33
+ from { opacity: 0; }
34
+ to { opacity: 1; }
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gradient-to-br from-green-50 to-amber-50 min-h-screen">
39
+ <div id="root"></div>
40
+
41
+ <script type="text/babel">
42
+ const { useState, useEffect } = React;
43
+
44
+ // App Component
45
+ function App() {
46
+ const [currentPage, setCurrentPage] = useState('home');
47
+
48
+ const renderPage = () => {
49
+ switch(currentPage) {
50
+ case 'home': return <HomePage goToPage={setCurrentPage} />;
51
+ case 'support': return <SupportPage goToPage={setCurrentPage} />;
52
+ case 'chat': return <ChatPage goToPage={setCurrentPage} />;
53
+ default: return <HomePage goToPage={setCurrentPage} />;
54
+ }
55
+ };
56
+
57
+ return (
58
+ <div className="font-sans">
59
+ <Navbar currentPage={currentPage} goToPage={setCurrentPage} />
60
+ {renderPage()}
61
+ <Footer goToPage={setCurrentPage} />
62
+ </div>
63
+ );
64
+ }
65
+
66
+ // Navbar Component
67
+ function Navbar({ currentPage, goToPage }) {
68
+ const [scrolled, setScrolled] = useState(false);
69
+
70
+ useEffect(() => {
71
+ const handleScroll = () => {
72
+ setScrolled(window.scrollY > 10);
73
+ };
74
+ window.addEventListener('scroll', handleScroll);
75
+ return () => window.removeEventListener('scroll', handleScroll);
76
+ }, []);
77
+
78
+ return (
79
+ <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-green-600 shadow-lg' : 'bg-transparent'}`}>
80
+ <div className="container mx-auto px-4 py-3 flex justify-between items-center">
81
+ <div className="flex items-center space-x-2">
82
+ <i data-feather="heart" className="text-amber-300"></i>
83
+ <span className="text-white font-bold text-xl">HealthHarbor Guardians</span>
84
+ </div>
85
+ <div className="hidden md:flex space-x-8">
86
+ <button
87
+ onClick={() => goToPage('home')}
88
+ className={`btn-grow text-white px-3 py-1 rounded-full ${currentPage === 'home' ? 'bg-amber-400 text-green-800 font-bold' : 'hover:text-amber-200'}`}
89
+ >
90
+ Home
91
+ </button>
92
+ <button
93
+ onClick={() => goToPage('support')}
94
+ className={`btn-grow text-white px-3 py-1 rounded-full ${currentPage === 'support' ? 'bg-amber-400 text-green-800 font-bold' : 'hover:text-amber-200'}`}
95
+ >
96
+ Support
97
+ </button>
98
+ <button
99
+ onClick={() => goToPage('chat')}
100
+ className={`btn-grow text-white px-3 py-1 rounded-full ${currentPage === 'chat' ? 'bg-amber-400 text-green-800 font-bold' : 'hover:text-amber-200'}`}
101
+ >
102
+ Chat
103
+ </button>
104
+ </div>
105
+ <button className="md:hidden text-white" onClick={() => document.getElementById('mobile-menu').classList.toggle('hidden')}>
106
+ <i data-feather="menu"></i>
107
+ </button>
108
+ </div>
109
+ <div id="mobile-menu" className="hidden md:hidden bg-green-700 px-4 py-2">
110
+ <button onClick={() => goToPage('home')} className="block w-full text-left text-white py-2">Home</button>
111
+ <button onClick={() => goToPage('support')} className="block w-full text-left text-white py-2">Support</button>
112
+ <button onClick={() => goToPage('chat')} className="block w-full text-left text-white py-2">Chat</button>
113
+ </div>
114
+ </nav>
115
+ );
116
+ }
117
+
118
+ // HomePage Component
119
+ function HomePage({ goToPage }) {
120
+ useEffect(() => {
121
+ gsap.from(".hero-title", {
122
+ opacity: 0,
123
+ y: 50,
124
+ duration: 1,
125
+ ease: "power3.out"
126
+ });
127
+ gsap.from(".hero-image", {
128
+ opacity: 0,
129
+ x: 100,
130
+ duration: 1,
131
+ delay: 0.3,
132
+ ease: "power3.out"
133
+ });
134
+ gsap.from(".feature-card", {
135
+ opacity: 0,
136
+ y: 30,
137
+ duration: 0.8,
138
+ stagger: 0.2,
139
+ delay: 0.5,
140
+ ease: "back.out"
141
+ });
142
+
143
+ feather.replace();
144
+ }, []);
145
+
146
+ return (
147
+ <div className="pt-20">
148
+ {/* Hero Section */}
149
+ <section className="container mx-auto px-4 py-16 md:py-24 flex flex-col md:flex-row items-center">
150
+ <div className="md:w-1/2 hero-title">
151
+ <h1 className="text-4xl md:text-5xl font-bold text-green-800 mb-4">
152
+ Your Personal <span className="text-amber-500">Health Guardian</span>
153
+ </h1>
154
+ <p className="text-lg text-gray-700 mb-8">
155
+ AI-powered health companion providing 24/7 medical guidance, symptom checking, and wellness support.
156
+ </p>
157
+ <div className="flex space-x-4">
158
+ <button
159
+ onClick={() => goToPage('chat')}
160
+ className="btn-grow bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transition-all"
161
+ >
162
+ Request Help
163
+ </button>
164
+ <button
165
+ onClick={() => goToPage('support')}
166
+ className="btn-grow bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transition-all"
167
+ >
168
+ Learn More
169
+ </button>
170
+ </div>
171
+ </div>
172
+ <div className="md:w-1/2 mt-10 md:mt-0 hero-image">
173
+ <img
174
+ src="http://static.photos/medical/1024x576/7"
175
+ alt="Doctor using digital tablet"
176
+ className="rounded-xl shadow-2xl floating w-full max-w-md mx-auto"
177
+ />
178
+ </div>
179
+ </section>
180
+
181
+ {/* Features Section */}
182
+ <section className="bg-green-600 text-white py-16">
183
+ <div className="container mx-auto px-4">
184
+ <h2 className="text-3xl font-bold text-center mb-12">Our Services</h2>
185
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
186
+ <div className="feature-card bg-white text-green-800 p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow">
187
+ <div className="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
188
+ <i data-feather="alert-triangle" className="text-amber-600 w-8 h-8"></i>
189
+ </div>
190
+ <h3 className="text-xl font-bold mb-2 text-center">Emergency Rescue</h3>
191
+ <p className="text-center">24/7 emergency vehicle assistance for rural areas when you're stranded.</p>
192
+ </div>
193
+ <div className="feature-card bg-white text-green-800 p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow">
194
+ <div className="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
195
+ <i data-feather="truck" className="text-amber-600 w-8 h-8"></i>
196
+ </div>
197
+ <h3 className="text-xl font-bold mb-2 text-center">Transport Services</h3>
198
+ <p className="text-center">Reliable rides for medical appointments, supplies, and essential travel.</p>
199
+ </div>
200
+ <div className="feature-card bg-white text-green-800 p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow">
201
+ <div className="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
202
+ <i data-feather="users" className="text-amber-600 w-8 h-8"></i>
203
+ </div>
204
+ <h3 className="text-xl font-bold mb-2 text-center">Community Network</h3>
205
+ <p className="text-center">Connect with local volunteers and services dedicated to helping rural residents.</p>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </section>
210
+
211
+ {/* Testimonials */}
212
+ <section className="py-16 container mx-auto px-4">
213
+ <h2 className="text-3xl font-bold text-green-800 text-center mb-12">What Our Users Say</h2>
214
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
215
+ <div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow">
216
+ <div className="flex items-center mb-4">
217
+ <img src="http://static.photos/people/200x200/1" alt="User" className="w-12 h-12 rounded-full mr-4"/>
218
+ <div>
219
+ <h4 className="font-bold">Sarah Johnson</h4>
220
+ <p className="text-sm text-gray-500">Diabetes Patient</p>
221
+ </div>
222
+ </div>
223
+ <p className="text-gray-700 italic">"The AI symptom checker accurately identified my condition before my doctor did! Incredible technology."</p>
224
+ </div>
225
+ <div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-shadow">
226
+ <div className="flex items-center mb-4">
227
+ <img src="http://static.photos/people/200x200/2" alt="User" className="w-12 h-12 rounded-full mr-4"/>
228
+ <div>
229
+ <h4 className="font-bold">Robert Chen</h4>
230
+ <p className="text-sm text-gray-500">Senior Citizen</p>
231
+ </div>
232
+ </div>
233
+ <p className="text-gray-700 italic">"At 3AM when I had chest pain, the AI guided me through critical first aid until help arrived."</p>
234
+ </div>
235
+ </div>
236
+ </section>
237
+ </div>
238
+ );
239
+ }
240
+
241
+ // Support Page
242
+ function SupportPage({ goToPage }) {
243
+ const [activeTab, setActiveTab] = useState('faq');
244
+ const [healthTopics, setHealthTopics] = useState([]);
245
+
246
+ useEffect(() => {
247
+ gsap.from(".support-content", {
248
+ opacity: 0,
249
+ y: 30,
250
+ duration: 0.8,
251
+ ease: "power3.out"
252
+ });
253
+
254
+ // Simulate fetching health topics from API
255
+ const topics = [
256
+ "Diabetes Management",
257
+ "Heart Health",
258
+ "Mental Wellness",
259
+ "Pediatric Care",
260
+ "Senior Health",
261
+ "Nutrition Guides",
262
+ "Fitness Plans"
263
+ ];
264
+ setHealthTopics(topics);
265
+
266
+ feather.replace();
267
+ }, []);
268
+
269
+ const faqs = [
270
+ {
271
+ question: "Is the AI doctor a replacement for real doctors?",
272
+ answer: "No, our AI is designed to provide information and guidance but should not replace professional medical advice, diagnosis or treatment."
273
+ },
274
+ {
275
+ question: "How accurate is the symptom checker?",
276
+ answer: "Our AI analyzes symptoms against a database of thousands of conditions with 92% accuracy, but always consult a doctor for definitive diagnosis."
277
+ },
278
+ {
279
+ question: "Is my health data secure?",
280
+ answer: "Yes, we use HIPAA-compliant encryption and never share your data without consent."
281
+ }
282
+ ];
283
+ const contactMethods = [
284
+ {
285
+ icon: "phone",
286
+ title: "Emergency Hotline",
287
+ detail: "1-800-FARM-RES",
288
+ action: "Call now"
289
+ },
290
+ {
291
+ icon: "mail",
292
+ title: "General Inquiries",
293
+ detail: "help@farmrescue.org",
294
+ action: "Email us"
295
+ },
296
+ {
297
+ icon: "map-pin",
298
+ title: "Headquarters",
299
+ detail: "123 Rural Route, Farmington",
300
+ action: "Get directions"
301
+ }
302
+ ];
303
+
304
+ return (
305
+ <div className="pt-24 pb-16 container mx-auto px-4">
306
+ <div className="text-center mb-12">
307
+ <h1 className="text-4xl font-bold text-green-800 mb-4">Support Center</h1>
308
+ <p className="text-lg text-gray-600">We're here to help with any questions or issues</p>
309
+ </div>
310
+
311
+ <div className="flex flex-wrap border-b border-gray-200 mb-8">
312
+ <button
313
+ onClick={() => setActiveTab('faq')}
314
+ className={`px-6 py-3 font-medium ${activeTab === 'faq' ? 'text-amber-600 border-b-2 border-amber-600' : 'text-gray-500 hover:text-green-700'}`}
315
+ >
316
+ FAQs
317
+ </button>
318
+ <button
319
+ onClick={() => setActiveTab('contact')}
320
+ className={`px-6 py-3 font-medium ${activeTab === 'contact' ? 'text-amber-600 border-b-2 border-amber-600' : 'text-gray-500 hover:text-green-700'}`}
321
+ >
322
+ Contact
323
+ </button>
324
+ <button
325
+ onClick={() => setActiveTab('resources')}
326
+ className={`px-6 py-3 font-medium ${activeTab === 'resources' ? 'text-amber-600 border-b-2 border-amber-600' : 'text-gray-500 hover:text-green-700'}`}
327
+ >
328
+ Resources
329
+ </button>
330
+ </div>
331
+
332
+ <div className="support-content">
333
+ {activeTab === 'faq' && (
334
+ <div className="space-y-6">
335
+ {faqs.map((faq, index) => (
336
+ <div key={index} className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
337
+ <h3 className="text-xl font-bold text-green-700 mb-2">{faq.question}</h3>
338
+ <p className="text-gray-600">{faq.answer}</p>
339
+ </div>
340
+ ))}
341
+ </div>
342
+ )}
343
+
344
+ {activeTab === 'contact' && (
345
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
346
+ {contactMethods.map((method, index) => (
347
+ <div key={index} className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow text-center">
348
+ <div className="bg-amber-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
349
+ <i data-feather={method.icon} className="text-amber-600 w-6 h-6"></i>
350
+ </div>
351
+ <h3 className="text-xl font-bold text-green-700 mb-1">{method.title}</h3>
352
+ <p className="text-gray-600 mb-4">{method.detail}</p>
353
+ <button className="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-full transition-all">
354
+ {method.action}
355
+ </button>
356
+ </div>
357
+ ))}
358
+ </div>
359
+ )}
360
+
361
+ {activeTab === 'resources' && (
362
+ <div className="bg-white p-6 rounded-xl shadow-md">
363
+ <h3 className="text-xl font-bold text-green-700 mb-4">Helpful Resources</h3>
364
+ <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
365
+ <a href="#" className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-green-50 transition-colors">
366
+ <i data-feather="download" className="text-green-600 mr-3"></i>
367
+ <span>Download Health Journal (PDF)</span>
368
+ </a>
369
+ <a href="#" className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-green-50 transition-colors">
370
+ <i data-feather="map" className="text-green-600 mr-3"></i>
371
+ <span>Find Local Doctors</span>
372
+ </a>
373
+ <div className="p-3 border border-gray-200 rounded-lg">
374
+ <h4 className="font-medium text-green-700 mb-2">Health Topics</h4>
375
+ <div className="flex flex-wrap gap-2">
376
+ {healthTopics.map((topic, index) => (
377
+ <span key={index} className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
378
+ {topic}
379
+ </span>
380
+ ))}
381
+ </div>
382
+ </div>
383
+ <a href="#" className="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-green-50 transition-colors">
384
+ <i data-feather="film" className="text-green-600 mr-3"></i>
385
+ <span>Wellness Videos</span>
386
+ </a>
387
+ </div>
388
+ </div>
389
+ )}
390
+ </div>
391
+ </div>
392
+ );
393
+ }
394
+
395
+ // Chat Page
396
+ function ChatPage({ goToPage }) {
397
+ const [messages, setMessages] = useState([
398
+ { id: 1, text: "Hello! I'm Dr. AI, your personal health assistant. What health concerns can I help with today?", sender: 'bot' }
399
+ ]);
400
+ const [newMessage, setNewMessage] = useState('');
401
+ const [isTyping, setIsTyping] = useState(false);
402
+
403
+ useEffect(() => {
404
+ // Initialize animation for chat bubbles
405
+ gsap.from(".message", {
406
+ opacity: 0,
407
+ y: 20,
408
+ duration: 0.5,
409
+ stagger: 0.1,
410
+ ease: "power2.out"
411
+ });
412
+
413
+ // Initialize Vanta.js background
414
+ VANTA.GLOBE({
415
+ el: "#chat-background",
416
+ mouseControls: true,
417
+ touchControls: true,
418
+ gyroControls: false,
419
+ minHeight: 200.00,
420
+ minWidth: 200.00,
421
+ scale: 1.00,
422
+ scaleMobile: 1.00,
423
+ color: 0x3b82f6,
424
+ backgroundColor: 0xf0fdf4,
425
+ size: 0.8
426
+ });
427
+
428
+ feather.replace();
429
+ }, []);
430
+
431
+ const handleSendMessage = () => {
432
+ if (!newMessage.trim()) return;
433
+
434
+ // Add user message
435
+ const userMsg = { id: messages.length + 1, text: newMessage, sender: 'user' };
436
+ setMessages([...messages, userMsg]);
437
+ setNewMessage('');
438
+ setIsTyping(true);
439
+ // Connect to OpenAI API (in real implementation would use backend)
440
+ setTimeout(() => {
441
+ const botResponses = [
442
+ "Based on your symptoms, I recommend checking your temperature and monitoring for fever. Would you like me to explain possible causes?",
443
+ "For immediate medical emergencies, please call 911. I can guide you through first aid while you wait for help.",
444
+ "I can analyze your symptoms against medical databases to suggest possible conditions. Would you like to proceed?",
445
+ "Would you like me to locate the nearest urgent care facility based on your location?",
446
+ "I've reviewed your health history and this seems consistent with seasonal allergies. Would you like treatment recommendations?"
447
+ ];
448
+ const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)];
449
+ const botMsg = { id: messages.length + 2, text: randomResponse, sender: 'bot' };
450
+ setMessages(prev => [...prev, botMsg]);
451
+ setIsTyping(false);
452
+ }, 1500);
453
+ };
454
+
455
+ return (
456
+ <div className="pt-20 min-h-screen">
457
+ <div id="chat-background" className="fixed inset-0 -z-10"></div>
458
+ <div className="container mx-auto px-4 py-8">
459
+ <div className="max-w-3xl mx-auto bg-white bg-opacity-90 rounded-xl shadow-xl overflow-hidden">
460
+ {/* Chat Header */}
461
+ <div className="bg-green-600 text-white p-4 flex items-center">
462
+ <div className="w-10 h-10 rounded-full bg-amber-300 flex items-center justify-center mr-3">
463
+ <i data-feather="activity" className="text-green-800"></i>
464
+ </div>
465
+ <div>
466
+ <h2 className="font-bold">Dr. AI - Health Assistant</h2>
467
+ <p className="text-xs opacity-80">
468
+ {isTyping ? 'Typing...' : 'Online'}
469
+ </p>
470
+ </div>
471
+ <button
472
+ onClick={() => goToPage('home')}
473
+ className="ml-auto bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full p-2 transition-all"
474
+ >
475
+ <i data-feather="x"></i>
476
+ </button>
477
+ </div>
478
+
479
+ {/* Chat Messages */}
480
+ <div className="p-4 h-96 overflow-y-auto">
481
+ <div className="space-y-3">
482
+ {messages.map(msg => (
483
+ <div
484
+ key={msg.id}
485
+ className={`message flex ${msg.sender === 'user' ? 'justify-end' : 'justify-start'}`}
486
+ >
487
+ <div
488
+ className={`max-w-xs md:max-w-md rounded-lg p-3 ${msg.sender === 'user' ? 'bg-amber-100 text-gray-800 rounded-br-none' : 'bg-green-100 text-gray-800 rounded-bl-none'}`}
489
+ >
490
+ <p>{msg.text}</p>
491
+ </div>
492
+ </div>
493
+ ))}
494
+ {isTyping && (
495
+ <div className="flex justify-start">
496
+ <div className="bg-green-100 text-gray-800 rounded-lg rounded-bl-none p-3">
497
+ <div className="flex space-x-1">
498
+ <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
499
+ <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
500
+ <div className="w-2 h-2 bg-gray-500 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ )}
505
+ </div>
506
+ </div>
507
+
508
+ {/* Chat Input */}
509
+ <div className="border-t border-gray-200 p-4 bg-white">
510
+ <div className="flex">
511
+ <input
512
+ type="text"
513
+ value={newMessage}
514
+ onChange={(e) => setNewMessage(e.target.value)}
515
+ onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
516
+ placeholder="Type your message here..."
517
+ className="flex-1 border border-gray-300 rounded-l-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-amber-500"
518
+ />
519
+ <button
520
+ onClick={handleSendMessage}
521
+ className="bg-amber-500 hover:bg-amber-600 text-white px-4 rounded-r-full transition-colors"
522
+ >
523
+ <i data-feather="send"></i>
524
+ </button>
525
+ </div>
526
+ <div className="mt-2 flex justify-start space-x-2">
527
+ <button className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
528
+ Symptoms
529
+ </button>
530
+ <button className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
531
+ Medications
532
+ </button>
533
+ <button className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
534
+ Wellness
535
+ </button>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-3xl mx-auto">
541
+ <button
542
+ className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg"
543
+ onClick={() => {
544
+ setNewMessage("I'm experiencing headaches and dizziness. What could this be?");
545
+ document.querySelector('input').focus();
546
+ }}
547
+ >
548
+ <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-2">
549
+ <i data-feather="alert-triangle" className="text-red-500"></i>
550
+ </div>
551
+ <span className="text-sm font-medium">Symptoms</span>
552
+ </button>
553
+ <button
554
+ className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg"
555
+ onClick={() => {
556
+ setNewMessage("What are the side effects of my current medications?");
557
+ document.querySelector('input').focus();
558
+ }}
559
+ >
560
+ <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-2">
561
+ <i data-feather="package" className="text-blue-500"></i>
562
+ </div>
563
+ <span className="text-sm font-medium">Medications</span>
564
+ </button>
565
+ <button
566
+ className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg"
567
+ onClick={() => {
568
+ setNewMessage("Suggest a wellness plan for better sleep.");
569
+ document.querySelector('input').focus();
570
+ }}
571
+ >
572
+ <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-2">
573
+ <i data-feather="moon" className="text-purple-500"></i>
574
+ </div>
575
+ <span className="text-sm font-medium">Sleep Help</span>
576
+ </button>
577
+ <button
578
+ className="bg-white bg-opacity-90 hover:bg-opacity-100 rounded-lg p-4 shadow-md flex flex-col items-center transition-all hover:shadow-lg"
579
+ onClick={() => goToPage('support')}
580
+ >
581
+ <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-2">
582
+ <i data-feather="help-circle" className="text-green-500"></i>
583
+ </div>
584
+ <span className="text-sm font-medium">Help Center</span>
585
+ </button>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ );
590
+ }
591
+
592
+ // Footer Component
593
+ function Footer({ goToPage }) {
594
+ return (
595
+ <footer className="bg-green-800 text-white py-12 mt-16">
596
+ <div className="container mx-auto px-4">
597
+ <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
598
+ <div>
599
+ <h3 className="text-xl font-bold mb-4 flex items-center">
600
+ <i data-feather="heart" className="mr-2 text-amber-300"></i>
601
+ HealthHarbor Guardians
602
+ </h3>
603
+ <p className="mb-4">Your AI-powered health companion for medical guidance and wellness support.</p>
604
+ <div className="flex space-x-4">
605
+ <a href="#" className="hover:text-amber-300 transition-colors">
606
+ <i data-feather="facebook"></i>
607
+ </a>
608
+ <a href="#" className="hover:text-amber-300 transition-colors">
609
+ <i data-feather="twitter"></i>
610
+ </a>
611
+ <a href="#" className="hover:text-amber-300 transition-colors">
612
+ <i data-feather="instagram"></i>
613
+ </a>
614
+ </div>
615
+ </div>
616
+ <div>
617
+ <h4 className="font-bold mb-4">Services</h4>
618
+ <ul className="space-y-2">
619
+ <li><a href="#" className="hover:text-amber-300 transition-colors">Symptom Checker</a></li>
620
+ <li><a href="#" className="hover:text-amber-300 transition-colors">Medication Tracker</a></li>
621
+ <li><a href="#" className="hover:text-amber-300 transition-colors">Wellness Plans</a></li>
622
+ <li><a href="#" className="hover:text-amber-300 transition-colors">Doctor Connect</a></li>
623
+ </ul>
624
+ </div>
625
+ <div>
626
+ <h4 className="font-bold mb-4">Company</h4>
627
+ <ul className="space-y-2">
628
+ <li><button onClick={() => goToPage('home')} className="hover:text-amber-300 transition-colors text-left">About Us</button></li>
629
+ <li><button onClick={() => goToPage('support')} className="hover:text-amber-300 transition-colors text-left">Support</button></li>
630
+ <li><a href="#" className="hover:text-amber-300 transition-colors">Careers</a></li>
631
+ <li><a href="#" className="hover:text-amber-300 transition-colors">Blog</a></li>
632
+ </ul>
633
+ </div>
634
+ <div>
635
+ <h4 className="font-bold mb-4">Contact</h4>
636
+ <div className="space-y-2">
637
+ <div className="flex items-start">
638
+ <i data-feather="map-pin" className="mr-2 mt-1 flex-shrink-0"></i>
639
+ <span>123 Wellness Way, Healthville</span>
640
+ </div>
641
+ <div className="flex items-center">
642
+ <i data-feather="phone" className="mr-2"></i>
643
+ <span>1-800-HEALTH-AI</span>
644
+ </div>
645
+ <div className="flex items-center">
646
+ <i data-feather="mail" className="mr-2"></i>
647
+ <span>care@healthharbor.ai</span>
648
+ </div>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ <div className="border-t border-green-700 mt-8 pt-8 text-center text-sm">
653
+ <p>&copy; {new Date().getFullYear()} HealthHarbor Guardians. All rights reserved. Not a substitute for professional medical advice.</p>
654
+ </div>
655
+ </div>
656
+ </footer>
657
+ );
658
+ }
659
+
660
+ // Render the app
661
+ ReactDOM.render(<App />, document.getElementById('root'));
662
+ </script>
663
+ <script>feather.replace();</script>
664
+ </body>
665
  </html>