<!-- i. Breadcrumb Section -->
<section class="py-3 bg-light border-bottom">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0 py-1">
<li class="breadcrumb-item"><a href="index.html" class="text-decoration-none text-muted small">Home</a></li>
<li class="breadcrumb-item active text-primary fw-bold small" aria-current="page">Portal Login</li>
</ol>
</nav>
</div>
</section>
<!-- Main Login Container -->
<section class="py-5 flex-grow-1 d-flex align-items-center">
<div class="container">
<div class="row g-0 shadow-lg rounded-4 overflow-hidden border">
<!-- Left Side: v. Achievement Highlights Carousel -->
<div class="col-lg-6 d-none d-lg-block bg-primary p-0 position-relative">
<div id="loginAchievementCarousel" class="carousel slide h-100" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#loginAchievementCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#loginAchievementCarousel" data-bs-slide-to="1"></button>
</div>
<div class="carousel-inner h-100">
<div class="carousel-item active h-100" style="background: linear-gradient(45deg, rgba(13, 110, 253, 0.9), rgba(13, 202, 240, 0.9)), url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&q=80&w=800'); background-size: cover; background-position: center;">
<div class="carousel-caption h-100 d-flex flex-column justify-content-center text-start">
<i class="bi bi-award-fill display-1 mb-4"></i>
<h2 class="fw-bold">Global Recognition</h2>
<p class="lead">Ranked as Top 10 Web Designer in the EMEA region for 2023.</p>
</div>
</div>
<div class="carousel-item h-100" style="background: linear-gradient(45deg, rgba(33, 37, 41, 0.9), rgba(13, 110, 253, 0.9)), url('https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=800'); background-size: cover; background-position: center;">
<div class="carousel-caption h-100 d-flex flex-column justify-content-center text-start">
<i class="bi bi-star-fill display-1 mb-4 text-warning"></i>
<h2 class="fw-bold">Client Success</h2>
<p class="lead">Successfully delivered over 500+ secure enterprise projects worldwide.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Right Side: Login Content -->
<div class="col-lg-6 bg-white p-4 p-md-5">
<!-- ii. Admin Login Header -->
<div class="text-center mb-5">
<div class="bg-primary-subtle text-primary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 70px; height: 70px;">
<i class="bi bi-shield-lock-fill fs-1"></i>
</div>
<h3 class="fw-bold text-dark">Admin Access</h3>
<p class="text-secondary small">Please enter your credentials to manage the portfolio</p>
</div>
<!-- iii. Login Form Section -->
<form id="adminLoginForm">
<div class="mb-4">
<label class="form-label small fw-bold text-uppercase tracking-wider">User Name</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0"><i class="bi bi-person"></i></span>
<input type="text" class="form-control bg-light border-start-0 py-2 shadow-none" placeholder="admin_alex" required>
</div>
</div>
<div class="mb-3">
<label class="form-label small fw-bold text-uppercase tracking-wider">Password</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0"><i class="bi bi-key"></i></span>
<input type="password" class="form-control bg-light border-start-0 py-2 shadow-none" placeholder="••••••••" required>
</div>
</div>
<!-- iv. Password Recovery Link -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label small" for="remember">Remember Me</label>
</div>
<a href="#" class="text-primary text-decoration-none small fw-bold">Forgot Password?</a>
</div>
<button type="submit" class="btn btn-primary w-100 py-2 rounded-pill fw-bold shadow-sm mb-4">
Sign In To Dashboard <i class="bi bi-box-arrow-in-right ms-2"></i>
</button>
<div class="text-center">
<a href="index.html" class="text-secondary text-decoration-none small"><i class="bi bi-arrow-left me-1"></i> Back to Live Website</a>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Confirmation Modal (Requirement 3) -->
<div class="modal fade" id="loginConfirmModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center p-4 rounded-4 border-0 shadow-lg">
<div class="modal-body">
<div class="text-success mb-3">
<i class="bi bi-check-circle-fill display-3"></i>
</div>
<h4 class="fw-bold mb-3">Submission Confirmed</h4>
<p class="text-muted">Your login request has been successfully submitted to the secure authentication server.</p>
<button type="button" class="btn btn-dark px-5 py-2 rounded-pill mt-3" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<style>
/* Full container wide navigation menu with mouse hover effect (Requirement 2) */
.navbar-nav .nav-link {
position: relative;
padding: 0.5rem 1rem;
transition: color 0.3s ease;
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #0d6efd;
transition: width 0.3s ease;
}
.navbar-nav .nav-link:hover {
color: #0d6efd !important;
}
.navbar-nav .nav-link:hover::after {
width: 100%;
}
/* Additional Styling */
.tracking-wider {
letter-spacing: 1px;
}
.carousel-caption {
padding-bottom: 15%;
padding-left: 10%;
padding-right: 10%;
}
</style>
<script>
// 3. Confirmation popup window when submit (Requirement 3)
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('adminLoginForm');
const confirmModal = new bootstrap.Modal(document.getElementById('loginConfirmModal'));
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault();
// Perform validation check if needed
confirmModal.show();
// form.reset(); // Optional reset
});
}
});
</script>