DopeyCode/marmeladenladen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navigation and pages

Browse Source
This commit is contained in:
StockiP
2022-05-01 19:02:52 +02:00
parent 2b4612bf80
commit b5ca73f018
11 changed files with 244 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/ftProducts.html
View File

@@ -1,87 +0,0 @@
<section class="bg-light">
<div class="container py-5">
<div class="row text-center py-3">
<div class="col-lg-6 m-auto">
<h1 class="h1">Featured Product</h1>
<p>
Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident.
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a href="shop-single.html">
<img src="./assets/img/feature_prod_01.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
<li class="text-muted text-right">$240.00</li>
</ul>
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Gym Weight</a>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
</p>
<p class="text-muted">Reviews (24)</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a href="shop-single.html">
<img src="./assets/img/feature_prod_02.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
<li class="text-muted text-right">$480.00</li>
</ul>
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Cloud Nike Shoes</a>
<p class="card-text">
Aenean gravida dignissim finibus. Nullam ipsum diam, posuere vitae pharetra sed, commodo ullamcorper.
</p>
<p class="text-muted">Reviews (48)</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a href="shop-single.html">
<img src="./assets/img/feature_prod_03.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
</li>
<li class="text-muted text-right">$360.00</li>
</ul>
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Summer Addides Shoes</a>
<p class="card-text">
Curabitur ac mi sit amet diam luctus porta. Phasellus pulvinar sagittis diam, et scelerisque ipsum lobortis nec.
</p>
<p class="text-muted">Reviews (74)</p>
</div>
</div>
</div>
</div>
</div>
</section>

89
components/banner.html → components/homepage.html
View File

@@ -92,4 +92,91 @@
data-bs-slide="next">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
<section class="bg-light">
<div class="container py-5">
<div class="row text-center py-3">
<div class="col-lg-6 m-auto">
<h1 class="h1">Featured Product</h1>
<p>
Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident.
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a href="shop-single.html">
<img src="./assets/img/feature_prod_01.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
<li class="text-muted text-right">$240.00</li>
</ul>
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Gym Weight</a>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
</p>
<p class="text-muted">Reviews (24)</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a href="shop-single.html">
<img src="./assets/img/feature_prod_02.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
<li class="text-muted text-right">$480.00</li>
</ul>
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Cloud Nike Shoes</a>
<p class="card-text">
Aenean gravida dignissim finibus. Nullam ipsum diam, posuere vitae pharetra sed, commodo ullamcorper.
</p>
<p class="text-muted">Reviews (48)</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a href="shop-single.html">
<img src="./assets/img/feature_prod_03.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
</li>
<li class="text-muted text-right">$360.00</li>
</ul>
<a href="shop-single.html" class="h2 text-decoration-none text-dark">Summer Addides Shoes</a>
<p class="card-text">
Curabitur ac mi sit amet diam luctus porta. Phasellus pulvinar sagittis diam, et scelerisque ipsum lobortis nec.
</p>
<p class="text-muted">Reviews (74)</p>
</div>
</div>
</div>
</div>
</div>
</section>

29
components/login.html Normal file
View File

@@ -0,0 +1,29 @@
<div class="container maincontent">
<form>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="emailLogin" class="form-control" />
<label class="form-label" for="email">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<input type="password" id="passwordLogin" class="form-control" />
<label class="form-label" for="password">Password</label>
</div>
<!-- 2 column grid layout for inline styling -->
<div class="row mb-4">
<div class="col d-flex justify-content-center">
<!-- Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="rememberMe" checked />
<label class="form-check-label" for="rememberMe"> Remember me </label>
</div>
</div>
</div>
<!-- Submit button -->
<button type="button" class="btn btn-success btn-block mb-4 float-end">Sign in</button>
</form>
</div>

28
components/loginModal.html
View File

@@ -1,28 +0,0 @@
<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">
<button type="button" class="btn btn-secondary float-start" id="RegisterButton" data-bs-target="#marmeladenladenRegister" data-bs-toggle="modal" data-bs-dismiss="modal">Register</button>
<button type="submit" class="btn btn-success float-end" id="LoginButton">Login</button>
</div>
</form>
</div>
</div>
</div>

16
components/main_nav.html
View File

@@ -12,16 +12,22 @@
<div class="flex-fill">
<ul class="nav navbar-nav d-flex justify-content-between mx-lg-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" type="button" id="homeLink">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
<a class="nav-link" id="aboutLink">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.html">Shop</a>
<a class="nav-link" id="shopLink">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
<a class="nav-link" id="contactLink">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" id="loginLink">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" type="button" id="registerLink">Register</a>
</li>
</ul>
</div>
@@ -41,7 +47,7 @@
<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="#" data-bs-toggle="modal" data-bs-target="#marmeladenladenLogin">
<a class="nav-icon position-relative text-decoration-none" href="#">
<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"></span>
</a>

62
components/register.html Normal file
View File

@@ -0,0 +1,62 @@
<div class="container registerform maincontent">
<form id="marmeladenLadenRegisterForm">
<div class="row">
<div class="col-3">
<select name="salutation" id="salutation">
<option disabled selected value="0" style="display:none">Anrede</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
<option value="Person">Person</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="firstname" id="firstname" placeholder="Vorname" required>
</div>
<div class="col-5">
<input type="text" class="form-control" name="lastname" id="lastname" placeholder="Nachname" required>
</div>
</div>
<div class="row" id="address">
<div class="col-12">
<input type="text" class="form-control" name="street" id="street" placeholder="Straße" required>
</div>
<div>
<div class="row">
<div class="col-4">
<input type="text" class="form-control" name="zip" id="zip" placeholder="PLZ" required>
</div>
<div class="col-8">
<input type="text" class="form-control" name="city" id="city" placeholder="Stadt" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control" name="country" id="country" placeholder="Land" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="email" class="form-control" name="email" id="email" placeholder="E-Mail" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="password" class="form-control" name="password" id="password" placeholder="Passwort" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="password" class="form-control" name="password2" id="password2" placeholder="Passwort wiederholen" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control" name="phone" id="phone" placeholder="Telefon" required>
</div>
</div>
<div class="modal-footer d-block">
<button type="reset" class="btn btn-secondary float-start" id="cancelButton">Reset</button>
<button type="submit" class="btn btn-success float-end" id="registration" >Registrieren</button>
</div>
</form>
</div>

71
components/registerModal.html
View File

@@ -1,71 +0,0 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Registrieren Sie sich!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body container registerform">
<form id="marmeladenLadenRegisterForm" >
<div class="row">
<div class="col-3">
<select name="salutation" id="salutation">
<option disabled selected value="0" style="display:none">Anrede</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
<option value="Person">Person</option>
</select>
</div>
<div class="col-4">
<input type="text" class="form-control" name="firstname" id="firstname" placeholder="Vorname" required>
</div>
<div class="col-5">
<input type="text" class="form-control" name="lastname" id="lastname" placeholder="Nachname" required>
</div>
</div>
<div class="row" id="address">
<div class="col-12">
<input type="text" class="form-control" name="street" id="street" placeholder="Straße" required>
</div>
<div>
<div class="row">
<div class="col-4">
<input type="text" class="form-control" name="zip" id="zip" placeholder="PLZ" required>
</div>
<div class="col-8">
<input type="text" class="form-control" name="city" id="city" placeholder="Stadt" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control" name="country" id="country" placeholder="Land" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="email" class="form-control" name="email" id="email" placeholder="E-Mail" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="password" class="form-control" name="password" id="password" placeholder="Passwort" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="password" class="form-control" name="password2" id="password2" placeholder="Passwort wiederholen" required>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control" name="phone" id="phone" placeholder="Telefon" required>
</div>
</div>
<div class="modal-footer d-block">
<button type="button" class="btn btn-secondary float-start" id="cancelButton" data-bs-target="#marmeladenladenLogin" data-bs-toggle="modal" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success float-end" id="registration" onclick="register()" >Registrieren</button>
</div>
</form>
</div>
</div>
</div>
<script src="../js/registration.js"></script>