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

ganz viel merge und so

Browse Source
This commit is contained in:
Janis M
2022-03-28 14:03:53 +02:00
parent 3ff13bfd25
commit a0f059d955
16 changed files with 613 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
views/index.ejs
View File

@@ -1,10 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/head'); %>
<html lang="en" style="">
<head>
<%- include('partials/head'); %>
</head>
<body>
<h1>isAdmin: <%= isAdmin %></h1>
<body style="">
<%- include('partials/header'); %>
<style>
html {
height: 100%;
overflow-x: auto;
overflow-y: scroll;
margin: 0;
background-color: white;
}
body {
min-height: 100%;
}
.grid-container {
display: flex;
gap: 20px;
margin: 0 auto;
grid-template-columns: auto auto auto auto;
padding: 20px;
}
.grid-item {
background-color: white;
border: 10px;
border-color: rgba(111,111,111,0.2) transparent transparent;
padding: 20px;
font-size: 20px;
height: 320px;
width: 280px;
text-align: left;
}
.grid-item p{
display:block;
height: 50px;
}
.middle-content {
background: linear-gradient(to bottom left, #313c48, white);
background-repeat: no-repeat;
width: 80%;
margin: auto;
margin-top: 50px;
}
</style>
<div class="middle-content">
<div id="headlineTop">
<h2 style="padding-left:20px; padding-top:50px">Top Angebote</h2>
</div>
<div class="grid-container" >
<% for (let i=0; i < products.length && i <=4; i++){ %>
<div class="grid-item">
<p><%= products[i].name %></p>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
</div>
<%}%>
</div>
<div id="headlineTop">
<h2 style="padding-left:20px;">Unsere Empfehlungen für Sie</h2>
</div>
<div class="grid-container">
<div class="grid-item">
<% let randomNr = Math.floor(Math.random() * products.length); %>
<%= products[randomNr].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[randomNr].id%>','_self')">
</div>
<div class="grid-item">
<% let randomNr2 = Math.floor(Math.random() * products.length); %>
<%= products[randomNr2].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr2].id%>','_self')">
</div>
<div class="grid-item">
<% let randomNr3 = Math.floor(Math.random() * products.length); %>
<%= products[randomNr3].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr3].id%>','_self')">
</div>
<div class="grid-item">
<% let randomNr4 = Math.floor(Math.random() * products.length); %>
<%= products[randomNr4].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/"<%- products[randomNr4].id%>','_self')">
</div>
</div>
<div class="grid-container" style="margin-bottom: 100px;">
<% for (let i=0; i < products.length && i <=4; i++){ %>
<div class="grid-item">
<%= products[i].name %>
<img src="https://m.media-amazon.com/images/I/815eDw--FQS._AC_SL1500_.jpg" style='height: 100%; width: 100%; object-fit: contain' onclick="window.open('/product/<%- products[i].id%>','_self')">
</div>
<%}%>
</div>
</div>
<%- include('partials/footer'); %>
</body>
</html>

2
views/login.ejs
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<%- include('partials/head'); %>
<link rel="stylesheet" href="/auth.css">
<link rel="stylesheet" href="/css/auth.css">
</head>
<body>
<h1>Login</h1>

7
views/order.ejs
View File

@@ -2,9 +2,10 @@
<html lang="en">
<head>
<%- include('partials/head'); %>
<link rel="stylesheet" href="/order.css">
<link rel="stylesheet" href="/css/order.css">
</head>
<body>
<%- include('partials/header'); %>
<h1>Ihre Bestellung</h1>
<p id="error-text"><%- error %></p>
@@ -19,10 +20,12 @@
<!--submit button-->
<form action="/order" method="POST">
<input hidden type="text" name="productId" value="<%= product.id %>">
<input hidden type="text" name="quantity" value="<%= quantity %>">
<input hidden type="text" name="quantity" value="<%= quantity %>">
<!-- Price is calculated on backend ;) -->
<input type="submit" value="Bestellen">
</form>
</body>
</html>

2
views/order_success.ejs
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<%- include('partials/head'); %>
<link rel="stylesheet" href="/order.css">
<link rel="stylesheet" href="/css/order.css">
</head>
<body>
<h1 style="color:rgb(6, 170, 6)">Ihre Bestellung wurde in Auftrag gegeben!</h1>

7
views/partials/footer.ejs
View File

@@ -7,10 +7,11 @@
<style type="text/css">
.footerDIV {
width: 100%;
height:65px;
position: absolute;
bottom:-65px;
background-color: #414854;
clear: both;
position: relative;
height: 65px;
margin-top: -56px;
}
/* LOGO PART */
.footerDIVLogo {

3
views/partials/head.ejs
View File

@@ -3,4 +3,5 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - <%= title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/css/header.css">
<link rel="stylesheet" href="/css/style.css">

86
views/partials/header.ejs
View File

@@ -1,82 +1,16 @@
<div class="headerDIV">
<div class="headerDIVLogo">
<div class="headerDIVLogo" style="cursor:pointer"onclick="window.open('/', '_self')">
<img src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png">
</div><div class="headerDIVSearch">
<input placeholder="Suche" class="vertical-center"></input
><button class="vertical-center"><i class="material-icons">search</i></button>
</div><div class="headerDIVLogin">
<button class="vertical-center">Login</button>
</div><div class="headerDIVButton">
<% if(user){ %>
<button class="vertical-center" id="headerBtnLogout" onclick="window.open('/logout', '_self')">Log out</button>
<button class="vertical-center" onclick="window.open('/account', '_self')">Ihr Konto</button>
<%} else{%>
<button class="vertical-center" onclick="window.open('/register', '_self')">Registrieren</button>
<button class="vertical-center" onclick="window.open('/login', '_self')">Login</button>
<% } %>
</div>
</div>
<style type="text/css">
/* UTIL */
.vertical-center {
float: left;
top: 50%;
position: relative;
transform: translateY(-50%);
}
body {
margin: 0;
}
/* BACKGROUND */
.headerDIV > div {
height: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
}
/* LOGO PART */
.headerDIVLogo {
width: 20%;
}
.headerDIVLogo > img {
float: left;
height: 80%;
position: relative;
top: 10%;
}
/* SEARCH PART */
.headerDIVSearch {
width: 60%;
}
.headerDIVSearch > input {
left: 10%;
width: calc(80% - 60px);
border-radius: 5px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
height: 20px;
padding: 3px 10px;
}
.headerDIVSearch > button {
width: 40px;
left: 10%;
border-radius: 5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
height: 30px;
}
/* LOGIN PART */
.headerDIVLogin {
width: 20%;
}
.headerDIVLogin > button {
height: 30px;
float: right;
margin-right: 10px;
}
.headerDIV {
width: 100%;
height: 65px;
background-color: #414854;
margin: 0;
}
</style>
</div>

189
views/product.ejs
View File

@@ -2,6 +2,7 @@
<html lang="en">
<head>
<%- include('partials/head'); %>
<link rel="stylesheet" href="/css/product.css">
</head>
<body>
@@ -13,156 +14,84 @@
<div id="top">
<div id="productPicture">
<!--BILD-->
<img src="/images/examples.jpg" alt="">
</div>
<div id="info">
<h1 id="title"><%= product.name %></h1>
<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: 30px;
<% if(stockAmount > 0){%>
color: green;">
lieferbar in <%= shippingDays %> - <%= shippingDays + 1 %> Tagen</label>
<span><input type="number" id="quantity" min="1" max="<%= stockAmount %>" style="width: 30px;" value="1" ></span>
<label>/<%= stockAmount %></label>
<% } else { %>
color: red;">
nicht lieferbar</label>
<% } %>
<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>
</div>
</div>
<div id="description">
<h1 style="margin-left: 30px;">Beschreibung</h1>
<p style="margin-left: 30px;"><%= productDescription %></p>
<h2>Beschreibung</h2>
<p><%= product.productDescription %> </p>
</div>
<% if(loggedIn){ %>
<div id="newReview">
<h1 style="padding-left: 30px;">Bewertung</h1>
<textarea name="review" id="" cols="60" rows="5" style="margin-left: 30px; resize: none;"></textarea>
<button>Post</button>
<h2 style="padding-left: 30px;">Rezensionen</h2>
<form action="/review/create/<%= product.id %>" method="post">
<label for="title">
<p>Titel: </p>
<input type="text" name="title">
</label>
<label for="rating">
<p>Bewertung (0-10): </p>
<input type="number" name="rating" max="10" min="0">
</label>
<label for="content">
<textarea name="content" id="" max="500" cols="30" rows="10"></textarea>
</label>
<input style="width: 150px" type="submit" value="Senden">
</form>
</div>
<% } %>
<div id="reviews">
<% if(reviews > 0){ %>
<div id="reviewTemplate">
<div style="width: 100%; height: 200px; display: block; float: left;">
<div id= data >
<h3 style="padding-left: 30px; width: 100%;">187Boii 12.12.12 12:12</h3>
</div>
<div id="text" >
<p style="padding-left: 30px;";">junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text junge geiler text </p>
</div>
</div>
</div>
<% if(reviews.length > 0){ %>
<% for(let i = 0; i < reviews.length; i++){ %>
<div id="reviewTemplate">
<div style="width: 100%; display: block; float: left;">
<div id= data >
<h3 style="padding-left: 20px; float:left"><%= reviews[i].name %></h3>
<p style="float:right; padding-right: 20px;">Bewertung: <%= reviews[i].rating %></p>
</div>
<div id="text" >
<h3 style="padding-left: 20px; padding-right: 20px; width: 100%;"><%= reviews[i].title %></h3>
<p style="padding-left: 20px; padding-right: 20px;"><%= reviews[i].content %></p>
</div>
</div>
</div>
<% } %>
<% }else{ %>
<div style="width: 100%; height: 100px;">Leider hat dieses Produkt noch keine Bewertung. :(</div>
<% } %>
</div>
</div>
<style>
*{
padding:0;
}
#content
{
width: 1000px;
height:3000px;
background-color: rgb(59, 59, 59);
margin:auto;
}
#productPicture
{
width: 40%;
height: 400px;
background-color: rgb(85, 85, 85);
display: block;
float: left;
}
#info
{
width: 60%;
height: 400px;
display: block;
float: right;
background-color: rgb(121, 170, 182);
}
#description
{
width: 100%;
height: 250px;
display: block;
float: left;
background-color: rgb(103, 187, 183);
}
#title
{
margin-left: 30px;
}
#newReview{
width: 100%;
height: 200px;
display: block;
float: left;
background-color: rgb(45, 66, 94);
}
#reviews{
width: 100%;
height: 1600px;
display: block;
float: left;
background-color: rgb(39, 39, 39);
}
#reviewTemplate
{
width: 100%;
height: 200px;
float: left;
}
#reviewTemplatePicture
{
width: 200px;
height: 200px;
display: block;
float: left;
background-color: rgb(85, 158, 255);
}
#data
{
width: 100%;
height: 50px;
display: block;
float: left;
background-color: rgb(58, 94, 97);
}
#text
{
width: 100%;
height: 150px;
display: block;
float: left;
background-color: rgb(78, 129, 133);
}
#reviewTemplateText
{
background-color: rgb(235, 196, 228);
}
</style>
</div>
<%- include('partials/footer'); %>
</body>
</html>

2
views/register.ejs
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<%- include('partials/head'); %>
<link rel="stylesheet" href="/auth.css">
<link rel="stylesheet" href="/css/auth.css">
</head>
<body>
<h1>Register</h1>