added login modal

This commit is contained in:
StockiP
2022-04-25 19:16:16 +02:00
parent 2324b1988a
commit 2304b723c5
4 changed files with 40 additions and 5 deletions

View File

@@ -0,0 +1,28 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">MarmeladenLaden Login</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">Email Address</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Username" />
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" />
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="rememberMe" />
<label class="form-check-label" for="rememberMe">Remember me</label>
</div>
<div class="modal-footer d-block">
<p class="float-start">Not yet registered? <a href="#">Sign Up</a></p>
<button type="submit" class="btn btn-success float-end">Login</button>
</div>
</form>
</div>
</div>
</div>

View File

@@ -41,9 +41,9 @@
<i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
</a>
<a class="nav-icon position-relative text-decoration-none" href="#">
<a class="nav-icon position-relative text-decoration-none" href="#" data-bs-toggle="modal" data-bs-target="#marmeladenladenLogin">
<i class="fa fa-fw fa-user text-dark mr-3"></i>
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">+99</span>
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark"></span>
</a>
</div>
</div>

View File

@@ -29,10 +29,15 @@
</nav>
<!-- End Main Navbar-->
<!-- Start Modal-->
<!-- Start Login Modal -->
<div class="modal fade" id="marmeladenladenLogin" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
</div>
<!--End Login Modal-->
<!-- Start Search Modal-->
<div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
</div>
<!-- End Modal-->

View File

@@ -5,4 +5,6 @@ $(document).ready(function() {
$('#mmlMainContent').load('../components/ftProducts.html');
$('#marmeladenladen_footer').load('../components/footer.html');
$('#marmeladenladen_search').load('../components/modal.html');
});
$('#marmeladenladenLogin').load('../components/loginModal.html');
});