diff --git a/js/app.js b/js/app.js
deleted file mode 100644
index 3e7e461677a054ed4576da4e5f591ac6b04a58da..0000000000000000000000000000000000000000
--- a/js/app.js
+++ /dev/null
@@ -1,8 +0,0 @@
-function myFunction() {
- var x = document.getElementById("navbar");
- if (x.className === "navbar") {
- x.className += " responsive";
- } else {
- x.className = "navbar";
- }
- }
\ No newline at end of file
diff --git a/public/about1.jpg b/public/about1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f0904e7ac2d51dd929a8efd66cd07ed53b8c3573
Binary files /dev/null and b/public/about1.jpg differ
diff --git a/public/about2.jpg b/public/about2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b3f4526cccbb0296f2c5038e115b4a54b5e813b9
Binary files /dev/null and b/public/about2.jpg differ
diff --git a/public/main.css b/public/main.css
index b8d2be68d3873c40a80da86a03a47a6687aa5f38..ba31fbd4d6a4b251e01a4dc52db0d5ce0ae04d13 100644
--- a/public/main.css
+++ b/public/main.css
@@ -6,6 +6,12 @@
font-family: Arial, Helvetica, sans-serif;
}
+body{
+ width: 100%;
+ height: 100%;
+
+}
+
h1 {
font-family: Arial, Helvetica, sans-serif;
@@ -27,6 +33,19 @@ h4 {
color: rgb(0, 0, 0);
}
+
+h5 {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 19px;
+ color: rgb(0, 0, 0);
+}
+
+blockquote{
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 19px;
+
+}
+
h6 {
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
@@ -50,6 +69,7 @@ p{
.body{
+ width: 100%;
min-height: 100vh;
}
@@ -106,6 +126,11 @@ p{
color: #e0fcfa;
}
+#mobile{
+ display: none;
+ align-items: center;
+}
+
/* Styling the home page */
@@ -164,6 +189,42 @@ p{
}
+/* Styling the about page */
+#about{
+ text-align: center;
+}
+
+#about .main{
+ min-height: 100vh;
+ width: 100%;
+ background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)) ,url("/public/about1.jpg");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+#about h1 {
+ color: white;
+}
+#about blockquote{
+ color: white;
+}
+
+#about h5{
+ color: white;
+}
+#about p{
+ color: white;
+}
+
+.about_img1{
+ width: 30%;
+ border: 2px solid #fff;
+ border-radius: 40%;
+ margin-top: 60px;
+}
+
+
/* Fetures section at the bottom of the page */
#feature{
@@ -234,8 +295,8 @@ footer{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- position: sticky;
- top: 100%;
+ margin-top: 500px;
+ height: 50px;
}
@@ -282,15 +343,22 @@ footer a{
text-align: center;
padding-top: 20px;
padding-left: 20px;
- display: inline-block;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ display: flex;
+
+
}
#items .pro-container{
- display: flex;
- justify-content: space-between;
+ display: inline-block;
padding-top: 20px;
- flex-wrap: wrap;
+}
+
+
+#items .des{
+ color: #222;
}
#items .pro{
@@ -327,6 +395,19 @@ footer a{
}
+/* Styling the search page */
+
+#search .search-box{
+ text-align: left;
+}
+
+
+#search .search-box h1,p{
+ color: #222;
+ text-align: left;
+}
+
+
@media (max-width: 799px ){
@@ -345,9 +426,6 @@ footer a{
padding: 80px 0 0 10px;
}
- #navbar li {
- margin-bottom: 25px ;
- }
}
diff --git a/routes/main.js b/routes/main.js
index 7c6869e1c7e6a077f00470a08c294ded0e3c56cc..5dc46d8a85c5945246dbc169ff13bb52273d1e6b 100644
--- a/routes/main.js
+++ b/routes/main.js
@@ -34,6 +34,10 @@ module.exports = function(app, shopData) {
res.render('login.ejs', shopData)
});
+ app.get('/checkout',function(req,res){
+ res.render('checkout.ejs', shopData)
+ });
+
app.get('/itemlist',redirectLogin,function(req,res){
res.render('itemlist.ejs', shopData)
@@ -43,6 +47,46 @@ module.exports = function(app, shopData) {
res.render('/listingdone.ejs', shopData)
});
+ app.get('/done',function(req,res){
+ res.render('./done.ejs', shopData)
+ });
+
+
+ app.get('/cart',function(req,res){
+
+ let sqlquery = "SELECT * FROM items"; // query database to get all the books
+ // execute sql query
+ db.query(sqlquery,(err, result) => {
+ if (err) {
+ res.redirect('./');
+ }
+
+ req.session.cart = [];
+
+ let newData = Object.assign({}, shopData, {listingAdded: result });
+ res.render("cart.ejs",newData);
+ });
+
+ });
+
+ app.get('/',function(req,res){
+
+ let sqlquery = "SELECT * FROM items"; // query database to get all the books
+ // execute sql query
+ db.query(sqlquery,(err, result) => {
+ if (err) {
+ res.redirect('./');
+ }
+ let newData = Object.assign({}, shopData, {listingAdded: result});
+ res.render("itemlisted.ejs",newData)
+ });
+
+ });
+
+
+
+
+
app.get('/search-result',[check('name').isEmpty()],function (req, res) {
@@ -59,7 +103,6 @@ module.exports = function(app, shopData) {
res.redirect('./');
}
let newData = Object.assign({}, shopData, {listingAdded:result});
- console.log(newData)
res.render("itemlisted.ejs", newData)
});
}
@@ -68,6 +111,8 @@ module.exports = function(app, shopData) {
app.post('/photoDB',upload.single("ProductImage"), (req,res) => {
+
+ product_id = req.body.product_id;
title = req.body.title;
product = req.body.name;
price = req.body.price;
@@ -75,12 +120,13 @@ module.exports = function(app, shopData) {
condition = req.body.condition;
username = req.session.userId;
image =req.file.buffer.toString("base64");
+ req.session.cart = [];
let sqlquery ="INSERT INTO items(title,name,price,info,condi,img,username) VALUES(?,?,?,?,?,?,?)";
let newListing = [req.sanitize(title),req.sanitize(product),
req.sanitize(price),req.sanitize(info),
- req.sanitize(condition),image,username]
+ req.sanitize(condition),image,username,product_id]
db.query(sqlquery, newListing,(err, result) => {
if (err){
@@ -88,7 +134,7 @@ module.exports = function(app, shopData) {
}
else{
- let newData = Object.assign({}, shopData, {listingAdded: newListing});
+ let newData = Object.assign({}, shopData, {listingAdded: newListing, cart: req.session.cart});
res.render("listingdone.ejs", newData)
}
});
@@ -105,18 +151,45 @@ module.exports = function(app, shopData) {
res.redirect('./');
}
let newData = Object.assign({}, shopData, {listingAdded: result});
- console.log(newData)
res.render("itemlisted.ejs",newData)
});
});
+
+ app.post('/add-to-cart',function(req,res){
+ req.session.cart = [];
+ let cart = req.session.cart;
+
+
+ let item = {
+ id: req.body.product_id,
+ name: req.body.product_name,
+ price: req.body.product_price
+ };
+
+ cart.push(item);
+ console.log(cart);
+
+ let newData = Object.assign({}, shopData, {cart: cart});
+ res.render("cart",newData);
+
+ });
+
+
+ app.post('/check-out',function(req,res){
+ res.redirect("checkout");
+ });
+
+ app.post('/final',function(req,res){
+ res.render("done.ejs");
+ });
app.get('/register', function (req,res) {
- res.render('register.ejs', shopData);
+ res.render('register', shopData);
});
// validation for email to check if it includes and @
diff --git a/views/about.ejs b/views/about.ejs
index 658c31df99e5b355e110a916a6f3ac16f68d31e5..c851582c1ac054ae464306dab1dcbc6d39591897 100644
--- a/views/about.ejs
+++ b/views/about.ejs
@@ -15,6 +15,7 @@
<li><a href="itemlisted">Explore</a></li>
<li><a href="search">Search </a></li>
<li><a href="itemlist">List </a></li>
+ <li><a href="cart"> Shopping Cart </a></li>
<li><a href="register">Register </a></li>
<li><a href="login">Login</a></li>
<li><a href="logout">Logout</a></li>
@@ -22,6 +23,33 @@
</div>
</section>
+ <section id = "about">
+ <div class = "main">
+ <div class = "main2">
+ <article>
+ <h1> About us </h1>
+ <img src="/public/about2.jpg" class ="about_img1" alt="">
+ <blockquote>
+ “No more rules, the freedom of dressing. The beauty of mixing vintage clothes
+ with a pair of jeans that I love.â€
+ </blockquote>
+ <h5>Yves Saint Laurent</h5>
+ <p>
+ Our love of vintage clothes and the idea of repurposing unwanted good lead
+ us to start re-turn. Our idea is to make user only pay for shipping and nothing else
+ . This ensures that you are only paying for what is needed to get the item to your doorstep.
+ With no hidden fees and no extra costs to list what is there not to love about us.
+
+
+ </p>
+ </article>
+
+ </div>
+
+
+ </div>
+
+ </section>
<footer class = "section-p1">
<div class = "col">
@@ -56,6 +84,10 @@
</footer>
+
+
+
+
</body>
diff --git a/views/stock.ejs b/views/cart.ejs
similarity index 67%
rename from views/stock.ejs
rename to views/cart.ejs
index 476f645c91f7ee326687827ba9781ff03f553501..cc4235c6321c1887856828090d871902f94ce370 100644
--- a/views/stock.ejs
+++ b/views/cart.ejs
@@ -3,7 +3,7 @@
<head>
<title><%=shopName%></title>
<link rel="stylesheet" type="text/css" href="main.css" />
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
+ <script src="https://kit.fontawesome.com/ad1bd830b9.js" crossorigin="anonymous"></script>
</head>
<body>
@@ -12,11 +12,34 @@
<div>
<ul id="navbar">
<li><a href="about">About </a></li>
+ <li><a href="itemlisted">Explore</a></li>
<li><a href="search">Search </a></li>
<li><a href="itemlist">List </a></li>
<li><a href="logout">Logout</a></li>
</ul>
</div>
+ </section>
+
+ <section id = "checkout">
+
+ <div>
+ <h2>Shopping Cart</h2>
+ <% if (cart.length === 0) { %>
+ <p>Your cart is empty</p>
+ <% } else { %>
+ <% cart.forEach(function(item) { %>
+ <div>
+ <h3>Item name: <%= item.name %> <br> Shipping price: £ <%= item.price %> </h3>
+ </div>
+ <% }); %>
+ <% } %>
+ </div>
+ <form method="POST" action="/check-out">
+ <input type = "submit" class ="btn" value = "Checkout"/>
+ </form>
+
+
+
</section>
<footer class = "section-p1">
<div class = "col">
@@ -52,7 +75,13 @@
</footer>
+
+
+
+
</body>
-</html>
\ No newline at end of file
+
+</html>
+
diff --git a/views/checkout.ejs b/views/checkout.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..1d111a7268ecdf4d9b29f25108181187249f696c
--- /dev/null
+++ b/views/checkout.ejs
@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+ <head>
+ <title><%=shopName%></title>
+ <link rel="stylesheet" type="text/css" href="main.css" />
+ <script src="https://kit.fontawesome.com/ad1bd830b9.js" crossorigin="anonymous"></script>
+ </head>
+ <body>
+
+ <section id = "header">
+ <a href="/."> <img src = "/public/logo.png" class ="logo" alt = ""> </a>
+ <div>
+ <ul id="navbar">
+ <li><a href="about">About </a></li>
+ <li><a href="itemlisted">Explore</a></li>
+ <li><a href="search">Search </a></li>
+ <li><a href="itemlist">List </a></li>
+ <li><a href="logout">Logout</a></li>
+ </ul>
+ </div>
+ </section>
+
+ <section id = "checkout">
+
+ <form method="POST" action="/final">
+ <p>First name: <input id="First" type="text" name="first" value="" /></p>
+ <p>Last name: <input id="Last" type="text" name="last" value="" /></p>
+ <p>Address Line 1: <input id="Add1" type="text" name="Add1" value="" /></p>
+ <p>Address Line 2: <input id="Add2" type="text" name="Add2" value="" /></p>
+ <p>City: <input id="City" type="text" name="City" value="" /></p>
+ <p>State/Province/Region: <input id="Region" type="text" name="Region" value="" /></p>
+ <p>ZIP/Postal code: <input id="Postal" type="text" name="Postal" value="" /></p>
+ <input type="submit" value="Submit" />
+ </form>
+
+
+ </section>
+ <footer class = "section-p1">
+ <div class = "col">
+ <img class="logo2" src="/public/logo.png" alt="">
+ <h4>Contact</h4>
+ <p><strong> Address: </strong> 92 New Street London NW06 9ZS</p>
+ <p><strong> Hours: </strong> 12:00 - 18:00, Mon-Friday</p>
+ </div>
+ <div class="col">
+ <h4> About </h4>
+ <a href="#">About us</a>
+ <a href="#">Privacy Policy</a>
+ <a href="#">Terms & Conditions</a>
+ <a href="#">Contact Us</a>
+ </div>
+
+ <div class="col">
+ <h4> My Account </h4>
+ <a href="#">Sign in</a>
+ <a href="#">View Cart</a>
+ <a href="#">Track My Order</a>
+ </div>
+
+
+ <div class="col">
+ <h4> Selling on Re-turn </h4>
+ <a href="#">Sellers Protection</a>
+ <a href="#">Sellers Fees</a>
+ <a href="#">Selling Basics</a>
+ <a href="#">Selling Guide</a>
+ </div>
+
+ </footer>
+
+
+
+
+
+
+ </body>
+
+
+
+</html>
+
diff --git a/views/index.ejs b/views/index.ejs
index 509fc562af97ce8a06e2b57359f0c9acb99dee5c..94d869804f8e35cdc073a6bc3630346f078b22ca 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -20,9 +20,7 @@
<li><a href="logout">Logout</a></li>
</ul>
</div>
- <div id="mobile">
- <i id= "bar" class="fas fa-outdent"></i>
- </div>
+
</section>
<section id ="hero">
diff --git a/views/itemlisted.ejs b/views/itemlisted.ejs
index 50d71977df2146dc130c3f3cdee63705ebf6eee1..92d099a04b769ef5e50427231aabfe4b5429148a 100644
--- a/views/itemlisted.ejs
+++ b/views/itemlisted.ejs
@@ -31,7 +31,13 @@
<h5> Condition of item: <%=list.condi%></h5>
<h4> Shipping: £ <%=list.price%></h4>
</div>
- <a href="#"> <i class="fa-sharp fa-solid fa-cart-shopping fa-beat"></i></i></i></a>
+ <form method ="POST" action = "/add-to-cart">
+ <input type = "hidden" name = "product_id" value="<%=list.product_id%>"/>
+ <input type = "hidden" name = "product_name" value="<%=list.name%>"/>
+ <input type = "hidden" name = "product_price" value="<%=list.price%>"/>
+ <input type = "submit" class ="btn" value = "Add to cart"/>
+ </form>
+
</div>
</div>
<%})%>
diff --git a/views/search.ejs b/views/search.ejs
index f47aead07b9934d2f4170433b2ff3d29db81b168..ce53c6681df2a0117fb717d241369dffc7814e2d 100644
--- a/views/search.ejs
+++ b/views/search.ejs
@@ -6,45 +6,76 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
</head>
<body>
- <h1>Search <%=shopName%></h1>
- <form action="/search-result" method="GET">
- <p>What item do you want?</p>
- <input id="search-box" type="text" name="keyword" value="">
- <input type="submit" value="Search" >
- </form>
+ <section id = "header">
+ <a href="/."> <img src = "/public/logo.png" class ="logo" alt = ""> </a>
+ <div>
+ <ul id="navbar">
+ <li><a href="about">About </a></li>
+ <li><a href="/itemlisted">Explore</a></li>
+ <li><a href="search">Search </a></li>
+ <li><a href="itemlist">List </a></li>
+ <li><a href="logout">Logout</a></li>
+ </ul>
+ </div>
+
+ </section>
+
+
+ <section id = "search">
+ <div class = "search-box">
+ <h1>Search <%=shopName%></h1>
+ <form action="/search-result" method="GET">
+ <p>What item do you want?</p>
+ <input id="search-box" type="text" name="keyword" value="">
+ <input type="submit" value="Search" >
+ </form>
+
+ </div>
+
+ </section>
+
+
+
<!-- Redirects to home page -->
<p><a href="/">home page</a></p>
- <footer class = "section-p1">
- <div class = "col">
- <img class="logo2" src="/public/logo.png" alt="">
- <h4>Contact</h4>
- <p><strong> Address: </strong> 92 New Street London NW06 9ZS</p>
- <p><strong> Hours: </strong> 12:00 - 18:00, Mon-Friday</p>
- </div>
- <div class="col">
- <h4> About </h4>
- <a href="#">About us</a>
- <a href="#">Privacy Policy</a>
- <a href="#">Terms & Conditions</a>
- <a href="#">Contact Us</a>
- </div>
-
- <div class="col">
- <h4> My Account </h4>
- <a href="#">Sign in</a>
- <a href="#">View Cart</a>
- <a href="#">Track My Order</a>
- </div>
-
-
- <div class="col">
- <h4> Selling on Re-turn </h4>
- <a href="#">Sellers Protection</a>
- <a href="#">Sellers Fees</a>
- <a href="#">Selling Basics</a>
- <a href="#">Selling Guide</a>
- </div>
-
- </footer>
+
+
</body>
+
+
+ <footer class = "section-p1">
+ <div class = "col">
+ <img class="logo2" src="/public/logo.png" alt="">
+ <h4>Contact</h4>
+ <p><strong> Address: </strong> 92 New Street London NW06 9ZS</p>
+ <p><strong> Hours: </strong> 12:00 - 18:00, Mon-Friday</p>
+ </div>
+ <div class="col">
+ <h4> About </h4>
+ <a href="#">About us</a>
+ <a href="#">Privacy Policy</a>
+ <a href="#">Terms & Conditions</a>
+ <a href="#">Contact Us</a>
+ </div>
+
+ <div class="col">
+ <h4> My Account </h4>
+ <a href="#">Sign in</a>
+ <a href="#">View Cart</a>
+ <a href="#">Track My Order</a>
+ </div>
+
+
+ <div class="col">
+ <h4> Selling on Re-turn </h4>
+ <a href="#">Sellers Protection</a>
+ <a href="#">Sellers Fees</a>
+ <a href="#">Selling Basics</a>
+ <a href="#">Selling Guide</a>
+ </div>
+
+ </footer>
+
+
+
</html>
\ No newline at end of file
diff --git a/views/singleproduct.ejs b/views/singleproduct.ejs
deleted file mode 100644
index 1c4817f5617db4d0852ea7f25fc5400df15cd8ae..0000000000000000000000000000000000000000
--- a/views/singleproduct.ejs
+++ /dev/null
@@ -1,57 +0,0 @@
-<!doctype html>
-<html>
- <head>
- <title><%=shopName%></title>
- <link rel="stylesheet" type="text/css" href="main.css" />
- <script src="https://kit.fontawesome.com/ad1bd830b9.js" crossorigin="anonymous"></script>
- </head>
- <body>
-
- <section id = "header">
- <a href="/."> <img src = "/public/logo.png" class ="logo" alt = ""> </a>
- <div>
- <ul id="navbar">
- <li><a href="about">About </a></li>
- <li><a href="itemlisted">Explore</a></li>
- <li><a href="search">Search </a></li>
- <li><a href="itemlist">List </a></li>
- <li><a href="logout">Logout</a></li>
- </ul>
- </div>
- </section>
-
- <section id = "items">
- <% listingAdded.forEach(function(list){%>
- <div class = "pro-container">
- <div class = "pro">
- <img alt= "Embedded Image" src = "data:image/png;base64,<%=list.img%>" class="listing">
- <div class = "des">
- <span>Listed by: <%=list.username%></span>
- <h5> <%=list.title%> </h5>
- <h5> Condition of item: <%=list.condi%></h5>
- <h4> Shipping: £ <%=list.price%></h4>
- </div>
- <a href="#"> <i class="fa-sharp fa-solid fa-cart-shopping fa-beat"></i></i></i></a>
- </div>
- </div>
- <%})%>
-
-
- </section>
-
-
-
-
-
-
-
-
-
-
-
-
-
- </body>
-
-
-</html>
\ No newline at end of file