mirror of
https://github.com/DerTyp7/shop-ejs-expressjs.git
synced 2025-10-29 12:32:11 +01:00
a
This commit is contained in:
Janis M
34
static/css/auth_header.css
Normal file
34
static/css/auth_header.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/* Header */
|
||||
.auth-header {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 50px;
|
||||
background-color: rgb(97, 102, 141);
|
||||
margin-top: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.auth-header p{
|
||||
float:left;
|
||||
color:white;
|
||||
font-weight: bold;
|
||||
font-size: 14pt;
|
||||
padding:0;
|
||||
margin-left: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.auth-header .auth-header-image-container{
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
background-color: red;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.auth-header .auth-header-image-container img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -6,10 +6,6 @@
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* BACKGROUND */
|
||||
.headerDIV > div {
|
||||
height: 100%;
|
||||
@@ -20,13 +16,17 @@ body {
|
||||
|
||||
/* LOGO PART */
|
||||
.headerDIVLogo {
|
||||
width: 35px;
|
||||
width: 75px;
|
||||
}
|
||||
.headerDIVLogo > img {
|
||||
|
||||
.headerDIVLogo a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.headerDIVLogo a img {
|
||||
margin-top: 10px;
|
||||
float: left;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* SEARCH PART */
|
||||
@@ -91,6 +91,7 @@ body {
|
||||
height: 65px;
|
||||
background-color: #414854;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
*{
|
||||
padding:0;
|
||||
}
|
||||
|
||||
h1, h2{
|
||||
margin-left: 0px;
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.seller{
|
||||
display: block;
|
||||
height: 30px;
|
||||
@@ -34,13 +23,7 @@ h1, h2{
|
||||
border: 2px solid rgb(143, 143, 143);
|
||||
float:left;
|
||||
}
|
||||
#content
|
||||
{
|
||||
width: 1000px;
|
||||
background-color: rgb(244, 244, 244);
|
||||
margin:auto;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#productPicture
|
||||
{
|
||||
width: 40%;
|
||||
@@ -110,7 +93,6 @@ h1, h2{
|
||||
}
|
||||
#reviews{
|
||||
width: 100%;
|
||||
height: 1600px;
|
||||
display: block;
|
||||
float: left;
|
||||
background-color: rgba(39, 39, 39, 0);
|
||||
@@ -122,15 +104,6 @@ h1, h2{
|
||||
float: left;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#reviewTemplatePicture
|
||||
{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: block;
|
||||
float: left;
|
||||
background-color: rgb(85, 158, 255);
|
||||
}
|
||||
|
||||
|
||||
#data
|
||||
{
|
||||
@@ -154,14 +127,14 @@ h1, h2{
|
||||
background-color: rgb(235, 196, 228);
|
||||
}
|
||||
|
||||
form{
|
||||
.form{
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
form label{
|
||||
.form label{
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -169,7 +142,7 @@ form label{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
form label p{
|
||||
.form label p{
|
||||
width: 100%;
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
@@ -178,7 +151,7 @@ form label p{
|
||||
font-weight: bold;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
form label input{
|
||||
.form label input{
|
||||
width: 100%;
|
||||
display:block;
|
||||
margin-left: auto;
|
||||
@@ -192,7 +165,7 @@ form label input{
|
||||
outline: none !important;
|
||||
}
|
||||
/* Submit button with blue background horizontal center*/
|
||||
form input[type="submit"]{
|
||||
.form input[type="submit"]{
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1.5px;
|
||||
@@ -214,21 +187,21 @@ form input[type="submit"]{
|
||||
|
||||
/* Hover */
|
||||
|
||||
form label input:hover{
|
||||
.form label input:hover{
|
||||
border: 2px solid rgb(1, 197, 246);
|
||||
}
|
||||
|
||||
form label input:focus{
|
||||
.form label input:focus{
|
||||
border: 2px solid rgb(1, 197, 246);
|
||||
box-shadow: 0 0 5px #719ece62;
|
||||
}
|
||||
|
||||
form input[type="submit"]:hover{
|
||||
.form input[type="submit"]:hover{
|
||||
border: 2px solid rgb(7, 130, 200);
|
||||
background-color: rgb(7, 130, 200);
|
||||
}
|
||||
|
||||
textarea{
|
||||
.form textarea{
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
display:block;
|
||||
@@ -237,9 +210,3 @@ textarea{
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1030px) {
|
||||
#content
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,18 +1,26 @@
|
||||
*{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,body{
|
||||
min-height: 100% !important;
|
||||
height: 100%;
|
||||
height: 100% !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1{
|
||||
h1, h2{
|
||||
margin-left: 0px;
|
||||
text-align: left;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#error-text{
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
@@ -35,4 +43,21 @@ h1{
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
#content
|
||||
{
|
||||
width: 1000px;
|
||||
background-color: rgb(244, 244, 244);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1030px) {
|
||||
#content
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
6
views/partials/auth_header.ejs
Normal file
6
views/partials/auth_header.ejs
Normal file
@@ -0,0 +1,6 @@
|
||||
<header class="auth-header">
|
||||
<p>OnlineShop | <%= title %></p>
|
||||
<div class="auth-header-image-container">
|
||||
<img src="/images/logo.png">
|
||||
</div>
|
||||
</header>
|
||||
@@ -6,26 +6,26 @@
|
||||
|
||||
<style type="text/css">
|
||||
.footerDIV {
|
||||
width: 100%;
|
||||
background-color: #414854;
|
||||
clear: both;
|
||||
position: relative;
|
||||
height: 65px;
|
||||
margin-top: -56px;
|
||||
width: 100%;
|
||||
background-color: #414854;
|
||||
clear: both;
|
||||
position: relative;
|
||||
height: 65px;
|
||||
margin-top: -56px;
|
||||
}
|
||||
/* LOGO PART */
|
||||
.footerDIVLogo {
|
||||
width: 20%;
|
||||
height:80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 20%;
|
||||
height:80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.footerDIVLogo > img {
|
||||
height: 80%;
|
||||
position: relative;
|
||||
top:20%;
|
||||
left:40%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
top:20%;
|
||||
left:40%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -4,4 +4,5 @@
|
||||
<title>Shop - <%= title %></title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="/css/header.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/auth_header.css">
|
||||
@@ -1,6 +1,8 @@
|
||||
<div class="headerDIV">
|
||||
<div class="headerDIVLogo">
|
||||
<img style="cursor:pointer"onclick="window.open('/', '_self')" src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
|
||||
<a href="/">
|
||||
<img style="cursor:pointer"onclick="window.open('/', '_self')" src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
|
||||
</a>
|
||||
</div><div class="headerDIVSearch">
|
||||
<input placeholder="Suche" class="vertical-center"></input
|
||||
><button class="vertical-center"><i class="material-icons">search</i></button>
|
||||
|
||||
@@ -11,38 +11,36 @@
|
||||
</header>
|
||||
|
||||
<div id="content">
|
||||
<div id="productPicture">
|
||||
<img src="/images/examples.jpg" alt="">
|
||||
</div>
|
||||
<div id="info">
|
||||
<h2><%= product.productName %></h2><br>
|
||||
<p class="badge">Nr.:<%= product.id %></p><br>
|
||||
|
||||
<div id="top">
|
||||
<div id="productPicture">
|
||||
<img src="/images/examples.jpg" alt="">
|
||||
</div>
|
||||
<div id="info">
|
||||
<h2><%= product.productName %></h2><br>
|
||||
<p class="badge">Nr.:<%= product.id %></p><br>
|
||||
<p class="seller">Verkäufer: <%= product.sellerName%></p><br>
|
||||
|
||||
<p class="seller">Verkäufer: <%= product.sellerName%></p><br>
|
||||
<p class="product-detail"><b>Preis:</b> <%= product.price %> € / Stück</h2>
|
||||
<p class="product-detail"><b>Kategorie:</b> <%= category.name %></h2>
|
||||
<p style="word-wrap: break-word;"></p>
|
||||
<div>
|
||||
<label style="margin-right: 30px; margin-left: 0px;
|
||||
|
||||
<p class="product-detail"><b>Preis:</b> <%= product.price %> € / Stück</h2>
|
||||
<p class="product-detail"><b>Kategorie:</b> <%= category.name %></h2>
|
||||
<p style="word-wrap: break-word;"></p>
|
||||
<div>
|
||||
<label style="margin-right: 30px; margin-left: 0px;
|
||||
|
||||
<% if(product.quantity > 0){%>
|
||||
color: green;">
|
||||
Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br>
|
||||
<div style=" float:right;">
|
||||
<span><input type="number" id="quantity" min="1" max="<%= product.quantity %>" style="width: 30px; margin-left: 20px" value="1" ></span>
|
||||
<label>/<%= product.quantity %></label><br>
|
||||
<button class ="order-button"onclick="window.open('/order/<%= product.id %>/' + document.getElementById('quantity').value, '_self')">Bestellen</button>
|
||||
</div>
|
||||
<% } else { %>
|
||||
color: red; font-weight:bold;">
|
||||
Aktuell nicht lieferbar!</label>
|
||||
<% } %>
|
||||
</div>
|
||||
<% if(product.quantity > 0){%>
|
||||
color: green;">
|
||||
Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br>
|
||||
<div style=" float:right;">
|
||||
<span><input type="number" id="quantity" min="1" max="<%= product.quantity %>" style="width: 30px; margin-left: 20px" value="1" ></span>
|
||||
<label>/<%= product.quantity %></label><br>
|
||||
<button class ="order-button"onclick="window.open('/order/<%= product.id %>/' + document.getElementById('quantity').value, '_self')">Bestellen</button>
|
||||
</div>
|
||||
<% } else { %>
|
||||
color: red; font-weight:bold;">
|
||||
Aktuell nicht lieferbar!</label>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description">
|
||||
<h2>Beschreibung</h2>
|
||||
@@ -51,7 +49,7 @@
|
||||
<% if(loggedIn){ %>
|
||||
<div id="newReview">
|
||||
<h2 style="padding-left: 30px;">Rezensionen</h2>
|
||||
<form action="/review/create/<%= product.id %>" method="post">
|
||||
<form class="form" action="/review/create/<%= product.id %>" method="post">
|
||||
<label for="title">
|
||||
<p>Titel: </p>
|
||||
<input type="text" name="title">
|
||||
|
||||
@@ -5,78 +5,81 @@
|
||||
<link rel="stylesheet" href="/css/auth.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Register</h1>
|
||||
<%- include('partials/auth_header'); %>
|
||||
<div class="content">
|
||||
<h1>Register</h1>
|
||||
|
||||
<form action="/auth/register" method="POST">
|
||||
<p id="error-text"><%- error %></p>
|
||||
|
||||
<h4>Account Informationen:</h4>
|
||||
|
||||
<label for="username">
|
||||
<p>Benutzername:</p>
|
||||
<input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein">
|
||||
</label>
|
||||
|
||||
<label for="email">
|
||||
<p>E-Mail:</p>
|
||||
<input required type="email" name="email" id="emailInput" placeholder="Geben Sie Ihre E-Mail-Adresse ein">
|
||||
</label>
|
||||
|
||||
<label for="password1">
|
||||
<p>Passwort:</p>
|
||||
<input required type="password" name="password1" id="password1Input" placeholder="Geben Sie Ihr Passwort ein">
|
||||
</label>
|
||||
|
||||
<label for="password2">
|
||||
<p>Passwort wiederholen:</p>
|
||||
<input required type="password" name="password2" id="password2Input" placeholder="wiederholen Sie Ihr Passwort">
|
||||
</label>
|
||||
|
||||
<h4>Persönliche Informationen:</h4>
|
||||
<label for="firstname">
|
||||
<p>Vorname:</p>
|
||||
<input required type="text" name="firstname" id="firstnameInput" placeholder="Geben Sie Ihren Vornamen ein">
|
||||
</label>
|
||||
|
||||
<label for="lastname">
|
||||
<p>Nachname:</p>
|
||||
<input required type="text" name="lastname" id="lastnameInput" placeholder="Geben Sie Ihren Nachnamen ein">
|
||||
</label>
|
||||
|
||||
<label for="gender">
|
||||
<p>Anrede (z.B. Herr, Frau):</p>
|
||||
<input required type="text" name="gender" id="genderInput" placeholder="Wie lautet Ihre Anrede?">
|
||||
</label>
|
||||
|
||||
<h4>Lieferadresse:</h4>
|
||||
<label for="street">
|
||||
<p>Straße:</p>
|
||||
<input required type="text" name="street" id="streetInput" placeholder="Geben Sie Ihre Straße ein">
|
||||
</label>
|
||||
|
||||
<label for="housenumber">
|
||||
<p>Hausnummer:</p>
|
||||
<input required type="number" min="1" name="housenumber" id="housenumberInput" placeholder="Geben Sie Ihre Hausnummer ein">
|
||||
</label>
|
||||
|
||||
<label for="postcode">
|
||||
<p>Postleitzahl:</p>
|
||||
<input required type="text" name="postcode" id="postcodeInput" placeholder="Geben Sie die Postleitzahl ein">
|
||||
</label>
|
||||
|
||||
<label for="cityName">
|
||||
<p>Stadt:</p>
|
||||
<input required type="text" name="cityName" id="cityInput" placeholder="Geben Sie die Stadt ein">
|
||||
</label>
|
||||
|
||||
<label for="country">
|
||||
<p>Land:</p>
|
||||
<input required type="text" name="country" id="countryInput" placeholder="Geben Sie das Land ein">
|
||||
</label>
|
||||
|
||||
<input style="width: 40%;cursor:pointer;" type="submit" value="Registrieren">
|
||||
<!-- Already have an account?-->
|
||||
<a class="text-redirect" href="/login">Sie haben bereits einen Account?</a>
|
||||
</form>
|
||||
<form action="/auth/register" method="POST">
|
||||
<p id="error-text"><%- error %></p>
|
||||
|
||||
<h4>Account Informationen:</h4>
|
||||
|
||||
<label for="username">
|
||||
<p>Benutzername:</p>
|
||||
<input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein">
|
||||
</label>
|
||||
|
||||
<label for="email">
|
||||
<p>E-Mail:</p>
|
||||
<input required type="email" name="email" id="emailInput" placeholder="Geben Sie Ihre E-Mail-Adresse ein">
|
||||
</label>
|
||||
|
||||
<label for="password1">
|
||||
<p>Passwort:</p>
|
||||
<input required type="password" name="password1" id="password1Input" placeholder="Geben Sie Ihr Passwort ein">
|
||||
</label>
|
||||
|
||||
<label for="password2">
|
||||
<p>Passwort wiederholen:</p>
|
||||
<input required type="password" name="password2" id="password2Input" placeholder="wiederholen Sie Ihr Passwort">
|
||||
</label>
|
||||
|
||||
<h4>Persönliche Informationen:</h4>
|
||||
<label for="firstname">
|
||||
<p>Vorname:</p>
|
||||
<input required type="text" name="firstname" id="firstnameInput" placeholder="Geben Sie Ihren Vornamen ein">
|
||||
</label>
|
||||
|
||||
<label for="lastname">
|
||||
<p>Nachname:</p>
|
||||
<input required type="text" name="lastname" id="lastnameInput" placeholder="Geben Sie Ihren Nachnamen ein">
|
||||
</label>
|
||||
|
||||
<label for="gender">
|
||||
<p>Anrede (z.B. Herr, Frau):</p>
|
||||
<input required type="text" name="gender" id="genderInput" placeholder="Wie lautet Ihre Anrede?">
|
||||
</label>
|
||||
|
||||
<h4>Lieferadresse:</h4>
|
||||
<label for="street">
|
||||
<p>Straße:</p>
|
||||
<input required type="text" name="street" id="streetInput" placeholder="Geben Sie Ihre Straße ein">
|
||||
</label>
|
||||
|
||||
<label for="housenumber">
|
||||
<p>Hausnummer:</p>
|
||||
<input required type="number" min="1" name="housenumber" id="housenumberInput" placeholder="Geben Sie Ihre Hausnummer ein">
|
||||
</label>
|
||||
|
||||
<label for="postcode">
|
||||
<p>Postleitzahl:</p>
|
||||
<input required type="text" name="postcode" id="postcodeInput" placeholder="Geben Sie die Postleitzahl ein">
|
||||
</label>
|
||||
|
||||
<label for="cityName">
|
||||
<p>Stadt:</p>
|
||||
<input required type="text" name="cityName" id="cityInput" placeholder="Geben Sie die Stadt ein">
|
||||
</label>
|
||||
|
||||
<label for="country">
|
||||
<p>Land:</p>
|
||||
<input required type="text" name="country" id="countryInput" placeholder="Geben Sie das Land ein">
|
||||
</label>
|
||||
|
||||
<input style="width: 40%;cursor:pointer;" type="submit" value="Registrieren">
|
||||
<!-- Already have an account?-->
|
||||
<a class="text-redirect" href="/login">Sie haben bereits einen Account?</a>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user