navigation and pages
This commit is contained in:
StockiP
@@ -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>
|
|
||||||
@@ -92,4 +92,91 @@
|
|||||||
data-bs-slide="next">
|
data-bs-slide="next">
|
||||||
<i class="fas fa-chevron-right"></i>
|
<i class="fas fa-chevron-right"></i>
|
||||||
</a>
|
</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
29
components/login.html
Normal 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>
|
||||||
@@ -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>
|
|
||||||
@@ -12,16 +12,22 @@
|
|||||||
<div class="flex-fill">
|
<div class="flex-fill">
|
||||||
<ul class="nav navbar-nav d-flex justify-content-between mx-lg-auto">
|
<ul class="nav navbar-nav d-flex justify-content-between mx-lg-auto">
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="about.html">About</a>
|
<a class="nav-link" id="aboutLink">About</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="shop.html">Shop</a>
|
<a class="nav-link" id="shopLink">Shop</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@@ -41,7 +47,7 @@
|
|||||||
<i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
|
<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>
|
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
|
||||||
</a>
|
</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>
|
<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>
|
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark"></span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
62
components/register.html
Normal file
62
components/register.html
Normal 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>
|
||||||
@@ -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>
|
|
||||||
17
index.html
17
index.html
@@ -30,28 +30,11 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<!-- End Main Navbar-->
|
<!-- End Main Navbar-->
|
||||||
|
|
||||||
|
|
||||||
<!-- Start Registration Modal-->
|
|
||||||
<div class="modal fade" id="marmeladenladenRegister" tabindex="-1" role="dialog"
|
|
||||||
aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
||||||
</div>
|
|
||||||
<!--End Registration 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-->
|
<!-- Start Search Modal-->
|
||||||
<div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog"
|
<div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog"
|
||||||
aria-labelledby="exampleModalLabel" aria-hidden="true">
|
aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
</div>
|
</div>
|
||||||
<!-- End Modal-->
|
<!-- End Modal-->
|
||||||
|
|
||||||
<!-- Start Banner Carousel-->
|
|
||||||
<div id="mmlcarousel">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- End Banner Carousel-->
|
|
||||||
|
|
||||||
<!-- Start Main Content -->
|
<!-- Start Main Content -->
|
||||||
<div id="mmlMainContent">
|
<div id="mmlMainContent">
|
||||||
|
|||||||
19
js/app.ts
19
js/app.ts
@@ -1,11 +1,20 @@
|
|||||||
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
$('#mmlMainContent').load('../components/homepage.html');
|
||||||
$('#top_nav_bar').load('../components/top_nav.html');
|
$('#top_nav_bar').load('../components/top_nav.html');
|
||||||
$('#main_nav_bar').load('../components/main_nav.html');
|
$('#main_nav_bar').load('../components/main_nav.html', function() {
|
||||||
$('#mmlcarousel').load('../components/banner.html');
|
document.getElementById('registerLink')?.addEventListener('click', function() {
|
||||||
|
$('#mmlMainContent').load('../components/register.html');
|
||||||
|
},);
|
||||||
|
document.getElementById('homeLink')?.addEventListener('click', function() {
|
||||||
|
$('#mmlMainContent').load('../components/homepage.html');
|
||||||
|
},);
|
||||||
|
document.getElementById('loginLink')?.addEventListener('click', function() {
|
||||||
|
$('#mmlMainContent').load('../components/login.html');
|
||||||
|
},);
|
||||||
|
});
|
||||||
$('#mmlMainContent').load('../components/ftProducts.html');
|
$('#mmlMainContent').load('../components/ftProducts.html');
|
||||||
$('#marmeladenladen_footer').load('../components/footer.html');
|
$('#marmeladenladen_footer').load('../components/footer.html');
|
||||||
$('#marmeladenladen_search').load('../components/modal.html');
|
$('#marmeladenladen_search').load('../components/modal.html');
|
||||||
$('#marmeladenladenLogin').load('../components/loginModal.html');
|
|
||||||
$('#marmeladenladenRegister').load('../components/registerModal.html');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -2,20 +2,38 @@ const email = document.getElementById('email');
|
|||||||
const password = document.getElementById('password');
|
const password = document.getElementById('password');
|
||||||
const password2 = document.getElementById('password2');
|
const password2 = document.getElementById('password2');
|
||||||
password2.addEventListener('change', checkPassword);
|
password2.addEventListener('change', checkPassword);
|
||||||
|
const form = document.getElementById('marmeladenLadenRegisterForm');
|
||||||
|
form.addEventListener('submit', register);
|
||||||
|
|
||||||
|
|
||||||
function register() {
|
function register() {
|
||||||
if (!checkPassword()) {
|
|
||||||
return;
|
|
||||||
}
|
$.ajax({
|
||||||
const form = document.querySelector('#marmeladenLadenRegisterForm');
|
url: 'php/registration.php',
|
||||||
|
type: 'POST',
|
||||||
|
data: {
|
||||||
|
email: email.value,
|
||||||
|
password: password.value,
|
||||||
|
password2: password2.value
|
||||||
|
},
|
||||||
|
success: function (data) {
|
||||||
|
if (data == 'success') {
|
||||||
|
window.location.href = 'index.html';
|
||||||
|
} else {
|
||||||
|
alert(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
var formData = new FormData(form);
|
var formData = new FormData(form);
|
||||||
const jSONdata = JSON.stringify(Object.fromEntries(formData));
|
const jSONdata = JSON.stringify(Object.fromEntries(formData));
|
||||||
|
|
||||||
//print elements of jSONdata
|
//print elements of jSONdata
|
||||||
console.log(jSONdata);
|
console.log(jSONdata);
|
||||||
}
|
|
||||||
|
|
||||||
function checkPassword() {
|
function checkPassword() {
|
||||||
if (password.value != password2.value) {
|
if (password.value != password2.value) {
|
||||||
@@ -25,4 +43,14 @@ function checkPassword() {
|
|||||||
password2.setCustomValidity('');
|
password2.setCustomValidity('');
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkemail() {
|
||||||
|
if (email.value != '') {
|
||||||
|
email.setCustomValidity('');
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
email.setCustomValidity('Email is required');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -54,6 +54,12 @@
|
|||||||
font-size: 2.8em !important;
|
font-size: 2.8em !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* MainContent */
|
||||||
|
.maincontent {
|
||||||
|
padding-top: 5em;
|
||||||
|
padding-bottom: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
/* Medium devices */
|
/* Medium devices */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
#main_nav_bar .navbar-nav {max-width: 450px;}
|
#main_nav_bar .navbar-nav {max-width: 450px;}
|
||||||
|
|||||||
Reference in New Issue
Block a user