BDutta18 · Prateekiiitg56 · Aug 4, 2025 · Aug 4, 2025
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -9,10 +9,73 @@
     />
     <link rel="stylesheet" href="styles.css" />
     <title>BODY CRAFT GYM</title>
+    <style>
+        /* Styles for the new profile dropdown */
+        .profile-dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        .profile-info {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            cursor: pointer;
+        }
+
+        .profile-info img {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: 2px solid #47d75f;
+        }
+
+        .profile-info span {
+            color: white;
+            font-weight: 600;
+        }
+
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            right: 0;
+            background-color: #1f2125;
+            min-width: 160px;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            z-index: 1;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+
+        .dropdown-content a, .dropdown-content button {
+            color: white;
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+            text-align: left;
+            width: 100%;
+            border: none;
+            background: none;
+            cursor: pointer;
+        }
+
+        .dropdown-content a:hover, .dropdown-content button:hover {
+            background-color: #35373b;
+        }
+
+        #logout-btn {
+            color: #ff4d4d;
+        }
+
+        .profile-dropdown:hover .dropdown-content {
+            display: block;
+        }
+    </style>
   </head>
   <body>
     <nav>
-
+      <div class="nav__logo">
+        <a href="#"><img src="assets/logo.png" alt="logo" />BODYCRAFT</a>
       </div>
       <ul class="nav__links">
         <li class="link"><a href="#">Home</a></li>
@@ -21,7 +84,21 @@
         <li class="link"><a href="#">About</a></li>
         <li class="link"><a href="#">Contact</a></li>
       </ul>
-      <button class="btn">Join Now</button>
+      <!-- Auth Elements -->
+      <div id="auth-container">
+          <a href="login.html" class="btn" id="login-link">Login</a>
+
+          <div id="user-profile" class="profile-dropdown" style="display: none;">
+              <div class="profile-info">
+                  <img id="user-photo" src="" alt="User Photo">
+                  <span id="user-name"></span>
+              </div>
+              <div class="dropdown-content">
+                  <a href="profile.html">View Profile</a>
+                  <button id="logout-btn">Logout</button>
+              </div>
+          </div>
+      </div>
     </nav>
 
     <header class="section__container header__container">
@@ -255,7 +332,7 @@ <h4>Virat Kohli</h4>
       <span class="bg__blur"></span>
       <span class="bg__blur footer__blur"></span>
       <div class="footer__col">
-
+        
         <p>
           Take the first step towards a healthier, stronger you with our
           unbeatable pricing plans. Let's sweat, achieve, and conquer together!
@@ -290,5 +367,42 @@ <h4>Contact</h4>
     <div class="footer__bar">
       Copyright © Bodhisatwa Dutta-18. All rights reserved.
     </div>
+
+    <!-- Simple localStorage Auth Script -->
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const loginLink = document.getElementById('login-link');
+            const userProfile = document.getElementById('user-profile');
+            const userName = document.getElementById('user-name');
+            const userPhoto = document.getElementById('user-photo');
+            const logoutBtn = document.getElementById('logout-btn');
+
+            const loggedInUser = localStorage.getItem('loggedInUser');
+
+            if (loggedInUser) {
+                // User is logged in
+                const user = JSON.parse(loggedInUser);
+                loginLink.style.display = 'none';
+                userProfile.style.display = 'block'; // Use 'block' for the dropdown container
+                userName.textContent = `Welcome, ${user.name}!`;
+
+                // Use a placeholder for the user photo
+                userPhoto.src = 'https://placehold.co/40x40/47d75f/FFFFFF?text=' + user.name.charAt(0).toUpperCase();
+
+
+                logoutBtn.addEventListener('click', () => {
+                    // Clear user data from storage
+                    localStorage.removeItem('loggedInUser');
+                    // Refresh the page to update the UI
+                    window.location.reload();
+                });
+
+            } else {
+                // User is not logged in
+                loginLink.style.display = 'block';
+                userProfile.style.display = 'none';
+            }
+        });
+    </script>
   </body>
 </html>
diff --git a/login.html b/login.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link 
+      href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css"
+      rel="stylesheet"
+    />
+    <title>Login - BODY CRAFT GYM</title>
+    <style>
+        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+        :root {
+          --primary-color: #111317;
+          --primary-color-light: #1f2125;
+          --secondary-color: #47d75f;
+          --text-light: #d1d5db;
+          --white: #ffffff;
+        }
+        * { padding: 0; margin: 0; box-sizing: border-box; }
+        body { font-family: "Poppins", sans-serif; background-color: var(--primary-color); }
+        .btn { padding: 0.75rem 1.5rem; outline: none; border: none; font-size: 1rem; color: var(--white); background-color: var(--secondary-color); border-radius: 5px; cursor: pointer; transition: 0.3s; }
+        .bg__blur { position: absolute; box-shadow: 0 0 1000px 50px var(--secondary-color); z-index: -1; }
+        .login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; position: relative; overflow: hidden; background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('assets/GYM ROOM.jpg'); background-size: cover; background-position: center; }
+        .login__blur { top: 0; left: 0; }
+        .login-box { background-color: rgba(31, 33, 37, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 2rem; border-radius: 10px; text-align: center; max-width: 400px; width: 100%; z-index: 1; }
+        .login-box .nav__logo { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
+        .login-box .nav__logo a { display: flex; align-items: center; gap: 10px; color: var(--white); font-size: 1.5rem; font-weight: 600; text-decoration: none; }
+        .login-box .nav__logo img { max-width: 40px; }
+        .login-box h2 { color: var(--white); font-size: 1.75rem; margin-bottom: 0.5rem; }
+        .login-box p { color: var(--text-light); margin-bottom: 1.5rem; }
+        .login-form input { width: 100%; padding: 0.75rem; margin-bottom: 1rem; border-radius: 5px; border: 1px solid var(--primary-color-light); background-color: var(--primary-color); color: var(--white); font-size: 1rem; }
+        .form-buttons { display: flex; gap: 1rem; }
+        .form-buttons .btn { flex: 1; }
+        .login-footer { margin-top: 1.5rem; }
+        .login-footer a { color: var(--text-light); text-decoration: none; transition: 0.3s; }
+        .login-footer a:hover { color: var(--secondary-color); }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <span class="bg__blur"></span>
+        <span class="bg__blur login__blur"></span>
+        <div class="login-box">
+            <div class="nav__logo">
+                <a href="index.html"><img src="assets/logo.png" alt="logo" /><span>BODYCRAFT</span></a>
+            </div>
+            <h2>Welcome!</h2>
+            <p>Enter your email and password to log in or sign up.</p>
+
+            <form id="loginForm" class="login-form">
+                <input type="email" id="email" placeholder="Email" required>
+                <input type="password" id="password" placeholder="Password" required>
+                <div class="form-buttons">
+                    <button type="button" id="login-btn" class="btn">Login</button>
+                    <button type="button" id="signup-btn" class="btn">Sign Up</button>
+                </div>
+            </form>
+
+            <div class="login-footer">
+                <a href="index.html">Go back to Home</a>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const loginBtn = document.getElementById('login-btn');
+            const signupBtn = document.getElementById('signup-btn');
+            const emailField = document.getElementById('email');
+            const passwordField = document.getElementById('password');
+
+            // If user is already logged in, redirect them
+            if (localStorage.getItem('loggedInUser')) {
+                window.location.href = 'index.html';
+            }
+
+            // --- Login Functionality ---
+            loginBtn.addEventListener('click', () => {
+                const email = emailField.value;
+                const password = passwordField.value;
+
+                if (!email || !password) {
+                    alert('Please enter both email and password.');
+                    return;
+                }
+
+                // In a real app, you would verify the password here.
+                // For this simulation, we'll just log the user in.
+                const user = {
+                    email: email,
+                    name: email.split('@')[0]
+                };
+                localStorage.setItem('loggedInUser', JSON.stringify(user));
+                alert('Login successful! Redirecting...');
+                window.location.href = 'index.html';
+            });
+
+            // --- Sign Up Functionality ---
+            signupBtn.addEventListener('click', () => {
+                const email = emailField.value;
+                const password = passwordField.value;
+
+                if (!email || !password) {
+                    alert('Please enter both email and password to sign up.');
+                    return;
+                }
+
+                // In this simulation, signing up is the same as logging in.
+                // We just save the new user's info.
+                const user = {
+                    email: email,
+                    name: email.split('@')[0]
+                };
+                localStorage.setItem('loggedInUser', JSON.stringify(user));
+
+                alert('Account created successfully! You are now logged in.');
+                window.location.href = 'index.html';
+            });
+        });
+    </script>
+</body>
+</html>