diff --git a/public/style.css b/public/style.css index eef2d58c28994bf32791ea6a1249cd51189c19e5..f6b1dbfaadfc307bdda26c95326f3e2bbb2c6412 100644 --- a/public/style.css +++ b/public/style.css @@ -10,7 +10,7 @@ body, h1, h2, p { /* Basic page styles */ .responsive { font-family: Arial, sans-serif; - background:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3)); + background:rgba(0, 0, 0, 0.3); } @@ -435,14 +435,14 @@ header{ @media only screen and (max-width:620px) { /* For mobile phones: */ - .menu, .container, .login-button, .shopname, .previous-button, .next-button, .scene, .carousel, .carousel__cell, + .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){ width:100%; } } @media screen and (max-width:1250px){ - .container ul li, .login-button{ + .container ul li, .login-button, .footer, .containers{ width:40%; margin-left: 40px; @@ -529,17 +529,98 @@ header{ .next-button:hover{ background-color: #5a5e5f; } +/* footer style */ - footer { - position:fixed; +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); + +.containers{ + max-width: 1170px; + margin:auto; +} +.row{ + display: flex; + flex-wrap: wrap; +} +ul{ + list-style: none; +} +.footer{ + background-color: rgba(0, 0, 0, 0.8); + padding: 50px 0; + position: absolute; + right: 0; left: 0; - bottom: 0; + bottom: -1000px; +} +.footer-col{ + width: 25%; + padding: 0 15px; +} +.footer-col h4{ + font-size: 18px; + color: #ffffff; + text-transform: capitalize; + margin-bottom: 35px; + font-weight: 500; + position: relative; +} +.footer-col h4::before{ + content: ''; + position: absolute; + left:0; + bottom: -10px; + background-color: #e91e63; + height: 2px; + box-sizing: border-box; + width: 50px; +} +.footer-col ul li:not(:last-child){ + margin-bottom: 10px; +} +.footer-col ul li a{ + font-size: 16px; + text-transform: capitalize; + color: #ffffff; + text-decoration: none; + font-weight: 300; + color: #bbbbbb; + display: block; + transition: all 0.3s ease; +} +.footer-col ul li a:hover{ + color: #ffffff; + padding-left: 8px; +} +.footer-col .social-links a{ + display: inline-block; + height: 40px; + width: 40px; + background-color: rgba(255,255,255,0.2); + margin:0 10px 10px 0; + text-align: center; + line-height: 40px; + border-radius: 50%; + color: #ffffff; + transition: all 0.5s ease; +} +.footer-col .social-links a:hover{ + color: #24262b; + background-color: #ffffff; +} + +/*responsive*/ +@media(max-width: 767px){ + .footer-col, .footer, .containers{ + width: 50%; + margin-bottom: 30px; +} +} +@media(max-width: 574px){ + .footer-col, .footer, .containers{ width: 100%; - background-color: rgba(0, 0, 0, 0.3); - color: white; - text-align: center; - - } +} +} + diff --git a/views/cart.hbs b/views/cart.hbs index c034b5a9f177dbb747adea7aa37b05123edf1bdc..2bd10c945c79648dc1e77b3be7869da3ac328d7b 100644 --- a/views/cart.hbs +++ b/views/cart.hbs @@ -42,14 +42,13 @@ </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="/search.js"></script> </body> - + {{> common/footer}} </html> \ No newline at end of file diff --git a/views/common/footer.hbs b/views/common/footer.hbs new file mode 100644 index 0000000000000000000000000000000000000000..885f61aed88d64ce1b2364ba6b574cd3dd5eb578 --- /dev/null +++ b/views/common/footer.hbs @@ -0,0 +1,45 @@ +<footer class="footer"> + <div class="containers"> + <div class="row"> + <div class="footer-col"> + <h4>company</h4> + <ul> + <li><a href="#">about us</a></li> + <li><a href="#">our services</a></li> + <li><a href="#">privacy policy</a></li> + <li><a href="#">affiliate program</a></li> + </ul> + </div> + <div class="footer-col"> + <h4>get help</h4> + <ul> + <li><a href="#">FAQ</a></li> + <li><a href="#">shipping</a></li> + <li><a href="#">returns</a></li> + <li><a href="#">order status</a></li> + <li><a href="#">payment options</a></li> + </ul> + </div> + <div class="footer-col"> + <h4>online shop</h4> + <ul> + <li><a href="/men">Men</a></li> + <li><a href="/women">Women</a></li> + <li><a href="/kids">Kids</a></li> + <li><a href="/men-shoes">Men Shoes</a></li> + <li><a href="/women-shoes">Women Shoes</a></li> + <li><a href="/kids-shoes">Kids Shoes</a></li> + </ul> + </div> + <div class="footer-col"> + <h4>follow us</h4> + <div class="social-links"> + <a href="#"><i class="fab fa-facebook-f"></i></a> + <a href="#"><i class="fab fa-twitter"></i></a> + <a href="#"><i class="fab fa-instagram"></i></a> + <a href="#"><i class="fab fa-linkedin-in"></i></a> + </div> + </div> + </div> + </div> + </footer> \ No newline at end of file diff --git a/views/common/navbar.hbs b/views/common/navbar.hbs index 7b2a8e5ba71d2c9e9620b2abb1692ec20e28edfa..15202f1a7e6585d06dbac0c97611858619825ff6 100644 --- a/views/common/navbar.hbs +++ b/views/common/navbar.hbs @@ -1,62 +1,67 @@ - <div> - <div class="your-fashion-text-box"> - <a href="/" class="shopname">Your Fashion</a> - </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="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" - }) - } - </script> - - <script src="/init-shoppingcart.js"></script> - - </div> \ No newline at end of file +<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"> + <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; + } + + const user = JSON.parse(localStorage.getItem('user')) + + if (user) { + document.querySelectorAll(".login-button").forEach(el => { + el.style.display = "none" + }) + } + </script> + + <script src="/init-shoppingcart.js"></script> + +</div> \ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs index a67b52aa2685b629f64b81b44ffe36af60d65718..17501d945cbc1249017da06931ff0be910b302db 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -63,22 +63,15 @@ <button class="next-button"><span style="font-size: 36px;">🡪</span></button> </p> + + <script src="/slides.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="/search.js"></script> <script src="/shopping-basket.js"></script> </body> -<div> - <footer> - <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎ - 07469241247</a></p> - </footer> -</div> +{{> common/footer}} </html> \ No newline at end of file diff --git a/views/kids-shoes.hbs b/views/kids-shoes.hbs index 24b802456093f5e57662b118930aec24f3abc18b..33b70c2fe7a37a7cddac3d83e81b6a6ff9fa314d 100644 --- a/views/kids-shoes.hbs +++ b/views/kids-shoes.hbs @@ -31,9 +31,7 @@ <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> --}} + {{> common/footer}} <script src="/search.js" type="module"></script> <script src="/shopping-basket.js"></script> diff --git a/views/kids.hbs b/views/kids.hbs index 24b802456093f5e57662b118930aec24f3abc18b..ed1a089051d2cff55006b5e7038cd2036ec57dbe 100644 --- a/views/kids.hbs +++ b/views/kids.hbs @@ -31,16 +31,11 @@ <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> --}} + {{> common/footer}} <script src="/search.js" type="module"></script> <script src="/shopping-basket.js"></script> </body> -<footer> - <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎ - 07469241247</a></p> -</footer> + </html> \ No newline at end of file diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs index 24b802456093f5e57662b118930aec24f3abc18b..c1a53d640fc5d7a2fdc879dafa26e5eae299848f 100644 --- a/views/men-shoes.hbs +++ b/views/men-shoes.hbs @@ -31,16 +31,10 @@ <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> --}} + {{> common/footer}} <script src="/search.js" type="module"></script> <script src="/shopping-basket.js"></script> </body> -<footer> - <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎ - 07469241247</a></p> -</footer> </html> \ No newline at end of file diff --git a/views/men.hbs b/views/men.hbs index 24b802456093f5e57662b118930aec24f3abc18b..7dd82d0a2e836f5bace4f35d7e41f3309c74a48c 100644 --- a/views/men.hbs +++ b/views/men.hbs @@ -1,46 +1,48 @@ <!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="/search.js" type="module"></script> - <script src="/shopping-basket.js"></script> - - </body> -<footer> - <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎ - 07469241247</a></p> -</footer> +<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="/search.js" type="module"></script> + <script src="/shopping-basket.js"></script> + + +</body> + +{{> common/footer}} </html> \ No newline at end of file diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs index 24b802456093f5e57662b118930aec24f3abc18b..ed1a089051d2cff55006b5e7038cd2036ec57dbe 100644 --- a/views/women-shoes.hbs +++ b/views/women-shoes.hbs @@ -31,16 +31,11 @@ <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> --}} + {{> common/footer}} <script src="/search.js" type="module"></script> <script src="/shopping-basket.js"></script> </body> -<footer> - <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎ - 07469241247</a></p> -</footer> + </html> \ No newline at end of file diff --git a/views/women.hbs b/views/women.hbs index 24b802456093f5e57662b118930aec24f3abc18b..bc171eeda82eea81928f19bdea941856538e006d 100644 --- a/views/women.hbs +++ b/views/women.hbs @@ -32,15 +32,11 @@ <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> --}} + {{> common/footer}} <script src="/search.js" type="module"></script> <script src="/shopping-basket.js"></script> </body> -<footer> - <p>Author: Tim Adams<br><a href="mailto:tim.adams1@hotmail.com">tim.adams1@hotmail.com</a><br><a>☎ - 07469241247</a></p> -</footer> + </html> \ No newline at end of file