Hugging Face's logo

Spaces:
SameerArz
/
ai-health-companion
Running

App Files Community
SameerArz commited on
Commit
e8f3edc
·
verified ·
1 Parent(s): 9ce30b4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1251 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Health Companion
3
- emoji: 🏃
4
- colorFrom: indigo
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: ai-health-companion
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: pink
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,1251 @@
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>AI Health Companion</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f9fa;
15
+ height: 100vh;
16
+ overflow: hidden;
17
+ }
18
+
19
+ .app-container {
20
+ max-width: 414px;
21
+ max-height: 896px;
22
+ height: 100%;
23
+ margin: 0 auto;
24
+ position: relative;
25
+ overflow: hidden;
26
+ box-shadow: 0 0 25px rgba(0,0,0,0.1);
27
+ border-radius: 30px;
28
+ background: white;
29
+ }
30
+
31
+ .screen {
32
+ display: none;
33
+ height: calc(100% - 60px);
34
+ overflow-y: auto;
35
+ padding-bottom: 20px;
36
+ }
37
+
38
+ .screen.active {
39
+ display: block;
40
+ }
41
+
42
+ .message-bubble {
43
+ max-width: 80%;
44
+ border-radius: 18px;
45
+ padding: 12px 16px;
46
+ margin-bottom: 10px;
47
+ position: relative;
48
+ word-wrap: break-word;
49
+ }
50
+
51
+ .user-message {
52
+ background-color: #3b82f6;
53
+ color: white;
54
+ margin-left: auto;
55
+ border-bottom-right-radius: 4px;
56
+ }
57
+
58
+ .ai-message {
59
+ background-color: #e5e7eb;
60
+ color: #111827;
61
+ margin-right: auto;
62
+ border-bottom-left-radius: 4px;
63
+ }
64
+
65
+ .typing-indicator {
66
+ display: flex;
67
+ padding: 12px 16px;
68
+ }
69
+
70
+ .typing-dot {
71
+ width: 8px;
72
+ height: 8px;
73
+ background-color: #9ca3af;
74
+ border-radius: 50%;
75
+ margin: 0 2px;
76
+ animation: typing 1.5s infinite ease-in-out;
77
+ }
78
+
79
+ .typing-dot:nth-child(1) {
80
+ animation-delay: 0s;
81
+ }
82
+
83
+ .typing-dot:nth-child(2) {
84
+ animation-delay: 0.3s;
85
+ }
86
+
87
+ .typing-dot:nth-child(3) {
88
+ animation-delay: 0.6s;
89
+ }
90
+
91
+ @keyframes typing {
92
+ 0%, 60%, 100% {
93
+ transform: translateY(0);
94
+ }
95
+ 30% {
96
+ transform: translateY(-5px);
97
+ }
98
+ }
99
+
100
+ .slide-in {
101
+ animation: slideIn 0.3s forwards;
102
+ }
103
+
104
+ @keyframes slideIn {
105
+ from {
106
+ transform: translateY(20px);
107
+ opacity: 0;
108
+ }
109
+ to {
110
+ transform: translateY(0);
111
+ opacity: 1;
112
+ }
113
+ }
114
+
115
+ .pulse {
116
+ animation: pulse 2s infinite;
117
+ }
118
+
119
+ @keyframes pulse {
120
+ 0% {
121
+ transform: scale(1);
122
+ }
123
+ 50% {
124
+ transform: scale(1.05);
125
+ }
126
+ 100% {
127
+ transform: scale(1);
128
+ }
129
+ }
130
+
131
+ .medication-card {
132
+ transition: all 0.3s ease;
133
+ }
134
+
135
+ .medication-card:hover {
136
+ transform: translateY(-2px);
137
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
138
+ }
139
+
140
+ .doctor-card {
141
+ transition: all 0.3s ease;
142
+ }
143
+
144
+ .doctor-card:hover {
145
+ transform: translateY(-2px);
146
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
147
+ }
148
+
149
+ .appointment-slot {
150
+ transition: all 0.2s ease;
151
+ }
152
+
153
+ .appointment-slot:hover {
154
+ background-color: #3b82f6;
155
+ color: white;
156
+ }
157
+
158
+ .progress-ring__circle {
159
+ transition: stroke-dashoffset 0.35s;
160
+ transform: rotate(-90deg);
161
+ transform-origin: 50% 50%;
162
+ }
163
+
164
+ .fade-in {
165
+ animation: fadeIn 0.5s ease-in;
166
+ }
167
+
168
+ @keyframes fadeIn {
169
+ from { opacity: 0; }
170
+ to { opacity: 1; }
171
+ }
172
+ </style>
173
+ </head>
174
+ <body class="bg-gray-100 flex items-center justify-center p-4">
175
+ <div class="app-container bg-white relative">
176
+ <!-- Status Bar -->
177
+ <div class="bg-blue-500 text-white px-4 py-2 flex justify-between items-center">
178
+ <span class="text-sm">12:30</span>
179
+ <div class="flex space-x-2">
180
+ <i class="fas fa-signal text-xs"></i>
181
+ <i class="fas fa-wifi text-xs"></i>
182
+ <i class="fas fa-battery-full text-xs"></i>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Screens -->
187
+ <div class="screens-container">
188
+ <!-- Onboarding Screen -->
189
+ <div id="onboarding" class="screen active">
190
+ <div class="flex flex-col items-center justify-center h-full px-6">
191
+ <div class="mb-8 text-center">
192
+ <div class="w-32 h-32 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6 pulse">
193
+ <i class="fas fa-heartbeat text-blue-500 text-5xl"></i>
194
+ </div>
195
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">AI Health Companion</h1>
196
+ <p class="text-gray-600">Your personalized health assistant powered by AI</p>
197
+ </div>
198
+
199
+ <div class="w-full mb-8">
200
+ <div class="flex items-center mb-4 p-3 bg-blue-50 rounded-lg">
201
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
202
+ <i class="fas fa-stethoscope text-blue-500"></i>
203
+ </div>
204
+ <div>
205
+ <h3 class="font-medium text-gray-800">Symptom Checker</h3>
206
+ <p class="text-sm text-gray-600">Get instant health insights</p>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="flex items-center mb-4 p-3 bg-purple-50 rounded-lg">
211
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
212
+ <i class="fas fa-calendar-check text-purple-500"></i>
213
+ </div>
214
+ <div>
215
+ <h3 class="font-medium text-gray-800">Appointment Booking</h3>
216
+ <p class="text-sm text-gray-600">Schedule with doctors easily</p>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="flex items-center p-3 bg-green-50 rounded-lg">
221
+ <div class="bg-green-100 p-2 rounded-full mr-3">
222
+ <i class="fas fa-pills text-green-500"></i>
223
+ </div>
224
+ <div>
225
+ <h3 class="font-medium text-gray-800">Medication Tracker</h3>
226
+ <p class="text-sm text-gray-600">Never miss a dose again</p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <button id="getStartedBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-full transition duration-300 mb-4">
232
+ Get Started
233
+ </button>
234
+
235
+ <button id="signInGoogle" class="w-full border border-gray-300 hover:bg-gray-50 font-medium py-3 px-4 rounded-full transition duration-300 flex items-center justify-center">
236
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" class="w-5 h-5 mr-2" alt="Google logo">
237
+ Continue with Google
238
+ </button>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Sign Up Screen -->
243
+ <div id="signup" class="screen">
244
+ <div class="px-6 pt-8">
245
+ <button id="backToOnboarding" class="mb-6 text-blue-500">
246
+ <i class="fas fa-arrow-left mr-2"></i> Back
247
+ </button>
248
+
249
+ <h1 class="text-2xl font-bold text-gray-800 mb-2">Create Account</h1>
250
+ <p class="text-gray-600 mb-8">Join our health community</p>
251
+
252
+ <div class="mb-4">
253
+ <label for="name" class="block text-gray-700 text-sm font-medium mb-1">Full Name</label>
254
+ <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
255
+ </div>
256
+
257
+ <div class="mb-4">
258
+ <label for="email" class="block text-gray-700 text-sm font-medium mb-1">Email</label>
259
+ <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
260
+ </div>
261
+
262
+ <div class="mb-6">
263
+ <label for="password" class="block text-gray-700 text-sm font-medium mb-1">Password</label>
264
+ <input type="password" id="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
265
+ </div>
266
+
267
+ <button id="signUpBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-full transition duration-300 mb-4">
268
+ Create Account
269
+ </button>
270
+
271
+ <div class="text-center text-sm text-gray-600">
272
+ Already have an account? <button id="goToLogin" class="text-blue-500 font-medium">Log in</button>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Login Screen -->
278
+ <div id="login" class="screen">
279
+ <div class="px-6 pt-8">
280
+ <button id="backToOnboardingFromLogin" class="mb-6 text-blue-500">
281
+ <i class="fas fa-arrow-left mr-2"></i> Back
282
+ </button>
283
+
284
+ <h1 class="text-2xl font-bold text-gray-800 mb-2">Welcome Back</h1>
285
+ <p class="text-gray-600 mb-8">Log in to your account</p>
286
+
287
+ <div class="mb-4">
288
+ <label for="loginEmail" class="block text-gray-700 text-sm font-medium mb-1">Email</label>
289
+ <input type="email" id="loginEmail" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
290
+ </div>
291
+
292
+ <div class="mb-6">
293
+ <label for="loginPassword" class="block text-gray-700 text-sm font-medium mb-1">Password</label>
294
+ <input type="password" id="loginPassword" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
295
+ </div>
296
+
297
+ <button id="loginBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-full transition duration-300 mb-4">
298
+ Log In
299
+ </button>
300
+
301
+ <div class="text-center text-sm text-gray-600 mb-4">
302
+ Forgot password? <button id="forgotPassword" class="text-blue-500 font-medium">Reset</button>
303
+ </div>
304
+
305
+ <div class="text-center text-sm text-gray-600">
306
+ Don't have an account? <button id="goToSignup" class="text-blue-500 font-medium">Sign up</button>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Main App Screen -->
312
+ <div id="main" class="screen">
313
+ <!-- Header -->
314
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
315
+ <div>
316
+ <h2 class="text-xl font-bold text-gray-800">Hello, <span id="userName">User</span></h2>
317
+ <p class="text-sm text-gray-600">How can I help you today?</p>
318
+ </div>
319
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
320
+ <i class="fas fa-user text-blue-500"></i>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Tab Navigation -->
325
+ <div class="flex border-b border-gray-200">
326
+ <button id="chatTab" class="flex-1 py-3 text-center font-medium text-blue-500 border-b-2 border-blue-500">
327
+ <i class="fas fa-comment-medical mr-2"></i>Chat
328
+ </button>
329
+ <button id="healthTab" class="flex-1 py-3 text-center font-medium text-gray-500">
330
+ <i class="fas fa-heartbeat mr-2"></i>Health
331
+ </button>
332
+ <button id="appointmentsTab" class="flex-1 py-3 text-center font-medium text-gray-500">
333
+ <i class="fas fa-calendar mr-2"></i>Appointments
334
+ </button>
335
+ </div>
336
+
337
+ <!-- Tab Content -->
338
+ <div class="tab-content overflow-y-auto" style="height: calc(100% - 180px);">
339
+ <!-- Chat Tab -->
340
+ <div id="chatContent" class="p-4">
341
+ <div id="chatContainer" class="chat-messages">
342
+ <div class="ai-message message-bubble slide-in">
343
+ Hi there! I'm your AI Health Companion. How can I assist you with your health today?
344
+ </div>
345
+ <div class="ai-message message-bubble slide-in" style="animation-delay: 0.2s;">
346
+ You can ask me about symptoms, medications, or general health advice. I'm here to help!
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Health Tab -->
352
+ <div id="healthContent" class="p-4 hidden">
353
+ <div class="mb-6">
354
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Your Medications</h3>
355
+ <div id="medicationsList" class="space-y-3">
356
+ <!-- Medication cards will be added here -->
357
+ </div>
358
+ <button id="addMedicationBtn" class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-full transition duration-300">
359
+ <i class="fas fa-plus mr-2"></i> Add Medication
360
+ </button>
361
+ </div>
362
+
363
+ <div>
364
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Health Stats</h3>
365
+ <div class="grid grid-cols-2 gap-4">
366
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
367
+ <div class="flex items-center justify-between">
368
+ <div>
369
+ <p class="text-sm text-gray-500">Steps Today</p>
370
+ <p class="text-xl font-bold">4,892</p>
371
+ </div>
372
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
373
+ <i class="fas fa-walking text-blue-500"></i>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
378
+ <div class="flex items-center justify-between">
379
+ <div>
380
+ <p class="text-sm text-gray-500">Heart Rate</p>
381
+ <p class="text-xl font-bold">72 <span class="text-sm">bpm</span></p>
382
+ </div>
383
+ <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
384
+ <i class="fas fa-heart text-red-500"></i>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
389
+ <div class="flex items-center justify-between">
390
+ <div>
391
+ <p class="text-sm text-gray-500">Sleep</p>
392
+ <p class="text-xl font-bold">7.5 <span class="text-sm">hrs</span></p>
393
+ </div>
394
+ <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
395
+ <i class="fas fa-moon text-purple-500"></i>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100">
400
+ <div class="flex items-center justify-between">
401
+ <div>
402
+ <p class="text-sm text-gray-500">Water</p>
403
+ <p class="text-xl font-bold">5 <span class="text-sm">glasses</span></p>
404
+ </div>
405
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
406
+ <i class="fas fa-tint text-blue-500"></i>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Appointments Tab -->
415
+ <div id="appointmentsContent" class="p-4 hidden">
416
+ <div class="mb-6">
417
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Upcoming Appointments</h3>
418
+ <div id="upcomingAppointments" class="space-y-3">
419
+ <!-- Appointment cards will be added here -->
420
+ </div>
421
+ </div>
422
+
423
+ <div>
424
+ <h3 class="text-lg font-semibold text-gray-800 mb-3">Available Doctors</h3>
425
+ <div id="doctorsList" class="space-y-3">
426
+ <!-- Doctor cards will be added here -->
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <!-- Input Area (for chat tab) -->
433
+ <div id="chatInputArea" class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3">
434
+ <div class="flex items-center">
435
+ <input type="text" id="messageInput" placeholder="Type your message..." class="flex-1 px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
436
+ <button id="sendMessageBtn" class="ml-2 w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center">
437
+ <i class="fas fa-paper-plane"></i>
438
+ </button>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Add Medication Modal -->
443
+ <div id="addMedicationModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
444
+ <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
445
+ <div class="flex justify-between items-center mb-4">
446
+ <h3 class="text-lg font-semibold">Add New Medication</h3>
447
+ <button id="closeMedicationModal" class="text-gray-500 hover:text-gray-700">
448
+ <i class="fas fa-times"></i>
449
+ </button>
450
+ </div>
451
+
452
+ <div class="space-y-4">
453
+ <div>
454
+ <label for="medName" class="block text-sm font-medium text-gray-700 mb-1">Medication Name</label>
455
+ <input type="text" id="medName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
456
+ </div>
457
+
458
+ <div>
459
+ <label for="medDosage" class="block text-sm font-medium text-gray-700 mb-1">Dosage</label>
460
+ <input type="text" id="medDosage" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
461
+ </div>
462
+
463
+ <div>
464
+ <label for="medFrequency" class="block text-sm font-medium text-gray-700 mb-1">Frequency</label>
465
+ <select id="medFrequency" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
466
+ <option value="daily">Daily</option>
467
+ <option value="weekly">Weekly</option>
468
+ <option value="monthly">Monthly</option>
469
+ <option value="as_needed">As Needed</option>
470
+ </select>
471
+ </div>
472
+
473
+ <div>
474
+ <label for="medTime" class="block text-sm font-medium text-gray-700 mb-1">Time of Day</label>
475
+ <select id="medTime" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
476
+ <option value="morning">Morning</option>
477
+ <option value="afternoon">Afternoon</option>
478
+ <option value="evening">Evening</option>
479
+ <option value="bedtime">Bedtime</option>
480
+ </select>
481
+ </div>
482
+
483
+ <div>
484
+ <label for="medStartDate" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
485
+ <input type="date" id="medStartDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
486
+ </div>
487
+ </div>
488
+
489
+ <div class="mt-6 flex justify-end space-x-3">
490
+ <button id="cancelAddMedication" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
491
+ Cancel
492
+ </button>
493
+ <button id="saveMedication" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
494
+ Save
495
+ </button>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <!-- Book Appointment Modal -->
501
+ <div id="bookAppointmentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
502
+ <div class="bg-white rounded-lg p-6 w-full max-w-md mx-4">
503
+ <div class="flex justify-between items-center mb-4">
504
+ <h3 class="text-lg font-semibold">Book Appointment</h3>
505
+ <button id="closeAppointmentModal" class="text-gray-500 hover:text-gray-700">
506
+ <i class="fas fa-times"></i>
507
+ </button>
508
+ </div>
509
+
510
+ <div class="space-y-4">
511
+ <div>
512
+ <label class="block text-sm font-medium text-gray-700 mb-1">Doctor</label>
513
+ <div class="flex items-center p-3 bg-gray-50 rounded-lg">
514
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
515
+ <i class="fas fa-user-md text-blue-500"></i>
516
+ </div>
517
+ <div>
518
+ <h4 id="selectedDoctorName" class="font-medium">Dr. Sarah Johnson</h4>
519
+ <p id="selectedDoctorSpecialty" class="text-sm text-gray-600">Cardiologist</p>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <div>
525
+ <label for="appointmentDate" class="block text-sm font-medium text-gray-700 mb-1">Date</label>
526
+ <input type="date" id="appointmentDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
527
+ </div>
528
+
529
+ <div>
530
+ <label class="block text-sm font-medium text-gray-700 mb-1">Available Time Slots</label>
531
+ <div id="timeSlots" class="grid grid-cols-3 gap-2">
532
+ <!-- Time slots will be added here -->
533
+ </div>
534
+ </div>
535
+
536
+ <div>
537
+ <label for="appointmentReason" class="block text-sm font-medium text-gray-700 mb-1">Reason for Visit</label>
538
+ <textarea id="appointmentReason" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="mt-6 flex justify-end space-x-3">
543
+ <button id="cancelBookAppointment" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
544
+ Cancel
545
+ </button>
546
+ <button id="confirmAppointment" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
547
+ Confirm
548
+ </button>
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Bottom Navigation -->
556
+ <div id="bottomNav" class="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-2 hidden">
557
+ <button id="navChat" class="flex flex-col items-center text-blue-500">
558
+ <i class="fas fa-comment-medical text-lg"></i>
559
+ <span class="text-xs mt-1">Chat</span>
560
+ </button>
561
+ <button id="navHealth" class="flex flex-col items-center text-gray-500">
562
+ <i class="fas fa-heartbeat text-lg"></i>
563
+ <span class="text-xs mt-1">Health</span>
564
+ </button>
565
+ <button id="navAppointments" class="flex flex-col items-center text-gray-500">
566
+ <i class="fas fa-calendar text-lg"></i>
567
+ <span class="text-xs mt-1">Appointments</span>
568
+ </button>
569
+ <button id="navProfile" class="flex flex-col items-center text-gray-500">
570
+ <i class="fas fa-user text-lg"></i>
571
+ <span class="text-xs mt-1">Profile</span>
572
+ </button>
573
+ </div>
574
+ </div>
575
+
576
+ <script>
577
+ // DOM Elements
578
+ const onboardingScreen = document.getElementById('onboarding');
579
+ const signupScreen = document.getElementById('signup');
580
+ const loginScreen = document.getElementById('login');
581
+ const mainScreen = document.getElementById('main');
582
+ const bottomNav = document.getElementById('bottomNav');
583
+
584
+ // Buttons
585
+ const getStartedBtn = document.getElementById('getStartedBtn');
586
+ const signInGoogle = document.getElementById('signInGoogle');
587
+ const backToOnboarding = document.getElementById('backToOnboarding');
588
+ const backToOnboardingFromLogin = document.getElementById('backToOnboardingFromLogin');
589
+ const signUpBtn = document.getElementById('signUpBtn');
590
+ const goToLogin = document.getElementById('goToLogin');
591
+ const loginBtn = document.getElementById('loginBtn');
592
+ const goToSignup = document.getElementById('goToSignup');
593
+ const forgotPassword = document.getElementById('forgotPassword');
594
+
595
+ // Chat elements
596
+ const messageInput = document.getElementById('messageInput');
597
+ const sendMessageBtn = document.getElementById('sendMessageBtn');
598
+ const chatContainer = document.getElementById('chatContainer');
599
+ const chatMessages = document.querySelector('.chat-messages');
600
+
601
+ // Tab elements
602
+ const chatTab = document.getElementById('chatTab');
603
+ const healthTab = document.getElementById('healthTab');
604
+ const appointmentsTab = document.getElementById('appointmentsTab');
605
+ const chatContent = document.getElementById('chatContent');
606
+ const healthContent = document.getElementById('healthContent');
607
+ const appointmentsContent = document.getElementById('appointmentsContent');
608
+ const chatInputArea = document.getElementById('chatInputArea');
609
+
610
+ // Navigation buttons
611
+ const navChat = document.getElementById('navChat');
612
+ const navHealth = document.getElementById('navHealth');
613
+ const navAppointments = document.getElementById('navAppointments');
614
+ const navProfile = document.getElementById('navProfile');
615
+
616
+ // Medication elements
617
+ const medicationsList = document.getElementById('medicationsList');
618
+ const addMedicationBtn = document.getElementById('addMedicationBtn');
619
+ const addMedicationModal = document.getElementById('addMedicationModal');
620
+ const closeMedicationModal = document.getElementById('closeMedicationModal');
621
+ const cancelAddMedication = document.getElementById('cancelAddMedication');
622
+ const saveMedication = document.getElementById('saveMedication');
623
+
624
+ // Appointment elements
625
+ const upcomingAppointments = document.getElementById('upcomingAppointments');
626
+ const doctorsList = document.getElementById('doctorsList');
627
+ const bookAppointmentModal = document.getElementById('bookAppointmentModal');
628
+ const closeAppointmentModal = document.getElementById('closeAppointmentModal');
629
+ const cancelBookAppointment = document.getElementById('cancelBookAppointment');
630
+ const confirmAppointment = document.getElementById('confirmAppointment');
631
+ const timeSlots = document.getElementById('timeSlots');
632
+
633
+ // Sample data
634
+ const sampleMedications = [
635
+ {
636
+ id: 1,
637
+ name: "Ibuprofen",
638
+ dosage: "200mg",
639
+ frequency: "daily",
640
+ time: "morning",
641
+ startDate: "2023-06-15",
642
+ adherence: 90
643
+ },
644
+ {
645
+ id: 2,
646
+ name: "Lisinopril",
647
+ dosage: "10mg",
648
+ frequency: "daily",
649
+ time: "evening",
650
+ startDate: "2023-05-20",
651
+ adherence: 85
652
+ },
653
+ {
654
+ id: 3,
655
+ name: "Vitamin D",
656
+ dosage: "1000 IU",
657
+ frequency: "daily",
658
+ time: "morning",
659
+ startDate: "2023-06-01",
660
+ adherence: 95
661
+ }
662
+ ];
663
+
664
+ const sampleDoctors = [
665
+ {
666
+ id: 1,
667
+ name: "Dr. Sarah Johnson",
668
+ specialty: "Cardiologist",
669
+ hospital: "City General Hospital",
670
+ rating: 4.8,
671
+ available: true
672
+ },
673
+ {
674
+ id: 2,
675
+ name: "Dr. Michael Chen",
676
+ specialty: "Neurologist",
677
+ hospital: "University Medical Center",
678
+ rating: 4.6,
679
+ available: true
680
+ },
681
+ {
682
+ id: 3,
683
+ name: "Dr. Emily Wilson",
684
+ specialty: "Dermatologist",
685
+ hospital: "Skin Care Clinic",
686
+ rating: 4.9,
687
+ available: false
688
+ }
689
+ ];
690
+
691
+ const sampleAppointments = [
692
+ {
693
+ id: 1,
694
+ doctor: "Dr. Sarah Johnson",
695
+ specialty: "Cardiologist",
696
+ date: "2023-07-15",
697
+ time: "10:30 AM",
698
+ reason: "Annual checkup"
699
+ },
700
+ {
701
+ id: 2,
702
+ doctor: "Dr. Michael Chen",
703
+ specialty: "Neurologist",
704
+ date: "2023-07-20",
705
+ time: "2:00 PM",
706
+ reason: "Follow-up consultation"
707
+ }
708
+ ];
709
+
710
+ // Current user data
711
+ let currentUser = {
712
+ name: "User",
713
+ email: "",
714
+ medications: [],
715
+ appointments: []
716
+ };
717
+
718
+ // Initialize the app
719
+ function initApp() {
720
+ // Load sample data
721
+ currentUser.medications = [...sampleMedications];
722
+ currentUser.appointments = [...sampleAppointments];
723
+
724
+ // Render medications
725
+ renderMedications();
726
+
727
+ // Render doctors
728
+ renderDoctors();
729
+
730
+ // Render appointments
731
+ renderAppointments();
732
+
733
+ // Set user name if available
734
+ const userName = localStorage.getItem('userName');
735
+ if (userName) {
736
+ document.getElementById('userName').textContent = userName;
737
+ currentUser.name = userName;
738
+ }
739
+ }
740
+
741
+ // Render medications list
742
+ function renderMedications() {
743
+ medicationsList.innerHTML = '';
744
+
745
+ if (currentUser.medications.length === 0) {
746
+ medicationsList.innerHTML = `
747
+ <div class="text-center py-6 text-gray-500">
748
+ <i class="fas fa-pills text-3xl mb-2"></i>
749
+ <p>No medications added yet</p>
750
+ </div>
751
+ `;
752
+ return;
753
+ }
754
+
755
+ currentUser.medications.forEach(med => {
756
+ const medCard = document.createElement('div');
757
+ medCard.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-100 medication-card';
758
+ medCard.innerHTML = `
759
+ <div class="flex justify-between items-start">
760
+ <div>
761
+ <h4 class="font-medium text-gray-800">${med.name}</h4>
762
+ <p class="text-sm text-gray-600">${med.dosage} • ${formatFrequency(med.frequency)} • ${formatTime(med.time)}</p>
763
+ <p class="text-xs text-gray-500 mt-1">Started on ${formatDate(med.startDate)}</p>
764
+ </div>
765
+ <div class="flex items-center">
766
+ <div class="relative w-10 h-10 mr-2">
767
+ <svg class="w-full h-full" viewBox="0 0 36 36">
768
+ <path
769
+ d="M18 2.0845
770
+ a 15.9155 15.9155 0 0 1 0 31.831
771
+ a 15.9155 15.9155 0 0 1 0 -31.831"
772
+ fill="none"
773
+ stroke="#e5e7eb"
774
+ stroke-width="3"
775
+ stroke-dasharray="${med.adherence}, 100"
776
+ />
777
+ </svg>
778
+ <div class="absolute inset-0 flex items-center justify-center text-xs font-medium">
779
+ ${med.adherence}%
780
+ </div>
781
+ </div>
782
+ <button class="text-gray-400 hover:text-gray-600" data-id="${med.id}">
783
+ <i class="fas fa-ellipsis-v"></i>
784
+ </button>
785
+ </div>
786
+ </div>
787
+ `;
788
+ medicationsList.appendChild(medCard);
789
+ });
790
+ }
791
+
792
+ // Render doctors list
793
+ function renderDoctors() {
794
+ doctorsList.innerHTML = '';
795
+
796
+ sampleDoctors.forEach(doctor => {
797
+ const doctorCard = document.createElement('div');
798
+ doctorCard.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-100 doctor-card';
799
+ doctorCard.innerHTML = `
800
+ <div class="flex justify-between items-start">
801
+ <div class="flex items-start">
802
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
803
+ <i class="fas fa-user-md text-blue-500"></i>
804
+ </div>
805
+ <div>
806
+ <h4 class="font-medium text-gray-800">${doctor.name}</h4>
807
+ <p class="text-sm text-gray-600">${doctor.specialty}</p>
808
+ <p class="text-xs text-gray-500 mt-1">${doctor.hospital}</p>
809
+ </div>
810
+ </div>
811
+ <div class="flex flex-col items-end">
812
+ <div class="flex items-center text-yellow-400 mb-1">
813
+ <i class="fas fa-star text-xs"></i>
814
+ <span class="text-xs ml-1 text-gray-700">${doctor.rating}</span>
815
+ </div>
816
+ <button class="text-xs px-3 py-1 rounded-full ${doctor.available ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}"
817
+ data-id="${doctor.id}" ${!doctor.available ? 'disabled' : ''}>
818
+ ${doctor.available ? 'Available' : 'Unavailable'}
819
+ </button>
820
+ </div>
821
+ </div>
822
+ `;
823
+ doctorsList.appendChild(doctorCard);
824
+
825
+ // Add click event to book appointment
826
+ if (doctor.available) {
827
+ const bookBtn = doctorCard.querySelector('button');
828
+ bookBtn.addEventListener('click', () => openBookAppointmentModal(doctor));
829
+ }
830
+ });
831
+ }
832
+
833
+ // Render appointments list
834
+ function renderAppointments() {
835
+ upcomingAppointments.innerHTML = '';
836
+
837
+ if (currentUser.appointments.length === 0) {
838
+ upcomingAppointments.innerHTML = `
839
+ <div class="text-center py-6 text-gray-500">
840
+ <i class="fas fa-calendar text-3xl mb-2"></i>
841
+ <p>No upcoming appointments</p>
842
+ </div>
843
+ `;
844
+ return;
845
+ }
846
+
847
+ currentUser.appointments.forEach(appt => {
848
+ const apptCard = document.createElement('div');
849
+ apptCard.className = 'bg-white p-4 rounded-lg shadow-sm border border-gray-100';
850
+ apptCard.innerHTML = `
851
+ <div class="flex justify-between items-start">
852
+ <div class="flex items-start">
853
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
854
+ <i class="fas fa-user-md text-blue-500"></i>
855
+ </div>
856
+ <div>
857
+ <h4 class="font-medium text-gray-800">${appt.doctor}</h4>
858
+ <p class="text-sm text-gray-600">${appt.specialty}</p>
859
+ <p class="text-xs text-gray-500 mt-1">${formatDate(appt.date)} at ${appt.time}</p>
860
+ </div>
861
+ </div>
862
+ <div class="text-xs px-3 py-1 bg-blue-100 text-blue-800 rounded-full">
863
+ ${appt.reason.substring(0, 15)}${appt.reason.length > 15 ? '...' : ''}
864
+ </div>
865
+ </div>
866
+ `;
867
+ upcomingAppointments.appendChild(apptCard);
868
+ });
869
+ }
870
+
871
+ // Format frequency for display
872
+ function formatFrequency(freq) {
873
+ const freqMap = {
874
+ 'daily': 'Daily',
875
+ 'weekly': 'Weekly',
876
+ 'monthly': 'Monthly',
877
+ 'as_needed': 'As Needed'
878
+ };
879
+ return freqMap[freq] || freq;
880
+ }
881
+
882
+ // Format time of day for display
883
+ function formatTime(time) {
884
+ const timeMap = {
885
+ 'morning': 'Morning',
886
+ 'afternoon': 'Afternoon',
887
+ 'evening': 'Evening',
888
+ 'bedtime': 'Bedtime'
889
+ };
890
+ return timeMap[time] || time;
891
+ }
892
+
893
+ // Format date for display
894
+ function formatDate(dateString) {
895
+ const options = { year: 'numeric', month: 'short', day: 'numeric' };
896
+ return new Date(dateString).toLocaleDateString(undefined, options);
897
+ }
898
+
899
+ // Open book appointment modal
900
+ function openBookAppointmentModal(doctor) {
901
+ document.getElementById('selectedDoctorName').textContent = doctor.name;
902
+ document.getElementById('selectedDoctorSpecialty').textContent = doctor.specialty;
903
+
904
+ // Generate time slots
905
+ timeSlots.innerHTML = '';
906
+ const times = ['9:00 AM', '10:30 AM', '12:00 PM', '2:00 PM', '3:30 PM', '5:00 PM'];
907
+ times.forEach(time => {
908
+ const timeBtn = document.createElement('button');
909
+ timeBtn.className = 'appointment-slot text-xs py-2 border border-gray-200 rounded-md hover:bg-blue-500 hover:text-white';
910
+ timeBtn.textContent = time;
911
+ timeBtn.addEventListener('click', () => {
912
+ document.querySelectorAll('.appointment-slot').forEach(btn => {
913
+ btn.classList.remove('bg-blue-500', 'text-white');
914
+ });
915
+ timeBtn.classList.add('bg-blue-500', 'text-white');
916
+ });
917
+ timeSlots.appendChild(timeBtn);
918
+ });
919
+
920
+ bookAppointmentModal.classList.remove('hidden');
921
+ }
922
+
923
+ // Switch between screens
924
+ function showScreen(screen) {
925
+ document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
926
+ document.getElementById(screen).classList.add('active');
927
+
928
+ if (screen === 'main') {
929
+ bottomNav.classList.remove('hidden');
930
+ initApp();
931
+ } else {
932
+ bottomNav.classList.add('hidden');
933
+ }
934
+ }
935
+
936
+ // Switch between tabs
937
+ function showTab(tab) {
938
+ // Update tab buttons
939
+ chatTab.classList.remove('text-blue-500', 'border-blue-500');
940
+ healthTab.classList.remove('text-blue-500', 'border-blue-500');
941
+ appointmentsTab.classList.remove('text-blue-500', 'border-blue-500');
942
+
943
+ chatTab.classList.add('text-gray-500');
944
+ healthTab.classList.add('text-gray-500');
945
+ appointmentsTab.classList.add('text-gray-500');
946
+
947
+ tab.classList.remove('text-gray-500');
948
+ tab.classList.add('text-blue-500', 'border-blue-500');
949
+
950
+ // Update tab content
951
+ chatContent.classList.add('hidden');
952
+ healthContent.classList.add('hidden');
953
+ appointmentsContent.classList.add('hidden');
954
+ chatInputArea.classList.add('hidden');
955
+
956
+ if (tab === chatTab) {
957
+ chatContent.classList.remove('hidden');
958
+ chatInputArea.classList.remove('hidden');
959
+ } else if (tab === healthTab) {
960
+ healthContent.classList.remove('hidden');
961
+ } else if (tab === appointmentsTab) {
962
+ appointmentsContent.classList.remove('hidden');
963
+ }
964
+ }
965
+
966
+ // Switch between navigation sections
967
+ function showNavSection(section) {
968
+ // Update nav buttons
969
+ navChat.classList.remove('text-blue-500');
970
+ navHealth.classList.remove('text-blue-500');
971
+ navAppointments.classList.remove('text-blue-500');
972
+ navProfile.classList.remove('text-blue-500');
973
+
974
+ navChat.classList.add('text-gray-500');
975
+ navHealth.classList.add('text-gray-500');
976
+ navAppointments.classList.add('text-gray-500');
977
+ navProfile.classList.add('text-gray-500');
978
+
979
+ section.classList.remove('text-gray-500');
980
+ section.classList.add('text-blue-500');
981
+
982
+ // Update tab buttons and content
983
+ if (section === navChat) {
984
+ showTab(chatTab);
985
+ } else if (section === navHealth) {
986
+ showTab(healthTab);
987
+ } else if (section === navAppointments) {
988
+ showTab(appointmentsTab);
989
+ }
990
+ }
991
+
992
+ // Event listeners
993
+ getStartedBtn.addEventListener('click', () => showScreen('signup'));
994
+ signInGoogle.addEventListener('click', () => {
995
+ // Simulate Google sign in
996
+ setTimeout(() => {
997
+ currentUser.name = "Google User";
998
+ document.getElementById('userName').textContent = currentUser.name;
999
+ localStorage.setItem('userName', currentUser.name);
1000
+ showScreen('main');
1001
+ }, 1000);
1002
+ });
1003
+
1004
+ backToOnboarding.addEventListener('click', () => showScreen('onboarding'));
1005
+ backToOnboardingFromLogin.addEventListener('click', () => showScreen('onboarding'));
1006
+ goToLogin.addEventListener('click', () => showScreen('login'));
1007
+ goToSignup.addEventListener('click', () => showScreen('signup'));
1008
+
1009
+ signUpBtn.addEventListener('click', () => {
1010
+ // Simple validation
1011
+ const name = document.getElementById('name').value;
1012
+ const email = document.getElementById('email').value;
1013
+ const password = document.getElementById('password').value;
1014
+
1015
+ if (name && email && password) {
1016
+ currentUser.name = name;
1017
+ document.getElementById('userName').textContent = name;
1018
+ localStorage.setItem('userName', name);
1019
+ showScreen('main');
1020
+ } else {
1021
+ alert('Please fill in all fields');
1022
+ }
1023
+ });
1024
+
1025
+ loginBtn.addEventListener('click', () => {
1026
+ // Simple validation
1027
+ const email = document.getElementById('loginEmail').value;
1028
+ const password = document.getElementById('loginPassword').value;
1029
+
1030
+ if (email && password) {
1031
+ showScreen('main');
1032
+ } else {
1033
+ alert('Please fill in all fields');
1034
+ }
1035
+ });
1036
+
1037
+ forgotPassword.addEventListener('click', () => {
1038
+ alert('Password reset link will be sent to your email');
1039
+ });
1040
+
1041
+ // Tab event listeners
1042
+ chatTab.addEventListener('click', () => showTab(chatTab));
1043
+ healthTab.addEventListener('click', () => showTab(healthTab));
1044
+ appointmentsTab.addEventListener('click', () => showTab(appointmentsTab));
1045
+
1046
+ // Navigation event listeners
1047
+ navChat.addEventListener('click', () => showNavSection(navChat));
1048
+ navHealth.addEventListener('click', () => showNavSection(navHealth));
1049
+ navAppointments.addEventListener('click', () => showNavSection(navAppointments));
1050
+ navProfile.addEventListener('click', () => {
1051
+ alert('Profile screen would show user details and settings');
1052
+ });
1053
+
1054
+ // Medication modal event listeners
1055
+ addMedicationBtn.addEventListener('click', () => {
1056
+ addMedicationModal.classList.remove('hidden');
1057
+ });
1058
+
1059
+ closeMedicationModal.addEventListener('click', () => {
1060
+ addMedicationModal.classList.add('hidden');
1061
+ });
1062
+
1063
+ cancelAddMedication.addEventListener('click', () => {
1064
+ addMedicationModal.classList.add('hidden');
1065
+ });
1066
+
1067
+ saveMedication.addEventListener('click', () => {
1068
+ const name = document.getElementById('medName').value;
1069
+ const dosage = document.getElementById('medDosage').value;
1070
+ const frequency = document.getElementById('medFrequency').value;
1071
+ const time = document.getElementById('medTime').value;
1072
+ const startDate = document.getElementById('medStartDate').value;
1073
+
1074
+ if (name && dosage && frequency && time && startDate) {
1075
+ const newMed = {
1076
+ id: Date.now(),
1077
+ name,
1078
+ dosage,
1079
+ frequency,
1080
+ time,
1081
+ startDate,
1082
+ adherence: Math.floor(Math.random() * 30) + 70 // Random adherence between 70-100%
1083
+ };
1084
+
1085
+ currentUser.medications.push(newMed);
1086
+ renderMedications();
1087
+ addMedicationModal.classList.add('hidden');
1088
+
1089
+ // Reset form
1090
+ document.getElementById('medName').value = '';
1091
+ document.getElementById('medDosage').value = '';
1092
+ document.getElementById('medFrequency').value = 'daily';
1093
+ document.getElementById('medTime').value = 'morning';
1094
+ document.getElementById('medStartDate').value = '';
1095
+ } else {
1096
+ alert('Please fill in all fields');
1097
+ }
1098
+ });
1099
+
1100
+ // Appointment modal event listeners
1101
+ closeAppointmentModal.addEventListener('click', () => {
1102
+ bookAppointmentModal.classList.add('hidden');
1103
+ });
1104
+
1105
+ cancelBookAppointment.addEventListener('click', () => {
1106
+ bookAppointmentModal.classList.add('hidden');
1107
+ });
1108
+
1109
+ confirmAppointment.addEventListener('click', () => {
1110
+ const selectedTime = document.querySelector('.appointment-slot.bg-blue-500');
1111
+ const date = document.getElementById('appointmentDate').value;
1112
+ const reason = document.getElementById('appointmentReason').value;
1113
+
1114
+ if (!selectedTime || !date) {
1115
+ alert('Please select a date and time');
1116
+ return;
1117
+ }
1118
+
1119
+ const doctorName = document.getElementById('selectedDoctorName').textContent;
1120
+ const specialty = document.getElementById('selectedDoctorSpecialty').textContent;
1121
+
1122
+ const newAppointment = {
1123
+ id: Date.now(),
1124
+ doctor: doctorName,
1125
+ specialty,
1126
+ date,
1127
+ time: selectedTime.textContent,
1128
+ reason: reason || 'General consultation'
1129
+ };
1130
+
1131
+ currentUser.appointments.push(newAppointment);
1132
+ renderAppointments();
1133
+ bookAppointmentModal.classList.add('hidden');
1134
+
1135
+ // Reset form
1136
+ document.getElementById('appointmentDate').value = '';
1137
+ document.getElementById('appointmentReason').value = '';
1138
+ document.querySelectorAll('.appointment-slot').forEach(btn => {
1139
+ btn.classList.remove('bg-blue-500', 'text-white');
1140
+ });
1141
+
1142
+ // Show confirmation
1143
+ setTimeout(() => {
1144
+ const confirmation = document.createElement('div');
1145
+ confirmation.className = 'fixed bottom-20 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg fade-in';
1146
+ confirmation.innerHTML = `
1147
+ <i class="fas fa-check-circle mr-2"></i>
1148
+ Appointment booked successfully!
1149
+ `;
1150
+ document.body.appendChild(confirmation);
1151
+
1152
+ setTimeout(() => {
1153
+ confirmation.classList.add('opacity-0', 'transition-opacity', 'duration-300');
1154
+ setTimeout(() => confirmation.remove(), 300);
1155
+ }, 3000);
1156
+ }, 300);
1157
+ });
1158
+
1159
+ // Chat functionality
1160
+ function addMessage(text, isUser) {
1161
+ const messageDiv = document.createElement('div');
1162
+ messageDiv.classList.add('message-bubble', isUser ? 'user-message' : 'ai-message', 'slide-in');
1163
+ messageDiv.textContent = text;
1164
+ chatMessages.appendChild(messageDiv);
1165
+ scrollToBottom();
1166
+ }
1167
+
1168
+ function showTypingIndicator() {
1169
+ const typingDiv = document.createElement('div');
1170
+ typingDiv.classList.add('typing-indicator');
1171
+ typingDiv.id = 'typingIndicator';
1172
+ typingDiv.innerHTML = `
1173
+ <div class="typing-dot"></div>
1174
+ <div class="typing-dot"></div>
1175
+ <div class="typing-dot"></div>
1176
+ `;
1177
+ chatMessages.appendChild(typingDiv);
1178
+ scrollToBottom();
1179
+ }
1180
+
1181
+ function hideTypingIndicator() {
1182
+ const typingIndicator = document.getElementById('typingIndicator');
1183
+ if (typingIndicator) {
1184
+ typingIndicator.remove();
1185
+ }
1186
+ }
1187
+
1188
+ function scrollToBottom() {
1189
+ chatContainer.scrollTop = chatContainer.scrollHeight;
1190
+ }
1191
+
1192
+ function sendMessage() {
1193
+ const message = messageInput.value.trim();
1194
+ if (message) {
1195
+ addMessage(message, true);
1196
+ messageInput.value = '';
1197
+
1198
+ // Show typing indicator
1199
+ showTypingIndicator();
1200
+
1201
+ // Simulate AI response after a delay
1202
+ setTimeout(() => {
1203
+ hideTypingIndicator();
1204
+
1205
+ // Simple AI responses based on keywords
1206
+ let response;
1207
+ if (message.toLowerCase().includes('headache')) {
1208
+ response = "Headaches can have many causes. Have you been drinking enough water? Dehydration is a common cause. If the pain is severe or persistent, please consult a doctor.";
1209
+ } else if (message.toLowerCase().includes('fever') || message.toLowerCase().includes('temperature')) {
1210
+ response = "A fever is usually a sign your body is fighting an infection. Make sure to rest and stay hydrated. If your temperature is above 103°F (39.4°C) or lasts more than 3 days, seek medical attention.";
1211
+ } else if (message.toLowerCase().includes('stomach') || message.toLowerCase().includes('pain')) {
1212
+ response = "Stomach pain can result from many factors including indigestion, food intolerance, or infections. Try drinking peppermint tea or ginger tea which can help soothe your stomach. If pain is severe or persistent, see a doctor.";
1213
+ } else if (message.toLowerCase().includes('sleep') || message.toLowerCase().includes('insomnia')) {
1214
+ response = "Good sleep is essential for health. Try maintaining a regular sleep schedule, limit screen time before bed, and create a comfortable sleep environment. Avoid caffeine in the evening.";
1215
+ } else if (message.toLowerCase().includes('exercise') || message.toLowerCase().includes('workout')) {
1216
+ response = "Regular exercise is great for your health! Aim for at least 150 minutes of moderate activity per week. Remember to stay hydrated and listen to your body to avoid injury.";
1217
+ } else if (message.toLowerCase().includes('medication') || message.toLowerCase().includes('pill')) {
1218
+ response = "You can manage your medications in the Health tab. There you can add new medications, set reminders, and track your adherence.";
1219
+ } else if (message.toLowerCase().includes('appointment') || message.toLowerCase().includes('doctor')) {
1220
+ response = "You can book appointments with specialists in the Appointments tab. Would you like me to guide you through the booking process?";
1221
+ } else {
1222
+ const genericResponses = [
1223
+ "I understand you're asking about health concerns. Could you provide more details about your symptoms?",
1224
+ "That's an important health question. For personalized advice, I recommend consulting with your healthcare provider.",
1225
+ "I'm here to help with health-related questions. Let me know if you'd like general information or specific advice.",
1226
+ "Your health is important. If you're experiencing concerning symptoms, please don't hesitate to see a doctor.",
1227
+ "I can provide general health information. For medical diagnosis or treatment, please consult a healthcare professional."
1228
+ ];
1229
+ response = genericResponses[Math.floor(Math.random() * genericResponses.length)];
1230
+ }
1231
+
1232
+ addMessage(response, false);
1233
+ }, 1500);
1234
+ }
1235
+ }
1236
+
1237
+ sendMessageBtn.addEventListener('click', sendMessage);
1238
+ messageInput.addEventListener('keypress', (e) => {
1239
+ if (e.key === 'Enter') {
1240
+ sendMessage();
1241
+ }
1242
+ });
1243
+
1244
+ // Initialize the app when main screen is shown
1245
+ mainScreen.addEventListener('click', initApp);
1246
+
1247
+ // Initial scroll to bottom
1248
+ scrollToBottom();
1249
+ </script>
1250
+ <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=SameerArz/ai-health-companion" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1251
+ </html>