index.js

// Initialize AOS (Animate On Scroll)
AOS.init({
      duration: 1000,
      once: true,
      offset: 100
    });

// Login/Sign Up Toggle
document.getElementById('showLogin').addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector('h2').textContent = 'Login';
      document.querySelector('form').innerHTML = `
        <div class="mb-3" data-aos="fade-right">
          <label for="loginEmail" class="form-label">Email address</label>
          <input type="email" class="form-control" id="loginEmail" placeholder="Enter your email">
        </div>
        <div class="mb-3" data-aos="fade-right" data-aos-delay="200">
          <label for="loginPassword" class="form-label">Password</label>
          <input type="password" class="form-control" id="loginPassword" placeholder="Enter password">
        </div>
        <button type="submit" class="btn btn-primary w-100" data-aos="zoom-in" data-aos-delay="400">Login</button>
      `;
      document.querySelector('.text-center').innerHTML = `
        <p>Don't have an account? <a href="#" id="showSignUp">Sign up here</a></p>
        <p><a href="index.html">Back to Home</a></p>
      `;
      document.getElementById('showSignUp').addEventListener('click', function(e) {
        e.preventDefault();
        location.reload(); // reload to show sign-up form again
      });
    });