Hugging Face's logo

Spaces:
vineelagampa
/
PRMSChallenge
Running

App Files Community
20
vineelagampa TheFrogGod commited on
Commit
d3d89a9
·
verified ·
1 Parent(s): c7b16c3

Updated styling and kept consistent changes. (#5)

Browse files

- Updated styling and kept consistent changes. (c5380308038715bfd54e838f041515bd5971985f)


Co-authored-by: Aanya Choudhary <[email protected]>

Files changed (1) hide show
  1. web/profile.html +234 -149
web/profile.html CHANGED
@@ -6,69 +6,132 @@
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
  </head>
10
- <body class="bg-[#F7F8F9] text-gray-800 min-h-screen">
11
- <!-- Navbar -->
12
- <nav class="bg-white border border-gray-200 px-6 py-4 mb-6">
13
- <div class="container mx-auto flex justify-between items-center">
14
- <a href="index.html" class="text-2xl font-bold text-[#6B9080]"
15
- >CTRL + ALT + HEAL</a
 
 
 
 
16
  >
17
- <ul class="flex space-x-6 text-sm font-medium text-gray-700">
18
- <li><a href="index.html" class="hover:text-[#6B9080]">Home</a></li>
19
- <li>
20
- <a href="analyzer.html" class="hover:text-[#6B9080]">Analyzer</a>
21
- </li>
22
- <li>
23
- <a href="profile.html" class="hover:text-[#6B9080]">Profile</a>
24
- </li>
25
- <li><button onclick="logout()" class="text-red-500">Logout</button></li>
26
  </ul>
 
 
 
 
 
 
 
 
27
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </nav>
29
 
30
- <div class="container mx-auto px-6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  <!-- VIEW MODE -->
32
  <div id="profileViewSection">
33
  <div class="flex items-start space-x-6 mb-10">
34
  <!-- Avatar & Edit Button -->
35
  <div class="flex flex-col items-center">
36
  <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
37
- <button
38
- id="editProfileBtn"
39
- class="mt-2 bg-[#6B9080] text-white px-4 py-2 rounded hover:bg-[#5b7e6a] transition"
40
- >
41
  Edit Profile
42
  </button>
43
  <a href="analyzer.html"
44
- ><button
45
- class="mt-2 bg-[#6B9080] text-white px-4 py-2 rounded hover:bg-[#5b7e6a] transition"
46
- >
47
  Go To Analyzer
48
- </button>
49
- </a>
50
  </div>
51
 
52
-
53
-
54
  <!-- User Info -->
55
  <div>
56
- <h1 class="text-3xl font-semibold text-gray-800 mb-4">
57
- Your Profile
58
- </h1>
59
- <p class="text-gray-700 mb-2">
60
  Name: <span id="userName" class="font-medium">Loading...</span>
61
  </p>
62
- <p class="text-gray-700 mb-2">
63
- DOB: <span id="userDOB" class="font-medium">Loding...</span>
64
- </p>
65
- <!-- <p class="text-gray-700 mb-2">
66
- Big Things We Should Fix:
67
- <span id="userFix" class="font-medium"></span>
68
  </p>
69
- <p class="text-gray-700 mb-6">
70
- Health Goals: <span id="userGoals" class="font-medium"></span>
71
- </p> -->
72
  </div>
73
  </div>
74
  </div>
@@ -76,79 +139,58 @@
76
  <!-- EDIT MODE -->
77
  <div id="profileEditSection" class="hidden mb-10">
78
  <div class="flex flex-col sm:flex-row items-start space-x-6">
79
- <!-- Avatar Placeholder -->
80
  <div class="flex flex-col items-center mb-4 sm:mb-0">
81
  <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
82
  </div>
83
- <!-- Edit Form -->
84
  <div class="flex-1">
85
- <h1 class="text-3xl font-semibold text-gray-800 mb-4">
86
- Edit Profile
87
- </h1>
88
  <div class="space-y-4">
89
  <div>
90
- <label
91
- for="inputName"
92
- class="block text-sm font-medium text-gray-600"
93
  >Name</label
94
  >
95
  <input
96
  type="text"
97
  id="inputName"
98
- class="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
99
  />
100
  </div>
101
  <div>
102
- <label
103
- for="inputDOB"
104
- class="block text-sm font-medium text-gray-600"
105
  >Date of Birth</label
106
  >
107
  <input
108
  type="date"
109
  id="inputDOB"
110
- class="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
111
  />
112
  </div>
113
- </div>
114
  </div>
115
  <div class="flex space-x-2 mt-4">
116
- <button
117
- id="saveProfileBtn"
118
- class="bg-[#6B9080] text-white px-4 py-2 rounded hover:bg-[#5b7e6a] transition"
119
- >
120
  Save
121
  </button>
122
- <button
123
- id="cancelProfileBtn"
124
- class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 transition"
125
- >
126
  Cancel
127
  </button>
128
  </div>
129
  </div>
130
  </div>
131
  </div>
132
-
133
 
134
  <!-- Chart Section -->
135
  <div class="mt-10" id="chartSection">
136
- <!-- Card Wrapper -->
137
  <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6">
138
- <h2 class="text-xl font-semibold text-gray-800 mb-4">
139
- Health Progress
140
- </h2>
141
-
142
- <!-- Controls Row -->
143
  <div
144
  class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"
145
  >
146
- <!-- Date & Score Inputs -->
147
  <div class="flex flex-1 gap-2">
148
  <input
149
  type="date"
150
  id="entryDate"
151
- class="flex-1 border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
152
  />
153
  <input
154
  type="number"
@@ -156,27 +198,18 @@
156
  min="0"
157
  max="100"
158
  placeholder="Score"
159
- class="w-24 border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
160
  />
161
  </div>
162
- <!-- Buttons -->
163
  <div class="flex gap-2">
164
- <button
165
- id="addEntryBtn"
166
- class="bg-[#6B9080] text-white px-4 py-2 rounded hover:bg-[#5b7e6a] transition"
167
- >
168
  Add Entry
169
  </button>
170
- <button
171
- id="resetChartBtn"
172
- class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition"
173
- >
174
  Reset Chart
175
  </button>
176
  </div>
177
  </div>
178
-
179
- <!-- Chart Canvas -->
180
  <div class="overflow-x-auto">
181
  <canvas id="progressChart" class="w-full h-64"></canvas>
182
  </div>
@@ -185,55 +218,108 @@
185
  </div>
186
 
187
  <script type="module">
188
- import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js';
189
- import { getAuth, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js';
190
- import { getFirestore, doc, getDoc, updateDoc } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js';
191
-
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  const firebaseConfig = {
193
  apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
194
  authDomain: "login-tutorial-7a9e1.firebaseapp.com",
195
  projectId: "login-tutorial-7a9e1",
196
  storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
197
  messagingSenderId: "491093197824",
198
- appId: "1:491093197824:web:9f866..."
199
  };
200
-
 
201
  const app = initializeApp(firebaseConfig);
202
  const auth = getAuth(app);
203
  const db = getFirestore(app);
204
-
 
 
 
 
 
 
205
  let currentUser = null;
 
 
 
 
 
 
 
206
 
207
- onAuthStateChanged(auth, async (user) => {
208
- if (user) {
209
- currentUser = user;
210
- await loadUserProfile();
211
- } else {
212
- window.location.href = 'login.html';
213
- }
214
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
 
216
-
 
 
 
 
 
 
 
 
 
217
  async function loadUserProfile() {
218
  try {
219
- const userDoc = await getDoc(doc(db, 'users', currentUser.uid));
220
  if (userDoc.exists()) {
221
  const userData = userDoc.data();
222
- document.getElementById("userName").textContent = userData.name || "Name not set";
223
- document.getElementById("userDOB").textContent = userData.dob || "DOB not set";
 
 
224
  localStorage.setItem("userName", userData.name || "");
225
  localStorage.setItem("userDOB", userData.dob || "");
226
  }
227
  } catch (error) {
228
  console.error("Error loading user profile:", error);
229
  }
230
- }
231
-
 
232
  window.saveProfile = async (name, dob) => {
233
  try {
234
- await updateDoc(doc(db, 'users', currentUser.uid), {
235
  name: name,
236
- dob: dob
237
  });
238
  localStorage.setItem("userName", name);
239
  localStorage.setItem("userDOB", dob);
@@ -243,19 +329,19 @@
243
  return false;
244
  }
245
  };
246
-
247
-
248
  window.logout = async () => {
249
  try {
250
  await signOut(auth);
251
  localStorage.clear();
252
- window.location.href = 'login.html';
253
  } catch (error) {
254
  console.error("Error signing out:", error);
255
  }
256
  };
257
-
258
-
259
  function loadProgressData() {
260
  return JSON.parse(localStorage.getItem("progressData") || "[]");
261
  }
@@ -265,9 +351,9 @@
265
  function resetProgressData() {
266
  localStorage.removeItem("progressData");
267
  }
268
-
 
269
  document.addEventListener("DOMContentLoaded", () => {
270
-
271
  const profileView = document.getElementById("profileViewSection");
272
  const profileEdit = document.getElementById("profileEditSection");
273
  const editBtn = document.getElementById("editProfileBtn");
@@ -275,52 +361,52 @@
275
  const cancelBtn = document.getElementById("cancelProfileBtn");
276
  const inputName = document.getElementById("inputName");
277
  const inputDOB = document.getElementById("inputDOB");
278
- // const inputFix = document.getElementById("inputFix");
279
- // const inputGoals = document.getElementById("inputGoals");
280
-
281
  editBtn.addEventListener("click", () => {
282
  inputName.value = document.getElementById("userName").textContent;
283
  inputDOB.value = document.getElementById("userDOB").textContent;
284
  profileView.classList.add("hidden");
285
  profileEdit.classList.remove("hidden");
286
  });
287
-
 
288
  saveBtn.addEventListener("click", async () => {
289
  const nameVal = inputName.value.trim();
290
  const dobVal = inputDOB.value;
291
-
292
  const success = await window.saveProfile(nameVal, dobVal);
293
-
294
  if (success) {
295
- document.getElementById("userName").textContent = nameVal || "Name not set";
296
- document.getElementById("userDOB").textContent = dobVal || "DOB not set";
 
 
297
  profileEdit.classList.add("hidden");
298
  profileView.classList.remove("hidden");
299
  } else {
300
  alert("Error saving profile. Please try again.");
301
  }
302
  });
 
 
303
  cancelBtn.addEventListener("click", () => {
304
  profileEdit.classList.add("hidden");
305
  profileView.classList.remove("hidden");
306
  });
307
-
 
308
  const chartSection = document.getElementById("chartSection");
309
  const welcomeMessage = document.getElementById("welcomeMessage");
310
  const isNewUser = localStorage.getItem("isNewUser") === "true";
311
-
312
  if (isNewUser) {
313
  welcomeMessage.classList.remove("hidden");
314
  chartSection.classList.add("hidden");
315
  }
316
-
317
- //chart logic(line graph)
318
  const stored = loadProgressData();
319
  const labels = stored.map((e) => e.date);
320
- const dataPoints = [
321
- {x:50, y:7},
322
- {x:70, y:30},
323
- ];
324
  const ctx = document.getElementById("progressChart").getContext("2d");
325
  const progressChart = new Chart(ctx, {
326
  type: "line",
@@ -329,7 +415,7 @@
329
  datasets: [
330
  {
331
  label: "Health Score",
332
- data: dataPoints,
333
  borderColor: "#6B9080",
334
  fill: true,
335
  tension: 0.4,
@@ -340,45 +426,44 @@
340
  scales: { y: { beginAtZero: true, max: 100 } },
341
  },
342
  });
343
-
 
344
  document.getElementById("addEntryBtn").addEventListener("click", () => {
345
  const date = document.getElementById("entryDate").value;
346
- const score = parseInt(
347
- document.getElementById("entryScore").value,
348
- 10
349
- );
350
  if (!date || isNaN(score)) {
351
  alert("Please select a date and enter a valid score.");
352
  return;
353
  }
354
-
355
  stored.push({ date, score });
356
  saveProgressData(stored);
357
  progressChart.data.labels.push(date);
358
  progressChart.data.datasets[0].data.push(score);
359
  progressChart.update();
360
-
361
  document.getElementById("entryDate").value = "";
362
  document.getElementById("entryScore").value = "";
 
363
  if (isNewUser) {
364
  localStorage.setItem("isNewUser", "false");
365
  welcomeMessage.classList.add("hidden");
366
  chartSection.classList.remove("hidden");
367
  }
368
  });
369
-
370
- // Reset Button
371
- document
372
- .getElementById("resetChartBtn")
373
- .addEventListener("click", () => {
374
- if (!confirm("Are you sure you want to clear all progress data?"))
375
- return;
376
- resetProgressData();
377
- progressChart.data.labels = [];
378
- progressChart.data.datasets[0].data = [];
379
- progressChart.update();
380
- });
381
  });
 
382
  </script>
 
383
  </body>
384
  </html>
 
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"
37
+ >
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"
46
+ >
47
+ <li>
48
+ <a
49
+ href="index.html"
50
+ class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
51
+ >Home</a
52
+ >
53
+ </li>
54
+ <li>
55
+ <a
56
+ href="analyzer.html"
57
+ class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
58
+ >Analyzer</a
59
+ >
60
+ </li>
61
+ <li>
62
+ <a
63
+ href="profile.html"
64
+ class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
65
+ >Profile</a
66
+ >
67
+ </li>
68
+ <li>
69
+ <a
70
+ href="login.html"
71
+ class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
72
+ >Login</a
73
+ >
74
+ </li>
75
+ <li>
76
+ <a
77
+ href="about.html"
78
+ class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
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>
 
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"
 
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>
 
218
  </div>
219
 
220
  <script type="module">
221
+ import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
222
+ import {
223
+ getAuth,
224
+ onAuthStateChanged,
225
+ signOut,
226
+ } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";
227
+ import {
228
+ getFirestore,
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
+ // 🔥 Firebase config
238
  const firebaseConfig = {
239
  apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
240
  authDomain: "login-tutorial-7a9e1.firebaseapp.com",
241
  projectId: "login-tutorial-7a9e1",
242
  storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
243
  messagingSenderId: "491093197824",
244
+ appId: "1:491093197824:web:9f866...",
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));
303
  if (userDoc.exists()) {
304
  const userData = userDoc.data();
305
+ document.getElementById("userName").textContent =
306
+ userData.name || "Name not set";
307
+ document.getElementById("userDOB").textContent =
308
+ userData.dob || "DOB not set";
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);
 
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
  }
 
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");
359
  const editBtn = document.getElementById("editProfileBtn");
 
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";
383
+ document.getElementById("userDOB").textContent =
384
+ dobVal || "DOB not set";
385
  profileEdit.classList.add("hidden");
386
  profileView.classList.remove("hidden");
387
  } else {
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",
 
415
  datasets: [
416
  {
417
  label: "Health Score",
418
+ data: stored.map((e) => e.score),
419
  borderColor: "#6B9080",
420
  fill: true,
421
  tension: 0.4,
 
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>