fix: Add Logout button

index.html

@@ -50,7 +50,6 @@
     //}
     // menuButton.forEach((button) => (button.onclick = () => closeNav()));
 
-
   </script>
 
 
@@ -189,7 +188,8 @@ <h1>TourGuide . . .</h1>
         <a href="loginPage.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
             data-aos="fade-down">Login</button></a>
 
-
+        <a href="loginPage.html" class="contact-btn"><button class="btn" id="logout-btn" style="margin: 0; display: none;"
+              data-aos="fade-down" disabled>Log Out</button></a>
 
         <!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
             style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
@@ -1526,6 +1526,31 @@ <h4>Reach Out To Us</h4>
     document.getElementById("year").innerHTML = new Date().getFullYear();
   </script>
 
+  <script>
+        // Logout Button
+
+      document.addEventListener('DOMContentLoaded', function () {
+      var isLoggedIn = localStorage.getItem('isLoggedIn');
+      var loginButton = document.getElementById('btn-style');
+      var logoutButton = document.getElementById('logout-btn');
+
+      if (isLoggedIn === 'true') {
+          loginButton.style.display = 'none';
+          logoutButton.style.display = 'block';
+          loginButton.disabled = true ;
+          logoutButton.disabled = false;
+          logoutButton.style.cursor = 'pointer';
+          logoutButton.addEventListener('click', function() {
+              localStorage.setItem('isLoggedIn', 'false');
+              window.location.href = './index.html';
+          });
+      } else {
+          loginButton.style.display = 'block';
+          logoutButton.disabled = true;
+      }
+  });
+  </script>
+
 
 </html><!-- New bubble background start -->
 

loginPage.html

@@ -17,9 +17,9 @@
             <div class="content">
                 <h1>Welcome Back !</h1>
                 <p>Login with your personal information.</p>
-                 <form action="">
-                   <input type="email" name="" id="" placeholder="Email">
-                    <input type="password" name="" id="" placeholder="Password">
+                 <form action="" id="loginForm">
+                   <input type="email" name="email" id="email" placeholder="Email" >
+                    <input type="password" name="password" id="password" placeholder="Password">
                     <button type="submit" >Login</button>
                 </form>
                  <div class="passForget">Forgot your password?</div>
@@ -29,5 +29,31 @@ <h1>Welcome Back !</h1>
            </div>
 
      </div>
+
+     <script>
+
+        document.getElementById('loginForm').addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            var email = document.getElementById('email').value;
+            var password = document.getElementById('password').value;
+
+            if (email.trim() === '' || password.trim() === '') {
+                localStorage.setItem('isLoggedIn', 'true'); 
+                alert('Please fill out all fields.');
+            } else {
+                var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+                if (!emailPattern.test(email)) {
+                    localStorage.setItem('isLoggedIn', 'true'); 
+                    alert('Please enter a valid email!');
+                } else {
+                    localStorage.setItem('isLoggedIn', 'true'); 
+                    alert('Login successful!');
+                    window.location.href = './index.html';
+                }
+            }
+        });
+
+     </script>
 </body>
 </html>