janis/shop-ejs-expressjs
Archived
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Janis M
2022-03-26 11:26:10 +01:00
commit bfe995158e
18 changed files with 2843 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/admin.ejs
+12
View File
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/head'); %>
</head>
<body>
<header>
<%- include('partials/header'); %>
</header>
</body>
</html>
views/index.ejs
+10
View File
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/head'); %>
</head>
<body>
<h1>isAdmin: <%= isAdmin %></h1>
</body>
</html>
views/login.ejs
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/head'); %>
<link rel="stylesheet" href="/auth.css">
</head>
<body>
<h1>Login</h1>
<form action="/auth/login" method="POST">
<p style="text-align:center;"><%- error %></p>
<input required type="text" name="username" id="usernameInput" placeholder="Enter your username">
<input required type="password" name="password" id="passwordInput" placeholder="Enter your password">
<input style="width: 40%;cursor:pointer;" type="submit" value="Login">
</form>
</body>
</html>
views/partials/footer.ejs
+30
View File
@@ -0,0 +1,30 @@
<div class="footerDIV">
<div class="footerDIVLogo">
<img src="https://bock-drauf.com/wp-content/uploads/2019/09/amazon-logo-1024x576.png"/>
</div>
</div>
<style type="text/css">
.footerDIV {
width: 100%;
height:65px;
position: absolute;
bottom:-65px;
background-color: #414854;
}
/* LOGO PART */
.footerDIVLogo {
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;
}
</style>
views/partials/head.ejs
+6
View File
@@ -0,0 +1,6 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
views/partials/header.ejs
+82
View File
@@ -0,0 +1,82 @@
<div class="headerDIV">
<div class="headerDIVLogo">
<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>
<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>
views/product.ejs
+168
View File
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/head'); %>
</head>
<body>
<header>
<%- include('partials/header'); %>
</header>
<div id="content">
<div id="top">
<div id="productPicture">
<!--BILD-->
</div>
<div id="info">
<h1 id="title"><%= product.name %></h1>
<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>
<% } %>
</div>
</div>
</div>
<div id="description">
<h1 style="margin-left: 30px;">Beschreibung</h1>
<p style="margin-left: 30px;"><%= 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>
</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>
<% }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>
<%- include('partials/footer'); %>
</body>
</html>
views/register.ejs
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/head'); %>
<link rel="stylesheet" href="/auth.css">
</head>
<body>
<h1>Register</h1>
<form action="/auth/register" method="POST">
<p style="text-align:center;"><%- error %></p>
<input required type="text" name="username" id="usernameInput" placeholder="Enter your username">
<input required type="email" name="email" id="emailInput" placeholder="Enter your E-Mail">
<input required type="password" name="password1" id="password1Input" placeholder="Enter your password">
<input required type="password" name="password2" id="password2Input" placeholder="Repeat your password">
<input required type="text" name="firstname" id="firstnameInput" placeholder="Enter your firstname">
<input required type="text" name="lastname" id="lastnameInput" placeholder="Enter your lastname">
<input required type="text" name="gender" id="genderInput" placeholder="How should we call you?">
<input style="width: 40%;cursor:pointer;" type="submit" value="Register">
</form>
</body>
</html>
views/search.ejs
+102
View File
@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/head'); %>
</head>
<body>
<header>
<%- include('partials/header'); %>
</header>
<div class="allProductsDIV">
<% for(var i=0; i < products.length; i++) { var prod = products[i]; %>
<div class="productDIV">
<h4><%=prod.name %></h4>
<div class="productImage">
<img src="<%= prod.src %>">
</div>
<div class="productInfo"><%=prod.desc %></div>
</div>
<% } %>
</div>
</body>
</html>
<style type="text/css">
.productDIV > img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.productDIV > .productImage {
width: calc(50% - 15px);
height: calc(100% - 120px);
position: absolute;
background-color: red;
left: 10px;
bottom: 10px;
}
.productDIV > .productInfo {
width: calc(50% - 15px);
height: calc(100% - 120px);
position: absolute;
overflow-y: hidden;
background-color: blue;
right: 10px;
bottom: 10px;
}
.productDIV > h4 {
padding: 0px;
margin: 0px;
}
.productDIV {
font-size: 16px;
margin: 10px;
padding: 5px;
display: inline-block;
background-color: white;
border-style: solid;
border-width: 2px;
position: relative;
height: 250px;
}
.allProductsDIV {
font-size: 0;
margin: 0px;
width: calc(80% - 20px);
left: 10%;
position: absolute;
height: 100%;
padding: 10px;
background-color: white;
display: grid;
}
@media (max-width: 400px) {
.allProductsDIV {
grid-template-columns: 1fr;
}
}
@media (min-width: 800px) {
.allProductsDIV {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1200px) {
.allProductsDIV {
grid-template-columns: 1fr 1fr 1fr;
}
}
</style>