Hugging Face's logo

Spaces:
pranit144
/
feedback
Sleeping

App Files Community
pranit144 commited on
Commit
b973eaa
·
verified ·
1 Parent(s): 28007a5

Upload 2 files

Browse files
Files changed (2) hide show
  1. templates/doctor_dashboard.html +137 -0
  2. templates/index.html +255 -280
templates/doctor_dashboard.html ADDED
@@ -0,0 +1,137 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Doctor Dashboard - Care Plan Management System</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --primary-blue: #0d6efd;
11
+ --light-blue: #e7f1ff;
12
+ --dark-blue: #0a58ca;
13
+ }
14
+
15
+ body {
16
+ background-color: #f8f9fa;
17
+ }
18
+
19
+ .navbar {
20
+ background-color: var(--primary-blue);
21
+ padding: 1rem;
22
+ }
23
+
24
+ .navbar-brand {
25
+ color: white !important;
26
+ font-weight: bold;
27
+ }
28
+
29
+ .container {
30
+ max-width: 1000px;
31
+ margin-top: 30px;
32
+ }
33
+
34
+ .card {
35
+ border: none;
36
+ border-radius: 15px;
37
+ box-shadow: 0 0 15px rgba(0,0,0,0.1);
38
+ margin-bottom: 20px;
39
+ }
40
+
41
+ .card-header {
42
+ background-color: var(--light-blue);
43
+ border-radius: 15px 15px 0 0 !important;
44
+ border-bottom: none;
45
+ padding: 1.5rem;
46
+ }
47
+
48
+ .emergency-alert {
49
+ background-color: #dc3545;
50
+ color: white;
51
+ padding: 15px;
52
+ border-radius: 10px;
53
+ margin-bottom: 20px;
54
+ }
55
+
56
+ .role-switcher {
57
+ position: fixed;
58
+ top: 20px;
59
+ right: 20px;
60
+ z-index: 1000;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <nav class="navbar">
66
+ <div class="container">
67
+ <a class="navbar-brand" href="#">Doctor Dashboard</a>
68
+ <div class="role-switcher">
69
+ <select class="form-select" id="roleSelect" onchange="switchRole()">
70
+ <option value="doctor" selected>Doctor View</option>
71
+ <option value="patient">Patient View</option>
72
+ </select>
73
+ </div>
74
+ </div>
75
+ </nav>
76
+
77
+ <div class="container">
78
+ <div class="card">
79
+ <div class="card-header">
80
+ <h3 class="mb-0">Emergency Notifications</h3>
81
+ </div>
82
+ <div class="card-body">
83
+ <div id="emergencyNotifications">
84
+ <div class="text-center" id="noNotifications">
85
+ No emergency notifications at this time
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </div>
91
+
92
+ <script>
93
+ function switchRole() {
94
+ const role = document.getElementById('roleSelect').value;
95
+ if (role === 'patient') {
96
+ window.location.href = '/';
97
+ }
98
+ }
99
+
100
+ async function fetchEmergencyNotifications() {
101
+ try {
102
+ const response = await fetch('/get_emergency_notifications');
103
+ const data = await response.json();
104
+
105
+ if (data.success) {
106
+ const notificationsDiv = document.getElementById('emergencyNotifications');
107
+ const noNotificationsDiv = document.getElementById('noNotifications');
108
+
109
+ if (data.notifications && data.notifications.length > 0) {
110
+ notificationsDiv.innerHTML = '';
111
+ data.notifications.forEach(notification => {
112
+ const notificationElement = document.createElement('div');
113
+ notificationElement.className = 'emergency-alert';
114
+ notificationElement.innerHTML = `
115
+ <h4>Emergency Alert</h4>
116
+ <p>Time: ${notification.timestamp}</p>
117
+ <p>Patient Feedback: ${notification.patient_feedback}</p>
118
+ `;
119
+ notificationsDiv.appendChild(notificationElement);
120
+ });
121
+ } else {
122
+ notificationsDiv.innerHTML = '<div class="text-center">No emergency notifications at this time</div>';
123
+ }
124
+ }
125
+ } catch (error) {
126
+ console.error('Error fetching notifications:', error);
127
+ }
128
+ }
129
+
130
+ // Initial fetch
131
+ fetchEmergencyNotifications();
132
+
133
+ // Poll for new notifications
134
+ setInterval(fetchEmergencyNotifications, 30000);
135
+ </script>
136
+ </body>
137
+ </html>
templates/index.html CHANGED
@@ -1,297 +1,272 @@
1
  <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>Diet Recommendation System</title>
6
- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
7
- <style>
8
- /* static/style.css */
9
-
10
- /* General Styles */
11
- body {
12
- font-family: 'Poppins', sans-serif;
13
- background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
14
- margin: 0;
15
- padding: 20px;
16
- color: #333;
17
- }
18
-
19
- /* Page Container */
20
- .container {
21
- max-width: 900px;
22
- margin: auto;
23
- background: #fff;
24
- padding: 20px;
25
- border-radius: 12px;
26
- box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
27
- animation: fadeIn 1s ease-in-out;
28
- }
29
-
30
- /* Header */
31
- h1 {
32
- text-align: center;
33
- color: #007BFF;
34
- font-size: 2rem;
35
- font-weight: bold;
36
- }
37
-
38
- /* Form Styles */
39
- form {
40
- background: rgba(255, 255, 255, 0.9);
41
- padding: 20px;
42
- border-radius: 10px;
43
- box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
44
- }
45
-
46
- label {
47
- font-weight: bold;
48
- display: block;
49
- margin-bottom: 6px;
50
- }
51
-
52
- input, select, textarea {
53
- width: 100%;
54
- padding: 10px;
55
- margin-bottom: 12px;
56
- border: 2px solid #ccc;
57
- border-radius: 6px;
58
- transition: 0.3s;
59
- }
60
-
61
- input:focus, select:focus, textarea:focus {
62
- border-color: #007BFF;
63
- outline: none;
64
- box-shadow: 0px 0px 6px rgba(0, 123, 255, 0.5);
65
- }
66
-
67
- /* Submit Button */
68
- button, .btn {
69
- display: inline-block;
70
- width: 100%;
71
- padding: 12px;
72
- background: linear-gradient(135deg, #007BFF, #0056b3);
73
- color: white;
74
- font-size: 1rem;
75
- font-weight: bold;
76
- text-align: center;
77
- border: none;
78
- border-radius: 8px;
79
- cursor: pointer;
80
- transition: 0.3s ease-in-out;
81
- }
82
-
83
- button:hover, .btn:hover {
84
- background: linear-gradient(135deg, #0056b3, #00408a);
85
- transform: scale(1.05);
86
- }
87
-
88
- /* Anchor Button Styling */
89
- a.btn {
90
- text-decoration: none;
91
- }
92
-
93
- /* Tables */
94
- table {
95
- width: 100%;
96
- border-collapse: collapse;
97
- margin-top: 20px;
98
- background: white;
99
- border-radius: 8px;
100
- overflow: hidden;
101
- box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
102
- }
103
-
104
- th, td {
105
- padding: 12px;
106
- text-align: left;
107
- border-bottom: 1px solid #ddd;
108
- }
109
-
110
- th {
111
- background: #007BFF;
112
- color: white;
113
- }
114
-
115
- td {
116
- background: #f9f9f9;
117
- }
118
-
119
- /* Chart Section */
120
- .chart {
121
- background: white;
122
- padding: 15px;
123
- border-radius: 10px;
124
- box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
125
- margin-bottom: 20px;
126
- }
127
-
128
- /* Fade In Animation */
129
- @keyframes fadeIn {
130
- from {
131
- opacity: 0;
132
- transform: translateY(-10px);
133
  }
134
- to {
135
- opacity: 1;
136
- transform: translateY(0);
 
 
 
 
 
 
 
 
 
 
 
137
  }
138
- }
139
 
140
- /* Responsive Design */
141
- @media (max-width: 768px) {
142
  .container {
143
- padding: 15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
144
  }
145
 
146
- button {
147
- font-size: 0.9rem;
148
  }
149
- }
150
 
151
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
  </head>
153
  <body>
154
- <h1>Diet Recommendation System</h1>
155
- <form method="post">
156
- <label>Select your gender:</label>
157
- <select name="user_gender" required>
158
- <option value="Male">Male</option>
159
- <option value="Female">Female</option>
160
- </select><br>
161
-
162
- <label>Enter your height in cm:</label>
163
- <input type="number" name="user_height" min="50" max="250" step="1" required><br>
164
-
165
- <label>Enter your weight in kg:</label>
166
- <input type="number" name="user_weight" min="10" max="300" step="1" required><br>
167
-
168
- <label>Enter your age in years:</label>
169
- <input type="number" name="user_age" min="1" max="120" step="1" required><br>
170
-
171
- <label>Enter any allergies or diseases (comma separated):</label>
172
- <input type="text" name="allergies_diseases"><br>
173
-
174
- <label>Are you vegetarian or non-vegetarian?</label>
175
- <select name="dietary_preference" required>
176
- <option value="veg">veg</option>
177
- <option value="non-veg">non-veg</option>
178
- </select><br>
179
-
180
- <label>How often do you exercise in a week? (0 to 5):</label>
181
- <input type="number" name="activity_level" min="0" max="5" step="1" required><br>
182
-
183
- <input type="submit" value="Generate Diet Chart">
184
- </form>
185
-
186
- {% if results %}
187
- <h2>Results</h2>
188
- <p><strong>Your BMI:</strong> {{ results.bmi }}</p>
189
- <p><strong>Predicted Body Category:</strong> {{ results.body_category }}</p>
190
- <p><strong>Initial Calorie Intake:</strong> {{ results.initial_calorie_intake }} kcal/day</p>
191
- <p><strong>New Calorie Intake:</strong> {{ results.new_calorie_intake }} kcal/day</p>
192
-
193
- <h3>Breakfast</h3>
194
- <table>
195
- <tr>
196
- <th>Food Item</th>
197
- <th>Quantity</th>
198
- <th>Calories (kcal)</th>
199
- <th>Protein (g)</th>
200
- <th>Carbohydrates (g)</th>
201
- <th>Fats (g)</th>
202
- </tr>
203
- {% for row in results.breakfast %}
204
- <tr>
205
- <td>{{ row['Food Item'] }}</td>
206
- <td>{{ row['Quantity'] }}</td>
207
- <td>{{ row['Calories (kcal)'] }}</td>
208
- <td>{{ row['Protein (g)'] }}</td>
209
- <td>{{ row['Carbohydrates(g)'] }}</td>
210
- <td>{{ row['Fats (g)'] }}</td>
211
- </tr>
212
- {% endfor %}
213
- </table>
214
- <p>Total Calories: {{ results.breakfast_total_calories }} kcal</p>
215
- <p>Total Protein: {{ results.breakfast_total_protein }} g</p>
216
- <p>Total Carbohydrates: {{ results.breakfast_total_carbs }} g</p>
217
- <p>Total Fats: {{ results.breakfast_total_fats }} g</p>
218
-
219
- <h3>Lunch</h3>
220
- <table>
221
- <tr>
222
- <th>Food Item</th>
223
- <th>Quantity</th>
224
- <th>Calories (kcal)</th>
225
- <th>Protein (g)</th>
226
- <th>Carbohydrates (g)</th>
227
- <th>Fats (g)</th>
228
- </tr>
229
- {% for row in results.lunch %}
230
- <tr>
231
- <td>{{ row['Food Item'] }}</td>
232
- <td>{{ row['Quantity'] }}</td>
233
- <td>{{ row['Calories (kcal)'] }}</td>
234
- <td>{{ row['Protein (g)'] }}</td>
235
- <td>{{ row['Carbohydrates(g)'] }}</td>
236
- <td>{{ row['Fats (g)'] }}</td>
237
- </tr>
238
- {% endfor %}
239
- </table>
240
- <p>Total Calories: {{ results.lunch_total_calories }} kcal</p>
241
- <p>Total Protein: {{ results.lunch_total_protein }} g</p>
242
- <p>Total Carbohydrates: {{ results.lunch_total_carbs }} g</p>
243
- <p>Total Fats: {{ results.lunch_total_fats }} g</p>
244
-
245
- <h3>Dinner</h3>
246
- <table>
247
- <tr>
248
- <th>Food Item</th>
249
- <th>Quantity</th>
250
- <th>Calories (kcal)</th>
251
- <th>Protein (g)</th>
252
- <th>Carbohydrates (g)</th>
253
- <th>Fats (g)</th>
254
- </tr>
255
- {% for row in results.dinner %}
256
- <tr>
257
- <td>{{ row['Food Item'] }}</td>
258
- <td>{{ row['Quantity'] }}</td>
259
- <td>{{ row['Calories (kcal)'] }}</td>
260
- <td>{{ row['Protein (g)'] }}</td>
261
- <td>{{ row['Carbohydrates(g)'] }}</td>
262
- <td>{{ row['Fats (g)'] }}</td>
263
- </tr>
264
- {% endfor %}
265
- </table>
266
- <p>Total Calories: {{ results.dinner_total_calories }} kcal</p>
267
- <p>Total Protein: {{ results.dinner_total_protein }} g</p>
268
- <p>Total Carbohydrates: {{ results.dinner_total_carbs }} g</p>
269
- <p>Total Fats: {{ results.dinner_total_fats }} g</p>
270
-
271
- <h3>Timings</h3>
272
- {% if results.age <= 18 or results.age >= 60 %}
273
- <ul>
274
- <li>Breakfast: 9 to 10 am</li>
275
- <li>Lunch: 12 to 1 pm</li>
276
- <li>Dinner: 7 to 8 pm</li>
277
- </ul>
278
- {% else %}
279
- <ul>
280
- <li>Breakfast: 7 to 8 am</li>
281
- <li>Lunch: 1 to 2 pm</li>
282
- <li>Dinner: 8 to 9 pm</li>
283
- </ul>
284
- {% endif %}
285
-
286
- <div class="chart">
287
- <h3>Calorie Distribution Chart</h3>
288
- {{ results.calorie_chart | safe }}
289
  </div>
290
 
291
- <div class="chart">
292
- <h3>Nutrient Distribution Chart</h3>
293
- {{ results.nutrient_chart | safe }}
 
 
 
 
 
 
 
294
  </div>
295
- {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
296
  </body>
297
  </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>Care Plan Management System</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
8
+ <style>
9
+ :root {
10
+ --primary-blue: #0d6efd;
11
+ --light-blue: #e7f1ff;
12
+ --dark-blue: #0a58ca;
13
+ --bg-light: #f8f9fa;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  }
15
+
16
+ body {
17
+ background-color: var(--bg-light);
18
+ font-family: 'Roboto', sans-serif;
19
+ }
20
+
21
+ .navbar {
22
+ background-color: var(--primary-blue);
23
+ padding: 1rem;
24
+ }
25
+
26
+ .navbar-brand {
27
+ color: white !important;
28
+ font-weight: bold;
29
  }
 
30
 
 
 
31
  .container {
32
+ max-width: 1000px;
33
+ margin-top: 30px;
34
+ }
35
+
36
+ .card {
37
+ border: none;
38
+ border-radius: 15px;
39
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
40
+ margin-bottom: 20px;
41
+ }
42
+
43
+ .card-header {
44
+ background-color: var(--light-blue);
45
+ border-radius: 15px 15px 0 0;
46
+ border-bottom: none;
47
+ padding: 1.5rem;
48
+ }
49
+
50
+ .form-control {
51
+ border-radius: 10px;
52
+ border: 2px solid #e9ecef;
53
+ padding: 0.8rem;
54
+ }
55
+
56
+ .form-control:focus {
57
+ border-color: var(--primary-blue);
58
+ box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
59
+ }
60
+
61
+ .btn-primary {
62
+ background-color: var(--primary-blue);
63
+ border: none;
64
+ padding: 0.8rem 2rem;
65
+ border-radius: 10px;
66
+ font-weight: 600;
67
  }
68
 
69
+ .btn-primary:hover {
70
+ background-color: var(--dark-blue);
71
  }
 
72
 
73
+ /* Updated Care Plan Output Styling */
74
+ #updatedPlan {
75
+ white-space: pre-wrap;
76
+ background-color: white;
77
+ padding: 20px;
78
+ border-radius: 10px;
79
+ border-left: 4px solid var(--primary-blue);
80
+ font-size: 1rem;
81
+ line-height: 1.6;
82
+ opacity: 0;
83
+ transform: translateY(20px);
84
+ transition: opacity 0.5s ease, transform 0.5s ease;
85
+ }
86
+
87
+ #updatedPlan.visible {
88
+ opacity: 1;
89
+ transform: translateY(0);
90
+ }
91
+
92
+ .role-switcher {
93
+ position: fixed;
94
+ top: 20px;
95
+ right: 20px;
96
+ z-index: 1000;
97
+ }
98
+
99
+ .emergency-alert {
100
+ background-color: #dc3545;
101
+ color: white;
102
+ padding: 15px;
103
+ border-radius: 10px;
104
+ margin-bottom: 20px;
105
+ }
106
+
107
+ /* Loading Spinner Styles */
108
+ #loadingIndicator {
109
+ display: none;
110
+ text-align: center;
111
+ margin-top: 20px;
112
+ }
113
+ </style>
114
  </head>
115
  <body>
116
+ <nav class="navbar">
117
+ <div class="container">
118
+ <a class="navbar-brand" href="#">Care Plan Management System</a>
119
+ <div class="role-switcher">
120
+ <select class="form-select" id="roleSelect" onchange="switchRole()">
121
+ <option value="patient">Patient View</option>
122
+ <option value="doctor">Doctor View</option>
123
+ </select>
124
+ </div>
125
+ </div>
126
+ </nav>
127
+
128
+ <div class="container">
129
+ <!-- Patient View -->
130
+ <div id="patientView">
131
+ <div class="card">
132
+ <div class="card-header">
133
+ <h3 class="mb-0">Patient Feedback Form</h3>
134
+ </div>
135
+ <div class="card-body">
136
+ <form id="feedbackForm" class="mb-4">
137
+ <div class="mb-3">
138
+ <label for="feedback" class="form-label">Current Symptoms and Feedback</label>
139
+ <textarea class="form-control" id="feedback" name="feedback" rows="4" placeholder="Please describe your current symptoms and how you're feeling..." required></textarea>
140
+ </div>
141
+
142
+ <div class="mb-3">
143
+ <label for="care_plan_pdf" class="form-label">Upload Current Care Plan (PDF)</label>
144
+ <input type="file" class="form-control" id="care_plan_pdf" name="care_plan_pdf" accept=".pdf" />
145
+ <div class="form-text">Optional: Upload your current care plan in PDF format</div>
146
+ </div>
147
+
148
+ <button type="submit" class="btn btn-primary">Submit Feedback</button>
149
+ </form>
150
+ <!-- Loading Indicator -->
151
+ <div id="loadingIndicator">
152
+ <div class="spinner-border text-primary" role="status">
153
+ <span class="visually-hidden">Loading...</span>
154
+ </div>
155
+ <p>Generating updated care plan...</p>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <div id="responseSection" class="card d-none">
161
+ <div class="card-header">
162
+ <h3 class="mb-0">Updated Care Plan</h3>
163
+ </div>
164
+ <div class="card-body">
165
+ <div id="updatedPlan"></div>
166
+ </div>
167
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
 
170
+ <!-- Doctor View -->
171
+ <div id="doctorView" style="display: none;">
172
+ <div class="card">
173
+ <div class="card-header">
174
+ <h3 class="mb-0">Emergency Notifications</h3>
175
+ </div>
176
+ <div class="card-body">
177
+ <div id="emergencyNotifications"></div>
178
+ </div>
179
+ </div>
180
  </div>
181
+ </div>
182
+
183
+ <script>
184
+ let currentRole = 'patient';
185
+
186
+ function switchRole() {
187
+ const role = document.getElementById('roleSelect').value;
188
+ if (role === 'doctor') {
189
+ window.location.href = '/doctor_dashboard';
190
+ }
191
+
192
+ // Update server-side role
193
+ fetch('/switch_role', {
194
+ method: 'POST',
195
+ headers: {
196
+ 'Content-Type': 'application/x-www-form-urlencoded'
197
+ },
198
+ body: `role=${role}`
199
+ });
200
+ }
201
+
202
+ async function fetchEmergencyNotifications() {
203
+ try {
204
+ const response = await fetch('/get_emergency_notifications');
205
+ const data = await response.json();
206
+
207
+ if (data.success) {
208
+ const notificationsDiv = document.getElementById('emergencyNotifications');
209
+ notificationsDiv.innerHTML = '';
210
+
211
+ data.notifications.forEach(notification => {
212
+ const notificationElement = document.createElement('div');
213
+ notificationElement.className = 'emergency-alert';
214
+ notificationElement.innerHTML = `
215
+ <h4>Emergency Alert</h4>
216
+ <p>Time: ${notification.timestamp}</p>
217
+ <p>Patient Feedback: ${notification.patient_feedback}</p>
218
+ `;
219
+ notificationsDiv.appendChild(notificationElement);
220
+ });
221
+ }
222
+ } catch (error) {
223
+ console.error('Error fetching notifications:', error);
224
+ }
225
+ }
226
+
227
+ document.getElementById('feedbackForm').addEventListener('submit', async (e) => {
228
+ e.preventDefault();
229
+
230
+ // Show loading indicator
231
+ document.getElementById('loadingIndicator').style.display = 'block';
232
+ document.getElementById('responseSection').classList.add('d-none');
233
+
234
+ const formData = new FormData(e.target);
235
+
236
+ try {
237
+ const response = await fetch('/submit_feedback', {
238
+ method: 'POST',
239
+ body: formData
240
+ });
241
+
242
+ const data = await response.json();
243
+
244
+ // Hide loading indicator
245
+ document.getElementById('loadingIndicator').style.display = 'none';
246
+
247
+ if (data.success) {
248
+ const updatedPlanDiv = document.getElementById('updatedPlan');
249
+ updatedPlanDiv.textContent = data.updated_plan;
250
+ // Add animation effect
251
+ setTimeout(() => {
252
+ updatedPlanDiv.classList.add('visible');
253
+ }, 50);
254
+ document.getElementById('responseSection').classList.remove('d-none');
255
+ } else {
256
+ alert('Error: ' + data.error);
257
+ }
258
+ } catch (error) {
259
+ document.getElementById('loadingIndicator').style.display = 'none';
260
+ alert('Error submitting feedback: ' + error);
261
+ }
262
+ });
263
+
264
+ // Poll for emergency notifications when in doctor view
265
+ setInterval(() => {
266
+ if (currentRole === 'doctor') {
267
+ fetchEmergencyNotifications();
268
+ }
269
+ }, 30000);
270
+ </script>
271
  </body>
272
  </html>