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>

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

@@ -93,3 +93,90 @@
<i class="fas fa-chevron-right"></i>
</a>
</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>

17
index.html
View File

@@ -30,29 +30,12 @@
</nav>
<!-- 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-->
<div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
</div>
<!-- End Modal-->
<!-- Start Banner Carousel-->
<div id="mmlcarousel">
</div>
<!-- End Banner Carousel-->
<!-- Start Main Content -->
<div id="mmlMainContent">

19
js/app.ts
View File

@@ -1,11 +1,20 @@
$(document).ready(function() {
$('#mmlMainContent').load('../components/homepage.html');
$('#top_nav_bar').load('../components/top_nav.html');
$('#main_nav_bar').load('../components/main_nav.html');
$('#mmlcarousel').load('../components/banner.html');
$('#main_nav_bar').load('../components/main_nav.html', function() {
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');
$('#marmeladenladen_footer').load('../components/footer.html');
$('#marmeladenladen_search').load('../components/modal.html');
$('#marmeladenladenLogin').load('../components/loginModal.html');
$('#marmeladenladenRegister').load('../components/registerModal.html');
});

38
js/registration.js
View File

@@ -2,20 +2,38 @@ const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
password2.addEventListener('change', checkPassword);
const form = document.getElementById('marmeladenLadenRegisterForm');
form.addEventListener('submit', register);
function register() {
if (!checkPassword()) {
return;
$.ajax({
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);
}
const form = document.querySelector('#marmeladenLadenRegisterForm');
}
});
return false;
}
var formData = new FormData(form);
const jSONdata = JSON.stringify(Object.fromEntries(formData));
//print elements of jSONdata
console.log(jSONdata);
}
function checkPassword() {
if (password.value != password2.value) {
@@ -26,3 +44,13 @@ function checkPassword() {
return true;
}
}
function checkemail() {
if (email.value != '') {
email.setCustomValidity('');
return true;
} else {
email.setCustomValidity('Email is required');
return false;
}
}

6
res/css/style.css
View File

@@ -54,6 +54,12 @@
font-size: 2.8em !important;
}
/* MainContent */
.maincontent {
padding-top: 5em;
padding-bottom: 5em;
}
/* Medium devices */
@media (min-width: 768px) {
#main_nav_bar .navbar-nav {max-width: 450px;}