diff --git a/cart.html b/cart.html
deleted file mode 100644
index e49b84ee7fc72fb74edef2dfa68cfff7f8e52b4b..0000000000000000000000000000000000000000
--- a/cart.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<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="stylesheet" type="text/css" href="css/style.css">
- <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" type="text/css" href="css/style.css">
- <script src="js/shopping-basket.js" async></script>
- <script src="js/payment.js"></script>
-
-
-
-
-
- </head>
-
- <body class="responsive">
-
-
- <header>
- <div class="your-fashion-text-box">
- <a href="index.html" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="index.html" 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">
- <a class="nav-link" href="men.html">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="women.html">Women</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="kids.html">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><a class="dropdown-item" href="men-shoes.html">Men Shoes</a></li>
- <li><a class="dropdown-item" href="women-shoes.html">Women Shoes</a></li>
- <li><a class="dropdown-item" href="kids-shoes.html">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="cart.html"><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>
-
- </header>
-
- <div class="prods-container">
- <div class="prod-header">
- <h5 class="prod-title">PRODUCT</h5>
- <h5 class="price">PRICE</h5>
- <h5 class="quantity">QUANTITY</h5>
- <h5 class="total">TOTAL</h5>
- </div>
- <div class="prods"></div>
- <div id="container"></div>
- </div>
- <div id="buy-now">Buy Now</div>
-
-
-
-
- <!-- <div id="container"></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="js/search.js"></script>
-
- </body>
-
- </html>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 1e02f656fc6fc23cf89576f8f0f7bf7f65a6c474..d58e905f0771869b7464b162fc4235de509baf0f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -193,7 +193,7 @@ header{
z-index: 1;
position: absolute;
max-width: 370px;
- max-height: 430px;
+ max-height: 400px;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
diff --git a/images/boys-jumper.jpg b/images/boys-jumper.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..447f18c9e8ae3f8842b0031d581f317760c02e73
Binary files /dev/null and b/images/boys-jumper.jpg differ
diff --git a/images/boys-jumper1.jpg b/images/boys-jumper1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b978cce50147bc9153b5c2a9ee8b5e8e007d3450
Binary files /dev/null and b/images/boys-jumper1.jpg differ
diff --git a/images/boys-jumper2.jpg b/images/boys-jumper2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f4ad7a18b9e60afb16a8ce1dd3fcd90e9f15c8ed
Binary files /dev/null and b/images/boys-jumper2.jpg differ
diff --git a/images/girls-dress1.jpg b/images/girls-dress1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..1e39d8afa782d8f62243926903d90ddf8c1bf194
Binary files /dev/null and b/images/girls-dress1.jpg differ
diff --git a/images/girls-dress2.jpg b/images/girls-dress2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..eb6099cb987c71a0f0f4d67e22eacad4a7612a72
Binary files /dev/null and b/images/girls-dress2.jpg differ
diff --git a/images/men-jeans5.jpg b/images/men-jeans5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a1eb3d71779a721b43bcb638adc214889b5ba0f9
Binary files /dev/null and b/images/men-jeans5.jpg differ
diff --git a/images/men-shoes3.jpg b/images/men-shoes3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a9255e83f9b22b82b2cbb70b3b15a1bf92e896c1
Binary files /dev/null and b/images/men-shoes3.jpg differ
diff --git a/images/women-blouse.jpg b/images/women-blouse.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0b2dd1bf0c7a5a648b079a4863b432e0a0d1ddca
Binary files /dev/null and b/images/women-blouse.jpg differ
diff --git a/images/women-blouse1.jpg b/images/women-blouse1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c5584a44a98afb686f2676de761a3a922ea773f5
Binary files /dev/null and b/images/women-blouse1.jpg differ
diff --git a/images/women-shoes1.jpg b/images/women-shoes1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c3951a8d056419c7e5d5416384e9d0eb55807685
Binary files /dev/null and b/images/women-shoes1.jpg differ
diff --git a/images/women-shoes2.jpg b/images/women-shoes2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b944902ea824c0609c681f2b8d6c47e478550974
Binary files /dev/null and b/images/women-shoes2.jpg differ
diff --git a/images/women-shoes4.jpg b/images/women-shoes4.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5ed3ef063053f29d9b3596feeaf064bdbb0d4512
Binary files /dev/null and b/images/women-shoes4.jpg differ
diff --git a/images/women-shoes5.jpg b/images/women-shoes5.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0196e060105796c1fcb683b092445727f6c6bee1
Binary files /dev/null and b/images/women-shoes5.jpg differ
diff --git a/images/women-trouser1.jpg b/images/women-trouser1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e8c71a579342b238a86e67c3de2447f2db9f6c83
Binary files /dev/null and b/images/women-trouser1.jpg differ
diff --git a/images/womenClothes.jpg b/images/womenClothes.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c6192ccf70c354fc3ebd9f1d03373d92bb575a14
Binary files /dev/null and b/images/womenClothes.jpg differ
diff --git a/index.html b/index.html
deleted file mode 100644
index 3fc93bbbae845b1ed5bc96a28ad56accde964163..0000000000000000000000000000000000000000
--- a/index.html
+++ /dev/null
@@ -1,129 +0,0 @@
-<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="css/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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link rel="stylesheet" type="text/css" href="css/style.css">
-
-
-
- <!--<script type="text/javascript" src="js/LocalLogin.js"></script>-->
-
- </head>
-
- <body class="responsive">
-
- <!--<script src="css/app.js"></script>-->
- <header>
- <div class="your-fashion-text-box">
- <a href="index.html" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="index.html" 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">
- <a class="nav-link" href="men.html">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="women.html">Women</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="kids.html">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><a class="dropdown-item" href="men-shoes.html">Men Shoes</a></li>
- <li><a class="dropdown-item" href="women-shoes.html">Women Shoes</a></li>
- <li><a class="dropdown-item" href="kids-shoes.html">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="cart.html"><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>
-
- </header>
- <main class="cont">
- <div class="search-display"></div>
- <div class="posts-container"></div>
- </main>
- <br>
-
- <div class="scene">
- <div class="carousel">
- <div class="carousel__cell"><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"><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"><img class="slides" src="https://dlsb.co.uk/cdn/shop/collections/Women_s_Clothing.png?v=1662113551"></div>
- <div class="carousel__cell"><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"><img class="slides" src="https://www.nextdirect.com/nxtcms/resource/blob/5587208/f0e6f37c9c409a172eb0ca2236449efb/hero1-kids-data.jpg"></div>
- <div class="carousel__cell"><img class="slides" src="https://i.ebayimg.com/images/g/9bEAAOSwmh9ez480/s-l1200.webp"></div>
- <div class="carousel__cell"><img class="slides" src="https://cdn-fnknc.nitrocdn.com/jwqHRGAzpUgGskUSHlppNQzwuXgXIKwg/assets/images/optimized/rev-b97e6c5/www.fashionbeans.com/wp-content/uploads/2017/11/50britishbrands-3.jpg"></div>
- <div class="carousel__cell"><img class="slides" src="https://www.realmenrealstyle.com/wp-content/uploads/2023/08/Promote-Positive-Communication.jpg"></div>
- <div class="carousel__cell"><img class="slides" src="https://i.insider.com/62e40d594b455800188b5fca?width=700"></div>
- </div>
- </div>
- <p style="text-align: center;">
- <button class="previous-button">Previous</button>
- <button class="next-button">Next</button>
- </p>
-
- <!--<div class="slideshow-container">
-
- <div class="mySlides fade">
- <div class="numbertext">1 / 3</div>
- <img src="img/modern-womens.jpg" style="width:100%">
- <div class="text">Women smart choices</div>
- </div>
-
- <div class="mySlides fade">
- <div class="numbertext">2 / 3</div>
- <img src="img/menClothes.jpg" style="width:100%">
- <div class="text">For all tastes</div>
- </div>
-
- <div class="mySlides fade">
- <div class="numbertext">3 / 3</div>
- <img src="img/kidsClothes.jpg" style="width:100%">
- <div class="text">Cute appearance</div>
- </div>
-
- </div>
- <br>
-
- <div style="text-align:center">
- <span class="dot"></span>
- <span class="dot"></span>
- <span class="dot"></span>
- </div>-->
- <script src="js/slides.js"></script>
- <script src="js/search.js"></script>
- <script src="js/shopping-basket.js"></script>
-
- </body>
-
- </html>
\ No newline at end of file
diff --git a/kids-shoes.html b/kids-shoes.html
deleted file mode 100644
index 27bba1d6586dd1d691d4c98b0f76c4adefa34c55..0000000000000000000000000000000000000000
--- a/kids-shoes.html
+++ /dev/null
@@ -1,217 +0,0 @@
-<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="css/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="css/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">
-
-
- <script type="text/javascript" src="js/LocalLogin.js"></script>
-
- </head>
-
- <body class="responsive">
-
- <script src="css/app.js"></script>
- <header>
- <div class="your-fashion-text-box">
- <a href="index.html" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="index.html" 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">
- <a class="nav-link" href="men.html">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="women.html">Women</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="kids.html">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><a class="dropdown-item" href="men-shoes.html">Men Shoes</a></li>
- <li><a class="dropdown-item" href="women-shoes.html">Women Shoes</a></li>
- <li><a class="dropdown-item" href="kids-shoes.html">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="cart.html"><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>
-
- </header>
-
- <div class="container">
- <div class="product">
- <div class="product-card">
- <h2 class="name">Boys Shoes</h2>
- <span class="price">£31.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/boys-shoes.jpg" class="product-img" alt="">
- </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="images/boys-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£31.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Boys Shoes</h2>
- <span class="price">£25.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/boys-shoes1.jpg" class="product-img" alt="">
- </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="images/boys-shoes1.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£25.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Boys Shoes</h2>
- <span class="price">£40.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/boys-shoes2.jpg" class="product-img" alt="">
- </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="images/boys-shoes2.jpg" alt="">
- </div>
- <div class="info">
- <h2>Boys Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£40.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Girls Shoes</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/girls-shoes.jpg" class="product-img" alt="">
- </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="images/girls-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£50.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Girls Shoes</h2>
- <span class="price">£55.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/girls-shoes1.jpg" class="product-img" alt="">
- </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="images/girls-shoes1.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£55.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Girls Shoes</h2>
- <span class="price">£28.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/girls-shoes2.jpg" class="product-img" alt="">
- </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="images/girls-shoes2.jpg" alt="">
- </div>
- <div class="info">
- <h2>Girls Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£28.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <script src="js/product-cards.js"></script>
- <script src="js/shopping-basket.js"></script>
- <script src="js/search.js"></script>
- </body>
-
- </html>
\ No newline at end of file
diff --git a/kids.html b/kids.html
deleted file mode 100644
index 2a990f60cf6a42c6c9cdc84dab7ed791872d5cf0..0000000000000000000000000000000000000000
--- a/kids.html
+++ /dev/null
@@ -1,217 +0,0 @@
-<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="css/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="css/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">
-
-
- <script type="text/javascript" src="js/LocalLogin.js"></script>
-
- </head>
-
- <body class="responsive">
-
- <script src="css/app.js"></script>
- <header>
- <div class="your-fashion-text-box">
- <a href="index.html" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="index.html" 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">
- <a class="nav-link" href="men.html">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="women.html">Women</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="kids.html">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><a class="dropdown-item" href="men-shoes.html">Men Shoes</a></li>
- <li><a class="dropdown-item" href="women-shoes.html">Women Shoes</a></li>
- <li><a class="dropdown-item" href="kids-shoes.html">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="cart.html"><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>
-
- </header>
-
- <div class="container">
- <div class="product">
- <div class="product-card">
- <h2 class="name">Girls dress</h2>
- <span class="price">£ 64.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/girls-dress.jpg" class="product-img" alt="">
- </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="images/girls-dress.jpg" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£ 64.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Girls dress</h2>
- <span class="price">£ 57.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/girls-dress1.webp" class="product-img" alt="">
- </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="images/girls-dress1.webp" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£ 23.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Girls dress</h2>
- <span class="price">£89.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/girls-dress2.webp" class="product-img" alt="">
- </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="img/" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£89.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Boys jumper</h2>
- <span class="price">£80.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/boys-jumper.avif" class="product-img" alt="">
- </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="images/boys-jumper.avif" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£80.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Boys jumper</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/boys-jumper1.webp" class="product-img" alt="">
- </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="images/boys-jumper1.webp" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£50.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Boys jumper</h2>
- <span class="price">£70.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/boys-jumper2.webp" class="product-img" alt="">
- </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="images/boys-jumper2.webp" alt="">
- </div>
- <div class="info">
- <h2>Kids clothes<br><span>Kids' wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£70.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <script src="js/product-cards.js"></script>
- <script src="js/shopping-basket.js"></script>
- <script src="js/search.js"></script>
- </body>
-
- </html>
\ No newline at end of file
diff --git a/men-shoes.html b/men-shoes.html
deleted file mode 100644
index 75379cb0c8b817b3591cddae7c2cf03f0306a8c5..0000000000000000000000000000000000000000
--- a/men-shoes.html
+++ /dev/null
@@ -1,217 +0,0 @@
-<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="css/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="css/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">
-
-
- <script type="text/javascript" src="js/LocalLogin.js"></script>
-
- </head>
-
- <body class="responsive">
-
- <script src="css/app.js"></script>
- <header>
- <div class="your-fashion-text-box">
- <a href="index.html" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="index.html" 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">
- <a class="nav-link" href="men.html">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="women.html">Women</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="kids.html">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><a class="dropdown-item" href="men-shoes.html">Men Shoes</a></li>
- <li><a class="dropdown-item" href="women-shoes.html">Women Shoes</a></li>
- <li><a class="dropdown-item" href="kids-shoes.html">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="cart.html"><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>
-
- </header>
-
- <div class="container">
- <div class="product">
- <div class="product-card">
- <h2 class="name">Men Shoes</h2>
- <span class="price">£60.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/men-shoes.jpg" class="product-img" alt="">
- </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="images/men-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£60.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Men Shoes</h2>
- <span class="price">£73.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/men-shoes1.jpg" class="product-img" alt="">
- </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="images/men-shoes1.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£73.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Men Shoes</h2>
- <span class="price">£89.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/men-shoes2.jpg" class="product-img" alt="">
- </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="images/men-shoes2.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£89.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Men Shoes</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/men-shoes3.webp" class="product-img" alt="">
- </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="images/men-shoes3.webp" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£50.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Men Shoes</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/men-shoes4.jpg" class="product-img" alt="">
- </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="images/men-shoes4.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£50.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Men jeans</h2>
- <span class="price">£100.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/men-shoes5.jpg" class="product-img" alt="">
- </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="images/men-shoes5.jpg" alt="">
- </div>
- <div class="info">
- <h2>Men Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£100.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <script src="js/product-cards.js"></script>
- <script src="js/shopping-basket.js"></script>
- <script src="js/search.js"></script>
- </body>
-
- </html>
\ No newline at end of file
diff --git a/men.html b/men.html
deleted file mode 100644
index 85b68dd3be2cd5a21a867fa1fa69d3fe5f7bc503..0000000000000000000000000000000000000000
--- a/men.html
+++ /dev/null
@@ -1,219 +0,0 @@
-<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="css/style.css">
- <link rel="preconnect" href="https://fonts.gstatic.com">
-
- <link rel="stylesheet" type="text/css" href="css/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">
-
- <!--<script src="css/app.js"></script>-->
- <header>
- <div class="your-fashion-text-box">
- <a href="index.html" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="index.html" 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">
- <a class="nav-link" href="men.html">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="women.html">Women</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="kids.html">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><a class="dropdown-item" href="men-shoes.html">Men Shoes</a></li>
- <li><a class="dropdown-item" href="women-shoes.html">Women Shoes</a></li>
- <li><a class="dropdown-item" href="kids-shoes.html">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="cart.html"><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="search" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/>
-
- </div>
-
- </header>
- <br>
- <div class="container">
- <div class="product">
- <div class="product-card">
- <h2 class="name">Blue Shirt</h2>
- <span class="price">£29.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://img.fruugo.com/product/2/90/617160902_max.jpg" class="product-img" alt="https://images.app.goo.gl/uHt6sGNihxAXW8h1A">
- </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="https://img.fruugo.com/product/2/90/617160902_max.jpg" alt="https://images.app.goo.gl/uHt6sGNihxAXW8h1A">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£29.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Black Shirt</h2>
- <span class="price">£23.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946" class="product-img" alt="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946">
- </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="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946" alt="https://ng.jumia.is/unsafe/fit-in/680x680/filters:fill(white)/product/85/0545391/3.jpg?5946">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£23.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">White Shirt</h2>
- <span class="price">£89.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://img.fruugo.com/product/6/45/507046456_max.jpg" class="product-img" alt="https://img.fruugo.com/product/6/45/507046456_max.jpg">
- </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="https://img.fruugo.com/product/6/45/507046456_max.jpg" alt="https://img.fruugo.com/product/6/45/507046456_max.jpg">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£89.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Denim jeans</h2>
- <span class="price">£150.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg" class="product-img" alt="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg">
- </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="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg" alt="https://i8.amplience.net/i/egl/MensJeans-220407-slim.jpg">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£150.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Light blue jeans</h2>
- <span class="price">£50.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486" class="product-img" alt="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486">
- </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="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486" alt="https://eg.jumia.is/unsafe/fit-in/500x500/filters:fill(white)/product/33/055233/1.jpg?5486">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£50.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Cotton jeans</h2>
- <span class="price">£200.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg" class="product-img" alt="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg">
- </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="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg" alt="https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg">
- </div>
- <div class="info">
- <h2>Men clothes<br><span>Men's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£200.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
-
- <script src="js/product-cards.js"></script>
- <script src="js/search.js"></script>
- <script src="js/shopping-basket.js"></script>
- </body>
-
- </html>
\ No newline at end of file
diff --git a/package.json b/package.json
index b0031aaaf35f977a102c281f361fc83609c88386..2588678d3301557216509f49a73460bd3458064d 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,10 @@
"nodemon": "^3.0.3",
"type": "module",
"content-type": "1.0.5",
- "head": "1.0.0"
+ "head": "1.0.0",
+ "cors": "^2.8.5",
+ "nodemailer": "^6.9.12",
+ "pg": "^8.11.3"
},
"devDependencies": {},
"description": ""
diff --git a/products.js b/products.js
index cbccd6f61fd385895e6154baefc7828bc3a6dcbd..6f17703ceda7f73dc2b5bbcd9cbff03469c0c9a6 100644
--- a/products.js
+++ b/products.js
@@ -1,4 +1,102 @@
-exports.productList = [
+/* async function populateProducts(endpoint) {
+ const container = document.querySelector('.container');
+
+
+
+ try {
+ const response = await fetch(endpoint);
+ const products = await response.json();
+
+
+ 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 = product.image;
+ productsHtml.querySelector('.product-img').appendChild(img);
+ }
+
+
+ if(container){
+ container.appendChild(productsHtml);
+ }else{
+ console.error('Container element not found');
+ }
+ });
+ } catch (error) {
+ console.error('Failed to populate products:', error);
+ }
+ //console.log(container);
+ addCartActions(container);
+}
+
+async function getProducts(endpoint = 'http://localhost:7000/products') {
+ try {
+ const response = await fetch(endpoint);
+
+ if (!response.ok) {
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+ const products = await response.json();
+
+ // const data = await response.json();
+ //products = data.products;
+
+ populateProducts(products);
+ // console.log(data.products);
+ // console.log('Products:', products);
+ } catch (error) {
+ console.error('error fetching products:', error);
+ }
+
+
+}
+
+
+ const ProductsLink = getProducts('products');
+ // getProducts();
+
+ if (ProductsLink) {
+ ProductsLink.addEventListener('click', (e) => {
+ e.preventDefault(); // Prevent the default link behavior
+ populateProducts('/products');
+ });
+ } else {
+ console.error("products link not found.");
+ } */
+
+/* exports.productList =
+[
{
name: 'Blue Shirt',
@@ -304,6 +402,5 @@ exports.productList = [
Image:'' //'https://static-01.daraz.pk/p/5838623fb612626ae33c2f67d1b7179c.jpg'
}
-];
-
-//module.exports = productList;
\ No newline at end of file
+]; */
+
diff --git a/public/authenticate.js b/public/authenticate.js
new file mode 100644
index 0000000000000000000000000000000000000000..00a3cb73d3d68744123baaa680b483a62d5fee1e
--- /dev/null
+++ b/public/authenticate.js
@@ -0,0 +1,94 @@
+
+const u = JSON.parse(localStorage.getItem('user'))
+
+if (u) window.location.href = "/"
+
+
+const urlParams = new URLSearchParams(window.location.search)
+const mode = urlParams.get('mode')
+
+
+function renderInputs(){
+ if (mode === 'login') {
+ document.getElementById("c-pass-container").style.display="none"
+ document.getElementById("c-username-container").style.display="none"
+ }
+
+
+
+ document.getElementById("btn").innerText = `${mode.charAt(0).toUpperCase()}${mode.slice(1)}`
+
+}
+
+
+async function handleClick(){
+ const inputs = document.querySelectorAll('.input-group input')
+ if (mode === 'register') {
+
+ if (!inputs[0].value.includes('@')) {
+ alert('Email is not valid!')
+ return
+ }
+
+ if(inputs[1].value !== inputs[2].value) {
+ alert('Password and Confirm Password do not match!')
+ return
+ }
+
+ if (inputs[1].value?.length < 8 ) {
+ alert('Password must be at least 8 characters long')
+ return
+ }
+
+ const options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ password: inputs[1].value,
+ username: inputs[3].value,
+ email: inputs[0].value,
+ })
+ };
+
+ const url = `http://localhost:7000/register`
+
+ const response = await fetch(url, options);
+ if (!response.ok) {
+ alert('Could not register user')
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+
+ alert("Registered successfully, check email to confirm account")
+ }
+
+ if (mode === 'login') {
+ const options = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ password: inputs[1].value,
+ email: inputs[0].value,
+ })
+ };
+
+ const url = `http://localhost:7000/login`
+
+ const response = await fetch(url, options);
+ if (!response.ok) {
+ alert('Could not login user')
+ throw new Error(`HTTP error! Status: ${response.status}`);
+ }
+
+ const user = await response.json()
+ console.log(user)
+
+ localStorage.setItem("user", JSON.stringify(user))
+ window.location.href = "/"
+ }
+}
+
+renderInputs();
\ No newline at end of file
diff --git a/public/init-shoppingcart.js b/public/init-shoppingcart.js
new file mode 100644
index 0000000000000000000000000000000000000000..dfd1ce67839343bc2c91e1f2fb385e5234f0ddb5
--- /dev/null
+++ b/public/init-shoppingcart.js
@@ -0,0 +1,34 @@
+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 = []){
+ let shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || []
+
+ shoppingCardItems = shoppingCardItems.concat(items)
+
+ document.querySelector('.add-cart span').textContent = shoppingCardItems.length;
+}
+
+initCart()
diff --git a/public/search.js b/public/search.js
index ee1eb243c1073a02da79587b2126972e30bf67b3..815f74d1d5abc8b6a725e1502f00037a28ecf78a 100644
--- a/public/search.js
+++ b/public/search.js
@@ -1,98 +1,47 @@
-/* // Declare the products variable
+/* let products1 = [];
-const { productList } = require("../products");
-
-const characterList = document.getElementsByClassName('container-');
const searchBar = document.getElementById('search-input');
-//console.log('search running');
-//console.log(searchBar);
-let products1 = productList;
-
-
-const flattenProducts = (products1) => {
- return products1.flatMap(page => page.flatMap(section => section));
-};
-
-searchBar.addEventListener('input', (e) => {
-
-
- const searchString = e.target.value.toLowerCase(); // Convert to lower case for case-insensitive comparison
-
- //const filteredProducts = products;
-
- console.log(e.target.value);
- if (Array.isArray(products1)) {
- const filteredProducts = products1.filter((product) => {
- console.log('Product:', product);
- return (
- (product.name?.toLowerCase().includes(searchString) || false) ||
- (product.price?.toLowerCase().includes(searchString) || false)
- );
- });
- displayCarts(filteredProducts);
-
- } else {
- console.log('Products array is empty or undefined. Waiting for data to load.');
- }
-
-
- //console.log(filteredProducts);
- // Pass filtered products to displayCart
-});
-
-const displayCarts = (products1) => {
- console.log('Products:', products1);
- for (let page = 0; page < products1.length; page++) {
- for (let section = 0; section < products1[page].length; section++) {
- const characterList = document.querySelector('.characterLists' + (page + 1) + '-' + (section + 1));
- const htmlString = products1[page][section].map((product) => {
- return `
- <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="${product.description}">
- </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}" alt="${product.description}">
- </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>
+const displayCarts = (products) => {
+ const container = document.querySelector('.container-');
+ if (container && Array.isArray(products)) {
+ const htmlString = products.map((product) => {
+ return`
+ <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="${product.description}">
+ </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}" alt="${product.description}">
</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>
+ `;
+ }).join('');
- if (characterList) {
- characterList.innerHTML = htmlString;
- loadProducts(characterList);
- }
- }
+ container.innerHTML = htmlString;
}
};
-/* function flat(products){
- return products.reduce((acc, val) =>
- Array.isArray(val) ? acc.concat(flat(val)) : acc.concat(val), [],
- );
-}
-flat(products); */
-/*const loadProducts = async () => {
+const loadProducts = async () => {
try {
- const res = await fetch('http://localhost:5000/products', {
+ const res = await fetch('http://localhost:7000/products', {
headers: {
accept: 'application/json',
'User-agent': 'learning app',
@@ -100,20 +49,40 @@ flat(products); */
});
if (!res.ok) {
- throw new Error('Network response was not ok');
+ throw new Error(`HTTP error! Status: ${res.status}`);
}
-
-
const data = await res.json();
- products1 = flattenProducts(data); // Extract products from the object and flatten them into a single array
- //console.log('Products:', products);
+ console.log(data); // To check the structure of the fetched data
+ products1 = Array.isArray(data) ? data : [];
+ console.log('Products after fetching:', products1);
displayCarts(products1);
+ initializeSearch();
} catch (err) {
console.error('Error fetching products:', err);
}
-
};
+function initializeSearch() {
+ 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.');
+ }
+ });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ loadProducts();
+});
-loadProducts(); */
\ No newline at end of file
+ */
\ No newline at end of file
diff --git a/public/shopping-basket.js b/public/shopping-basket.js
index eb2e8b2d9089f5f788156f70c09cc202a2c63de1..b106a832e2e911cd1e82bf6ce6b367417a6316a7 100644
--- a/public/shopping-basket.js
+++ b/public/shopping-basket.js
@@ -1,21 +1,9 @@
-
-
-async function populateProducts(endpoint) {
+async function populateProducts(products) {
const container = document.querySelector('.container');
- if (!container) {
- console.error('Container element not found');
- return;
- }
-
try {
- const response = await fetch(endpoint);
- const products = await response.json();
-
-
container.innerHTML = '';
-
products.forEach(product => {
const productsHtml = document.createElement('div');
productsHtml.innerHTML = `
@@ -50,127 +38,27 @@ async function populateProducts(endpoint) {
img.src = `data:image/jpeg;base64,${product.image.toString('base64')}`;
productsHtml.appendChild(img);
}
-
- productsHtml.querySelector('.add-cart-btn').addEventListener('click', () => {
- addProductToCart(product);
- })
-
-
-
- /* if(container){
+ if(container){
container.appendChild(productsHtml);
}else{
console.error('Container element not found');
- } */
+ }
});
} catch (error) {
console.error('Failed to populate products:', error);
}
- //console.log(container);
- addCartActions(container);
-}
-
-function addProductToCart(product) {
- let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
-
- if (cartItems[product.productid]) {
- cartItems[product.productid].inCart += 1;
- } else {
- product.inCart = 1;
- cartItems[product.productid] = product;
- }
-
- localStorage.setItem('productsInCart', JSON.stringify(cartItems));
- updateCartTotal();
+ addCartActions(products);
}
-function updateCartTotal() {
- let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
- let total = Object.keys(cartItems).reduce((acc, key) => acc + cartItems[key].price * cartItems[key].inCart, 0);
-
- localStorage.setItem('totalCost', total.toString());
- // Update the display of the total cost, you might need to adjust this selector based on your HTML structure
- const totalCostElement = document.querySelector('.total-cost');
- if (totalCostElement) {
- totalCostElement.textContent = `£${total}`;
- }
-}
-
-document.addEventListener('DOMContentLoaded', (event) => {
- getProducts();
- const menProductsLink = document.getElementById('men-products');
- const womenProductsLink = document.getElementById('women-products');
- const kidsProductsLink = document.getElementById('kids-products');
- const menShoesProductsLink = document.getElementById('men-s-products');
- const womenShoesProductsLink = document.getElementById('women-s-products');
- const kidsShoesProductsLink = document.getElementById('kids-s-products');
-
- if (menProductsLink) {
- menProductsLink.addEventListener('click', (e) => {
- e.preventDefault(); // Prevent the default link behavior
- populateProducts('/men-products');
- });
- } else {
- console.error("Men's products link not found.");
- }
-
- if (womenProductsLink) {
- womenProductsLink.addEventListener('click', (e) => {
- e.preventDefault(); // Prevent the default link behavior
- populateProducts('/women-products');
- });
- } else {
- console.error("Women's products link not found.");
- }
- if (kidsProductsLink) {
- kidsProductsLink.addEventListener('click', (e) => {
- e.preventDefault(); // Prevent the default link behavior
- populateProducts('/kids-products');
- });
- } else {
- console.error("Kids' products link not found.");
- }
- if (menShoesProductsLink) {
- menShoesProductsLink.addEventListener('click', (e) => {
- e.preventDefault(); // Prevent the default link behavior
- populateProducts('/men-s-products');
- });
- } else {
- console.error("Men Shoes products link not found.");
- }
- if (womenShoesProductsLink) {
- womenShoesProductsLink.addEventListener('click', (e) => {
- e.preventDefault(); // Prevent the default link behavior
- populateProducts('/women-s-products');
- });
- } else {
- console.error("Women Shoes products link not found.");
- }
- if (kidsShoesProductsLink) {
- kidsShoesProductsLink.addEventListener('click', (e) => {
- e.preventDefault(); // Prevent the default link behavior
- populateProducts('/kids-s-products');
- });
- } else {
- console.error("Women Shoes products link not found.");
- }
-});
-
-
-const carts = document.querySelectorAll('.add-cart-btn');
-
async function getProducts() {
try {
- const response = await fetch('http://localhost:7000/products');
+ 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();
- //products = data.products;
-
- populateProducts(data.products);
- // console.log(data.products);
- // console.log('Products:', products);
+ const copied = Array(20).fill(data[0])
+ populateProducts(copied);
} catch (error) {
console.error('error fetching products:', error);
}
@@ -178,16 +66,9 @@ async function getProducts() {
}
-document.addEventListener('DOMContentLoaded', (event) => {
- getProducts();
-});
-
-
-
-
-function addCartActions(container) {
- const products = [];
+function addCartActions(products) {
+
var popupViews = document.querySelectorAll('.popup-view');
var popupBtns = document.querySelectorAll('.popup-btn');
var closeBtns = document.querySelectorAll('.close-btn');
@@ -213,233 +94,58 @@ function addCartActions(container) {
for (let i = 0; i < carts.length; i++) {
carts[i].addEventListener('click', () => {
-
cardsNumbers(products[i]);
- totalCost(products[i]);
});
}
}
-function onLoadCardsNumbers() {
- let productNumber = localStorage.getItem('cardsNumbers');
- if (productNumber) {
- const cartSpan = document.querySelector('.add-cart span');
- if (cartSpan) {
- cartSpan.textContent = productNumber;
- } else {
- console.error("Element with class 'add-cart span' not found.");
- }
- }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
- onLoadCardsNumbers();
-});
-
-
-function cardsNumbers(product) {
- let productNumber = localStorage.getItem('cardsNumbers');
- productNumber = parseInt(productNumber) || 0;
- if (productNumber) {
- localStorage.setItem('cardsNumbers', productNumber + 1);
- document.querySelector('.add-cart span').textContent = productNumber + 1;
- } else {
- localStorage.setItem('cardsNumbers', 1);
- document.querySelector('.add-cart span').textContent = 1;
- }
-
- setItems(product);
-}
-
-function generateProductId() {
- return Math.random().toString(36).substr(2, 9);
-}
-
-function setItems(product) {
- if (!product) {
- return; // Return early if product is null or undefined
+async function cardsNumbers(product) {
+ const loggedInuser = JSON.parse(localStorage.getItem('user'))
+ if (!loggedInuser) {
+ updateShoppingCart(product)
+ return
}
- let cartItems = localStorage.getItem('productsInCart');
-
- cartItems = JSON.parse(cartItems);
-
- const productTag = product.tag; // Get the tag property once
-
- if (cartItems != null) {
- if (cartItems[productTag] == undefined) {
- cartItems = {
- ...cartItems,
- [productTag]: {
- ...product,
- id: generateProductId() // Adds a unique identifier to each product
- }
- };
+ 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}`);
}
- cartItems[productTag].inCart += 1;
- } else {
- product.inCart = 1;
- product.id = generateProductId();
- cartItems = {
- [productTag]: product
- };
- }
-
- localStorage.setItem('productsInCart', JSON.stringify(cartItems));
-
-}
+ updateShoppingCart(product)
-function totalCost() {
- let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
- //cartItems = JSON.parse(cartItems) || {};
- //let total = Object.values(cartItems).reduce((acc, item) => acc + (item.inCart * item.price), 0);
- let total = 0;
- for (item in cartItems) {
- total += cartItems[item].price * cartItems[item].inCart;
+ } catch (error) {
+ console.error(error);
}
-
-
- localStorage.setItem('totalCost', total.toString());
- return total;
+
}
+function updateShoppingCart(product){
+ const shoppingCardItems = JSON.parse(localStorage.getItem('shoppingCardItems')) || []
+ shoppingCardItems.push(product)
-function displayCart() {
- let cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
-
- let productContainer = document.querySelector('.prods');
- let cartCost = 0; // Initialize cartCost to 0
-
-
-
- if (cartItems && productContainer) {
- productContainer.innerHTML = '';
-
- Object.values(cartItems).map((item, index) => {
- const closeBtnId = `close-btn-${item.id}`; // Update the close button's unique identifier
- const addBtnId = `add-btn-${item.id}`;
- const removeBtnId = `remove-btn-${item.id}`;
-
- //const imageUrl = item.tag ? `/images/${item.tag}.jpg` : 'default-image.jpg';
- productContainer.innerHTML += `
- <div class="prod">
- <link href='https://unpkg.com/css.gg@2.0.0/icons/css/close-o.css' rel='stylesheet'>
- <i class="gg-close-o ${closeBtnId}"></i>
- <img src="${item.image}">
- <span>${item.name}</span>
- </div>
- <div class="price">£${item.price}</div>
- <div class="quantity">
- <link href='https://unpkg.com/css.gg@2.0.0/icons/css/add.css' rel='stylesheet'>
- <i class="gg-add ${addBtnId}"></i>
- <span>${item.inCart}</span>
- <link href='https://unpkg.com/css.gg@2.0.0/icons/css/remove.css' rel='stylesheet'>
- <i class="gg-remove ${removeBtnId}"></i>
- </div>
- <div class="total">
- £${item.inCart * item.price}
- </div>
- `;
-
- // Increment cartCost for each item in the cart
- cartCost += item.inCart * item.price;
- console.log('clicked 00');
- // Add event listeners for add and remove buttons
-
-
- document.querySelector(`.${removeBtnId}`).addEventListener('click', () => {
- // Decrease the quantity of the selected item, but ensure it doesn't go below 1
- cartItems[item.tag].inCart = Math.max(cartItems[item.tag].inCart - 1, 1);
- // Update localStorage and redisplay the cart
- localStorage.setItem('productsInCart', JSON.stringify(cartItems));
- displayCart();
- });
- });
-
- productContainer.innerHTML += `
- <div class="basketTotalContainer">
- <h4 class="basketTotalTitle">
- Total
- </h4>
- <h4 class="basketTotal">
- £${cartCost}
- </h4>
- </div>
- `;
- }
-
- // Update localStorage with the recalculated total cost
- localStorage.setItem('totalCost', cartCost.toString());
-
- let removeItems = document.getElementsByClassName('gg-close-o');
-
- for (let i = 0; i < removeItems.length; i++) {
- let button = removeItems[i];
- button.addEventListener('click', (event) => {
- // Get the unique identifier of the clicked close button
- const productId = event.target.className.split(' ').find(cls => cls.startsWith('close-btn-')).split('-')[2];
-
- // Remove the corresponding product from the cartItems
- const updatedCartItems = { ...cartItems };
- for (const key in updatedCartItems) {
- if (updatedCartItems[key].id === productId) {
- cartCost -= updatedCartItems[key].inCart * updatedCartItems[key].price;
- delete updatedCartItems[key];
- break;
- }
- }
-
- // Update localStorage and display the updated cart
- localStorage.setItem('productsInCart', JSON.stringify(updatedCartItems));
- localStorage.setItem('totalCost', cartCost.toString());
- displayCart();
- });
- }
-
- let addItem = document.getElementsByClassName('gg-add');
- for (let i = 0; i < addItem.length; i++) {
- let button = addItem[i];
- button.addEventListener('click', (event) => {
- // Get the unique identifier of the clicked add button
- const productId = event.target.className.split(' ').find(cls => cls.startsWith('add-btn-')).split('-')[2];
-
- //Increments the quantity of the selected item
- const productToUpdate = Object.values(cartItems).find(item => item.id === productId);
- if (productToUpdate) {
- productToUpdate.inCart += 1;
- }
-
- // Update localStorage and display the updated cart
- localStorage.setItem('productsInCart', JSON.stringify(cartItems));
- localStorage.setItem('totalCost', cartCost.toString());
- displayCart();
- });
- }
-
- let removeItem = document.getElementsByClassName('gg-remove');
- for (let i = 0; i < removeItem.length; i++) {
- let button = removeItem[i];
- button.addEventListener('click', (event) => {
- // Get the unique identifier of the clicked remove button
- const productId = event.target.className.split(' ').find(cls => cls.startsWith('remove-btn-')).split('-')[2];
+ localStorage.setItem('shoppingCardItems', JSON.stringify(shoppingCardItems))
+ document.querySelector('.add-cart span').textContent = shoppingCardItems.length;
+}
- //decrements the quantity of the selected item
- const productToUpdate = Object.values(cartItems).find(item => item.id === productId);
- if (productToUpdate) {
- productToUpdate.inCart -= 1;
- }
- // Update localStorage and display the updated cart
- localStorage.setItem('productsInCart', JSON.stringify(cartItems));
- localStorage.setItem('totalCost', cartCost.toString());
- displayCart();
- });
- }
-}
+document.addEventListener('DOMContentLoaded', (event) => {
+ getProducts();
+})
-onLoadCardsNumbers();
-displayCart();
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 8ee3929bf68c2e2e8de014cb3df8608820bb4c04..6394c04c180826991d0bab69a44195315ba6eb86 100644
--- a/public/style.css
+++ b/public/style.css
@@ -10,27 +10,29 @@ body, h1, h2, p {
/* Basic page styles */
body {
font-family: Arial, sans-serif;
+ background-image:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
}
.your-fashion-text-box {
text-align: center;
text-decoration-line: none;
top: 3%;
- left: 10%;
- transform: translate(-10%, -10%);
+
+
+
}
.shopname{
margin: 0;
- padding-left: 100px;
+ padding-left: 10px;
color: #ffffff;;
font-size: 24px;
- text-transform: uppercase;
+
text-decoration-line: none;
letter-spacing: 1px;
}
header{
- background-image:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
+
background-size: cover;
background-position: center;
margin-bottom: -360px;
@@ -46,7 +48,7 @@ header{
justify-content: space-between;
align-items: center;
padding: 10px 20px;
- float: none;
+
}
.navbar .container-fluid {
@@ -60,6 +62,7 @@ header{
.navbar ul.navbar-nav li {
margin-right: 60;
+ padding: 10px 20px 10px 40px;
}
.navbar ul.navbar-nav li a {
@@ -72,7 +75,7 @@ header{
}
/* Add an active class to highlight the current page */
.actives {
- background-color:linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.3));
+
color: white;
padding: 10px 20px;
margin-right: 60;
@@ -102,31 +105,6 @@ header{
outline: none;
}
-/*.search-bar [.container]::-webkit-list-button,
-.search-bar [.container]::-webkit-calendar-picker-indicator {
- display: none !important;
-}
-
-
-/*.search-bar button {
- padding: 10px 20px;
- background-color: #333;
- color: #fff;
- border: none;
- border-radius: 5px;
- cursor: pointer;
-
-}
-.search-bar button:hover{
- opacity: 0.5;
- color: #fff;
-}*/
-/* dropdown menu styles */
-/*.navbar ul.navbar-nav li a {
- text-decoration: none;
- color: #fff;
-}*/
-
.nav-item ul.dropdown-menu li a {
text-decoration: none;
color: #141313;
@@ -456,7 +434,9 @@ header{
@media only screen and (max-width:620px) {
/* For mobile phones: */
- .menu, .container, .login-button, .shopname {
+ .menu, .container, .login-button, .shopname, .previous-button, .next-button, .scene, .carousel, .carousel__cell,
+ .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%;
}
}
@@ -476,7 +456,7 @@ header{
height: 290px;
margin: 40px auto;
perspective: 1000px;
- top: 30%;
+ top: 200px;
}
.carousel {
@@ -486,6 +466,7 @@ header{
transform: translateZ(-588px);
transform-style: preserve-3d;
transition: transform 1s;
+
}
.carousel__cell {
@@ -520,77 +501,52 @@ header{
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(588px); }
.previous-button{
- border-radius: 8px;
+ text-decoration: none;
position: absolute;
- top: 90%;
- left: 48%;
+ top: 50%;
+ left: 5%;
+ color: #000;
+ cursor: pointer;
+ border-radius: 20px;
+ background-color: #f1efef;
+ }
+
+ .previous-button:hover{
+ background-color: #5a5e5f;
}
.next-button{
- border-radius: 8px;
+ text-decoration: none;
position: absolute;
- top: 90%;
- right: 45%;
+ top: 50%;
+ right: 5%;
+ color: #000;
+ cursor: pointer;
+ border-radius: 20px;
+ background-color: #f1efef;
}
- /* slideshow styles */
-/* * {box-sizing: border-box;}
-body {font-family: Verdana, sans-serif;}
-.mySlides {display: none;}
-img {vertical-align: middle;}
-
-/* Slideshow container */
-/*.slideshow-container {
- max-width: 1000px;
- position: relative;
- margin: auto;
- margin-top:25rem;
-}
-/* Caption text */
-/*.text {
- color: #f2f2f2;
- font-size: 15px;
- padding: 8px 12px;
- position: absolute;
- bottom: 8px;
- width: 100%;
- text-align: center;
-}
-
-/* Number text (1/3 etc) */
-/*.numbertext {
- color: #f2f2f2;
- font-size: 12px;
- padding: 8px 12px;
- position: absolute;
- top: 0;
-}
+ .next-button:hover{
+ background-color: #5a5e5f;
+ }
-/* The dots/bullets/indicators */
-/*.dot {
- height: 15px;
- width: 15px;
- margin: 0 2px;
- background-color: #bbb;
- border-radius: 50%;
- display: inline-block;
- transition: background-color 0.6s ease;
-}
+ footer {
+ position:fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.3);
+ color: white;
+ text-align: center;
+
+ }
-.active {
- background-color: #717171;
-}
-/* Fading animation */
-/*.fade {
- animation-name: fade;
- animation-duration: 2s;
-}*/
/* On smaller screens, decrease text size */
@media only screen and (max-width: 100px) {
- .text {font-size: 8px}
+ .text {font-size: 8px}
}
diff --git a/server.js b/server.js
index ed6cf1e48354c9e3d8cea617608c012361dafd14..d56208c41fcb59cf96ebbbeff6fd40b5d87ba60c 100644
--- a/server.js
+++ b/server.js
@@ -1,8 +1,12 @@
const express = require('express');
const path = require('path');
const {Pool} = require('pg');
+const cors = require('cors')
const app = express();
const port = 7000;
+const hbs = require('hbs');
+const crypto = require('crypto');
+const nodemailer = require('nodemailer')
const pool = new Pool({
host: 'localhost',
@@ -12,31 +16,60 @@ const pool = new Pool({
database: 'your-fashion-data'
});
+const transport = nodemailer.createTransport({
+ host: "sandbox.smtp.mailtrap.io",
+ port: 2525,
+ auth: {
+ user: "c16e97160a283c",
+ pass: "b0744070dad435"
+ }
+});
+
+
+const partialsDir = path.join(__dirname, 'views');
+
+hbs.registerPartials(partialsDir);
//Server static files from 'public' directory and CSS from '0public/css'
app.use(express.json());
+app.use(cors())
const publicDirectory = path.join(__dirname, './public');
app.use(express.static(publicDirectory));
app.set('view engine', 'hbs');
+
+
app.use(express.static('./css'));
//Routes setup
app.use('/', require('./routes/pages'));
-app.use('/products', require('./routes/productsRouteFile'));
app.get('/', (req, res) => {
res.send('Welcome to your fashion online shop');
});
+
+function sha256Hash(inputString) {
+ const hash = crypto.createHash('sha256');
+ hash.update(inputString);
+ const hashedString = hash.digest('hex');
+ return hashedString;
+}
+
+function generateRandomSixDigitNumber() {
+ const randomNumber = Math.floor(Math.random() * 900000) + 100000;
+ return randomNumber;
+ }
+
+
//query for men-products
app.get('/men-products', async (req, res) => {
try{
const client = await pool.connect();
- const { rows } = await client.query("SELECT * FROM products WHERE category = 'men' LIMIT 6");
+ const { rows } = await client.query("SELECT * FROM products WHERE category = 'men'");
res.json(rows);
client.release();
}catch(err){
@@ -69,7 +102,7 @@ app.get('/kids-products', async (req, res) => {
}
});
-app.get('/men-s-products', async (req, res) => {
+app.get('/men-shoes-products', async (req, res) => {
try{
const client = await pool.connect();
const { rows } = await client.query("SELECT * FROM products WHERE category = 'M-shoes'");
@@ -81,7 +114,7 @@ app.get('/men-s-products', async (req, res) => {
}
});
-app.get('/women-s-products', async (req, res) => {
+app.get('/women-shoes-products', async (req, res) => {
try{
const client = await pool.connect();
const { rows } = await client.query("SELECT * FROM products WHERE category = 'W-shoes'");
@@ -93,7 +126,7 @@ app.get('/women-s-products', async (req, res) => {
}
});
- app.get('/kids-s-products', async (req, res) => {
+app.get('/kids-shoes-products', async (req, res) => {
try{
const client = await pool.connect();
const { rows } = await client.query("SELECT * FROM products WHERE category = 'K-shoes'");
@@ -105,6 +138,103 @@ app.get('/women-s-products', async (req, res) => {
}
});
+app.post('/shopping-cart', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const { body:{ userId, productId } } = req;
+ await client.query(`INSERT INTO shopping_cart (user_id, product_id) VALUES (${userId}, ${productId});`);
+ res.sendStatus(201);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+ });
+
+
+ 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();
+
+ let { body:{ email, username, password } } = req;
+ 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({
+ from: '<fashion-store@style.com>',
+ to: email,
+ subject: "Confirm your account",
+ html: `
+ <p>
+ Click the following link and input this code: <strong>${code}</strong> to
+ activate your account.
+ </p>
+ <p>
+ <a href="http://localhost:7000/activate-account"> Activation link </a>
+ </p>
+ `,
+ });
+ res.sendStatus(201);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+ });
+
+
+ app.post('/activate-account', async (req, res) => {
+ try{
+ const client = await pool.connect();
+ const { body:{ email, code } } = req;
+ await client.query(`UPDATE users set is_active = true WHERE "users"."email" = '${email}' AND
+ "users"."code" = ${code}
+ `);
+ res.sendStatus(201);
+ client.release();
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Error exucting query', err.stack);
+ }
+ });
+
+
+ app.post('/login', async (req, res) => {
+ try{
+ 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}'`);
+ if (rows.length) {
+ res.json(rows[0]);
+ client.release();
+ return
+ }
+
+ throw new Error()
+
+
+ }catch(err){
+ res.status(500).send('Server error');
+ console.error('Could not login user', err.stack);
+ }
+ });
+
+
+
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});
diff --git a/views/cart.hbs b/views/cart.hbs
index 661b8c4a4553ce8edb294ea094a6ee31080525a9..d0fddd7173a7ffbaa5131cae66e990871f40146d 100644
--- a/views/cart.hbs
+++ b/views/cart.hbs
@@ -1,4 +1,4 @@
-<DOCTYPE! html>
+<!DOCTYPE html>
<html lang="en" charset="UTF-8">
@@ -33,7 +33,7 @@
<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>
+ <a href="index.hbs" 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>
@@ -44,7 +44,7 @@
<li class="nav-item">
- <a class="nav-link" id="men-products" href="/men">Men</a>
+ <a class="nav-link" id="men-products" href="men.hbs">Men</a>
</li>
<li class="nav-item">
<a class="nav-link" id="women-products" href="/women">Women</a>
@@ -87,7 +87,7 @@
- {{!-- <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="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>
diff --git a/views/index.hbs b/views/index.hbs
index 817777e2a4a5a14e0970669b8ca71c346ec68d8e..92a4537fc0100a1543afd6f2675c52b2037943a9 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,104 +1,129 @@
-<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">
-
-
-
- <!--<script type="text/javascript" src="js/LocalLogin.js"></script>-->
-
- </head>
-
- <body class="responsive">
-
-
- <header>
- <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">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
- </div>
- <a class="login-button"href="#">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>
-
- </header>
- <div id="characterList" class="characterLists"></div>
- <main class="cont">
- {{!-- <div class="search-display"></div> --}}
- <div id="characterList"></div>
- <div class="posts-container"></div>
- </main>
- <br>
-
- <div class="scene">
- <div class="carousel">
- <div class="carousel__cell"><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"><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"><img class="slides" src="https://dlsb.co.uk/cdn/shop/collections/Women_s_Clothing.png?v=1662113551"></div>
- <div class="carousel__cell"><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"><img class="slides" src="https://www.nextdirect.com/nxtcms/resource/blob/5587208/f0e6f37c9c409a172eb0ca2236449efb/hero1-kids-data.jpg"></div>
- <div class="carousel__cell"><img class="slides" src="https://i.ebayimg.com/images/g/9bEAAOSwmh9ez480/s-l1200.webp"></div>
- <div class="carousel__cell"><img class="slides" src="https://www.nerdwallet.com/assets/blog/wp-content/uploads/2021/09/GettyImages-1174825598-2400x1440.jpg"></div>
- <div class="carousel__cell"><img class="slides" src="https://www.realmenrealstyle.com/wp-content/uploads/2023/08/Promote-Positive-Communication.jpg"></div>
- <div class="carousel__cell"><img class="slides" src="https://i.insider.com/62e40d594b455800188b5fca?width=700"></div>
- </div>
+<!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">
+
+
+
+ <!--<script type="text/javascript" src="js/LocalLogin.js"></script>-->
+
+</head>
+
+<body class="responsive">
+
+
+ <header>
+
+
+
+ <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">
+ <a class="nav-link" id="men-products" href="/men">Men</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="women-products" href="/women">Women</a>
+ </li>
+ <li class="nav-item">
+ <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><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
+ </ul>
+ </li>
+ </ul>
</div>
- <p style="text-align: center;">
- <button class="previous-button">Previous</button>
- <button class="next-button">Next</button>
- </p>
+ <a class="login-button" href="#">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>
+
+ </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>
+ </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="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>
- <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>
- </body>
- </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 6230f7ceb35d9465bc6cf5a1321a3f2c493314d6..cc59128ced8ffc07234a706b6f1c509b233d7611 100644
--- a/views/kids-shoes.hbs
+++ b/views/kids-shoes.hbs
@@ -1,4 +1,4 @@
-<DOCTYPE! html>
+<!DOCTYPE html>
<html>
<head>
diff --git a/views/kids.hbs b/views/kids.hbs
index be1703852179f30ebaf38395cbe33647053074f5..c83196021c626b19ce3299f5403055c7722c0162 100644
--- a/views/kids.hbs
+++ b/views/kids.hbs
@@ -1,4 +1,4 @@
-<DOCTYPE! html>
+<!DOCTYPE html>
<html>
<head>
diff --git a/views/men-shoes.hbs b/views/men-shoes.hbs
index 6deb12a23f87cfb43329fb13649b12990b2ffb98..5b8eb32a9b926126d44603bc90420006d0934b7d 100644
--- a/views/men-shoes.hbs
+++ b/views/men-shoes.hbs
@@ -1,4 +1,4 @@
-<DOCTYPE! html>
+<!DOCTYPE html>
<html>
<head>
diff --git a/views/men.hbs b/views/men.hbs
index 47e059bca1991b7e663bbea31ad0e5cecc94ec3c..b080519c154f1a5f1614bb6c53e72eef68dc35b0 100644
--- a/views/men.hbs
+++ b/views/men.hbs
@@ -1,87 +1,95 @@
-<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>
- <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">
- <a class="nav-link" id="men-products" href="/men">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="women-products" href="/women">Women</a>
- </li>
- <li class="nav-item">
- <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><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
- <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
- <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
-
- </div>
- <a class="login-button"href="#">login</a>
- <div class="add-cart">
- <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
- </div>
- </div>
- </nav>
- <div class="search-bar">
- <input class="search" type="search" id="search-input" placeholder="🔍 Start typing to search" list="container" autocomplete="off"/>
-
- </div>
-
-
- </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>
-
- </html>
\ No newline at end of file
+<!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>
+ <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">
+ <a class="nav-link" id="men-products" href="/men">Men</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="women-products" href="/women">Women</a>
+ </li>
+ <li class="nav-item">
+ <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><a class="dropdown-item" id="men-s-products" href="/men-shoes">Men Shoes</a></li>
+ <li><a class="dropdown-item" id="women-s-products" href="/women-shoes">Women Shoes</a></li>
+ <li><a class="dropdown-item" id="kids-s-products" href="/kids-shoes">Kids Shoes</a></li>
+ </ul>
+ </li>
+ </ul>
+
+ </div>
+ <a class="login-button" href="#">login</a>
+ <div class="add-cart">
+ <a class="add-cart" href="/cart"><i class="fa fa-shopping-cart" style="font-size:24px"></i><span>0</span></a>
+ </div>
+ </div>
+ </nav>
+ <div class="search-bar">
+ <input class="search" type="search" id="search-input" placeholder="🔍 Start typing to search"
+ list="container" autocomplete="off" />
+
+ </div>
+
+
+ </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>
\ No newline at end of file
diff --git a/views/women-shoes.hbs b/views/women-shoes.hbs
index 5de542800a8b85c14e60b26a45644f87033e7f71..7db54d6d15083c12756bd58fc765a80ff12e063c 100644
--- a/views/women-shoes.hbs
+++ b/views/women-shoes.hbs
@@ -1,4 +1,4 @@
-<DOCTYPE! html>
+<!DOCTYPE html>
<html>
<head>
diff --git a/views/women.hbs b/views/women.hbs
index 134bff4dbe86a86c1ccc3b04df2a7450e5bafa03..59324d365fb4de17f4d6add31a25c1646930e391 100644
--- a/views/women.hbs
+++ b/views/women.hbs
@@ -1,4 +1,4 @@
-<DOCTYPE! html>
+<!DOCTYPE html>
<html>
<head>
diff --git a/women-shoes.html b/women-shoes.html
deleted file mode 100644
index 7517ac50f820493c24d1d04b6dd45f401d2688df..0000000000000000000000000000000000000000
--- a/women-shoes.html
+++ /dev/null
@@ -1,217 +0,0 @@
-<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="css/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="css/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">
-
-
- <!--<script type="text/javascript" src="js/LocalLogin.js"></script>-->
-
- </head>
-
- <body class="responsive">
-
- <script src="css/app.js"></script>
- <header>
- <div class="your-fashion-text-box">
- <a href="index.html" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="index.html" 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">
- <a class="nav-link" href="men.html">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="women.html">Women</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="kids.html">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><a class="dropdown-item" href="men-shoes.html">Men Shoes</a></li>
- <li><a class="dropdown-item" href="women-shoes.html">Women Shoes</a></li>
- <li><a class="dropdown-item" href="kids-shoes.html">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="cart.html"><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>
-
- </header>
-
- <div class="container">
- <div class="product">
- <div class="product-card">
- <h2 class="name">Women Shoes</h2>
- <span class="price">£47.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/women-shoes.jpg" class="product-img" alt="">
- </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="images/women-shoes.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£47.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Women Shoes</h2>
- <span class="price">£87.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/women-shoes1.jpeg" class="product-img" alt="">
- </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="images/women-shoes1.jpeg" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£87.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Women Shoes</h2>
- <span class="price">£89.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/women-shoes2.webp" class="product-img" alt="">
- </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="images/women-shoes2.webp" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£89.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Women Shoes</h2>
- <span class="price">£119.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/women-shoes3.jpg" class="product-img" alt="">
- </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="images/women-shoes3.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£119.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Women Shoes</h2>
- <span class="price">£52.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/women-shoes4.jpeg" class="product-img" alt="">
- </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="images/women-shoes4.jpeg" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£52.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Women Shoes</h2>
- <span class="price">£ 60.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="images/women-shoes5.webp" class="product-img" alt="">
- </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="images/women-shoes5.webp" alt="">
- </div>
- <div class="info">
- <h2>Women Shoes<br><span>Foot wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£60.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <script src="js/product-cards.js"></script>
- <script src="js/shopping-basket.js"></script>
- <script src="js/search.js"></script>
- </body>
-
- </html>
\ No newline at end of file
diff --git a/women.html b/women.html
deleted file mode 100644
index 87337aac049c14425a9437ca6ef54569b76bbd82..0000000000000000000000000000000000000000
--- a/women.html
+++ /dev/null
@@ -1,217 +0,0 @@
-<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="css/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="css/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">
-
-
- <!--<script type="text/javascript" src="js/LocalLogin.js"></script>-->
-
- </head>
-
- <body class="responsive">
-
- <!--<script src="css/app.js"></script>-->
- <header>
- <div class="your-fashion-text-box">
- <a href="index.html" class="shopname">Your Fashion</a>
- </div>
-
-
- <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
- <div class="container-fluid">
- <a href="index.html" 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">
- <a class="nav-link" href="men.html">Men</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="women.html">Women</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="kids.html">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><a class="dropdown-item" href="men-shoes.html">Men Shoes</a></li>
- <li><a class="dropdown-item" href="women-shoes.html">Women Shoes</a></li>
- <li><a class="dropdown-item" href="kids-shoes.html">Kids Shoes</a></li>
- </ul>
- </li>
- </ul>
-
- </div>
- <a class="login-button"href="#">login</a>
- <a class="add-cart" href="cart.html"><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>
-
- </header>
-
- <div class="container">
- <div class="product">
- <div class="product-card">
- <h2 class="name">Blue blouse</h2>
- <span class="price">£ 59.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://peacocks.imgix.net/media/imagery/2/0/7/5/6/1_75adccf069ea5a2/207561pls_ee4d8736435c6a4.jpg" class="product-img" alt="">
- </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="https://peacocks.imgix.net/media/imagery/2/0/7/5/6/1_75adccf069ea5a2/207561pls_ee4d8736435c6a4.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£ 59.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Off White blouse</h2>
- <span class="price">£ 73.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://www.marie-claire.com/cdn/shop/files/498765525638-01.jpg?v=1693493574&width=720" class="product-img" alt="">
- </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="https://www.marie-claire.com/cdn/shop/files/498765525638-01.jpg?v=1693493574&width=720" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£ 73.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">White blouse</h2>
- <span class="price">£ 89.99</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://m.media-amazon.com/images/I/61GDvPjdmtL.jpg" class="product-img" alt="">
- </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="https://m.media-amazon.com/images/I/61GDvPjdmtL.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£ 89.99</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Brown trouser</h2>
- <span class="price">£ 140.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://m.media-amazon.com/images/I/61+0NJn8oyL._AC_UF894,1000_QL80_.jpg" class="product-img" alt="">
- </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="https://m.media-amazon.com/images/I/61+0NJn8oyL._AC_UF894,1000_QL80_.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£140.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Cream trouser</h2>
- <span class="price">£ 59.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://m.media-amazon.com/images/I/61E3wB99TIL._AC_UY580_.jpg" class="product-img" alt="">
- </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="https://m.media-amazon.com/images/I/61E3wB99TIL._AC_UY580_.jpg" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£59.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- <div class="product">
- <div class="product-card">
- <h2 class="name">Grey trouser</h2>
- <span class="price">£ 201.00</span>
- <a class="popup-btn">Quick View</a>
- <img src="https://imagescdn.planetfashion.in/img/app/product/7/738426-8259061.jpg?auto=format" class="product-img" alt="">
- </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="https://imagescdn.planetfashion.in/img/app/product/7/738426-8259061.jpg?auto=format" alt="">
- </div>
- <div class="info">
- <h2>Women clothes<br><span>Women's wear</span></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
- <span class="price">£201.00</span>
- <a href="#" class="add-cart-btn">Add to Cart</a>
- <a href="#" class="add-wish">Add to Wishlist</a>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-
- <script src="js/product-cards.js"></script>
- <script src="js/shopping-basket.js"></script>
- <script src="js/search.js"></script>
- </body>
-
- </html>
\ No newline at end of file