E-commerce login Page

<div class="container py-4">
  <!-- i. Breadcrumb Section -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb bg-light p-3 rounded-4 shadow-sm border-0">
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-primary">Home</a></li>
      <li class="breadcrumb-item active" aria-current="page">Login & Register</li>
    </ol>
  </nav>

  <!-- 2. Full Container Wide Navigation Menu with Hover Effect -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded-4 mb-5 p-3 shadow hover-nav">
    <div class="container-fluid">
      <a class="navbar-brand fw-bold" href="#">SHOP<span class="text-primary">EASE</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navMenu">
        <ul class="navbar-nav w-100 justify-content-between text-center">
          <li class="nav-item"><a class="nav-link px-3" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Shop</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Categories</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Cart</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Checkout</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Dashboard</a></li>
          <li class="nav-item"><a class="nav-link px-3" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="row g-5 align-items-center">
    <!-- FORM SECTION -->
    <div class="col-lg-6 order-2 order-lg-1">
      <div class="card border-0 shadow-lg rounded-5 overflow-hidden">
        <div class="card-header bg-white border-0 p-3 pt-4">
          <!-- ii. Toggle between Login and Register -->
          <ul class="nav nav-pills nav-justified bg-light rounded-pill p-1" id="authTab" role="tablist">
            <li class="nav-item">
              <button class="nav-link active rounded-pill fw-bold py-2" id="login-tab" data-bs-toggle="pill" data-bs-target="#login" type="button">Login</button>
            </li>
            <li class="nav-item">
              <button class="nav-link rounded-pill fw-bold py-2" id="register-tab" data-bs-toggle="pill" data-bs-target="#register" type="button">Register</button>
            </li>
          </ul>
        </div>

        <div class="card-body p-4 p-md-5 tab-content">
          <!-- iii. Login Form Section -->
          <div class="tab-pane fade show active" id="login">
            <h3 class="fw-bold mb-4">Welcome Back</h3>
            <form id="loginForm">
              <div class="mb-3">
                <label class="form-label small fw-bold">User Name or Email</label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0 border-2 rounded-start-4"><i class="bi bi-person text-muted"></i></span>
                  <input type="text" class="form-control border-start-0 border-2 rounded-end-4 shadow-none p-2" placeholder="username" required>
                </div>
              </div>
              <div class="mb-4">
                <label class="form-label small fw-bold">Password</label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0 border-2 rounded-start-4"><i class="bi bi-shield-lock text-muted"></i></span>
                  <input type="password" class="form-control border-start-0 border-2 rounded-end-4 shadow-none p-2" placeholder="••••••••" required>
                </div>
              </div>
              <button type="submit" class="btn btn-primary w-100 rounded-4 py-3 fw-bold mb-4 shadow">Sign In</button>
            </form>

            <!-- iv. Social Login Buttons -->
            <div class="text-center position-relative mb-4">
              <hr>
              <span class="position-absolute top-50 start-50 translate-middle bg-white px-3 small text-muted">Or login with</span>
            </div>
            <div class="row g-3">
              <div class="col-sm-6">
                <button class="btn btn-outline-secondary w-100 rounded-pill py-2 d-flex align-items-center justify-content-center">
                  <i class="bi bi-google me-2 text-danger"></i> Google
                </button>
              </div>
              <div class="col-sm-6">
                <button class="btn btn-outline-secondary w-100 rounded-pill py-2 d-flex align-items-center justify-content-center">
                  <i class="bi bi-facebook me-2 text-primary"></i> Facebook
                </button>
              </div>
            </div>
          </div>

          <!-- Register Pane -->
          <div class="tab-pane fade" id="register">
            <h3 class="fw-bold mb-4">Create Account</h3>
            <form>
              <div class="mb-3">
                <label class="form-label small fw-bold">Full Name</label>
                <input type="text" class="form-control rounded-4 p-2 bg-light border-0 shadow-none" placeholder="First Last">
              </div>
              <div class="mb-3">
                <label class="form-label small fw-bold">Email Address</label>
                <input type="email" class="form-control rounded-4 p-2 bg-light border-0 shadow-none" placeholder="name@example.com">
              </div>
              <div class="mb-4">
                <label class="form-label small fw-bold">New Password</label>
                <input type="password" class="form-control rounded-4 p-2 bg-light border-0 shadow-none" placeholder="••••••••">
              </div>
              <button type="submit" class="btn btn-dark w-100 rounded-4 py-3 fw-bold">Join Now</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- v. Promotional Offers Section -->
    <div class="col-lg-6 order-1 order-lg-2">
      <div id="promoOfferSlider" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="p-5 bg-primary bg-gradient text-white rounded-5 shadow-sm text-center">
              <i class="bi bi-gift-fill display-1 mb-4"></i>
              <h2 class="fw-bold">50% Welcome Discount</h2>
              <p class="mb-4">Register today and get a flat 50% discount on your first three orders!</p>
              <span class="badge bg-white text-primary rounded-pill px-4 py-2 fs-6">CLAIM NOW</span>
            </div>
          </div>
          <div class="carousel-item">
            <div class="p-5 bg-danger bg-gradient text-white rounded-5 shadow-sm text-center">
              <i class="bi bi-truck display-1 mb-4"></i>
              <h2 class="fw-bold">Free Shipping Forever</h2>
              <p class="mb-4">Join our VIP membership and never pay for shipping again on any items.</p>
              <span class="badge bg-white text-danger rounded-pill px-4 py-2 fs-6">SEE TERMS</span>
            </div>
          </div>
        </div>
        <div class="carousel-indicators mb-0 mt-4 position-relative">
          <button type="button" data-bs-target="#promoOfferSlider" data-bs-slide-to="0" class="active rounded-circle" style="width:12px; height:12px;"></button>
          <button type="button" data-bs-target="#promoOfferSlider" data-bs-slide-to="1" class="rounded-circle" style="width:12px; height:12px;"></button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 3. Confirmation Popup Window (Modal) -->
<div class="modal fade" id="submitModal" data-bs-backdrop="static" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-5 border-0 shadow">
      <div class="modal-body text-center p-5">
        <div class="mb-4">
          <i class="bi bi-patch-check-fill text-success" style="font-size: 5rem;"></i>
        </div>
        <h3 class="fw-bold">Authentication Requested</h3>
        <p class="text-muted">We are verifying your credentials. You will be redirected shortly.</p>
        <div class="d-grid mt-4">
          <button type="button" class="btn btn-primary rounded-pill py-2" data-bs-dismiss="modal">Confirm & Proceed</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Full container wide navigation hover effect */
  .hover-nav .nav-link {
    transition: all 0.3s ease;
    position: relative;
  }

  .hover-nav .nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #0d6efd;
    transition: width 0.3s ease;
  }

  .hover-nav .nav-link:hover:after {
    width: 100%;
  }

  .hover-nav .nav-link:hover {
    color: #0d6efd !important;
    transform: translateY(-2px);
  }

  /* Form Customization */
  .nav-pills .nav-link.active {
    background-color: #fff !important;
    color: #0d6efd !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  .nav-pills .nav-link {
    color: #6c757d;
  }

  .carousel-item {
    min-height: 400px;
  }

  @media (max-width: 991px) {
    .navbar-nav {
      padding-top: 20px;
    }

    .hover-nav .nav-link:after {
      display: none;
    }
  }

</style>

<script>
  // Handle form submission and show confirmation modal
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const confirmationModal = new bootstrap.Modal(document.getElementById('submitModal'));
    confirmationModal.show();
  });

</script>