janis/shop-ejs-expressjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/shop-ejs-expressjs.git synced 2025-10-30 12:57:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
Janis M
2022-03-29 12:40:18 +02:00
parent 5c128cb2ae
commit 0c4e9e83c4
10 changed files with 211 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
static/css/auth_header.css Normal file
View 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%;
}

19
static/css/header.css
View File

@@ -6,10 +6,6 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
body {
margin: 0;
}
/* BACKGROUND */ /* BACKGROUND */
.headerDIV > div { .headerDIV > div {
height: 100%; height: 100%;
@@ -20,13 +16,17 @@ body {
/* LOGO PART */ /* LOGO PART */
.headerDIVLogo { .headerDIVLogo {
width: 35px; width: 75px;
} }
.headerDIVLogo > img {
.headerDIVLogo a {
width: 100%;
height: 100%;
}
.headerDIVLogo a img {
margin-top: 10px;
float: left; float: left;
height: 80%; width: 100%;
position: relative;
top: 10%;
} }
/* SEARCH PART */ /* SEARCH PART */
@@ -91,6 +91,7 @@ body {
height: 65px; height: 65px;
background-color: #414854; background-color: #414854;
margin: 0; margin: 0;
display: block;
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {

53
static/css/product.css
View File

@@ -1,14 +1,3 @@
*{
padding:0;
}
h1, h2{
margin-left: 0px;
text-align: left;
padding-bottom: 0;
margin-bottom: 0px;
}
.seller{ .seller{
display: block; display: block;
height: 30px; height: 30px;
@@ -34,13 +23,7 @@ h1, h2{
border: 2px solid rgb(143, 143, 143); border: 2px solid rgb(143, 143, 143);
float:left; float:left;
} }
#content
{
width: 1000px;
background-color: rgb(244, 244, 244);
margin:auto;
padding-top: 10px;
}
#productPicture #productPicture
{ {
width: 40%; width: 40%;
@@ -110,7 +93,6 @@ h1, h2{
} }
#reviews{ #reviews{
width: 100%; width: 100%;
height: 1600px;
display: block; display: block;
float: left; float: left;
background-color: rgba(39, 39, 39, 0); background-color: rgba(39, 39, 39, 0);
@@ -122,15 +104,6 @@ h1, h2{
float: left; float: left;
margin-bottom: 20px; margin-bottom: 20px;
} }
#reviewTemplatePicture
{
width: 200px;
height: 200px;
display: block;
float: left;
background-color: rgb(85, 158, 255);
}
#data #data
{ {
@@ -154,14 +127,14 @@ h1, h2{
background-color: rgb(235, 196, 228); background-color: rgb(235, 196, 228);
} }
form{ .form{
display:block; display:block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 500px; width: 500px;
} }
form label{ .form label{
display:block; display:block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@@ -169,7 +142,7 @@ form label{
margin-top: 20px; margin-top: 20px;
} }
form label p{ .form label p{
width: 100%; width: 100%;
display:block; display:block;
margin-left: auto; margin-left: auto;
@@ -178,7 +151,7 @@ form label p{
font-weight: bold; font-weight: bold;
letter-spacing: 1.5px; letter-spacing: 1.5px;
} }
form label input{ .form label input{
width: 100%; width: 100%;
display:block; display:block;
margin-left: auto; margin-left: auto;
@@ -192,7 +165,7 @@ form label input{
outline: none !important; outline: none !important;
} }
/* Submit button with blue background horizontal center*/ /* Submit button with blue background horizontal center*/
form input[type="submit"]{ .form input[type="submit"]{
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-weight: bold; font-weight: bold;
letter-spacing: 1.5px; letter-spacing: 1.5px;
@@ -214,21 +187,21 @@ form input[type="submit"]{
/* Hover */ /* Hover */
form label input:hover{ .form label input:hover{
border: 2px solid rgb(1, 197, 246); border: 2px solid rgb(1, 197, 246);
} }
form label input:focus{ .form label input:focus{
border: 2px solid rgb(1, 197, 246); border: 2px solid rgb(1, 197, 246);
box-shadow: 0 0 5px #719ece62; box-shadow: 0 0 5px #719ece62;
} }
form input[type="submit"]:hover{ .form input[type="submit"]:hover{
border: 2px solid rgb(7, 130, 200); border: 2px solid rgb(7, 130, 200);
background-color: rgb(7, 130, 200); background-color: rgb(7, 130, 200);
} }
textarea{ .form textarea{
resize: vertical; resize: vertical;
width: 100%; width: 100%;
display:block; display:block;
@@ -237,9 +210,3 @@ textarea{
} }
@media only screen and (max-width: 1030px) {
#content
{
width: 100%;
}
}

33
static/css/style.css
View File

@@ -1,18 +1,26 @@
*{ *{
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
} }
html,body{ html,body{
min-height: 100% !important; 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; text-align: center;
} }
#error-text{ #error-text{
color: red; color: red;
font-weight: bold; font-weight: bold;
@@ -36,3 +44,20 @@ h1{
display: block; display: block;
padding-top: 10px; 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
View 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>

32
views/partials/footer.ejs
View File

@@ -6,26 +6,26 @@
<style type="text/css"> <style type="text/css">
.footerDIV { .footerDIV {
width: 100%; width: 100%;
background-color: #414854; background-color: #414854;
clear: both; clear: both;
position: relative; position: relative;
height: 65px; height: 65px;
margin-top: -56px; margin-top: -56px;
} }
/* LOGO PART */ /* LOGO PART */
.footerDIVLogo { .footerDIVLogo {
width: 20%; width: 20%;
height:80%; height:80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.footerDIVLogo > img { .footerDIVLogo > img {
height: 80%; height: 80%;
position: relative; position: relative;
top:20%; top:20%;
left:40%; left:40%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
</style> </style>

1
views/partials/head.ejs
View File

@@ -5,3 +5,4 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="/css/header.css"> <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">

4
views/partials/header.ejs
View File

@@ -1,6 +1,8 @@
<div class="headerDIV"> <div class="headerDIV">
<div class="headerDIVLogo"> <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"> </div><div class="headerDIVSearch">
<input placeholder="Suche" class="vertical-center"></input <input placeholder="Suche" class="vertical-center"></input
><button class="vertical-center"><i class="material-icons">search</i></button> ><button class="vertical-center"><i class="material-icons">search</i></button>

54
views/product.ejs
View File

@@ -11,39 +11,37 @@
</header> </header>
<div id="content"> <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"> <p class="seller">Verkäufer: <%= product.sellerName%></p><br>
<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="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> <% if(product.quantity > 0){%>
<p class="product-detail"><b>Kategorie:</b> <%= category.name %></h2> color: green;">
<p style="word-wrap: break-word;"></p> Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br>
<div> <div style=" float:right;">
<label style="margin-right: 30px; margin-left: 0px; <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>
<% if(product.quantity > 0){%> <button class ="order-button"onclick="window.open('/order/<%= product.id %>/' + document.getElementById('quantity').value, '_self')">Bestellen</button>
color: green;"> </div>
Lieferbar in <%= product.delivery_time %> - <%= product.delivery_time + 1 %> Tagen</label><br><br> <% } else { %>
<div style=" float:right;"> color: red; font-weight:bold;">
<span><input type="number" id="quantity" min="1" max="<%= product.quantity %>" style="width: 30px; margin-left: 20px" value="1" ></span> Aktuell nicht lieferbar!</label>
<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>
</div> </div>
<div id="description"> <div id="description">
<h2>Beschreibung</h2> <h2>Beschreibung</h2>
<p><%= product.productDescription %> </p> <p><%= product.productDescription %> </p>
@@ -51,7 +49,7 @@
<% if(loggedIn){ %> <% if(loggedIn){ %>
<div id="newReview"> <div id="newReview">
<h2 style="padding-left: 30px;">Rezensionen</h2> <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"> <label for="title">
<p>Titel: </p> <p>Titel: </p>
<input type="text" name="title"> <input type="text" name="title">

119
views/register.ejs
View File

@@ -5,78 +5,81 @@
<link rel="stylesheet" href="/css/auth.css"> <link rel="stylesheet" href="/css/auth.css">
</head> </head>
<body> <body>
<h1>Register</h1> <%- include('partials/auth_header'); %>
<div class="content">
<h1>Register</h1>
<form action="/auth/register" method="POST"> <form action="/auth/register" method="POST">
<p id="error-text"><%- error %></p> <p id="error-text"><%- error %></p>
<h4>Account Informationen:</h4> <h4>Account Informationen:</h4>
<label for="username"> <label for="username">
<p>Benutzername:</p> <p>Benutzername:</p>
<input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein"> <input required type="text" name="username" id="usernameInput" placeholder="Geben Sie Ihren Benutzernamen ein">
</label> </label>
<label for="email"> <label for="email">
<p>E-Mail:</p> <p>E-Mail:</p>
<input required type="email" name="email" id="emailInput" placeholder="Geben Sie Ihre E-Mail-Adresse ein"> <input required type="email" name="email" id="emailInput" placeholder="Geben Sie Ihre E-Mail-Adresse ein">
</label> </label>
<label for="password1"> <label for="password1">
<p>Passwort:</p> <p>Passwort:</p>
<input required type="password" name="password1" id="password1Input" placeholder="Geben Sie Ihr Passwort ein"> <input required type="password" name="password1" id="password1Input" placeholder="Geben Sie Ihr Passwort ein">
</label> </label>
<label for="password2"> <label for="password2">
<p>Passwort wiederholen:</p> <p>Passwort wiederholen:</p>
<input required type="password" name="password2" id="password2Input" placeholder="wiederholen Sie Ihr Passwort"> <input required type="password" name="password2" id="password2Input" placeholder="wiederholen Sie Ihr Passwort">
</label> </label>
<h4>Persönliche Informationen:</h4> <h4>Persönliche Informationen:</h4>
<label for="firstname"> <label for="firstname">
<p>Vorname:</p> <p>Vorname:</p>
<input required type="text" name="firstname" id="firstnameInput" placeholder="Geben Sie Ihren Vornamen ein"> <input required type="text" name="firstname" id="firstnameInput" placeholder="Geben Sie Ihren Vornamen ein">
</label> </label>
<label for="lastname"> <label for="lastname">
<p>Nachname:</p> <p>Nachname:</p>
<input required type="text" name="lastname" id="lastnameInput" placeholder="Geben Sie Ihren Nachnamen ein"> <input required type="text" name="lastname" id="lastnameInput" placeholder="Geben Sie Ihren Nachnamen ein">
</label> </label>
<label for="gender"> <label for="gender">
<p>Anrede (z.B. Herr, Frau):</p> <p>Anrede (z.B. Herr, Frau):</p>
<input required type="text" name="gender" id="genderInput" placeholder="Wie lautet Ihre Anrede?"> <input required type="text" name="gender" id="genderInput" placeholder="Wie lautet Ihre Anrede?">
</label> </label>
<h4>Lieferadresse:</h4> <h4>Lieferadresse:</h4>
<label for="street"> <label for="street">
<p>Straße:</p> <p>Straße:</p>
<input required type="text" name="street" id="streetInput" placeholder="Geben Sie Ihre Straße ein"> <input required type="text" name="street" id="streetInput" placeholder="Geben Sie Ihre Straße ein">
</label> </label>
<label for="housenumber"> <label for="housenumber">
<p>Hausnummer:</p> <p>Hausnummer:</p>
<input required type="number" min="1" name="housenumber" id="housenumberInput" placeholder="Geben Sie Ihre Hausnummer ein"> <input required type="number" min="1" name="housenumber" id="housenumberInput" placeholder="Geben Sie Ihre Hausnummer ein">
</label> </label>
<label for="postcode"> <label for="postcode">
<p>Postleitzahl:</p> <p>Postleitzahl:</p>
<input required type="text" name="postcode" id="postcodeInput" placeholder="Geben Sie die Postleitzahl ein"> <input required type="text" name="postcode" id="postcodeInput" placeholder="Geben Sie die Postleitzahl ein">
</label> </label>
<label for="cityName"> <label for="cityName">
<p>Stadt:</p> <p>Stadt:</p>
<input required type="text" name="cityName" id="cityInput" placeholder="Geben Sie die Stadt ein"> <input required type="text" name="cityName" id="cityInput" placeholder="Geben Sie die Stadt ein">
</label> </label>
<label for="country"> <label for="country">
<p>Land:</p> <p>Land:</p>
<input required type="text" name="country" id="countryInput" placeholder="Geben Sie das Land ein"> <input required type="text" name="country" id="countryInput" placeholder="Geben Sie das Land ein">
</label> </label>
<input style="width: 40%;cursor:pointer;" type="submit" value="Registrieren"> <input style="width: 40%;cursor:pointer;" type="submit" value="Registrieren">
<!-- Already have an account?--> <!-- Already have an account?-->
<a class="text-redirect" href="/login">Sie haben bereits einen Account?</a> <a class="text-redirect" href="/login">Sie haben bereits einen Account?</a>
</form> </form>
</div>
</body> </body>
</html> </html>