PRMSChallenge

Sleeping

App Files Files Community

TheFrogGod commited on Sep 13, 2025

Commit

03cf0e2

1 Parent(s): caaee88

Restart: updated profile styling

Browse files

Files changed (2) hide show

web/profile.html +259 -144
web/style.css +246 -0

web/profile.html CHANGED Viewed

@@ -6,69 +6,131 @@
     <title>Profile - CTRL + ALT + HEAL</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   </head>
-  <body class="bg-[#F7F8F9] text-gray-800 min-h-screen">
-    <!-- Navbar -->
-    <nav class="bg-white border border-gray-200 px-6 py-4 mb-6">
-      <div class="container mx-auto flex justify-between items-center">
-        <a href="index.html" class="text-2xl font-bold text-[#6B9080]"
-          >CTRL + ALT + HEAL</a
         >
-        <ul class="flex space-x-6 text-sm font-medium text-gray-700">
-          <li><a href="index.html" class="hover:text-[#6B9080]">Home</a></li>
-          <li>
-            <a href="analyzer.html" class="hover:text-[#6B9080]">Analyzer</a>
-          </li>
-          <li>
-            <a href="profile.html" class="hover:text-[#6B9080]">Profile</a>
-          </li>
-          <li><button onclick="logout()" class="text-red-500">Logout</button></li>
         </ul>
       </div>
     </nav>
-    <div class="container mx-auto px-6">
       <!-- VIEW MODE -->
       <div id="profileViewSection">
         <div class="flex items-start space-x-6 mb-10">
           <!-- Avatar & Edit Button -->
           <div class="flex flex-col items-center">
             <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
-            <button
-              id="editProfileBtn"
-              class="mt-2 bg-[#6B9080] text-white px-4 py-2 rounded hover:bg-[#5b7e6a] transition"
-            >
               Edit Profile
             </button>
             <a href="analyzer.html"
-              ><button
-                class="mt-2 bg-[#6B9080] text-white px-4 py-2 rounded hover:bg-[#5b7e6a] transition"
-              >
                 Go To Analyzer
-              </button>
-            </a>
           </div>
           <!-- User Info -->
           <div>
-            <h1 class="text-3xl font-semibold text-gray-800 mb-4">
-              Your Profile
-            </h1>
-            <p class="text-gray-700 mb-2">
               Name: <span id="userName" class="font-medium">Loading...</span>
             </p>
-            <p class="text-gray-700 mb-2">
-              DOB: <span id="userDOB" class="font-medium">Loding...</span>
             </p>
-            <!-- <p class="text-gray-700 mb-2">
-              Big Things We Should Fix:
-              <span id="userFix" class="font-medium"></span>
-            </p>
-            <p class="text-gray-700 mb-6">
-              Health Goals: <span id="userGoals" class="font-medium"></span>
-            </p> -->
           </div>
         </div>
       </div>
@@ -76,53 +138,38 @@
       <!-- EDIT MODE -->
       <div id="profileEditSection" class="hidden mb-10">
         <div class="flex flex-col sm:flex-row items-start space-x-6">
-          <!-- Avatar Placeholder -->
           <div class="flex flex-col items-center mb-4 sm:mb-0">
             <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
           </div>
-          <!-- Edit Form -->
           <div class="flex-1">
-            <h1 class="text-3xl font-semibold text-gray-800 mb-4">
-              Edit Profile
-            </h1>
             <div class="space-y-4">
               <div>
-                <label
-                  for="inputName"
-                  class="block text-sm font-medium text-gray-600"
                   >Name</label
                 >
                 <input
                   type="text"
                   id="inputName"
-                  class="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
                 />
               </div>
               <div>
-                <label
-                  for="inputDOB"
-                  class="block text-sm font-medium text-gray-600"
                   >Date of Birth</label
                 >
                 <input
                   type="date"
                   id="inputDOB"
-                  class="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
                 />
               </div>
-              </div>
             </div>
             <div class="flex space-x-2 mt-4">
-              <button
-                id="saveProfileBtn"
-                class="bg-[#6B9080] text-white px-4 py-2 rounded hover:bg-[#5b7e6a] transition"
-              >
                 Save
               </button>
-              <button
-                id="cancelProfileBtn"
-                class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 transition"
-              >
                 Cancel
               </button>
             </div>
@@ -130,25 +177,18 @@
         </div>
       </div>
       <!-- Chart Section -->
       <div class="mt-10" id="chartSection">
-        <!-- Card Wrapper -->
         <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6">
-          <h2 class="text-xl font-semibold text-gray-800 mb-4">
-            Health Progress
-          </h2>
-          <!-- Controls Row -->
           <div
             class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"
           >
-            <!-- Date & Score Inputs -->
             <div class="flex flex-1 gap-2">
               <input
                 type="date"
                 id="entryDate"
-                class="flex-1 border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
               />
               <input
                 type="number"
@@ -156,27 +196,18 @@
                 min="0"
                 max="100"
                 placeholder="Score"
-                class="w-24 border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
               />
             </div>
-            <!-- Buttons -->
             <div class="flex gap-2">
-              <button
-                id="addEntryBtn"
-                class="bg-[#6B9080] text-white px-4 py-2 rounded hover:bg-[#5b7e6a] transition"
-              >
                 Add Entry
               </button>
-              <button
-                id="resetChartBtn"
-                class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition"
-              >
                 Reset Chart
               </button>
             </div>
           </div>
-          <!-- Chart Canvas -->
           <div class="overflow-x-auto">
             <canvas id="progressChart" class="w-full h-64"></canvas>
           </div>
@@ -185,55 +216,127 @@
     </div>
     <script type="module">
-      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js';
-      import { getAuth, onAuthStateChanged, signOut } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js';
-      import { getFirestore, doc, getDoc, updateDoc } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js';
       const firebaseConfig = {
         apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
         authDomain: "login-tutorial-7a9e1.firebaseapp.com",
         projectId: "login-tutorial-7a9e1",
         storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
         messagingSenderId: "491093197824",
-        appId: "1:491093197824:web:9f866..."
       };
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
       const db = getFirestore(app);
       let currentUser = null;
       onAuthStateChanged(auth, async (user) => {
         if (user) {
           currentUser = user;
           await loadUserProfile();
         } else {
-          window.location.href = 'login.html';
         }
       });
       async function loadUserProfile() {
         try {
-          const userDoc = await getDoc(doc(db, 'users', currentUser.uid));
           if (userDoc.exists()) {
             const userData = userDoc.data();
-            document.getElementById("userName").textContent = userData.name || "Name not set";
-            document.getElementById("userDOB").textContent = userData.dob || "DOB not set";
             localStorage.setItem("userName", userData.name || "");
             localStorage.setItem("userDOB", userData.dob || "");
           }
         } catch (error) {
           console.error("Error loading user profile:", error);
         }
-      }
       window.saveProfile = async (name, dob) => {
         try {
-          await updateDoc(doc(db, 'users', currentUser.uid), {
             name: name,
-            dob: dob
           });
           localStorage.setItem("userName", name);
           localStorage.setItem("userDOB", dob);
@@ -243,19 +346,19 @@
           return false;
         }
       };
       window.logout = async () => {
         try {
           await signOut(auth);
           localStorage.clear();
-          window.location.href = 'login.html';
         } catch (error) {
           console.error("Error signing out:", error);
         }
       };
       function loadProgressData() {
         return JSON.parse(localStorage.getItem("progressData") || "[]");
       }
@@ -265,9 +368,9 @@
       function resetProgressData() {
         localStorage.removeItem("progressData");
       }
       document.addEventListener("DOMContentLoaded", () => {
         const profileView = document.getElementById("profileViewSection");
         const profileEdit = document.getElementById("profileEditSection");
         const editBtn = document.getElementById("editProfileBtn");
@@ -275,52 +378,52 @@
         const cancelBtn = document.getElementById("cancelProfileBtn");
         const inputName = document.getElementById("inputName");
         const inputDOB = document.getElementById("inputDOB");
-        // const inputFix = document.getElementById("inputFix");
-        // const inputGoals = document.getElementById("inputGoals");
         editBtn.addEventListener("click", () => {
           inputName.value = document.getElementById("userName").textContent;
           inputDOB.value = document.getElementById("userDOB").textContent;
           profileView.classList.add("hidden");
           profileEdit.classList.remove("hidden");
         });
         saveBtn.addEventListener("click", async () => {
           const nameVal = inputName.value.trim();
           const dobVal = inputDOB.value;
           const success = await window.saveProfile(nameVal, dobVal);
           if (success) {
-            document.getElementById("userName").textContent = nameVal || "Name not set";
-            document.getElementById("userDOB").textContent = dobVal || "DOB not set";
             profileEdit.classList.add("hidden");
             profileView.classList.remove("hidden");
           } else {
             alert("Error saving profile. Please try again.");
           }
         });
         cancelBtn.addEventListener("click", () => {
           profileEdit.classList.add("hidden");
           profileView.classList.remove("hidden");
         });
         const chartSection = document.getElementById("chartSection");
         const welcomeMessage = document.getElementById("welcomeMessage");
         const isNewUser = localStorage.getItem("isNewUser") === "true";
         if (isNewUser) {
           welcomeMessage.classList.remove("hidden");
           chartSection.classList.add("hidden");
         }
-       //chart logic(line graph)
         const stored = loadProgressData();
         const labels = stored.map((e) => e.date);
-        const dataPoints = [
-          {x:50, y:7},
-          {x:70, y:30},
-        ];
         const ctx = document.getElementById("progressChart").getContext("2d");
         const progressChart = new Chart(ctx, {
           type: "line",
@@ -329,7 +432,7 @@
             datasets: [
               {
                 label: "Health Score",
-                data: dataPoints,
                 borderColor: "#6B9080",
                 fill: true,
                 tension: 0.4,
@@ -340,45 +443,57 @@
             scales: { y: { beginAtZero: true, max: 100 } },
           },
         });
         document.getElementById("addEntryBtn").addEventListener("click", () => {
           const date = document.getElementById("entryDate").value;
-          const score = parseInt(
-            document.getElementById("entryScore").value,
-            10
-          );
           if (!date || isNaN(score)) {
             alert("Please select a date and enter a valid score.");
             return;
           }
           stored.push({ date, score });
           saveProgressData(stored);
           progressChart.data.labels.push(date);
           progressChart.data.datasets[0].data.push(score);
           progressChart.update();
           document.getElementById("entryDate").value = "";
           document.getElementById("entryScore").value = "";
           if (isNewUser) {
             localStorage.setItem("isNewUser", "false");
             welcomeMessage.classList.add("hidden");
             chartSection.classList.remove("hidden");
           }
         });
-        // Reset Button
-        document
-          .getElementById("resetChartBtn")
-          .addEventListener("click", () => {
-            if (!confirm("Are you sure you want to clear all progress data?"))
-              return;
-            resetProgressData();
-            progressChart.data.labels = [];
-            progressChart.data.datasets[0].data = [];
-            progressChart.update();
-          });
       });
     </script>
   </body>
-</html>

     <title>Profile - CTRL + ALT + HEAL</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="style.css" />
   </head>
+  <body class="bg-[#F7F8F9] min-h-screen">
+   <!-- NAVBAR -->
+    <nav
+      class="fixed top-0 left-0 w-full z-50 backdrop-blur-md bg-white/20 border-b border-white/30 shadow-md"
+    >
+      <div class="flex justify-between items-center w-full px-6 py-4">
+        <!-- Logo -->
+        <a
+          href="index.html"
+          class="text-2xl font-bold text-black hover:text-[var(--tropical-indigo)] transition"
         >
+          CTRL + ALT + HEAL
+        </a>
+        <ul class="hidden md:flex space-x-6 font-medium text-gray-800">
+          <li><a href="index.html" class="nav-link">Home</a></li>
+          <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
+          <li><a href="past_data.html" class="nav-link">Past Reports</a></li>
+          <li><a href="profile.html" class="nav-link">Profile</a></li>
+          <li id="authNavItem"><a href="login.html" class="nav-link">Login</a></li>
         </ul>
+        <!-- Hamburger Menu -->
+        <button
+          id="hamburger"
+          class="md:hidden text-[var(--latte-cream)] text-2xl"
+        >
+          ☰
+        </button>
       </div>
+<!-- Changes added for change marker for style change-->
+      <!-- Mobile Menu -->
+      <ul
+        id="mobile-menu"
+        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"
+      >
+        <li>
+          <a
+            href="index.html"
+            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+            >Home</a
+          >
+        </li>
+        <li>
+          <a
+            href="analyzer.html"
+            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+            >Analyzer</a
+          >
+        </li>
+        <li>
+          <a
+            href="profile.html"
+            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+            >Profile</a
+          >
+        </li>
+        <li>
+          <a
+            href="login.html"
+            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+            >Login</a
+          >
+        </li>
+        <li>
+          <a
+            href="about.html"
+            class="block text-gray-800 hover:text-[var(--tropical-indigo)]"
+            >About</a
+          >
+        </li>
+          >
+        </li>
+      </ul>
     </nav>
+    <script>
+      const hamburger = document.getElementById("hamburger");
+      const mobileMenu = document.getElementById("mobile-menu");
+      hamburger.addEventListener("click", () => {
+        mobileMenu.classList.toggle("hidden");
+      });
+      // Underline the active page only
+      const currentPath = window.location.pathname.split("/").pop();
+      document.querySelectorAll(".nav-link").forEach((link) => {
+        if (link.getAttribute("href") === currentPath) {
+          link.classList.add("active-page"); // we'll style this in CSS
+        }
+      });
+      document.querySelectorAll("#mobile-menu a").forEach((link) => {
+        if (link.getAttribute("href") === currentPath) {
+          link.classList.add("active-page");
+        }
+      });
+    </script>
+    <div class="container mx-auto px-6 pt-[var(--navbar-height)]">
       <!-- VIEW MODE -->
       <div id="profileViewSection">
         <div class="flex items-start space-x-6 mb-10">
           <!-- Avatar & Edit Button -->
           <div class="flex flex-col items-center">
             <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
+            <button id="editProfileBtn" class="mt-2 px-4 py-2 rounded">
               Edit Profile
             </button>
             <a href="analyzer.html"
+              ><button id="analyzerBtn" class="mt-2 px-4 py-2 rounded">
                 Go To Analyzer
+              </button></a
+            >
           </div>
           <!-- User Info -->
           <div>
+            <h1 class="text-3xl font-semibold mb-4">Your Profile</h1>
+            <p class="mb-2">
               Name: <span id="userName" class="font-medium">Loading...</span>
             </p>
+            <p class="mb-2">
+              DOB: <span id="userDOB" class="font-medium">Loading...</span>
             </p>
           </div>
         </div>
       </div>
       <!-- EDIT MODE -->
       <div id="profileEditSection" class="hidden mb-10">
         <div class="flex flex-col sm:flex-row items-start space-x-6">
           <div class="flex flex-col items-center mb-4 sm:mb-0">
             <div class="w-32 h-32 bg-gray-300 rounded-full"></div>
           </div>
           <div class="flex-1">
+            <h1 class="text-3xl font-semibold mb-4">Edit Profile</h1>
             <div class="space-y-4">
               <div>
+                <label for="inputName" class="block text-sm font-medium"
                   >Name</label
                 >
                 <input
                   type="text"
                   id="inputName"
+                  class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
                 />
               </div>
               <div>
+                <label for="inputDOB" class="block text-sm font-medium"
                   >Date of Birth</label
                 >
                 <input
                   type="date"
                   id="inputDOB"
+                  class="w-full border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
                 />
               </div>
             </div>
             <div class="flex space-x-2 mt-4">
+              <button id="saveProfileBtn" class="px-4 py-2 rounded">
                 Save
               </button>
+              <button id="cancelProfileBtn" class="px-4 py-2 rounded">
                 Cancel
               </button>
             </div>
         </div>
       </div>
       <!-- Chart Section -->
       <div class="mt-10" id="chartSection">
         <div class="bg-white border border-gray-200 rounded-lg p-6 mb-6">
+          <h2 class="text-xl font-semibold mb-4">Health Progress</h2>
           <div
             class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"
           >
             <div class="flex flex-1 gap-2">
               <input
                 type="date"
                 id="entryDate"
+                class="flex-1 border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
               />
               <input
                 type="number"
                 min="0"
                 max="100"
                 placeholder="Score"
+                class="w-24 border rounded px-3 py-2 focus:ring-2 focus:ring-[#6B9080] focus:outline-none"
               />
             </div>
             <div class="flex gap-2">
+              <button id="addEntryBtn" class="px-4 py-2 rounded">
                 Add Entry
               </button>
+              <button id="resetChartBtn" class="px-4 py-2 rounded">
                 Reset Chart
               </button>
             </div>
           </div>
           <div class="overflow-x-auto">
             <canvas id="progressChart" class="w-full h-64"></canvas>
           </div>
     </div>
     <script type="module">
+      import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
+      import {
+        getAuth,
+        onAuthStateChanged,
+        signOut,
+      } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";
+      import {
+        getFirestore,
+        doc,
+        getDoc,
+        updateDoc,
+        collection,
+        addDoc,
+        serverTimestamp,
+      } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
+      // 🔥 Firebase config
       const firebaseConfig = {
         apiKey: "AIzaSyAPhM_Ee7cLzyKHs5zyFy8g5ZOk9-pubRI",
         authDomain: "login-tutorial-7a9e1.firebaseapp.com",
         projectId: "login-tutorial-7a9e1",
         storageBucket: "login-tutorial-7a9e1.firebasestorage.app",
         messagingSenderId: "491093197824",
+        appId: "1:491093197824:web:9f866...",
       };
+      // 🔧 Init
       const app = initializeApp(firebaseConfig);
       const auth = getAuth(app);
       const db = getFirestore(app);
+      // Expose Firestore helpers if you need them elsewhere
+      window.firebaseAuth = auth;
+      window.onAuthStateChanged = onAuthStateChanged;
+      window.firestoreDb = db;
+      window.firestoreHelpers = { collection, doc, addDoc, serverTimestamp };
       let currentUser = null;
+      // ✅ Auth state check
       onAuthStateChanged(auth, async (user) => {
+        const authNavItem = document.getElementById("authNavItem");
         if (user) {
           currentUser = user;
           await loadUserProfile();
+          if (authNavItem) {
+            authNavItem.innerHTML =
+              '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
+          }
         } else {
+          if (authNavItem) {
+            authNavItem.innerHTML =
+              '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
+          }
+          window.location.href = "login.html";
         }
       });
+      // ✅ Hide Home button when logged in
+const homeNavDesktop = document.querySelector('ul.md\\:flex li a[href="index.html"]')
+  ?.parentElement; // Desktop <li>
+const homeNavMobile = document.querySelector('#mobile-menu a[href="index.html"]')
+  ?.parentElement; // Mobile <li>
+onAuthStateChanged(auth, async (user) => {
+  const authNavItem = document.getElementById("authNavItem");
+  if (user) {
+    currentUser = user;
+    await loadUserProfile();
+    // Swap login with logout
+    if (authNavItem) {
+      authNavItem.innerHTML =
+        '<button onclick="logout()" class="hover:text-[#6B9080] text-red-600">Logout</button>';
+    }
+    // Hide Home button
+    if (homeNavDesktop) homeNavDesktop.style.display = "none";
+    if (homeNavMobile) homeNavMobile.style.display = "none";
+  } else {
+    if (authNavItem) {
+      authNavItem.innerHTML =
+        '<a href="login.html" class="hover:text-[#6B9080]">Login</a>';
+    }
+    // Show Home button again
+    if (homeNavDesktop) homeNavDesktop.style.display = "";
+    if (homeNavMobile) homeNavMobile.style.display = "";
+    window.location.href = "login.html";
+  }
+});
+      // 📄 Load user profile from Firestore
       async function loadUserProfile() {
         try {
+          const userDoc = await getDoc(doc(db, "users", currentUser.uid));
           if (userDoc.exists()) {
             const userData = userDoc.data();
+            document.getElementById("userName").textContent =
+              userData.name || "Name not set";
+            document.getElementById("userDOB").textContent =
+              userData.dob || "DOB not set";
             localStorage.setItem("userName", userData.name || "");
             localStorage.setItem("userDOB", userData.dob || "");
           }
         } catch (error) {
           console.error("Error loading user profile:", error);
         }
+      }
+      // 💾 Save profile to Firestore
       window.saveProfile = async (name, dob) => {
         try {
+          await updateDoc(doc(db, "users", currentUser.uid), {
             name: name,
+            dob: dob,
           });
           localStorage.setItem("userName", name);
           localStorage.setItem("userDOB", dob);
           return false;
         }
       };
+      // 🚪 Logout
       window.logout = async () => {
         try {
           await signOut(auth);
           localStorage.clear();
+          window.location.href = "login.html";
         } catch (error) {
           console.error("Error signing out:", error);
         }
       };
+      // 📊 LocalStorage for progress data
       function loadProgressData() {
         return JSON.parse(localStorage.getItem("progressData") || "[]");
       }
       function resetProgressData() {
         localStorage.removeItem("progressData");
       }
+      // 🖼️ DOM Content Loaded logic
       document.addEventListener("DOMContentLoaded", () => {
         const profileView = document.getElementById("profileViewSection");
         const profileEdit = document.getElementById("profileEditSection");
         const editBtn = document.getElementById("editProfileBtn");
         const cancelBtn = document.getElementById("cancelProfileBtn");
         const inputName = document.getElementById("inputName");
         const inputDOB = document.getElementById("inputDOB");
+        // Toggle to edit mode
         editBtn.addEventListener("click", () => {
           inputName.value = document.getElementById("userName").textContent;
           inputDOB.value = document.getElementById("userDOB").textContent;
           profileView.classList.add("hidden");
           profileEdit.classList.remove("hidden");
         });
+        // Save profile
         saveBtn.addEventListener("click", async () => {
           const nameVal = inputName.value.trim();
           const dobVal = inputDOB.value;
           const success = await window.saveProfile(nameVal, dobVal);
           if (success) {
+            document.getElementById("userName").textContent =
+              nameVal || "Name not set";
+            document.getElementById("userDOB").textContent =
+              dobVal || "DOB not set";
             profileEdit.classList.add("hidden");
             profileView.classList.remove("hidden");
           } else {
             alert("Error saving profile. Please try again.");
           }
         });
+        // Cancel editing
         cancelBtn.addEventListener("click", () => {
           profileEdit.classList.add("hidden");
           profileView.classList.remove("hidden");
         });
+        // Chart setup
         const chartSection = document.getElementById("chartSection");
         const welcomeMessage = document.getElementById("welcomeMessage");
         const isNewUser = localStorage.getItem("isNewUser") === "true";
         if (isNewUser) {
           welcomeMessage.classList.remove("hidden");
           chartSection.classList.add("hidden");
         }
         const stored = loadProgressData();
         const labels = stored.map((e) => e.date);
         const ctx = document.getElementById("progressChart").getContext("2d");
         const progressChart = new Chart(ctx, {
           type: "line",
             datasets: [
               {
                 label: "Health Score",
+                data: stored.map((e) => e.score),
                 borderColor: "#6B9080",
                 fill: true,
                 tension: 0.4,
             scales: { y: { beginAtZero: true, max: 100 } },
           },
         });
+        // Add Entry
         document.getElementById("addEntryBtn").addEventListener("click", () => {
           const date = document.getElementById("entryDate").value;
+          const score = parseInt(document.getElementById("entryScore").value, 10);
           if (!date || isNaN(score)) {
             alert("Please select a date and enter a valid score.");
             return;
           }
           stored.push({ date, score });
           saveProgressData(stored);
           progressChart.data.labels.push(date);
           progressChart.data.datasets[0].data.push(score);
           progressChart.update();
           document.getElementById("entryDate").value = "";
           document.getElementById("entryScore").value = "";
           if (isNewUser) {
             localStorage.setItem("isNewUser", "false");
             welcomeMessage.classList.add("hidden");
             chartSection.classList.remove("hidden");
           }
         });
+        // Reset Chart
+        document.getElementById("resetChartBtn").addEventListener("click", () => {
+          if (!confirm("Are you sure you want to clear all progress data?")) return;
+          resetProgressData();
+          progressChart.data.labels = [];
+          progressChart.data.datasets[0].data = [];
+          progressChart.update();
+        });
       });
+      // 🪄 Navbar padding adjust
+      function updateNavbarPadding() {
+        const nav = document.querySelector("nav");
+        if (nav) {
+          const navHeight = nav.offsetHeight;
+          document.documentElement.style.setProperty(
+            "--navbar-height",
+            `${navHeight}px`
+          );
+        }
+      }
+      updateNavbarPadding();
+      window.addEventListener("resize", updateNavbarPadding);
     </script>
   </body>
+</html>

web/style.css ADDED Viewed

	@@ -0,0 +1,246 @@

+:root {
+    --tropical-indigo: rgb(120, 187, 242);
+    --latte-cream: #ffffff;
+    --wisteria: #c5dcff;
+    --navbar-height: 0px; /* dynamic padding */
+  }
+  body {
+    padding-top: var(--navbar-height);
+    transition: padding-top 0.2s ease;
+    font-family: "Rubik", sans-serif;
+  }
+  /* ---------- NAVBAR area---------- */
+  nav {
+    backdrop-filter: blur(12px);
+    background-color: rgba(255, 255, 255, 0.2);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  }
+  /* Logo */
+  nav .logo {
+    color: #333;
+    font-weight: bold;
+    transition: color 0.3s ease;
+  }
+  nav .logo:hover {
+    color: var(--tropical-indigo);
+  }
+  /* Desktop links and buttons */
+  nav a.nav-link,
+  nav button.nav-link {
+    color: #333;
+    transition: color 0.3s ease;
+  }
+  /* Hamburger */
+  #hamburger {
+    color: #333;
+    transition: color 0.3s ease;
+  }
+  #hamburger:hover {
+    color: var(--tropical-indigo);
+  }
+  /* Mobile Menu */
+  #mobile-menu {
+    backdrop-filter: blur(12px);
+    background-color: rgba(255, 255, 255, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  }
+  #mobile-menu a,
+  #mobile-menu button {
+    color: #333;
+    transition: color 0.3s ease;
+  }
+  /* ---------- BUTTONS ---------- */
+  #editProfileBtn,
+  #saveProfileBtn,
+  #cancelProfileBtn,
+  #addEntryBtn,
+  #resetChartBtn,
+  #analyzerBtn {
+    background-color: var(--tropical-indigo);
+    color: white;
+    transition: background-color 0.3s ease;
+  }
+  #editProfileBtn:hover,
+  #saveProfileBtn:hover,
+  #addEntryBtn:hover,
+  #analyzerBtn:hover {
+    background-color: #5ba5dd;
+  }
+  #resetChartBtn:hover {
+    background-color: #e63946;
+  }
+  /* ---------- INPUTS ---------- */
+  input,
+  textarea {
+    border: 1px solid var(--wisteria);
+    background-color: #fafbfc;
+  }
+  input:focus,
+  textarea:focus {
+    outline: none;
+    border-color: var(--tropical-indigo);
+    box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3);
+  }
+  /* HEADINGS */
+  h1,
+  h2,
+  h3,
+  h4 {
+    color: var(--tropical-indigo);
+  }
+  /* Chart Card */
+  #chartSection > div {
+    background-color: var(--latte-cream);
+    border: 1px solid var(--wisteria);
+    border-radius: 1rem;
+    padding: 1.5rem;
+  }
+  .rec-card {
+    background-color: var(--latte-cream);
+    border: 1px solid var(--wisteria);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+  }
+  .rec-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  }
+  .rec-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--tropical-indigo);
+    margin-bottom: 0.5rem;
+  }
+  .rec-badge {
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+  }
+  .badge-high {
+    background-color: #fee2e2;
+    color: #b91c1c;
+  }
+  .badge-medium {
+    background-color: #fef3c7;
+    color: #92400e;
+  }
+  .badge-low {
+    background-color: #d1fae5;
+    color: #065f46;
+  }
+  .rec-content {
+    list-style-type: disc;
+    margin-left: 1.25rem;
+    font-size: 0.875rem;
+    color: #374151;
+  }
+  .rec-link {
+    color: var(--tropical-indigo);
+    text-decoration: underline;
+  }
+  .rec-link:hover {
+    color: #4b7bbd;
+  }
+  .btn-primary {
+    background-color: var(--tropical-indigo);
+    color: white;
+    transition: background-color 0.3s ease;
+  }
+  .btn-primary:hover {
+    background-color: #5ba5dd;
+  }
+  input,
+  textarea {
+    border: 1px solid var(--wisteria);
+    background-color: #fafbfc;
+  }
+  input:focus,
+  textarea:focus {
+    outline: none;
+    border-color: var(--tropical-indigo);
+    box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3);
+  }
+  h2,
+  h3 {
+    color: var(--tropical-indigo);
+  }
+  #chat-output {
+    background-color: #f7f9fc;
+    border: 1px solid var(--wisteria);
+  }
+  .fade-in {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: all 0.8s ease-out;
+  }
+  .fade-in.show {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .glass-card {
+    background: rgba(162, 160, 160, 0.075);
+    backdrop-filter: blur(12px);
+    border-radius: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 2rem;
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  .glass-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
+  }
+  .nav-link {
+    position: relative;
+    padding-bottom: 4px;
+    transition: color 0.3s;
+  }
+  .nav-link::after {
+    content: "";
+    position: absolute;
+    width: 0%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: black;
+    transition: width 0.3s ease;
+  }
+  .nav-link:hover::after {
+    width: 100%;
+  }
+  .parallax {
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+  }
+  /* Typing effect styles */
+  #typed-heading,
+  #typed-paragraph {
+    overflow: hidden;
+    white-space: nowrap;
+    border-right: 2px solid var(--tropical-indigo);
+  }