diff --git a/controllers/pagesCtrlFile.js b/controllers/pagesCtrlFile.js index 7ea8cb80a3bdad38c3645d8dcbb0ed12a5dcf5f8..a5a8b6e842973b2c19bfdd304e8f5b97ddddd0b1 100644 --- a/controllers/pagesCtrlFile.js +++ b/controllers/pagesCtrlFile.js @@ -42,3 +42,5 @@ exports.activateAccountCtrlFunction = (req, res) => { exports.checkouttCtrlFunction = (req, res) => { res.render('checkout'); } + + diff --git a/public/authenticate.js b/public/authenticate.js index 00a3cb73d3d68744123baaa680b483a62d5fee1e..418d600141e494207d35a283bd807e228c694a85 100644 --- a/public/authenticate.js +++ b/public/authenticate.js @@ -83,10 +83,14 @@ async function handleClick(){ throw new Error(`HTTP error! Status: ${response.status}`); } - const user = await response.json() - console.log(user) + const {user, products} = await response.json() localStorage.setItem("user", JSON.stringify(user)) + let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || [] + shoppingCardItems = shoppingCardItems.concat(products) + + localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems)) + window.location.href = "/" } } diff --git a/public/cart.js b/public/cart.js index 59b08059e79d8994de45283508909193723ebf86..7d66d285bb30b5bb6dcd81ce2bffec02e58636fd 100644 --- a/public/cart.js +++ b/public/cart.js @@ -2,6 +2,7 @@ document.querySelector('.search-bar').style.display = 'none'; const table = document.querySelector('table') table.innerHTML =` + <tr> <th>Product</th> <th>Image</th> @@ -16,8 +17,8 @@ let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || let idItemMap = {} shoppingCardItems.forEach(item => { - if (!idItemMap[item.id]) idItemMap[item.id]= []; - idItemMap[item.id].push(item) + if (!idItemMap[item.productid]) idItemMap[item.productid]= []; + idItemMap[item.productid].push(item) }) const uniqueEntries = [] @@ -33,11 +34,11 @@ uniqueEntries.forEach(item => { <td>${item.name}</td> <td><img src="${item.image}" height="70" width="70"/></td> <td>${item.price}</td> - <td>${idItemMap[item.id].length}</td> - <td>${idItemMap[item.id].length * item.price}</td> + <td>${idItemMap[item.productid].length}</td> + <td>${idItemMap[item.productid].length * item.price}</td> </tr> ` - totalCost += idItemMap[item.id].length * item.price + totalCost += idItemMap[item.productid].length * item.price }) table.innerHTML +=` diff --git a/public/checkout.js b/public/checkout.js index ea2c0565b0e53931a3f96d10f0b6100f63d56435..ba20698d0ef04eee65d97bb8cb64190b6022d5e1 100644 --- a/public/checkout.js +++ b/public/checkout.js @@ -16,6 +16,5 @@ function checkComplete() { if (isComplete) { document.querySelector('.buy-now button').disabled = false; document.querySelector('.g-warning').innerText = ""; - } } \ No newline at end of file diff --git a/public/init-shoppingcart.js b/public/init-shoppingcart.js index dfd1ce67839343bc2c91e1f2fb385e5234f0ddb5..2ea05f35a5ffd8104f33d546aca313611027e2e9 100644 --- a/public/init-shoppingcart.js +++ b/public/init-shoppingcart.js @@ -1,34 +1,11 @@ -async function initCart(product) { - const loggedInuser = JSON.parse(localStorage.getItem('user')) - if (!loggedInuser) { - setShoppingCart() - return - } - - try { - const url = `http://localhost:7000/users/${loggedInuser.id}/shoppingCart` - - const response = await fetch(url); - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - - const shoppingCartItems = await response.json() - - setShoppingCart(shoppingCartItems) - - } catch (error) { - console.error(error); - } - -} - -function setShoppingCart(items = []){ +function initCart(){ let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || [] - - shoppingCardItems = shoppingCardItems.concat(items) + localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems)) document.querySelector('.add-cart span').textContent = shoppingCardItems.length; } + + + initCart() diff --git a/public/main-search.js b/public/main-search.js index 8a03fb11ff3b39936d7bb70d0aae9f4bfa1a84af..4a650c96fb83c8d511caeddcac8ec873e15d7bd3 100644 --- a/public/main-search.js +++ b/public/main-search.js @@ -1,13 +1,13 @@ function debounce(callback, delay) { - let timerId; - return function(...args) { - clearTimeout(timerId); - return new Promise(resolve => { - timerId = setTimeout(() => { - resolve(callback(...args)); - }, delay); - }); - }; + let timerId; + return function(...args) { + clearTimeout(timerId); + return new Promise(resolve => { + timerId = setTimeout(() => { + resolve(callback(...args)); + }, delay); + }); + }; } const urlObj = new URL(window.location.href); @@ -21,165 +21,165 @@ const container = document.querySelector(selector).innerHTML; const debouncedHandleSearchChangeAsync = debounce(fetchAndPopulateProducts, 300); document.getElementById('search-input').addEventListener('keyup', () => { - debouncedHandleSearchChangeAsync(); + debouncedHandleSearchChangeAsync(); }); async function fetchAndPopulateProducts() { - const query = document.getElementById('search-input').value - - if (query.trim() === "" && !path.split("/")[1]) { - document.querySelector(selector).innerHTML = container; - return; - } - - const mapping = { - men:'men', - women:'women', - kids:'kids', - 'kids-shoes':'K-shoes', - 'men-shoes':'M-shoes', - 'women-shoes':'W-shoes', - } - const url = `http://localhost:7000/products?q=${query}&cat=${mapping[path.split("/")[1]] ?? ""}` - - const response = await fetch(url); - if (!response.ok) { - alert('Could not search for products') - throw new Error(`HTTP error! Status: ${response.status}`); - } - - const products = await response.json() - - populateProducts(products) + const query = document.getElementById('search-input').value + + if (query.trim() === "" && !path.split("/")[1]) { + document.querySelector(selector).innerHTML = container; + return; + } + + const mapping = { + men:'men', + women:'women', + kids:'kids', + 'kids-shoes':'K-shoes', + 'men-shoes':'M-shoes', + 'women-shoes':'W-shoes', + } + const url = `http://localhost:7000/products?q=${query}&cat=${mapping[path.split("/")[1]] ?? ""}` + + const response = await fetch(url); + if (!response.ok) { + alert('Could not search for products') + throw new Error(`HTTP error! Status: ${response.status}`); + } + + const products = await response.json() + + populateProducts(products) } function populateProducts(products) { - const container = document.querySelector(selector); - container.style.flexDirection = 'row'; - container.style.flexWrap = 'wrap' - container.style.justifyContent = 'center' - - try { - container.innerHTML = ''; - - products.forEach(product => { - const productsHtml = document.createElement('div'); - productsHtml.innerHTML = ` - <div class="product"> - <div class="product-card"> - <h2 class="name">${product.name}</h2> - <span class="price">£${product.price}</span> - <a class="popup-btn">Quick View</a> - <img src="${product.image}" class="product-img" alt="Image of ${product.name}"> - </div> - <div class="popup-view"> - <div class="popup-card"> - <a><i class="fas fa-times close-btn"></i></a> - <div class="product-img"> - <img src="${product.image}" class="product-img" alt="Image of ${product.name}"> - </div> - <div class="info"> - <h2>Your fashion<br><span>Modern styles</span></h2> - <p>${product.description}</p> - <span class="price">£${product.price}</span> - <a href="#" class="add-cart-btn">Add to Cart</a> - <a href="#" class="add-wish">Add to Wishlist</a> - </div> - </div> - </div> - </div> - `; - container.appendChild(productsHtml); - - if (products.image) { - const img = new Image(); - img.src = `data:image/jpeg;base64,${product.image.toString('base64')}`; - productsHtml.appendChild(img); - } - if(container){ - container.appendChild(productsHtml); - }else{ - console.error('Container element not found'); - } - }); - } catch (error) { - console.error('Failed to populate products:', error); - } - addCartActions(products); + const container = document.querySelector(selector); + container.style.flexDirection = 'row'; + container.style.flexWrap = 'wrap' + container.style.justifyContent = 'center' + + try { + container.innerHTML = ''; + + products.forEach(product => { + const productsHtml = document.createElement('div'); + productsHtml.innerHTML = ` + <div class="product"> + <div class="product-card"> + <h2 class="name">${product.name}</h2> + <span class="price">£${product.price}</span> + <a class="popup-btn">Quick View</a> + <img src="${product.image}" class="product-img" alt="Image of ${product.name}"> + </div> + <div class="popup-view"> + <div class="popup-card"> + <a><i class="fas fa-times close-btn"></i></a> + <div class="product-img"> + <img src="${product.image}" class="product-img" alt="Image of ${product.name}"> + </div> + <div class="info"> + <h2>Your fashion<br><span>Modern styles</span></h2> + <p>${product.description}</p> + <span class="price">£${product.price}</span> + <a href="#" class="add-cart-btn">Add to Cart</a> + <a href="#" class="add-wish">Add to Wishlist</a> + </div> + </div> + </div> + </div> + `; + container.appendChild(productsHtml); + + if (products.image) { + const img = new Image(); + img.src = `data:image/jpeg;base64,${product.image.toString('base64')}`; + productsHtml.appendChild(img); + } + if(container){ + container.appendChild(productsHtml); + }else{ + console.error('Container element not found'); + } + }); + } catch (error) { + console.error('Failed to populate products:', error); + } + addCartActions(products); } function addCartActions(products) { - - var popupViews = document.querySelectorAll('.popup-view'); - var popupBtns = document.querySelectorAll('.popup-btn'); - var closeBtns = document.querySelectorAll('.close-btn'); - //javascript for quick view button - var popup = function (popupClick) { - popupViews[popupClick].classList.add('active'); - } - popupBtns.forEach((popupBtn, i) => { - popupBtn.addEventListener("click", () => { - popup(i); - }); - }); - //javascript for close button - closeBtns.forEach((closeBtn) => { - closeBtn.addEventListener("click", () => { - popupViews.forEach((popupView) => { - popupView.classList.remove('active'); - }); - }); - }); - const carts = document.querySelectorAll('.add-cart-btn'); - - for (let i = 0; i < carts.length; i++) { - - carts[i].addEventListener('click', () => { - cardsNumbers(products[i]); - }); - } + + var popupViews = document.querySelectorAll('.popup-view'); + var popupBtns = document.querySelectorAll('.popup-btn'); + var closeBtns = document.querySelectorAll('.close-btn'); + //javascript for quick view button + var popup = function (popupClick) { + popupViews[popupClick].classList.add('active'); + } + popupBtns.forEach((popupBtn, i) => { + popupBtn.addEventListener("click", () => { + popup(i); + }); + }); + //javascript for close button + closeBtns.forEach((closeBtn) => { + closeBtn.addEventListener("click", () => { + popupViews.forEach((popupView) => { + popupView.classList.remove('active'); + }); + }); + }); + const carts = document.querySelectorAll('.add-cart-btn'); + + for (let i = 0; i < carts.length; i++) { + + carts[i].addEventListener('click', () => { + cardsNumbers(products[i]); + }); + } } async function cardsNumbers(product) { - const loggedInuser = JSON.parse(localStorage.getItem('user')) - if (!loggedInuser) { - updateShoppingCart(product) - return - } - - try { - const options = { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - userId: loggedInuser.id, - productId: product.id - }) - }; - - const url = `http://localhost:7000/shopping-cart` - - const response = await fetch(url, options); - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - - updateShoppingCart(product) - - } catch (error) { - console.error(error); - } - + const loggedInuser = JSON.parse(localStorage.getItem('user')) + if (!loggedInuser) { + updateShoppingCart(product) + return + } + + try { + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + userId: loggedInuser.id, + productId: product.productid + }) + }; + + const url = `http://localhost:7000/shopping-cart` + + const response = await fetch(url, options); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + updateShoppingCart(product) + + } catch (error) { + console.error(error); + } + } function updateShoppingCart(product){ - const shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || [] - shoppingCardItems.push(product) + const shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || [] + shoppingCardItems.push(product) - localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems)) - document.querySelector('.add-cart span').textContent = shoppingCardItems.length; + localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems)) + document.querySelector('.add-cart span').textContent = shoppingCardItems.length; } \ No newline at end of file diff --git a/public/payment.js b/public/payment.js index 49c06eed99356106386c0a7e12ed6e3b3d62fdc9..85aafbb350fd8c4af6f363ed7ed57dd41baecc1c 100644 --- a/public/payment.js +++ b/public/payment.js @@ -1,4 +1,3 @@ -//const response = require("koa/lib/response"); /** @@ -63,6 +62,14 @@ function createAndAddButton() { }); document.getElementById('buy-now').appendChild(googlePayButton); + const inputs = document.querySelectorAll('input'); + inputs.forEach(input => { + if (!input.value.trim()) { + document.querySelector('.buy-now button').disabled= true; + document.querySelector('.g-warning').innerText = 'Complete all the fields above in order to be able to pay with google pay' + } +}) + } /** @@ -87,15 +94,79 @@ function onGooglePayButtonClicked() { googlePayClient.loadPaymentData(paymentDataRequest) .then(paymentData => processPaymentData(paymentData)) + .then(()=>updateDetails()) .catch(error => console.error('loadPaymentData error: ', error)); } -function processPaymentData(paymentData) { - fetch(orderEndpointURL, { +async function processPaymentData(paymentData) { + + const usr = JSON.parse(localStorage.getItem('user')) + if(usr){ + await fetch(`http://localhost:7000/users/${usr.id}/products`, { + method: 'DELETE', + headers: { + 'Content-Type' : 'application/json' + }, + + }) + } + localStorage.removeItem('shoppingCardItems') + document.querySelector('.add-cart span').textContent = 0; + + const inputs = document.querySelectorAll('input') + + const valuesMap = {} + inputs.forEach((input,ind) => { + if (!ind) return + + valuesMap[input.getAttribute('name')] = input.value + }) + + await fetch(`http://localhost:7000/orders`, { method: 'POST', headers: { 'Content-Type' : 'application/json' }, - body: paymentData + body: JSON.stringify({ + totalCost: localStorage.getItem('totalCost'), + userId: usr?.id, + date: new Date(), + ...valuesMap + }) + }) + localStorage.setItem('totalCost', 0) +} + +async function updateDetails(){ + const lu = JSON.parse(localStorage.getItem('user')) + if (!lu) return; + const inputs = document.querySelectorAll('input') + + const valuesMap = {} + inputs.forEach((input,ind) => { + if (!ind) return + + valuesMap[input.getAttribute('name')] = input.value }) + + try { + const options = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify( + valuesMap + ) + }; + + const url = `http://localhost:7000/users/${lu.id}/details` + + const response = await fetch(url, options); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + } catch (error){ + console.log(error) + } } \ No newline at end of file diff --git a/public/search.js b/public/search.js index e19f0b94c35db6233b31d7b6617516ab8410627f..5a296a6c86390289977500ad8a9ab6ebf041a4fa 100644 --- a/public/search.js +++ b/public/search.js @@ -1,6 +1,22 @@ let products1 = []; +// const searchBar = document.getElementById('search-input'); +/* searchBar.addEventListener('input', (e) => { + const searchString = e.target.value.toLowerCase(); + + if (products1 && products1.length) { + const filteredProducts = products1.filter((product) => { + return ( + product.name?.toLowerCase().includes(searchString) || + product.price?.toString().toLowerCase().includes(searchString) + ); + }); + displayCarts(filteredProducts); + } else { + console.log('Products array is empty or undefined. Waiting for data to load.'); + } +}); */ const displayCarts = (products) => { const container = document.querySelector('.container-'); @@ -77,3 +93,7 @@ function initializeSearch() { }); } +// document.addEventListener('DOMContentLoaded', () => { +// loadProducts(); +// }); + diff --git a/public/shopping-basket.js b/public/shopping-basket.js index a40cd96cbfb2ccac2d20532ecd00b2c702325505..18d4c2102d12c421034b13e1d25807eb6b3fb8b9 100644 --- a/public/shopping-basket.js +++ b/public/shopping-basket.js @@ -1,4 +1,4 @@ -async function populateProducts(products) { +function populateProducts(products) { const container = document.querySelector('.container'); try { @@ -50,22 +50,6 @@ async function populateProducts(products) { addCartActions(products); } -async function getProducts() { - try { - const response = await fetch(`http://localhost:7000/${location.pathname.split('/')[1]}-products`); - if (!response.ok) { - throw new Error(`HTTP error! Status: ${response.status}`); - } - const data = await response.json(); - //const copied = Array(20).fill(data[0]) - populateProducts(data); - } catch (error) { - console.error('error fetching products:', error); - } - - -} - function addCartActions(products) { @@ -115,7 +99,7 @@ async function cardsNumbers(product) { }, body: JSON.stringify({ userId: loggedInuser.id, - productId: product.id + productId: product.productid }) }; @@ -143,6 +127,28 @@ function updateShoppingCart(product){ } +async function getProducts() { + const page = location.pathname.split('/')[1] + if (page==='cart') { + + + return; + } + try { + const response = await fetch(`http://localhost:7000/${page}-products`); + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + const data = await response.json(); + populateProducts(data); + } catch (error) { + console.error('error fetching products:', error); + } + + +} + + document.addEventListener('DOMContentLoaded', (event) => { getProducts(); }) diff --git a/public/slides.js b/public/slides.js index 0ce60d3a9cb3b4f92b1fbcb69d8d6ce283290912..3d946140c3ae917742b615af9cfda3bffdd2815b 100644 --- a/public/slides.js +++ b/public/slides.js @@ -1,4 +1,22 @@ - +/*let slideIndex = 0; +showSlides(); + +function showSlides() { + let i; + let slides = document.getElementsByClassName("mySlides"); + let dots = document.getElementsByClassName("dot"); + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slideIndex++; + if (slideIndex > slides.length) {slideIndex = 1} + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" active", ""); + } + slides[slideIndex-1].style.display = "block"; + dots[slideIndex-1].className += " active"; + setTimeout(showSlides, 2000); // Change image every 2 seconds +}*/ var carousel = document.querySelector('.carousel'); var cellCount = 9; diff --git a/public/style.css b/public/style.css index b7a46fbe9e28e042f80708d6e9927bbbfa0d340d..5eb13ee6ca5c2d8522fd4107bb078d694bcb719b 100644 --- a/public/style.css +++ b/public/style.css @@ -9,8 +9,8 @@ body, h1, h2, p { /* Basic page styles */ .responsive { - font-family: Arial, sans-serif; - background:rgba(0, 0, 0, 0.3); + font-family: Arial, sans-serif; + background:rgba(0, 0, 0, 0.2); } @@ -25,12 +25,13 @@ body, h1, h2, p { .shopname{ margin: 0; - padding-left: 10px; + padding-left: 60px; color: #ffffff;; - font-size: 24px; - + font-size: 34px; text-decoration-line: none; letter-spacing: 1px; + text-shadow: 10px 5px 5px rgb(24, 23, 23); + } header{ @@ -63,7 +64,7 @@ header{ .navbar ul.navbar-nav li { margin-right: 60; - padding: 10px 20px 10px 40px; +padding: 10px 20px 10px 40px; } .navbar ul.navbar-nav li a { @@ -76,7 +77,7 @@ header{ } /* Add an active class to highlight the current page */ .actives { - + color: white; padding: 10px 20px; margin-right: 60; @@ -163,28 +164,6 @@ header{ margin-top: 50px; } -/*-------------register form--------------*/ -.authenticate-form { - display:block; - justify-content: center; - padding: 240px 90px 24px 90px; - -} - -.input-group{ - width: 100%; - min-width: 300px; - padding: 12px 24px; - border-radius: 24px; - font-size: 16px; - border: 0px; - outline: none; -} - -.btn{ - margin-left: 40px; -} - /*Styles for product card*/ .product .product-card { @@ -457,14 +436,12 @@ header{ @media only screen and (max-width:620px) { /* For mobile phones: */ - .menu, .container, .login-button, .shopname, .previous-button, .next-button, .scene, .carousel, .carousel__cell, .footer, .containers, - .carousel__cell:nth-child(1), .carousel__cell:nth-child(2), .carousel__cell:nth-child(3), .carousel__cell:nth-child(4), .carousel__cell:nth-child(5), .carousel__cell:nth-child(6), - .carousel__cell:nth-child(7), .carousel__cell:nth-child(8), .carousel__cell:nth-child(9){ + .menu, .container, .login-button, .shopname { width:100%; } } @media screen and (max-width:1250px){ - .container ul li, .login-button, .footer, .containers{ + .container ul li, .login-button{ width:40%; margin-left: 40px; @@ -478,6 +455,8 @@ header{ width: 360px; height: 290px; margin: 40px auto; + cursor: pointer; + margin-top: -330px; perspective: 1000px; top: 200px; } @@ -489,7 +468,6 @@ header{ transform: translateZ(-588px); transform-style: preserve-3d; transition: transform 1s; - } .carousel__cell { @@ -504,6 +482,8 @@ header{ font-weight: bold; color: white; text-align: center; + box-shadow: 5px 5px 10px black; + } .slides{ @@ -530,8 +510,10 @@ header{ left: 5%; color: #000; cursor: pointer; - border-radius: 20px; + border-radius: 50px; background-color: #f1efef; + box-shadow: 10px 5px 5px rgb(61, 60, 60); + } .previous-button:hover{ @@ -544,21 +526,22 @@ header{ right: 5%; color: #000; cursor: pointer; - border-radius: 20px; + border-radius: 50px; background-color: #f1efef; + box-shadow: 10px 5px 5px rgb(61, 60, 60); } .next-button:hover{ background-color: #5a5e5f; } -/* footer style */ +/*********** footer style **************/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); .containers{ max-width: 1170px; - margin:auto; -} + margin:auto; + } .row{ display: flex; flex-wrap: wrap; @@ -568,11 +551,11 @@ ul{ } .footer{ background-color: rgba(0, 0, 0, 0.8); - padding: 50px 0; - position: absolute; - right: 0; - left: 0; - bottom: -1000px; + padding: 50px 0; + position: absolute; + right: 0; + left: 0; + margin-top: 800px; } .footer-col{ width: 25%; @@ -588,8 +571,8 @@ ul{ } .footer-col h4::before{ content: ''; - position: absolute; - left:0; + position: absolute; + left:0; bottom: -10px; background-color: #e91e63; height: 2px; @@ -614,8 +597,8 @@ ul{ padding-left: 8px; } .footer-col .social-links a{ - display: inline-block; - height: 40px; + display: inline-block; + height: 40px; width: 40px; background-color: rgba(255,255,255,0.2); margin:0 10px 10px 0; @@ -650,7 +633,7 @@ ul{ /* On smaller screens, decrease text size */ @media only screen and (max-width: 100px) { - .text {font-size: 8px} + .text {font-size: 8px} } @@ -762,13 +745,41 @@ ul{ background-color: #00ff6a; color: #000; padding: 0 0 0 0px; - margin-bottom: 9px; text-decoration: none; justify-content: space-around; border-radius: 8px; - position:absolute; text-align: center; - right: 45%; - top: 120%; - + width:fit-content; +} + + +.authenticate-form { + display:flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-top:400px; + margin-left: 30%; + max-width:800px; + margin: 400 auto 0 auto; +} + +.logout-button { + background: none; + border: none; + color: white; +} + +.car-con { + margin: 400px auto; + display: flex; + flex-direction: column; +} + + +.btn-con { + margin-top:50px; + display: flex; + width:100%; + justify-content: space-around; } \ No newline at end of file diff --git a/server.js b/server.js index d56208c41fcb59cf96ebbbeff6fd40b5d87ba60c..b62be4f98d28e905b662987743e8bffc81dbdbae 100644 --- a/server.js +++ b/server.js @@ -16,7 +16,7 @@ const pool = new Pool({ database: 'your-fashion-data' }); -const transport = nodemailer.createTransport({ +var transport = nodemailer.createTransport({ host: "sandbox.smtp.mailtrap.io", port: 2525, auth: { @@ -151,20 +151,6 @@ app.post('/shopping-cart', async (req, res) => { } }); - - app.get('/users/:userId/shoppingCart', async (req, res) => { - try{ - const client = await pool.connect(); - const { rows } = await client.query(`SELECT * FROM shopping_cart WHERE user_id = ${req.params.userId}`); - res.json(rows); - client.release(); - }catch(err){ - res.status(500).send('Server error'); - console.error('Error exucting query', err.stack); - } - }); - - app.post('/register', async (req, res) => { try{ const client = await pool.connect(); @@ -173,7 +159,7 @@ app.post('/register', async (req, res) => { username = username || email.split('@')[0] const code = generateRandomSixDigitNumber() await client.query(`INSERT INTO users (email, username, password, code) VALUES ('${email}', '${username}', '${sha256Hash(password)}', '${code}');`); - await transporter.sendMail({ + await transport.sendMail({ from: '<fashion-store@style.com>', to: email, subject: "Confirm your account", @@ -217,9 +203,15 @@ app.post('/register', async (req, res) => { const client = await pool.connect(); const { body:{ email, password } } = req; const { rows } = await client.query(`SELECT * from users WHERE "users"."password" = '${sha256Hash(password)}' - AND "users"."is_active" = true AND "users"."email" = '${email}'`); + AND "users"."is_active" = true AND "users"."email" = '${email}' + `); + if (rows.length) { - res.json(rows[0]); + const { rows: products} = await client.query(` + SELECT p.* from shopping_cart sc left join products p on p.productid = sc.product_id + WHERE sc.user_id = ${rows[0].id}; + `) + res.json({user:rows[0], products}); client.release(); return } @@ -234,6 +226,73 @@ app.post('/register', async (req, res) => { }); +app.get('/products', async (req, res) => { + const { q, cat } = req.query + let andCondition = ''; + + if (cat) { + andCondition = ` AND category='${cat}'` + } + console.log(`SELECT * FROM products WHERE name ILIKE '%${q}%'${andCondition};`) + try{ + const client = await pool.connect(); + const { rows } = await client.query(`SELECT * FROM products WHERE name ILIKE '%${q}%'${andCondition};`); + res.json(rows); + client.release(); + }catch(err){ + res.status(500).send('Server error'); + console.error('Error exucting query', err.stack); + } +}); + +app.post('/users/:id/details', async (req, res) => { + try{ + const client = await pool.connect(); + console.log(req.body) + await client.query(`UPDATE users set details='${JSON.stringify(req.body)}' WHERE "users"."id" = '${req.params.id}'`); + res.sendStatus(201); + client.release(); + }catch(err){ + res.status(500).send('Server error'); + console.error('Error exucting query', err.stack); + } +}); + + + +app.delete('/users/:id/products', async (req, res) => { + try{ + const client = await pool.connect(); + await client.query(`Delete from shopping_cart where user_id = '${req.params.id}'`); + res.sendStatus(204); + client.release(); + }catch(err){ + res.status(500).send('Server error'); + console.error('Error exucting query', err.stack); + } +}); + + + +app.post('/orders', async (req, res) => { + try{ + const client = await pool.connect(); + const code = generateRandomSixDigitNumber() + if (req.body.userId) { + await client.query(`INSERT INTO orders (user_id, details) VALUES ('${req.body.userId}', '${JSON.stringify(req.body)}');`); + + } else { + await client.query(`INSERT INTO orders (details) VALUES ('${JSON.stringify(req.body)}');`); + + } + + res.sendStatus(201); + client.release(); + }catch(err){ + res.status(500).send('Server error'); + console.error('Error exucting query', err.stack); + } +}); app.listen(port, () => { console.log(`Server is listening on port ${port}`); diff --git a/views/activate.hbs b/views/activate.hbs index 56fc63f924a233a24802af59e80c401ae53a0aae..88cda302bd0b7430ddd946722b6a026debd73f5a 100644 --- a/views/activate.hbs +++ b/views/activate.hbs @@ -1,4 +1,4 @@ -<DOCTYPE! html> +<!DOCTYPE html> <html> <head> diff --git a/views/cart.hbs b/views/cart.hbs index 78efcfb0493de18ff5e5d4d8e9e096acaea3dd6b..42043f3c6c6235ceb29d2678c539e711ed686f6f 100644 --- a/views/cart.hbs +++ b/views/cart.hbs @@ -16,7 +16,8 @@ <style> .cart-container { margin: 2%; - border: 2px dashed #333; + box-shadow: 5px 5px 10px black; + border-radius: 4%; padding: 2%; } @@ -77,14 +78,9 @@ <div class="checkout-container"> <button class="btn btn-primary" onclick="handleProceedCheckout()">Proceed to Checkout</button> </div> - {{!-- <div id="buy-now">Buy Now</div> --}} - - - {{!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}} - {{!-- <script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> --}} <script src="/cart.js"></script> </body> - {{> common/footer}} + {{> common/footer}} </html> \ No newline at end of file diff --git a/views/checkout.hbs b/views/checkout.hbs index e7d96fa09b9ebdf863dea57cfca193dd33c0f77c..e59d493650ea6ef15f45f3f9a17d4d484f7a901c 100644 --- a/views/checkout.hbs +++ b/views/checkout.hbs @@ -1,91 +1,85 @@ <!DOCTYPE html> -<html lang="en" charset="UTF-8"> - -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> - <title>Your Fashion</title> - - <link rel="preconnect" href="https://fonts.gstatic.com"> - - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> - <link rel="stylesheet" href="/style.css"> - <style> - .prod-container1 { - display: flex; + <html lang="en" charset="UTF-8"> + + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> + <title>Your Fashion</title> + + <link rel="preconnect" href="https://fonts.gstatic.com"> + + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> + <link rel="stylesheet" href="/style.css"> + <style> + .prod-container { + display:flex; flex-direction: column; justify-content: center; align-items: center; - width: 100%; + width:100%; margin: 200 auto; - margin-bottom: 50px; - margin-top: 100px; - } - - .form-group { - width: 500px; - } + margin-bottom:100px; + } - .buy-now { + .form-group { + width:500px; + } + .buy-now { display: flex; justify-content: center; position: relative - } - </style> - - - - -</head> - -<body class="responsive"> - - - <header> - {{> common/navbar}} - - </header> - - <div class="prod-container1"> - <div class="form-group"> - <label for="name">Full name *</label> - <input type="text" class="form-control" id="name" placeholder="Enter your full name" required> - </div> - <div class="form-group"> - <label for="address">Address *</label> - <input type="text" class="form-control" id="Address" placeholder="Enter your address" required> + } + </style> + + + + + </head> + + <body class="responsive"> + + + <header> + {{> common/navbar}} + + </header> + + <div class="prod-container"> + <div class="form-group"> + <label for="name">Full name</label> + <input type="text" class="form-control" id="name" name="fullName" placeholder="Enter your full name"> + </div> + <div class="form-group"> + <label for="address">Address</label> + <input type="text" class="form-control" id="Address" name="address" placeholder="Enter your address"> + </div> + <div class="form-group"> + <label for="city">City</label> + <input type="text" class="form-control" id="City" name="city" placeholder="Enter your city"> + </div> + <div class="form-group"> + <label for="city">Zip-code</label> + <input type="text" class="form-control" id="ZipCode" name="zipCode" placeholder="Enter your zip code"> + </div> + <div class="form-group"> + <label for="pnumber">Phone Number</label> + <input type="text" class="form-control" id="pNumber" name="phoneNumber" placeholder="Enter your phone number"> + </div> </div> - <div class="form-group"> - <label for="city">City *</label> - <input type="text" class="form-control" id="City" placeholder="Enter your city" required> - </div> - <div class="form-group"> - <label for="city">Post-code *</label> - <input type="text" class="form-control" id="PostCode" placeholder="Enter your post code" required> - </div> - <div class="form-group"> - <label for="pnumber">Phone Number</label> - <input type="text" class="form-control" id="pNumber" placeholder="Enter your phone number"> - </div> - <br> <div class="buy-now"> - <div id="buy-now">Buy Now</div> + <div id="buy-now">Buy Now</div> </div> - </div> - - <p class="g-warning" style="text-align:center;color:orange"></p> + <p class="g-warning" style="text-align:center;color:orange"></p> - <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" - integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" - crossorigin="anonymous" referrerpolicy="no-referrer"></script> - <script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> - <script src="/checkout.js"></script> - <script src="/payment.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> + <script async src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script> + <script src="/checkout.js"></script> + <script src="/payment.js"></script> -</body> + </body> -</html> \ No newline at end of file + </html> \ No newline at end of file diff --git a/views/common/navbar.hbs b/views/common/navbar.hbs index 15202f1a7e6585d06dbac0c97611858619825ff6..52e715a2d95970b310fb0bb17fa191f56319a08b 100644 --- a/views/common/navbar.hbs +++ b/views/common/navbar.hbs @@ -1,67 +1,72 @@ -<div> + <div> + - - - <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> - <div class="container-fluid"> - <a href="/" class="actives"><i class="fa fa-home"></i></a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> - <span class="navbar-toggler-icon"></span> - </button> - - <div class="collapse navbar-collapse" id="collapsibleNavbar"> - - <ul class="navbar-nav"> - - - <li class="nav-item" onclick="handleAnchorClick('/men')"> - <a class="nav-link" id="men-products" href="/men">Men</a> - </li> - <li class="nav-item" onclick="handleAnchorClick('/women')"> - <a class="nav-link" id="women-products" href="/women">Women</a> - </li> - <li class="nav-item" onclick="handleAnchorClick('/kids')"> - <a class="nav-link" id="kids-products" href="/kids">Kids</a> - </li> - <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a> - <ul class="dropdown-menu" id="submenu"> - <li onclick="handleAnchorClick('/men-shoes')"><a class="dropdown-item" id="men-s-products" - href="/men-shoes">Men Shoes</a></li> - <li onclick="handleAnchorClick('/women-shoes')"><a class="dropdown-item" id="women-s-products" - href="/women-shoes">Women Shoes</a></li> - <li onclick="handleAnchorClick('/kids-shoes')"><a class="dropdown-item" id="kids-s-products" - href="/kids-shoes">Kids Shoes</a></li> - </ul> - </li> - </ul> - </div> - <a class="login-button" href="/authenticate?mode=register">Register</a> - <a class="login-button" href="/authenticate?mode=login">Login</a> - <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a> - </div> - </nav> - <div class="your-fashion-text-box"> + + <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> + <div class="container-fluid"> + <a href="/" class="actives"><i class="fa fa-home"></i></a> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse" id="collapsibleNavbar"> + + <ul class="navbar-nav"> + + + <li class="nav-item" onclick="handleAnchorClick('/men')"> + <a class="nav-link" id="men-products" href="/men">Men</a> + </li> + <li class="nav-item" onclick="handleAnchorClick('/women')"> + <a class="nav-link" id="women-products" href="/women">Women</a> + </li> + <li class="nav-item" onclick="handleAnchorClick('/kids')"> + <a class="nav-link" id="kids-products" href="/kids">Kids</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Footwear</a> + <ul class="dropdown-menu" id="submenu"> + <li onclick="handleAnchorClick('/men-shoes')"><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li> + <li onclick="handleAnchorClick('/women-shoes')"><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li> + <li onclick="handleAnchorClick('/kids-shoes')"><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li> + </ul> + </li> + </ul> + </div> + <a class="login-button" href="/authenticate?mode=register">Register</a> + <a class="login-button" href="/authenticate?mode=login">Login</a> + <button type="button" class="logout-button" onclick="handleLogout()">Logout</button> + <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a> + </div> + </nav> +<div class="your-fashion-text-box"> <a href="/" class="shopname">Your Fashion</a> </div> - <div class="search-bar"> - <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search" list="container" - autocomplete="off" /> - </div> - <script> - function handleAnchorClick(category) { - window.location.href = category; - } + <div class="search-bar"> + <input class="search" type="text" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/> + </div> + <script> + function handleAnchorClick(category){ + window.location.href = category; + } + + const user = JSON.parse(localStorage.getItem('user')) + + if(user) { + document.querySelectorAll(".login-button").forEach(el => { + el.style.display = "none" + }) + } else { + document.querySelector('.logout-button').style.display = "none" + } - const user = JSON.parse(localStorage.getItem('user')) + function handleLogout(){ + localStorage.clear(); + window.location.reload(); + } - if (user) { - document.querySelectorAll(".login-button").forEach(el => { - el.style.display = "none" - }) - } - </script> - <script src="/init-shoppingcart.js"></script> + </script> + <script src="/init-shoppingcart.js"></script> -</div> \ No newline at end of file + </div> \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index d972be730ce4fe68971663a161fb18da00cb5b00..0af31349689fa33b93460fb75e1cf53b49b7cf96 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -1,75 +1,56 @@ <!DOCTYPE html> -<html> - -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> - <title>Your Fashion</title> - <link rel="preconnect" href="https://fonts.gstatic.com"> - <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> - <link rel="stylesheet" href="/style.css"> - - - -</head> - -<body class="responsive"> - - - <header> - {{> common/navbar}} - </header> - <div id="characterList" class="characterLists"></div> - <main class="cont"> - - <div id="characterList"></div> - <div class="posts-container"></div> - </main> - <br> - - <div class="scene"> - <div class="carousel"> - <a class="carousel__cell" href="/women" ><img class="slides" - src="https://www.telegraph.co.uk/content/dam/fashion/2022/10/25/TELEMMGLPICT000313960470_trans_NvBQzQNjv4Bq7Cadr0IoOOfMS5GpRLWfGbVvz_IXZinEqtDTKahtjvc.jpeg?imwidth=680"> - </a> - <a class="carousel__cell" href="/women"><img class="slides" - src="https://i.cbc.ca/1.4713184.1529440884!/fileImage/httpImage/image.png_gen/derivatives/16x9_780/petite.png"> - </a> - <a class="carousel__cell" href="/women"><img class="slides" - src="https://dlsb.co.uk/cdn/shop/collections/Women_s_Clothing.png?v=1662113551"></a> - <a class="carousel__cell" href="/kids"><img class="slides" - src="https://cdn.shopify.com/s/files/1/0878/3908/files/social_sharing_shopify.jpg?v=1667977060"></a> - <a class="carousel__cell" href="/kids"><img class="slides" - src="https://www.nextdirect.com/nxtcms/resource/blob/5587208/f0e6f37c9c409a172eb0ca2236449efb/hero1-kids-data.jpg"> - </a> - <a class="carousel__cell" href="/kids"><img class="slides" - src="https://i.ebayimg.com/images/g/9bEAAOSwmh9ez480/s-l1200.webp"></a> - <a class="carousel__cell" href="/women"><img class="slides" - src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2021/09/GettyImages-1174825598-2400x1440.jpg"> - </a> - <a class="carousel__cell" href="/men"><img class="slides" - src="https://www.realmenrealstyle.com/wp-content/uploads/2023/08/Promote-Positive-Communication.jpg"></a> - <a class="carousel__cell" href="/men"><img class="slides" src="https://i.insider.com/62e40d594b455800188b5fca?width=700"> - </a> - </div> + <html> + + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> + <title>Your Fashion</title> + <link rel="preconnect" href="https://fonts.gstatic.com"> + <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> + <link rel="stylesheet" href="/style.css"> + + + + </head> + + <body class="responsive"> + + + <header> + {{> common/navbar}} + + </header> + <div id="characterList" class="characterLists"></div> + <main class="cont"> + <div id="characterList"></div> + <div class="posts-container"></div> + </main> + <br> +<div class="car-con"> + <div class="scene"> + <div class="carousel"> + <div class="carousel__cell" href="/women"><img class="slides" src="https://www.telegraph.co.uk/content/dam/fashion/2022/10/25/TELEMMGLPICT000313960470_trans_NvBQzQNjv4Bq7Cadr0IoOOfMS5GpRLWfGbVvz_IXZinEqtDTKahtjvc.jpeg?imwidth=680"></div> + <div class="carousel__cell" href="/women"><img class="slides" src="https://i.cbc.ca/1.4713184.1529440884!/fileImage/httpImage/image.png_gen/derivatives/16x9_780/petite.png"></div> + <div class="carousel__cell" href="/women"><img class="slides" src="https://dlsb.co.uk/cdn/shop/collections/Women_s_Clothing.png?v=1662113551"></div> + <div class="carousel__cell" href="/kids"><img class="slides" src="https://cdn.shopify.com/s/files/1/0878/3908/files/social_sharing_shopify.jpg?v=1667977060"></div> + <div class="carousel__cell" href="/kids"><img class="slides" src="https://www.nextdirect.com/nxtcms/resource/blob/5587208/f0e6f37c9c409a172eb0ca2236449efb/hero1-kids-data.jpg"></div> + <div class="carousel__cell" href="/kids"><img class="slides" src="https://i.ebayimg.com/images/g/9bEAAOSwmh9ez480/s-l1200.webp"></div> + <div class="carousel__cell" href="/women"><img class="slides" src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2021/09/GettyImages-1174825598-2400x1440.jpg"></div> + <div class="carousel__cell" href="/men"><img class="slides" src="https://www.realmenrealstyle.com/wp-content/uploads/2023/08/Promote-Positive-Communication.jpg"></div> + <div class="carousel__cell" href="/men"><img class="slides" src="https://i.insider.com/62e40d594b455800188b5fca?width=700"></div> + </div> + </div> + <div class="btn-con"> + <button class="previous-button" style='font-size:50px;'>←</button> + <button class="next-button" style='font-size:50px;'>→</button> </div> - <p style="text-align: center;"> - <button class="previous-button"><span style="font-size: 36px;">🡨</span></button> - <button class="next-button"><span style="font-size: 36px;">🡪</span></button> - </p> - - - - - <script src="/slides.js"></script> - <script src="/main-search.js"></script> - <script src="/shopping-basket.js"></script> - -</body> - -{{> common/footer}} +</div> + {{> common/footer}} + </body> + <script src="/slides.js"></script> + <script src="/main-search.js"></script> -</html> \ No newline at end of file + </html> \ No newline at end of file diff --git a/views/kids-shoes.hbs b/views/kids-shoes.hbs index 88f2a1667b0e552a7c4c166b0b3bbefd16d56f96..fc34ff8e3ff7305b83b5800eb69b2b41264ff3fa 100644 --- a/views/kids-shoes.hbs +++ b/views/kids-shoes.hbs @@ -9,11 +9,10 @@ <title>Your Fashion</title> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> - + <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> - @@ -22,20 +21,16 @@ <body class="responsive"> - + <header> {{> common/navbar}} + </header> - <br> - - <div id="characterList" class="characterLists"></div> + <div id="characterList" class="characterLists"></div> <div class="container" id="container"></div> - - {{> common/footer}} - <script src="/main-search.js" type="module"></script> + {{> common/footer}} <script src="/shopping-basket.js"></script> - + <script src="/main-search.js"></script> </body> - -</html> \ No newline at end of file + </html> \ No newline at end of file diff --git a/views/kids.hbs b/views/kids.hbs index 9e1ffbe4afdabc6745b7083a8971d4f903f38b10..bb7a1b8400f4eb7c30485a24b99d1ed85d713991 100644 --- a/views/kids.hbs +++ b/views/kids.hbs @@ -9,11 +9,10 @@ <title>Your Fashion</title> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> - + <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> - @@ -22,20 +21,15 @@ <body class="responsive"> - + <header> {{> common/navbar}} - </header> - <br> - - <div id="characterList" class="characterLists"></div> - <div class="container" id="container"></div> - + </header> + <div id="characterList" class="characterLists"></div> + <div class="container"></div> {{> common/footer}} - <script src="/main-search.js"></script> - <script src="/shopping-basket.js"></script> - + <script src="/shopping-basket.js"></script> + <script src="/main-search.js"></script> </body> - -</html> \ No newline at end of file + </html> \ No newline at end of file diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs index f1424cb39140ec413f29170beed55fc126daa40f..e7b7412efdb10a07f15c41febdd52570b28857d1 100644 --- a/views/men-shoes.hbs +++ b/views/men-shoes.hbs @@ -1,40 +1,38 @@ <!DOCTYPE html> - <html> - - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> - <title>Your Fashion</title> - <link rel="stylesheet" type="text/css" href="/style.css"> - <link rel="preconnect" href="https://fonts.gstatic.com"> - - <link rel="stylesheet" type="text/css" href="/style.css"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> - - - - - - </head> - - <body class="responsive"> - - - <header> - {{> common/navbar}} - </header> - <br> - - <div id="characterList" class="characterLists"></div> - <div class="container" id="container"></div> - - {{> common/footer}} - <script src="/main-search.js" type="module"></script> - <script src="/shopping-basket.js"></script> - - </body> +<html> + +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> + <title>Your Fashion</title> + <link rel="stylesheet" type="text/css" href="/style.css"> + <link rel="preconnect" href="https://fonts.gstatic.com"> + <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet"> + <link rel="stylesheet" type="text/css" href="/style.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> + + + +</head> + +<body class="responsive"> + + + <header> + {{> common/navbar}} + </header> + <div id="characterList" class="characterLists"></div> + <div class="container" id="container"></div> + + {{> common/footer}} + <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" + integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" + crossorigin="anonymous" referrerpolicy="no-referrer"></script> + <script src="/shopping-basket.js"></script> + <script src="/main-search.js"></script> +</body> </html> \ No newline at end of file diff --git a/views/men.hbs b/views/men.hbs index 9e353d3574860d67f9404cc7efda26348bbcb24b..f5f68d67844efc426b6cb8936d2c4130969ed391 100644 --- a/views/men.hbs +++ b/views/men.hbs @@ -1,48 +1,39 @@ <!DOCTYPE html> -<html> - -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> - <title>Your Fashion</title> - <link rel="stylesheet" type="text/css" href="/style.css"> - <link rel="preconnect" href="https://fonts.gstatic.com"> - - <link rel="stylesheet" type="text/css" href="/style.css"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> - - - - - -</head> - -<body class="responsive"> - - - <header> - {{> common/navbar}} - </header> - <br> - - <div id="characterList" class="characterLists"></div> - <div class="container" id="container"></div> - - - {{!-- - <script src="/product-cards.js"></script> --}} - {{!-- - <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js" - integrity="sha512-NQfB/bDaB8kaSXF8E77JjhHG5PM6XVRxvHzkZiwl3ddWCEPBa23T76MuWSwAJdMGJnmQqM0VeY9kFszsrBEFrQ==" - crossorigin="anonymous" referrerpolicy="no-referrer"></script> --}} - <script src="/main-search.js" type="module"></script> - <script src="/shopping-basket.js"></script> - - -</body> - -{{> common/footer}} -</html> \ No newline at end of file + <html> + + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> + <title>Your Fashion</title> + <link rel="stylesheet" type="text/css" href="/style.css"> + <link rel="preconnect" href="https://fonts.gstatic.com"> + + <link rel="stylesheet" type="text/css" href="/style.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> + + + + + + </head> + + <body class="responsive"> + + + <header> + {{> common/navbar}} + </header> + <br> + + <div id="characterList" class="characterLists"></div> + <div class="container" id="container"></div> + {{> common/footer}} + <script src="/main-search.js"></script> + <script src="/shopping-basket.js"></script> + + </body> + + </html> \ No newline at end of file diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs index 9e1ffbe4afdabc6745b7083a8971d4f903f38b10..55ebeb7c00f794b4bab78c2220a2a1a2849cb253 100644 --- a/views/women-shoes.hbs +++ b/views/women-shoes.hbs @@ -9,33 +9,25 @@ <title>Your Fashion</title> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> - + <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> - - </head> <body class="responsive"> - <header> {{> common/navbar}} </header> - <br> - - <div id="characterList" class="characterLists"></div> + <div id="characterList" class="characterLists"></div> <div class="container" id="container"></div> - {{> common/footer}} - <script src="/main-search.js"></script> <script src="/shopping-basket.js"></script> - + <script src="/main-search.js"></script> </body> - -</html> \ No newline at end of file + </html> \ No newline at end of file diff --git a/views/women.hbs b/views/women.hbs index 2c0d07c17aa9e3e25e4b728e8e0457600c49ab7e..154cde1afb618d778976056cdb55dfa87c00a3ff 100644 --- a/views/women.hbs +++ b/views/women.hbs @@ -9,11 +9,10 @@ <title>Your Fashion</title> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> - + <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> - @@ -22,21 +21,15 @@ <body class="responsive"> - <header> {{> common/navbar}} + </header> - <br> - - <div id="characterList" class="characterLists"></div> <div class="container" id="container"></div> - - + <div id="characterList" class="characterLists"></div> {{> common/footer}} - <script src="/main-search.js" type="module"></script> <script src="/shopping-basket.js"></script> - + <script src="/main-search.js"></script> </body> - -</html> \ No newline at end of file + </html> \ No newline at end of file