Update web/login.html

web/login.html

@@ -5,255 +5,164 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Login / Signup - CTRL + ALT + HEAL</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
     <style>
       :root {
-        --blue: rgb(120, 187, 242);
-        --l-blue: rgb(197, 217, 251);
+        --tropical-indigo: rgb(120, 187, 242);
+        --wisteria: rgb(197, 217, 251);
         --latte-cream: #ffffff;
-        --red: #ff746c;
-        --l-red: #faa0a0;
       }
-
       body {
         font-family: "Rubik", sans-serif;
-        background-color: var(--cream);
+        background-color: var(--latte-cream);
         color: #333;
       }
-
-      /* Navbar styles */
-      nav {
-        backdrop-filter: blur(10px);
-        background: rgba(255, 255, 255, 0.85);
-        transition: transform 0.3s ease, background-color 0.3s ease,
-          box-shadow 0.3s ease;
-      }
-
-      nav.scrolled {
-        background: rgba(255, 255, 255, 1);
-        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-        transform: translateY(-5px);
-      }
-
-      nav a {
-        transition: color 0.3s ease, transform 0.2s ease;
-      }
-
-      nav a:hover {
-        color: var(--blue);
-        transform: translateY(-2px);
-      }
-
-      /* Form card animation */
-      @keyframes fadeSlideUp {
-        0% {
-          opacity: 0;
-          transform: translateY(20px);
-        }
-        100% {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      .fade-slide-up {
-        animation: fadeSlideUp 0.6s ease forwards;
-      }
-
-      .form-card {
-        background: rgba(255, 255, 255, 0.85);
-        backdrop-filter: blur(10px);
+      .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;
-        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
       }
-
-      .form-card:hover {
+      .glass-card:hover {
         transform: translateY(-5px);
-        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
       }
-
-      .form-input {
-        width: 100%;
-        padding: 0.5rem 1rem;
-        border-radius: 0.5rem;
-        border: 1px solid #ccc;
-        transition: border-color 0.3s ease, box-shadow 0.3s ease;
+      .nav-link {
+        position: relative;
+        padding-bottom: 4px;
+        transition: color 0.3s;
       }
-
-      .form-input:focus {
-        outline: none;
-        border-color: var(--blue);
-        box-shadow: 0 0 0 3px rgba(120, 187, 242, 0.3);
+      .nav-link::after {
+        content: "";
+        position: absolute;
+        width: 0%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+        background-color: var(--tropical-indigo);
+        transition: width 0.3s ease;
       }
-
-      .btn-primary {
+      .nav-link:hover::after {
         width: 100%;
-        padding: 0.75rem;
-        border-radius: 0.75rem;
-        background-color: var(--blue);
-        color: white;
-        font-weight: 600;
-        transition: background-color 0.3s ease, transform 0.2s ease,
-          box-shadow 0.2s ease;
       }
-
-      .btn-primary:hover {
-        background-color: var(--l-blue);
-        color: #333;
-        transform: translateY(-2px);
-        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
-      }
-
-      .btn-red {
+      .nav-link.active-page::after {
         width: 100%;
-        padding: 0.75rem;
-        border-radius: 0.75rem;
-        background-color: var(--red);
-        color: white;
-        font-weight: 600;
-        transition: background-color 0.3s ease, transform 0.2s ease,
-          box-shadow 0.2s ease;
-      }
-
-      .btn-red:hover {
-        background-color: var(--l-red);
-        transform: translateY(-2px);
-        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
       }
     </style>
   </head>
-  <body
-    class="min-h-screen flex flex-col items-center justify-start px-4 pt-24"
-  >
-    <!-- Navbar -->
+  <body class="min-h-screen flex flex-col">
+    <!-- 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="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center"
-      >
-        <!-- Logo -->
+      <div class="flex justify-between items-center w-full px-6 py-4">
         <a
           href="index.html"
-          class="text-2xl font-bold hover:text-[var(--tropical-indigo)] transition"
+          class="text-2xl font-bold text-black hover:text-[var(--tropical-indigo)] transition"
         >
           CTRL + ALT + HEAL
         </a>
-
         <!-- Desktop Menu -->
         <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="profile.html" class="nav-link">Profile</a></li>
-          <li><a href="login.html" class="nav-link">Login</a></li>
-          <li><a href="about.html" class="nav-link">About</a></li>
-        </ul>
-
-        <!-- Hamburger Menu -->
-        <button id="hamburger" class="md:hidden text-[#000000] text-2xl">
+          <li><a href="analyzer.html" class="nav-link">Analyzer</a></li>
+          <li><a href="past_data.html" class="nav-link">Past Report</a></li>
+          
+        <button
+          id="hamburger"
+          class="md:hidden text-[var(--latte-cream)] text-2xl"
+        >
           ☰
         </button>
       </div>
-
-      <!-- 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">Home</a></li>
         <li>
-          <a
-            href="index.html"
-            class="block text-bold text-gray-800 hover:text-[var(--neon-green)]"
-            >Home</a
-          >
-        </li>
-        <li>
-          <a
-            href="analyzer.html"
-            class="block text-gray-800 hover:text-[var(--neon-green)]"
-            >Analyzer</a
-          >
-        </li>
-        <li>
-          <a
-            href="profile.html"
-            class="block text-gray-800 hover:text-[var(--neon-green)]"
-            >Profile</a
-          >
+          <a href="analyzer.html" class="block text-gray-800">Analyzer</a>
         </li>
+        <li><a href="profile.html" class="block text-gray-800">Profile</a></li>
         <li>
-          <a
-            href="login.html"
-            class="block text-gray-800 hover:text-[var(--neon-green)]"
-            >Login</a
-          >
-        </li>
-        <li>
-          <a
-            href="about.html"
-            class="block text-gray-800 hover:text-[var(--neon-green)]"
-            >About</a
-          >
+          <a href="login.html" class="block text-gray-800 active-page">Login</a>
         </li>
       </ul>
     </nav>
 
-    <!-- Login Form -->
-    <div class="form-card w-full max-w-md fade-slide-up mt-8">
-      <h2 id="formTitle" class="text-2xl font-semibold text-[var(--blue)] mb-6">
-        Log In
-      </h2>
-      <input type="hidden" id="mode" value="login" />
-
-      <label class="block mb-2 text-sm font-medium">Mode</label>
-      <select
-        id="modeSelector"
-        onchange="toggleMode(this.value)"
-        class="form-input mb-4"
-      >
-        <option value="login">Log In</option>
-        <option value="signup">Sign Up</option>
-      </select>
-
-      <label class="block mb-2 text-sm font-medium">Email</label>
-      <input
-        type="email"
-        id="email"
-        placeholder="you@example.com"
-        class="form-input mb-4"
-      />
-
-      <label class="block mb-2 text-sm font-medium">Password</label>
-      <input
-        type="password"
-        id="password"
-        placeholder="••••••••"
-        class="form-input mb-4"
-      />
+    <!-- LOGIN FORM -->
+    <main class="flex flex-1 items-center justify-center pt-28 px-6">
+      <div class="glass-card w-full max-w-md text-center">
+        <h2 class="text-3xl font-bold text-[var(--tropical-indigo)] mb-6">
+          Sign In / Sign Up
+        </h2>
+        <select
+          id="modeSelector"
+          onchange="toggleMode(this.value)"
+          class="w-full mb-4 px-4 py-2 border rounded-lg"
+        >
+          <option value="login">Log In</option>
+          <option value="signup">Sign Up</option>
+        </select>
 
-      <div id="nameGroup" style="display: none">
-        <label class="block mb-2 text-sm font-medium">Name</label>
         <input
-          type="text"
-          id="name"
-          placeholder="Your Name"
-          class="form-input mb-4"
+          type="email"
+          id="email"
+          placeholder="Email"
+          class="w-full mb-4 px-4 py-2 border rounded-lg"
+        />
+        <input
+          type="password"
+          id="password"
+          placeholder="Password"
+          class="w-full mb-4 px-4 py-2 border rounded-lg"
         />
-      </div>
 
-      <div id="dobGroup" style="display: none">
-        <label class="block mb-2 text-sm font-medium">Date of Birth</label>
-        <input type="date" id="dob" class="form-input mb-6" />
+        <div id="nameGroup" style="display: none">
+          <input
+            type="text"
+            id="name"
+            placeholder="Full Name"
+            class="w-full mb-4 px-4 py-2 border rounded-lg"
+          />
+        </div>
+
+        <div id="dobGroup" style="display: none">
+          <input
+            type="date"
+            id="dob"
+            class="w-full mb-4 px-4 py-2 border rounded-lg"
+          />
+        </div>
+
+        <p id="error-message" class="text-red-500 text-sm mb-4"></p>
+
+        <button
+          id="submitBtn"
+          class="w-full bg-[var(--tropical-indigo)] text-white py-2 rounded-lg hover:bg-[var(--wisteria)] mb-2"
+        >
+          Log In
+        </button>
+        <button
+          onclick="resetPassword()"
+          class="w-full bg-gray-200 text-gray-800 py-2 rounded-lg hover:bg-gray-300"
+        >
+          Reset Password
+        </button>
       </div>
+    </main>
 
-      <button onclick="submitForm()" id="submitBtn" class="btn-primary mb-2">
-        Log In
-      </button>
-      <button onclick="resetPassword()" class="btn-red">Reset Password</button>
-    </div>
+    <!-- FOOTER -->
+    <footer class="py-6 bg-[var(--wisteria)] text-white text-center">
+      &copy; 2025 CTRL + ALT + HEAL. All rights reserved.
+    </footer>
 
-    <!-- Firebase & JS -->
     <script type="module">
       import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
       import {
@@ -269,37 +178,63 @@
       } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
 
       const firebaseConfig = {
-        apiKey: "",
-        authDomain: "",
-        projectId: "",
-        storageBucket: "",
-        messagingSenderId: "",
-        appId: "",
-        measurementId: "",
+        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);
 
-      window.toggleMode = (mode) => {
-        document.getElementById("formTitle").textContent =
-          mode === "signup" ? "Sign Up" : "Log In";
-        document.getElementById("nameGroup").style.display =
-          mode === "signup" ? "block" : "none";
-        document.getElementById("dobGroup").style.display =
-          mode === "signup" ? "block" : "none";
-        document.getElementById("submitBtn").textContent =
-          mode === "signup" ? "Sign Up" : "Log In";
-        document.getElementById("mode").value = mode;
+      let mode = "login";
+      const nameGroup = document.getElementById("nameGroup");
+      const dobGroup = document.getElementById("dobGroup");
+      const actionBtn = document.getElementById("submitBtn");
+      const errorElement = document.getElementById("error-message");
+
+      window.toggleMode = (newMode) => {
+        mode = newMode;
+        if (mode === "signup") {
+          nameGroup.style.display = "block";
+          dobGroup.style.display = "block";
+          actionBtn.textContent = "Sign Up";
+        } else {
+          nameGroup.style.display = "none";
+          dobGroup.style.display = "none";
+          actionBtn.textContent = "Log In";
+        }
       };
 
-      window.submitForm = async () => {
-        const mode = document.getElementById("mode").value;
+
+      const getFriendlyErrorMessage = (error) => {
+        switch (error.code) {
+          case 'auth/invalid-email':
+            return 'Invalid email format. Please try again.';
+          case 'auth/user-not-found':
+            return 'No user found with this email.';
+          case 'auth/wrong-password':
+            return 'Incorrect password. Please try again.';
+          case 'auth/weak-password':
+            return 'Password is too weak. Please use at least 6 characters.';
+          case 'auth/invalid-login-credentials':
+            return 'Invalid email or password. Please try again.';
+          default:
+            return 'An unknown error occurred. Please try again.';
+        }
+      };
+
+      actionBtn.addEventListener("click", async (e) => {
+        e.preventDefault();
         const email = document.getElementById("email").value;
         const password = document.getElementById("password").value;
-        try {
-          if (mode === "signup") {
+        errorElement.textContent = "";
+
+        if (mode === "signup") {
+          try {
             const name = document.getElementById("name").value;
             const dob = document.getElementById("dob").value;
             const userCredential = await createUserWithEmailAndPassword(
@@ -309,40 +244,33 @@
             );
             const user = userCredential.user;
             await setDoc(doc(db, "users", user.uid), { name, email, dob });
-          } else {
+            window.location.href = "profile.html";
+          } catch (err) {
+            errorElement.textContent = getFriendlyErrorMessage(err);
+          }
+        } else {
+          try {
             await signInWithEmailAndPassword(auth, email, password);
+            window.location.href = "profile.html";
+          } catch (err) {
+            errorElement.textContent = getFriendlyErrorMessage(err);
           }
-          window.location.href = "profile.html";
-        } catch (err) {
-          alert(
-            (mode === "signup" ? "Sign Up" : "Log In") +
-              " error: " +
-              err.message
-          );
         }
-      };
+      });
 
       window.resetPassword = async () => {
         const email = document.getElementById("email").value;
-        if (!email) return alert("Please enter your email to reset password.");
+        if (!email) {
+          errorElement.textContent = "Enter your email first!";
+          return;
+        }
         try {
           await sendPasswordResetEmail(auth, email);
-          alert("Password reset email sent to " + email);
+          alert("Password reset email sent!");
         } catch (err) {
-          alert("Error sending password reset: " + err.message);
+          errorElement.textContent = err.message;
         }
       };
-
-      document.addEventListener("DOMContentLoaded", () => {
-        toggleMode("login");
-
-        // Navbar scroll animation
-        const navbar = document.getElementById("navbar");
-        window.addEventListener("scroll", () => {
-          if (window.scrollY > 20) navbar.classList.add("scrolled");
-          else navbar.classList.remove("scrolled");
-        });
-      });
     </script>
   </body>
-</html>
+</html>