added style class and styling for profile

web/profile.html

@@ -23,10 +23,10 @@
         </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="index.html" class="nav-link" style="display:none;">Home</a></li>
+          <li><a href="profile.html" class="nav-link">Profile</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>
 
@@ -105,7 +105,8 @@
       });
     </script>
 
-    <div class="container mx-auto px-6 pt-[var(--navbar-height)]">
+    <div class="container mx-auto px-6 pt-24">
+      <div class="bg-white border border-gray-200 rounded-lg p-6 shadow mb-6">
       <!-- VIEW MODE -->
       <div id="profileViewSection">
         <div class="flex items-start space-x-6 mb-10">
@@ -124,7 +125,7 @@
 
           <!-- User Info -->
           <div>
-            <h1 class="text-3xl font-semibold mb-4">Your Profile</h1>
+            <h2 class="text-xl font-semibold mb-4">Your Profile</h2>
             <p class="mb-2">
               Name: <span id="userName" class="font-medium">Loading...</span>
             </p>
@@ -176,6 +177,7 @@
           </div>
         </div>
       </div>
+    </div>
 
       <!-- Chart Section -->
       <div class="mt-10" id="chartSection">
@@ -256,25 +258,6 @@
       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>
@@ -480,19 +463,6 @@ onAuthStateChanged(auth, async (user) => {
         });
       });
     
-      // 🪄 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>

web/style.css

@@ -243,4 +243,92 @@
     overflow: hidden;
     white-space: nowrap;
     border-right: 2px solid var(--tropical-indigo);
+  }
+  .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);
+  }
+  .hidden-by-default {
+    display: none;
   }