Hugging Face's logo

Spaces:
TheFrogGod
/
PRMSChallengeOct
Sleeping

App Files Community
vineelagampa TheFrogGod commited on
Commit
66d5688
·
verified ·
1 Parent(s): 2848fd0

Changes To The Bar (Static Data) (#38)

Browse files

- Changes To The Bar (Static Data) (9fc89d4e04c4689572da30f5e57761d06b4216cb)


Co-authored-by: Aanya Choudhary <TheFrogGod@users.noreply.huggingface.co>

Files changed (1) hide show
  1. web/profile.html +244 -276
web/profile.html CHANGED
@@ -5,32 +5,31 @@
5
  <meta name="viewport" content="width=device-width,initial-scale=1" />
6
  <title>Profile - CTRL + ALT + HEAL</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
  <link rel="stylesheet" href="style.css" />
10
  </head>
11
  <body class="bg-[#F7F8F9] min-h-screen">
12
- <!-- NAVBAR -->
13
  <nav
14
  class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
15
  >
16
  <div class="flex justify-between items-center w-full px-6 py-4">
17
- <!-- Logo -->
18
  <a
19
  href="index.html"
20
  class="text-2xl font-bold text-black hover:text-[var(--tropical-indigo)] transition"
21
  >
22
  CTRL + ALT + HEAL
23
  </a>
24
-
25
  <ul class="hidden md:flex space-x-6 font-medium text-gray-800">
26
- <li><a href="index.html" class="nav-link" style="display:none;">Home</a></li>
 
 
27
  <li><a href="profile.html" class="nav-link">Profile</a></li>
28
  <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
29
  <li><a href="past_data.html" class="nav-link">Past Reports</a></li>
30
- <li id="authNavItem"><a href="login.html" class="nav-link">Login</a></li>
 
 
31
  </ul>
32
-
33
- <!-- Hamburger Menu -->
34
  <button
35
  id="hamburger"
36
  class="md:hidden text-[var(--latte-cream)] text-2xl"
@@ -38,8 +37,6 @@
38
  ☰
39
  </button>
40
  </div>
41
- <!-- Changes added for change marker for style change-->
42
- <!-- Mobile Menu -->
43
  <ul
44
  id="mobile-menu"
45
  class="hidden flex-col space-y-4 bg-white/30 backdrop-blur-lg border border-white/20 rounded-xl shadow-lg mt-2 p-4 mx-6 md:hidden"
@@ -79,141 +76,109 @@
79
  >About</a
80
  >
81
  </li>
82
-
83
- >
84
- </li>
85
  </ul>
86
  </nav>
87
 
88
  <script>
89
  const hamburger = document.getElementById("hamburger");
90
  const mobileMenu = document.getElementById("mobile-menu");
91
- hamburger.addEventListener("click", () => {
92
- mobileMenu.classList.toggle("hidden");
93
- });
94
- // Underline the active page only
95
  const currentPath = window.location.pathname.split("/").pop();
96
  document.querySelectorAll(".nav-link").forEach((link) => {
97
- if (link.getAttribute("href") === currentPath) {
98
- link.classList.add("active-page"); // we'll style this in CSS
99
- }
100
  });
101
  document.querySelectorAll("#mobile-menu a").forEach((link) => {
102
- if (link.getAttribute("href") === currentPath) {
103
  link.classList.add("active-page");
104
- }
105
  });
106
  </script>
107
 
108
  <div class="container mx-auto px-6 pt-24">
109
  <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
110
- <!-- VIEW MODE -->
111
- <div id="profileViewSection">
112
- <div class="flex items-start space-x-6 mb-10">
113
- <!-- Avatar & Edit Button -->
114
- <div class="flex flex-col items-center">
115
- <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
116
- <button id="editProfileBtn" class="mt-2 px-4 py-2 rounded">
117
- Edit Profile
118
- </button>
119
- <a href="analyzer.html"
120
- ><button id="analyzerBtn" class="mt-2 px-4 py-2 rounded">
121
- Go To Analyzer
122
- </button></a
123
- >
124
- </div>
125
-
126
- <!-- User Info -->
127
- <div>
128
- <h2 class="text-xl font-semibold mb-4">Your Profile</h2>
129
- <p class="mb-2">
130
- Name: <span id="userName" class="font-medium">Loading...</span>
131
- </p>
132
- <p class="mb-2">
133
- DOB: <span id="userDOB" class="font-medium">Loading...</span>
134
- </p>
135
  </div>
136
  </div>
137
- </div>
138
 
139
- <!-- EDIT MODE -->
140
- <div id="profileEditSection" class="hidden mb-10">
141
- <div class="flex flex-col sm:flex-row items-start space-x-6">
142
- <div class="flex flex-col items-center mb-4 sm:mb-0">
143
- <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
144
- </div>
145
- <div class="flex-1">
146
- <h1 class="text-3xl font-semibold mb-4">Edit Profile</h1>
147
- <div class="space-y-4">
148
- <div>
149
- <label for="inputName" class="block text-sm font-medium"
150
- >Name</label
151
- >
152
- <input
153
- type="text"
154
- id="inputName"
155
- class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
156
- />
 
 
 
 
 
 
 
 
 
 
 
157
  </div>
158
- <div>
159
- <label for="inputDOB" class="block text-sm font-medium"
160
- >Date of Birth</label
161
- >
162
- <input
163
- type="date"
164
- id="inputDOB"
165
- class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
166
- />
167
  </div>
168
  </div>
169
- <div class="flex space-x-2 mt-4">
170
- <button id="saveProfileBtn" class="px-4 py-2 rounded">
171
- Save
172
- </button>
173
- <button id="cancelProfileBtn" class="px-4 py-2 rounded">
174
- Cancel
175
- </button>
176
- </div>
177
  </div>
178
  </div>
179
- </div>
180
- </div>
181
 
182
- <!-- Chart Section -->
183
- <div class="mt-10" id="chartSection">
184
- <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6">
185
- <h2 class="text-xl font-semibold mb-4">Health Progress</h2>
186
- <div
187
- class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"
188
- >
189
- <div class="flex flex-1 gap-2">
190
- <input
191
- type="date"
192
- id="entryDate"
193
- class="flex-1 border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
194
- />
195
- <input
196
- type="number"
197
- id="entryScore"
198
- min="0"
199
- max="100"
200
- placeholder="Score"
201
- class="w-24 border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
202
- />
203
- </div>
204
- <div class="flex gap-2">
205
- <button id="addEntryBtn" class="px-4 py-2 rounded">
206
- Add Entry
207
- </button>
208
- <button id="resetChartBtn" class="px-4 py-2 rounded">
209
- Reset Chart
210
- </button>
211
- </div>
212
  </div>
213
- <div class="overflow-x-auto">
214
- <canvas id="progressChart" class="w-full h-64"></canvas>
215
  </div>
216
  </div>
 
 
217
  </div>
218
  </div>
219
 
@@ -229,74 +194,47 @@
229
  doc,
230
  getDoc,
231
  updateDoc,
232
- collection,
233
- addDoc,
234
- serverTimestamp,
235
  } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
236
-
237
  const firebaseConfig = {
238
- apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
239
- authDomain: "login-tutorial-7a9e1.firebaseapp.com",
240
- projectId: "login-tutorial-7a9e1",
241
- storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
242
- messagingSenderId: "491093197824",
243
- appId: "1:491093197824:web:9f86659034af7e6a8244e5",
244
- measurementId: "G-JM7T9N6ZLZ"
245
- };
246
-
247
- // 🔧 Init
248
  const app = initializeApp(firebaseConfig);
249
  const auth = getAuth(app);
250
  const db = getFirestore(app);
251
-
252
- // Expose Firestore helpers if you need them elsewhere
253
- window.firebaseAuth = auth;
254
- window.onAuthStateChanged = onAuthStateChanged;
255
- window.firestoreDb = db;
256
- window.firestoreHelpers = { collection, doc, addDoc, serverTimestamp };
257
-
258
- let currentUser = null;
259
-
260
- // ✅ Auth state check
261
- // ✅ Hide Home button when logged in
262
- const homeNavDesktop = document.querySelector('ul.md\\:flex li a[href="index.html"]')
263
- ?.parentElement; // Desktop <li>
264
- const homeNavMobile = document.querySelector('#mobile-menu a[href="index.html"]')
265
- ?.parentElement; // Mobile <li>
266
-
267
- onAuthStateChanged(auth, async (user) => {
268
- const authNavItem = document.getElementById("authNavItem");
269
-
270
- if (user) {
271
- currentUser = user;
272
- await loadUserProfile();
273
 
274
- // Swap login with logout
275
- if (authNavItem) {
276
- authNavItem.innerHTML =
277
- '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
278
- }
279
-
280
- // Hide Home button
281
- if (homeNavDesktop) homeNavDesktop.style.display = "none";
282
- if (homeNavMobile) homeNavMobile.style.display = "none";
283
-
284
- } else {
285
- if (authNavItem) {
286
- authNavItem.innerHTML =
287
- '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
288
- }
289
-
290
- // Show Home button again
291
- if (homeNavDesktop) homeNavDesktop.style.display = "";
292
- if (homeNavMobile) homeNavMobile.style.display = "";
293
 
294
- window.location.href = "login.html";
295
- }
296
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
297
 
298
-
299
- // 📄 Load user profile from Firestore
300
  async function loadUserProfile() {
301
  try {
302
  const userDoc = await getDoc(doc(db, "users", currentUser.uid));
@@ -309,50 +247,33 @@ onAuthStateChanged(auth, async (user) => {
309
  localStorage.setItem("userName", userData.name || "");
310
  localStorage.setItem("userDOB", userData.dob || "");
311
  }
312
- } catch (error) {
313
- console.error("Error loading user profile:", error);
314
  }
315
  }
316
-
317
- // 💾 Save profile to Firestore
318
  window.saveProfile = async (name, dob) => {
319
  try {
320
- await updateDoc(doc(db, "users", currentUser.uid), {
321
- name: name,
322
- dob: dob,
323
- });
324
  localStorage.setItem("userName", name);
325
  localStorage.setItem("userDOB", dob);
326
  return true;
327
- } catch (error) {
328
- console.error("Error updating profile:", error);
329
  return false;
330
  }
331
  };
332
-
333
- // 🚪 Logout
334
  window.logout = async () => {
335
  try {
336
  await signOut(auth);
337
  localStorage.clear();
338
  window.location.href = "login.html";
339
- } catch (error) {
340
- console.error("Error signing out:", error);
341
  }
342
  };
343
-
344
- // 📊 LocalStorage for progress data
345
- function loadProgressData() {
346
- return JSON.parse(localStorage.getItem("progressData") || "[]");
347
- }
348
- function saveProgressData(data) {
349
- localStorage.setItem("progressData", JSON.stringify(data));
350
- }
351
- function resetProgressData() {
352
- localStorage.removeItem("progressData");
353
- }
354
-
355
- // 🖼️ DOM Content Loaded logic
356
  document.addEventListener("DOMContentLoaded", () => {
357
  const profileView = document.getElementById("profileViewSection");
358
  const profileEdit = document.getElementById("profileEditSection");
@@ -361,22 +282,18 @@ onAuthStateChanged(auth, async (user) => {
361
  const cancelBtn = document.getElementById("cancelProfileBtn");
362
  const inputName = document.getElementById("inputName");
363
  const inputDOB = document.getElementById("inputDOB");
364
-
365
- // Toggle to edit mode
366
  editBtn.addEventListener("click", () => {
367
  inputName.value = document.getElementById("userName").textContent;
368
  inputDOB.value = document.getElementById("userDOB").textContent;
369
  profileView.classList.add("hidden");
370
  profileEdit.classList.remove("hidden");
371
  });
372
-
373
- // Save profile
374
  saveBtn.addEventListener("click", async () => {
375
  const nameVal = inputName.value.trim();
376
  const dobVal = inputDOB.value;
377
-
378
  const success = await window.saveProfile(nameVal, dobVal);
379
-
380
  if (success) {
381
  document.getElementById("userName").textContent =
382
  nameVal || "Name not set";
@@ -388,82 +305,133 @@ onAuthStateChanged(auth, async (user) => {
388
  alert("Error saving profile. Please try again.");
389
  }
390
  });
391
-
392
- // Cancel editing
393
  cancelBtn.addEventListener("click", () => {
394
  profileEdit.classList.add("hidden");
395
  profileView.classList.remove("hidden");
396
  });
397
-
398
- // Chart setup
399
- const chartSection = document.getElementById("chartSection");
400
- const welcomeMessage = document.getElementById("welcomeMessage");
401
- const isNewUser = localStorage.getItem("isNewUser") === "true";
402
-
403
- if (isNewUser) {
404
- welcomeMessage.classList.remove("hidden");
405
- chartSection.classList.add("hidden");
406
- }
407
-
408
- const stored = loadProgressData();
409
- const labels = stored.map((e) => e.date);
410
- const ctx = document.getElementById("progressChart").getContext("2d");
411
- const progressChart = new Chart(ctx, {
412
- type: "line",
413
- data: {
414
- labels,
415
- datasets: [
416
- {
417
- label: "Health Score",
418
- data: stored.map((e) => e.score),
419
- borderColor: "#6B9080",
420
- fill: true,
421
- tension: 0.4,
422
- },
423
- ],
424
  },
425
- options: {
426
- scales: { y: { beginAtZero: true, max: 100 } },
 
 
 
 
 
427
  },
428
- });
429
-
430
- // Add Entry
431
- document.getElementById("addEntryBtn").addEventListener("click", () => {
432
- const date = document.getElementById("entryDate").value;
433
- const score = parseInt(document.getElementById("entryScore").value, 10);
434
-
435
- if (!date || isNaN(score)) {
436
- alert("Please select a date and enter a valid score.");
437
- return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
438
  }
439
-
440
- stored.push({ date, score });
441
- saveProgressData(stored);
442
- progressChart.data.labels.push(date);
443
- progressChart.data.datasets[0].data.push(score);
444
- progressChart.update();
445
-
446
- document.getElementById("entryDate").value = "";
447
- document.getElementById("entryScore").value = "";
448
-
449
- if (isNewUser) {
450
- localStorage.setItem("isNewUser", "false");
451
- welcomeMessage.classList.add("hidden");
452
- chartSection.classList.remove("hidden");
453
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
454
  });
455
-
456
- // Reset Chart
457
- document.getElementById("resetChartBtn").addEventListener("click", () => {
458
- if (!confirm("Are you sure you want to clear all progress data?")) return;
459
- resetProgressData();
460
- progressChart.data.labels = [];
461
- progressChart.data.datasets[0].data = [];
462
- progressChart.update();
 
 
 
 
 
 
463
  });
464
  });
465
-
466
  </script>
467
-
468
  </body>
469
- </html>
 
5
  <meta name="viewport" content="width=device-width,initial-scale=1" />
6
  <title>Profile - CTRL + ALT + HEAL</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <link rel="stylesheet" href="style.css" />
9
  </head>
10
  <body class="bg-[#F7F8F9] min-h-screen">
11
+ <!-- NAVBAR -->
12
  <nav
13
  class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
14
  >
15
  <div class="flex justify-between items-center w-full px-6 py-4">
 
16
  <a
17
  href="index.html"
18
  class="text-2xl font-bold text-black hover:text-[var(--tropical-indigo)] transition"
19
  >
20
  CTRL + ALT + HEAL
21
  </a>
 
22
  <ul class="hidden md:flex space-x-6 font-medium text-gray-800">
23
+ <li>
24
+ <a href="index.html" class="nav-link" style="display: none">Home</a>
25
+ </li>
26
  <li><a href="profile.html" class="nav-link">Profile</a></li>
27
  <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
28
  <li><a href="past_data.html" class="nav-link">Past Reports</a></li>
29
+ <li id="authNavItem">
30
+ <a href="login.html" class="nav-link">Login</a>
31
+ </li>
32
  </ul>
 
 
33
  <button
34
  id="hamburger"
35
  class="md:hidden text-[var(--latte-cream)] text-2xl"
 
37
  ☰
38
  </button>
39
  </div>
 
 
40
  <ul
41
  id="mobile-menu"
42
  class="hidden flex-col space-y-4 bg-white/30 backdrop-blur-lg border border-white/20 rounded-xl shadow-lg mt-2 p-4 mx-6 md:hidden"
 
76
  >About</a
77
  >
78
  </li>
 
 
 
79
  </ul>
80
  </nav>
81
 
82
  <script>
83
  const hamburger = document.getElementById("hamburger");
84
  const mobileMenu = document.getElementById("mobile-menu");
85
+ hamburger.addEventListener("click", () =>
86
+ mobileMenu.classList.toggle("hidden")
87
+ );
88
+
89
  const currentPath = window.location.pathname.split("/").pop();
90
  document.querySelectorAll(".nav-link").forEach((link) => {
91
+ if (link.getAttribute("href") === currentPath)
92
+ link.classList.add("active-page");
 
93
  });
94
  document.querySelectorAll("#mobile-menu a").forEach((link) => {
95
+ if (link.getAttribute("href") === currentPath)
96
  link.classList.add("active-page");
 
97
  });
98
  </script>
99
 
100
  <div class="container mx-auto px-6 pt-24">
101
  <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
102
+ <!-- PROFILE VIEW -->
103
+ <div id="profileViewSection">
104
+ <div class="flex items-start space-x-6 mb-10">
105
+ <div class="flex flex-col items-center">
106
+ <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
107
+ <button id="editProfileBtn" class="mt-2 px-4 py-2 rounded">
108
+ Edit Profile
109
+ </button>
110
+ <a href="analyzer.html">
111
+ <button id="analyzerBtn" class="mt-2 px-4 py-2 rounded">
112
+ Go To Analyzer
113
+ </button>
114
+ </a>
115
+ </div>
116
+ <div>
117
+ <h2 class="text-xl font-semibold mb-4">Your Profile</h2>
118
+ <p class="mb-2">
119
+ Name: <span id="userName" class="font-medium">Loading...</span>
120
+ </p>
121
+ <p class="mb-2">
122
+ DOB: <span id="userDOB" class="font-medium">Loading...</span>
123
+ </p>
124
+ </div>
 
 
125
  </div>
126
  </div>
 
127
 
128
+ <!-- PROFILE EDIT -->
129
+ <div id="profileEditSection" class="hidden mb-10">
130
+ <div class="flex flex-col sm:flex-row items-start space-x-6">
131
+ <div class="flex flex-col items-center mb-4 sm:mb-0">
132
+ <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
133
+ </div>
134
+ <div class="flex-1">
135
+ <h1 class="text-3xl font-semibold mb-4">Edit Profile</h1>
136
+ <div class="space-y-4">
137
+ <div>
138
+ <label for="inputName" class="block text-sm font-medium"
139
+ >Name</label
140
+ >
141
+ <input
142
+ type="text"
143
+ id="inputName"
144
+ class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
145
+ />
146
+ </div>
147
+ <div>
148
+ <label for="inputDOB" class="block text-sm font-medium"
149
+ >Date of Birth</label
150
+ >
151
+ <input
152
+ type="date"
153
+ id="inputDOB"
154
+ class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
155
+ />
156
+ </div>
157
  </div>
158
+ <div class="flex space-x-2 mt-4">
159
+ <button id="saveProfileBtn" class="px-4 py-2 rounded">
160
+ Save
161
+ </button>
162
+ <button id="cancelProfileBtn" class="px-4 py-2 rounded">
163
+ Cancel
164
+ </button>
 
 
165
  </div>
166
  </div>
 
 
 
 
 
 
 
 
167
  </div>
168
  </div>
 
 
169
 
170
+ <!-- RANGE BARS -->
171
+ <h2 class="text-xl font-semibold mb-4">Your Overall Health Summary</h2>
172
+ <div class="tabs">
173
+ <div class="tab active" data-tab="out-range">
174
+ Out of Range <span class="count-badge">0</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
175
  </div>
176
+ <div class="tab" data-tab="in-range">
177
+ In Range <span class="count-badge">0</span>
178
  </div>
179
  </div>
180
+ <div class="tab-content active" id="out-range"></div>
181
+ <div class="tab-content" id="in-range"></div>
182
  </div>
183
  </div>
184
 
 
194
  doc,
195
  getDoc,
196
  updateDoc,
 
 
 
197
  } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
198
+
199
  const firebaseConfig = {
200
+ apiKey: "AIzaSyAKWstCc7HqMgV8DmH2Sy6QwUP3JvZxu9g",
201
+ authDomain: "appchallenge-c8fe3.firebaseapp.com",
202
+ projectId: "appchallenge-c8fe3",
203
+ storageBucket: "appchallenge-c8fe3.firebasestorage.app",
204
+ messagingSenderId: "943791692455",
205
+ appId: "1:943791692455:web:ae04d06bf09669b6bdd982",
206
+ measurementId: "G-HJ7EHW8V4N",
207
+ };
208
+
 
209
  const app = initializeApp(firebaseConfig);
210
  const auth = getAuth(app);
211
  const db = getFirestore(app);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
 
213
+ let currentUser = null;
214
+ const homeNavDesktop = document.querySelector(
215
+ 'ul.md\\:flex li a[href="index.html"]'
216
+ )?.parentElement;
217
+ const homeNavMobile = document.querySelector(
218
+ '#mobile-menu a[href="index.html"]'
219
+ )?.parentElement;
 
 
 
 
 
 
 
 
 
 
 
 
220
 
221
+ // ✅ Auth State Handling
222
+ onAuthStateChanged(auth, async (user) => {
223
+ const authNavItem = document.getElementById("authNavItem");
224
+ if (user) {
225
+ currentUser = user;
226
+ await loadUserProfile();
227
+ authNavItem.innerHTML = '<button onclick="logout()">Logout</button>';
228
+ if (homeNavDesktop) homeNavDesktop.style.display = "none";
229
+ if (homeNavMobile) homeNavMobile.style.display = "none";
230
+ } else {
231
+ authNavItem.innerHTML = '<a href="login.html">Login</a>';
232
+ if (homeNavDesktop) homeNavDesktop.style.display = "";
233
+ if (homeNavMobile) homeNavMobile.style.display = "";
234
+ window.location.href = "login.html";
235
+ }
236
+ });
237
 
 
 
238
  async function loadUserProfile() {
239
  try {
240
  const userDoc = await getDoc(doc(db, "users", currentUser.uid));
 
247
  localStorage.setItem("userName", userData.name || "");
248
  localStorage.setItem("userDOB", userData.dob || "");
249
  }
250
+ } catch (e) {
251
+ console.error("Error loading user profile:", e);
252
  }
253
  }
254
+
 
255
  window.saveProfile = async (name, dob) => {
256
  try {
257
+ await updateDoc(doc(db, "users", currentUser.uid), { name, dob });
 
 
 
258
  localStorage.setItem("userName", name);
259
  localStorage.setItem("userDOB", dob);
260
  return true;
261
+ } catch (e) {
262
+ console.error("Error updating profile:", e);
263
  return false;
264
  }
265
  };
266
+
 
267
  window.logout = async () => {
268
  try {
269
  await signOut(auth);
270
  localStorage.clear();
271
  window.location.href = "login.html";
272
+ } catch (e) {
273
+ console.error("Error signing out:", e);
274
  }
275
  };
276
+
 
 
 
 
 
 
 
 
 
 
 
 
277
  document.addEventListener("DOMContentLoaded", () => {
278
  const profileView = document.getElementById("profileViewSection");
279
  const profileEdit = document.getElementById("profileEditSection");
 
282
  const cancelBtn = document.getElementById("cancelProfileBtn");
283
  const inputName = document.getElementById("inputName");
284
  const inputDOB = document.getElementById("inputDOB");
285
+
 
286
  editBtn.addEventListener("click", () => {
287
  inputName.value = document.getElementById("userName").textContent;
288
  inputDOB.value = document.getElementById("userDOB").textContent;
289
  profileView.classList.add("hidden");
290
  profileEdit.classList.remove("hidden");
291
  });
292
+
 
293
  saveBtn.addEventListener("click", async () => {
294
  const nameVal = inputName.value.trim();
295
  const dobVal = inputDOB.value;
 
296
  const success = await window.saveProfile(nameVal, dobVal);
 
297
  if (success) {
298
  document.getElementById("userName").textContent =
299
  nameVal || "Name not set";
 
305
  alert("Error saving profile. Please try again.");
306
  }
307
  });
308
+
 
309
  cancelBtn.addEventListener("click", () => {
310
  profileEdit.classList.add("hidden");
311
  profileView.classList.remove("hidden");
312
  });
313
+
314
+ // RANGE BARS LOGIC
315
+ const tabs = document.querySelectorAll(".tab");
316
+ const contents = document.querySelectorAll(".tab-content");
317
+ const measurements = [
318
+ {
319
+ name: "Blood Sugar",
320
+ min: 70,
321
+ max: 110,
322
+ value: 95,
323
+ tab: "in-range",
324
+ impacts: ["Pancreas"],
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
325
  },
326
+ {
327
+ name: "Cholesterol",
328
+ min: 120,
329
+ max: 200,
330
+ value: 180,
331
+ tab: "in-range",
332
+ impacts: ["Heart", "Arteries"],
333
  },
334
+ {
335
+ name: "Triglycerides",
336
+ min: 50,
337
+ max: 150,
338
+ value: 180,
339
+ tab: "out-range",
340
+ impacts: ["Heart"],
341
+ },
342
+ {
343
+ name: "Blood Pressure",
344
+ min: 90,
345
+ max: 120,
346
+ value: 130,
347
+ tab: "out-range",
348
+ impacts: ["Heart", "Kidneys"],
349
+ },
350
+ ];
351
+
352
+ const counts = { "in-range": 0, "out-range": 0 };
353
+
354
+ measurements.forEach((m) => {
355
+ counts[m.tab]++;
356
+ const container = document.getElementById(m.tab);
357
+ const card = document.createElement("div");
358
+ card.className = "range-card";
359
+ const title = document.createElement("h3");
360
+ title.textContent = m.name;
361
+ card.appendChild(title);
362
+ if (m.impacts) {
363
+ const impactLabel = document.createElement("div");
364
+ impactLabel.className = "impact-label";
365
+ impactLabel.textContent = "Impacts: " + m.impacts.join(", ");
366
+ card.appendChild(impactLabel);
367
+ }
368
+ const barContainer = document.createElement("div");
369
+ barContainer.className = "range-bar-container";
370
+ const bar = document.createElement("div");
371
+ bar.className = "range-bar";
372
+
373
+ let normalPercent = 100;
374
+ let overflowPercent = 0;
375
+ if (m.tab === "out-range" && m.value > m.max) {
376
+ normalPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
377
+ overflowPercent = 100 - normalPercent;
378
  }
379
+
380
+ const normalDiv = document.createElement("div");
381
+ normalDiv.className = "normal-range";
382
+ normalDiv.style.width = normalPercent + "%";
383
+ bar.appendChild(normalDiv);
384
+ if (overflowPercent > 0) {
385
+ const overflowDiv = document.createElement("div");
386
+ overflowDiv.className = "overflow-range";
387
+ overflowDiv.style.left = normalPercent + "%";
388
+ overflowDiv.style.width = overflowPercent + "%";
389
+ bar.appendChild(overflowDiv);
 
 
 
390
  }
391
+
392
+ let valuePercent = ((m.value - m.min) / (m.max - m.min)) * 100;
393
+ valuePercent = Math.min(Math.max(valuePercent, 0), 100);
394
+ const marker = document.createElement("div");
395
+ marker.className = "marker";
396
+ marker.style.left = valuePercent + "%";
397
+ bar.appendChild(marker);
398
+ const valueLabel = document.createElement("div");
399
+ valueLabel.className = "value-label";
400
+ valueLabel.style.left = valuePercent + "%";
401
+ valueLabel.textContent = m.value;
402
+ bar.appendChild(valueLabel);
403
+
404
+ barContainer.appendChild(bar);
405
+
406
+ const minMaxDiv = document.createElement("div");
407
+ minMaxDiv.className = "min-max-labels";
408
+ const minLabel = document.createElement("span");
409
+ minLabel.textContent = "Min: " + m.min;
410
+ const maxLabel = document.createElement("span");
411
+ maxLabel.textContent = "Max: " + m.max;
412
+ minMaxDiv.appendChild(minLabel);
413
+ minMaxDiv.appendChild(maxLabel);
414
+ barContainer.appendChild(minMaxDiv);
415
+
416
+ card.appendChild(barContainer);
417
+ container.appendChild(card);
418
  });
419
+
420
+ tabs.forEach((tab) => {
421
+ const t = tab.dataset.tab;
422
+ const badge = tab.querySelector(".count-badge");
423
+ badge.textContent = counts[t];
424
+ tab.addEventListener("click", () => {
425
+ tabs.forEach((t) => t.classList.remove("active"));
426
+ tab.classList.add("active");
427
+ contents.forEach((c) =>
428
+ c.id === t
429
+ ? c.classList.add("active")
430
+ : c.classList.remove("active")
431
+ );
432
+ });
433
  });
434
  });
 
435
  </script>
 
436
  </body>
437
+ </html>