did some changes to the codes

README.md

@@ -1,48 +1,78 @@
+# ID-FED-Ahmed-Assignment-2
+
 # VOGUEVALLEY E-commerce Website
+
 ### By Ahmed and Diontae
 
 Live Site: [ace-clothing.netlify.app](https://ace-clothing.netlify.app)
 
-Ace Clothing offers a diverse range of products including clothing, perfumes, cosmetics, and accessories. With a gamification system and an AI chatbot, we aim to provide a unique and engaging shopping experience.
-
 ## Design Process
 
-Inspired by the need for a captivating online shopping experience, we blended modern web design with retro arcade elements. The design echoes a balance of nostalgia and modernity, tailored for users seeking an interactive and rewarding online shopping journey.
+For this project we decieded to make a responsive e-commerce webstie called VogueValley. This online e-commerce shop allows users to see their favourite type of clothing and add them to cart if they want to buy them. VogueValley offers a diverse range of clothing such as pants t-shirt outerwear and even accessories. With a gamification system and an AI chatbot, we aim to provide a unique and engaging shopping experience.
+
+If you want to buy trending clothes in the market to impress you friends on your fasion sense this is the store where you should be buying your clothes. We have a wide range of clothes avaiblable and they all are very affordable.If you do not know how to match the clothes fred not, you can ask our Advanced Ai bot which will help you to choose the perfect fit for you!
 
-Wireframe: [Figma Design](https://www.figma.com/file/98u1fmfw0utAd8NBSyRPS3/Error404-FED-Assignment?type=design&node-id=0%3A1&mode=design&t=nagg2nML9COIxDar-1)
+This website meant for people who want to buy clothes and look better than all of thier friends.Our store will always have products that are on offer. We have got all the type of accesories such as sunglasses, hat,belts and even gloves for you to buy. You can buy all your products from 1 store.
+
+Wireframe Figma Design : https://www.figma.com/file/OHVeN2RdhKqYQnpTSjVxTW/FED-Assignment2?type=design&mode=design&t=Mfd5BDWml9jXUcGh-1
 
 ## Features
 
 - **Gamification System**: Points are awarded for exploring different categories and purchases, with rewards available for redemption.
 - **AI Chatbot**: Offers product recommendations, order tracking, and customer support.
 - **Responsive Design**: Ensures a seamless experience across all devices.
 - **User Reviews and Ratings**: Engage with the community through feedback.
-- **Advanced Search and Filters**: Easily find products with robust sorting features.
+- **Advanced Search and Filters**: Easily find products with robust sorting features.(you can sort by gender by type of clothing and even by price)
+
+## Features left to implement
+
+- Make it such that users can go to the check out page and actually buy the item.
 
 ## Technologies Used
 
 - HTML5 & CSS3 for markup and styling.
-- Vite + React for efficient, modern web development.
+- JS for the main contents and function
 - RESTDB for database management.
 - Lottie for engaging animations.
 - Bootstrap for responsive design.
 
+## TESTING
+
+1.  Login page:
+    i. Go to the login page
+    ii. Try to login to the page without entering a username and see if it send you a message to fill up the username
+    iii. Try to login to the page without entering a password and see if it send you a message to fill up the password
+    iv. Try to put in a valid username and password and press login. The website should promt you saying that the account doesnt exist
+    v. Try to put a already used account in the sign up page, the page will prompt you that the accoutn already exist.
+
+    When you first launch the website you will be led to the login page where you either log in or sign up for an account. When you log in you will be see a promt welcoming you.
+
+    Once you are in the home page you will see an welcome animation. After the animation ends you will be able to see the navigations at the top including the company name, popular products which are products that are often bought, products that have and offer and lastly the footer at the bottom with quick links a small about us description, the opening hours and the facebook and instagram page.
+
+    In the products page you will be able to see all the products that are available in our store and the filter section which allows you to choose which type of clothings you want, which price range and which gender you want.When you press on the product car it will give you an enlarged version of the product so that you can see better and from there you will be able to add to card.
+
+    In the cart page you will be able to see all the products that you have bought its price and pictures.
+
+    In every page at the bottom of your screen you will be able to see that small icon which sybolizes the ai chat bot which you can talk to, to help you pick the products for you.
 
 ## Acknowledgments
 
 Inspiration drawn from Uniqlo and various website interfaces. Special thanks to the development tools and APIs that made this project possible.
 
 ## Project Team
 
-Diontae & Ahmed - For the creation and development of the VOGUE VALLEY e-commerce platform.
-
+Diontae & Ahmed - For the creation and development of the VOGUE VALLEY e-commerce platform from scratch.
 
 ## Sources
+
 Product images: UNIQLO SINGAPORE ONLINE - THE LARGEST PRODUCT LINEUPS AVAILABLE
 
-Navigation bar : https://chat.openai.com/ 
+Navigation bar : https://chat.openai.com/
 
 Login form: 67 Bootstrap Login Forms (freefrontend.com)
 
-Inspiration: UNIQLO SINGAPORE ONLINE - THE LARGEST PRODUCT LINEUPS AVAILABLE, https://chat.openai.com/ 
+Inspiration: UNIQLO SINGAPORE ONLINE - THE LARGEST PRODUCT LINEUPS AVAILABLE, https://chat.openai.com/
+
+## Media
 
+The photos used from this website are from : https://www.uniqlo.com/sg/en/?ds_rl=1302255&gad_source=1&ds_rl=1302255&gclid=CjwKCAiAt5euBhB9EiwAdkXWO5z6tn4TNMFWqaml3vCfzrMIQsBeAkCaE95r-TFbkkb6a1xR7E41sRoC7ikQAvD_BwE&gclsrc=aw.ds

css/aichat.css

@@ -1,5 +1,5 @@
 /* Import Google font - Poppins */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
 * {
   margin: 0;
   padding: 0;
@@ -30,14 +30,14 @@ body.show-chatbot .chatbot-toggler {
   position: absolute;
 }
 .chatbot-toggler span:last-child,
-body.show-chatbot .chatbot-toggler span:first-child  {
+body.show-chatbot .chatbot-toggler span:first-child {
   opacity: 0;
 }
 body.show-chatbot .chatbot-toggler span:last-child {
   opacity: 1;
 }
 .chatbot {
-  z-index: 3;
+  z-index: 9998;
   position: fixed;
   right: 35px;
   bottom: 90px;
@@ -49,8 +49,8 @@ body.show-chatbot .chatbot-toggler span:last-child {
   pointer-events: none;
   transform: scale(0.5);
   transform-origin: bottom right;
-  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
-              0 32px 64px -48px rgba(0,0,0,0.5);
+  box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),
+    0 32px 64px -48px rgba(0, 0, 0, 0.5);
   transition: all 0.1s ease;
 }
 body.show-chatbot .chatbot {
@@ -64,7 +64,7 @@ body.show-chatbot .chatbot {
   text-align: center;
   color: #fff;
   background: #724ae8;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 .chatbot header span {
   position: absolute;
@@ -173,8 +173,6 @@ header h2 {
   visibility: visible;
 }
 
-
-
 @media (max-width: 490px) {
   .chatbot-toggler {
     right: 20px;
@@ -197,4 +195,4 @@ header h2 {
   .chatbot header span {
     display: block;
   }
-}
+}

css/cart.css

@@ -2,6 +2,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: "Arial", sans-serif;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
 }
 
 .hotbar {
@@ -63,78 +64,3 @@ body {
   z-index: 3;
   margin-top: 5px; /* Adjust the margin-top to move it closer */
 }
-.categories .dropdown a {
-  display: block;
-  padding: 10px 15px;
-  color: #333;
-  text-decoration: none;
-  transition: background-color 0.3s ease;
-}
-
-.categories .dropdown a:hover {
-  background-color: #9e9e9e;
-  color: #555; /* Change the color on hover if needed */
-}
-
-.categories:hover .dropdown {
-  display: block;
-}
-
-.search-bar {
-  padding: 5px;
-  margin: 0 10px;
-}
-
-.chatbot-icon,
-.redeem-icon,
-.cart-icon,
-.account-icon {
-  background: transparent;
-  border: none;
-  color: #ffffff;
-  cursor: pointer;
-  margin: 0 5px;
-  font-size: 25px;
-}
-
-.background-image {
-  position: relative;
-  z-index: 1;
-  background: url("https://png.pngtree.com/thumb_back/fh260/background/20200731/pngtree-blue-carbon-background-with-sport-style-and-golden-light-image_371487.jpg")
-    no-repeat;
-  background-size: cover;
-  height: 700px; /* Adjust as needed */
-}
-/*footer*/
-footer {
-  background-color: #333;
-  color: #fff;
-  padding: 20px;
-  text-align: center;
-}
-
-footer img {
-  width: 50px;
-  height: 50px;
-}
-
-.quick-links {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.quick-links li {
-  margin: 0 10px;
-}
-
-.social-icons {
-  margin-top: 20px;
-}
-
-.social-icon {
-  color: #fff;
-  text-decoration: none;
-  margin: 0 10px;
-}

css/footer.css

@@ -3,6 +3,7 @@ footer {
   color: #ffffff;
   padding: 80px 20px; /* Increase padding to make the footer taller */
   text-align: center;
+  justify-content: center;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -28,18 +29,20 @@ footer {
 .links {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: center; /* Center the quick links horizontally */
 }
 
 .links a {
   background: #242048;
   color: #a2b5cd;
-  padding: 10px 15px;
+  padding: 10px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   margin: 5px;
   transition: background 0.5s ease-in-out, opacity 0.5s ease-in-out;
+  width: 100%; /* Ensure each link takes up the full width of its container */
+  box-sizing: border-box; /* Include padding in the width calculation */
 }
 
 .links a:hover {
@@ -49,7 +52,7 @@ footer {
 
 .social-icons {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
 }
 
 .social-icons img {
@@ -65,7 +68,8 @@ footer {
 
 .legal {
   margin-top: 60px; /* Add spacing between content and "All rights reserved" text */
-  margin-bottom: 20px; /* Add some space below the text */
+  margin-left: auto; /* Add this line to center the legal info */
+  margin-right: auto; /* Add this line to center the legal info */
   font-size: 12px;
-  text-align: right; /* Center the text */
+  text-align: center;
 }