From 9507ce72a624db2293854355ff623d91e17aeff0 Mon Sep 17 00:00:00 2001
From: Shristi Sharan <shristisharan05@gmail.com>
Date: Tue, 18 Jun 2024 14:39:31 +0530
Subject: [PATCH 1/5] oranized the category

---
 css/categories.css | 47 ++++++++++++++++++++++++++++++++++++++++++++++
 js/categoryjs.js   | 39 +++++++++++++++++++-------------------
 2 files changed, 67 insertions(+), 19 deletions(-)
 create mode 100644 css/categories.css

diff --git a/css/categories.css b/css/categories.css
new file mode 100644
index 00000000..69af8dde
--- /dev/null
+++ b/css/categories.css
@@ -0,0 +1,47 @@
+#categories {
+    list-style: none;
+    padding: 0;
+}
+
+.category-item {
+    position: relative;
+    padding: 10px;
+}
+
+.category-item a {
+    text-decoration: none;
+    color: #000;
+}
+
+.subcategories-container {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    background: #fff;
+    border: 1px solid #ddd;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    display: flex;
+}
+
+.subcategories-list {
+    list-style: none;
+    margin: 0;
+    padding: 10px;
+}
+
+.subcategories-list li {
+    margin: 0;
+    padding: 5px 0;
+}
+
+.subcategories-list li a {
+    text-decoration: none;
+    color: #000;
+}
+
+.category-item:hover .subcategories-container {
+    display: flex;
+}
+
diff --git a/js/categoryjs.js b/js/categoryjs.js
index 50027403..a6f01bbc 100644
--- a/js/categoryjs.js
+++ b/js/categoryjs.js
@@ -3,6 +3,8 @@ document.addEventListener("DOMContentLoaded", function () {
 
     function createCategoryItem(categoryData) {
         const categoryItem = document.createElement("li");
+        categoryItem.classList.add("category-item");
+
 
         const icon = document.createElement("img");
         icon.src = "img/" + categoryData.icon;
@@ -18,30 +20,29 @@ document.addEventListener("DOMContentLoaded", function () {
         categoryItem.appendChild(icon);
         categoryItem.appendChild(name);
 
-        const subcategoriesList = document.createElement("ul");
+        // const subcategoriesList = document.createElement("ul");
+
+        if (categoryData.subcategories && categoryData.subcategories.length > 0) {
+            const subcategoriesList = document.createElement("ul");
+            subcategoriesList.classList.add("subcategories-list");
 
-        if (!categoryData.subcategories) {
-            const singleItem = document.createElement("li");
-            const singleLink = document.createElement("a");
-            singleLink.href = categoryData.name + "-/";
-            singleLink.textContent = categoryData.name;
-            singleItem.appendChild(singleLink);
-            subcategoriesList.appendChild(singleItem);
-        } else {
             categoryData.subcategories.forEach(function (subcategoryData) {
-                if (subcategoryData && subcategoryData.name === undefined) {
-                    const singleItem = document.createElement("li");
-                    singleItem.textContent = subcategoryData;
-                    subcategoriesList.appendChild(singleItem);
+                const subcategoryItem = document.createElement("li");
+
+                if (typeof subcategoryData === 'string') {
+                    subcategoryItem.textContent = subcategoryData;
                 } else if (subcategoryData) {
-                    const subcategoryItem = createCategoryItem(subcategoryData);
-                    subcategoriesList.appendChild(subcategoryItem);
+                    const subcategoryLink = document.createElement("a");
+                    subcategoryLink.href = subcategoryData.name + "-/";
+                    subcategoryLink.textContent = subcategoryData.name;
+                    subcategoryItem.appendChild(subcategoryLink);
                 }
+
+                subcategoriesList.appendChild(subcategoryItem);
             });
-        }
 
-        categoryItem.appendChild(subcategoriesList);
-        // console.log(categoryItem);
+            categoryItem.appendChild(subcategoriesList);
+        }
 
         return categoryItem;
     }
@@ -55,4 +56,4 @@ document.addEventListener("DOMContentLoaded", function () {
             });
         })
         .catch(error => console.error('Error fetching category data:', error));
-});
+});
\ No newline at end of file

From 69fbf229fece17417cd5d3eec542c98ea5e4aae5 Mon Sep 17 00:00:00 2001
From: Shristi Sharan <shristisharan05@gmail.com>
Date: Tue, 18 Jun 2024 14:42:42 +0530
Subject: [PATCH 2/5] updated

---
 css/index.css | 307 +++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 268 insertions(+), 39 deletions(-)

diff --git a/css/index.css b/css/index.css
index de69c969..3432a0e8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -12,7 +12,39 @@ body {
   background: #dcdcdc !important;
   overflow-x: hidden;
 }
-
+/* Scrollbar */
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: #f5f5f5;
+  border-radius: 10px;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  background-color: #f5f5f5;
+  transition: width 0.3s;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #fff;
+  background-image: -webkit-gradient(
+    linear,
+    40% 0%,
+    75% 84%,
+    from(#0d6efd),
+    color-stop(0.4, #0d6efd), 
+    color-stop(0.5, #1d7bfd), 
+    color-stop(0.6, #3d8bfd), 
+    to(#3d8bfd)
+  );
+  transition: background-color 0.3s, width 0.3s;
+}
+/* Hover effect */
+::-webkit-scrollbar:hover {
+  width: 14px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: #0d6efd; 
+}
 .navname_ac .bi-chevron-up {
   display: none;
 }
@@ -27,6 +59,7 @@ body {
 
 #categorylist-wrapper {
   margin-top: 8px;
+  width: -webkit-fill-available;
 }
 
 @media screen and (max-width: 770px) {
@@ -60,10 +93,9 @@ body {
   width: 100%;
   min-width: 1000px;
   box-shadow: 0 0 10px rgb(87, 110, 172);
-
 }
 
-.categories>li {
+ .categories>li {
   position: static;
   display: inline-block;
   padding: 20px 15px;
@@ -72,6 +104,8 @@ body {
 
 .categories li a {
   text-decoration: none;
+  color: black;
+  font-weight: 500;
 }
 
 .categories>li>ul {
@@ -91,38 +125,11 @@ body {
   z-index: 500;
 }
 
-.categories>li:hover>ul {
-  display: flex;
-  justify-content: left;
-  align-items: stretch;
-}
-
-.categories>li:hover {
-  background-color: #bac8f6;
-  transition: all 0.5s;
-  border-radius: 20px;
-}
-
-.categories>li:hover>ul>li {
-  margin: 15px 0;
-  flex: 1 1 200px;
-  list-style-type: none;
-}
-
-.categories>li:hover>ul>li li {
-  list-style-type: none;
-  margin: 15px 0;
-  color: rgb(88, 116, 194);
-}
-
-.categories>li:hover>ul li li:hover {
-  color: rgb(112, 112, 166);
-}
 .categories li ul li img{
   display: none;
 }
 
-#category-grid {
+/*#category-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
@@ -147,6 +154,174 @@ body {
 .category h3 {
   font-size: 18px;
   color: #333333;
+}*/
+
+/*Other Top Deals*/
+#category-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.category-container {
+  position: relative;
+  border-radius: 15px;
+  overflow: hidden;
+}
+
+.category {
+  width: 100%; /* Adjust the width as needed */
+  height: auto;
+  display: block;
+  border-radius: 15px;
+}
+
+.show-items-link {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-decoration: none; /* Remove default link styling */
+}
+
+.show-items-btn {
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  display: none;
+  cursor: pointer;
+}
+
+.category-container:hover .show-items-btn {
+  display: block;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #category-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px; /* Adjust gap for smaller screens */
+    margin: 10px; /* Adjust margins for smaller screens */
+  }
+}
+
+@media (max-width: 480px) {
+  #category-grid {
+    grid-template-columns: 1fr;
+    gap: 10px; /* Adjust gap for smallest screens */
+    margin: 5px; /* Adjust margins for smallest screens */
+  }
+}
+/*Other Top Deals*/
+
+.dropdownbox {
+  /* left:20%; */
+  display: none;
+  position: absolute;
+  top:30%;
+  width:240px;
+  /* height:528px; */
+  box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
+  border-radius: 8px;
+  background-color: #fff;
+  color: rgb(43, 42, 42);
+  line-height: 20px;
+  font-size: 12px;
+  z-index: 1000;
+}
+.grocery{
+  left:5%;
+}
+.Mobiles{
+  left: 10%;
+}
+.Fashion{
+  left:20%;
+}
+.electronics{
+  left:30%;
+}
+.home-furniture{
+  left:40%;
+}
+.appliances{
+  left: 50%;
+}
+.travel{
+  left:65%;
+}
+.beauty{
+  left:70%;
+}
+.twowheelers{
+  left:80%;
+}
+
+.dropdownbox > div > div + div{
+  display: none;
+  position: absolute;
+  top:0%;
+  width:240px;
+  left: 100%;
+  box-shadow: 0 8px 8px 1px rgba(0, 0, 0, .3);
+  border-radius: 8px;
+  background-color: #fff;
+  line-height: 20px;
+}
+
+.dropdownbox > div:hover > div + div{
+  display: block;
+}
+
+.sidearrow{
+  display: none;
+  position: absolute;
+  right: 30px;
+  height: 6px;
+  width: 6px;
+  margin: 15px 0 15px 0;
+  border-color: #111112;
+  border-style: solid;
+  border-width: 0 1px 1px 0;
+  transform-origin: 50% 50%;
+  transform: translateY(75%) rotate(-45deg);
+}
+.dropdownbox > div{
+  display: flex;
+}
+.dropdownbox > div > div:not(.subdropdown){
+  padding: 12px 16px;
+}
+.dropdownbox > div:hover > div:not(.subdropdown){
+  font-weight:bold;
+}
+.dropdownbox > div:hover{
+  background-color:#cbdcf7;
+}
+.dropdownbox > div:hover >.sidearrow{
+  display: block;
+}
+.subdropdown > div:first-child {
+  font-weight: bold;
+}
+.dropdownbox > div > div > div{
+  padding: 12px 16px;
+  font-size: 12px;
+}
+
+.subdropdown > div:hover{
+  font-weight: bold;
+}
+
+.navbar{
+  display: grid;
+  grid-auto-flow: column;
 }
 
 /*adding transition property to the images of the cateogory-grid section*/
@@ -171,11 +346,37 @@ body {
   transform: scale(1.1);
 }
 
-/* Search Bar */
-#searchbar input {
+Search Bar 
+#searchbar{
+  width: 100%;
+  
+}
+ #searchbar input {
   transition: border-color 0.3s ease-in-out;
+ 
 }
 
+#searchbar {
+  display: flex; /* Ensures flex layout */
+  align-items: center; /* Centers items vertically */
+  min-width: 40%; 
+  
+}
+
+#searchbar .flex-grow {
+  flex-grow: 1; /* Allows the input to grow */
+}
+
+#searchbar .searchbar {
+  width: 100%; /* Makes the input take up available space */
+  min-width: 700px;
+  flex-grow: 1;
+  padding: 8px;
+   
+  box-sizing: border-box; /* Ensures padding is included in width */
+}
+
+
 #searchbar input:focus {
   border-color: #2874F0; /* Change the border color on focus */
 }
@@ -239,12 +440,12 @@ body {
   width: 100%;
   height: auto;
   transition: transform 0.3s ease-in-out;
-}
+} 
 
 #img-box img:hover {
   transform: scale(1.2);
   opacity: 0.82;
-}
+} */
 
 /* product best for you */
 #s1-product .products {
@@ -293,6 +494,7 @@ body {
   /* Increased box shadow on hover */
 }
 
+
 #faq .accordion .card-header {
   background-color: #fff;
   border: none;
@@ -393,12 +595,13 @@ body {
 #goToTopBtn {
   /* display: none; */
   position: fixed;
-  bottom: 5px;
+  bottom: 45px;
   right: 50%;
-  background-color: rgba(235, 66, 66, .5);
+  left: 50%;
+  background-color: hsla(217, 87%, 55%, 0.7);
   color: #fff;
   border: none;
-  border-radius: 10px;
+  border-radius: 50%;
   width: 40px;
   height: 40px;
   cursor: pointer;
@@ -406,7 +609,7 @@ body {
 }
 
 #goToTopBtn:hover {
-  background-color: #2874F0;
+  background-color: hsl(217, 87%, 45%);
 }
 
 .hidden {
@@ -503,3 +706,29 @@ body {
   }
 }
 
+.text{
+  background-color: white;
+  padding: 20px 30px;
+  font-size: 11px;
+  
+}
+.main1{
+  font-size: 16px;
+  color: #878787;
+}
+.heading1{
+  font-weight: 500;
+  font-size: 16px;
+  color: #878787;
+
+.brand-directory{
+  background-color: white;
+  padding: 20px 30px;
+  color: #878787;
+  letter-spacing: 0;
+
+}
+.brand-directory-heading{
+  font-weight: 24px;
+  color:black ;
+

From 32ea11b5f0f239a6df100ea74f11ac350fbd190d Mon Sep 17 00:00:00 2001
From: Shristi Sharan <shristisharan05@gmail.com>
Date: Tue, 18 Jun 2024 15:38:16 +0530
Subject: [PATCH 3/5] feat-#1021: Modifying the Category Selection and removing
 the repeating category element

---
 css/categories.css | 122 +++++++++++++++++++++++++++++++++++++++++++--
 css/index.css      |  37 +++-----------
 2 files changed, 123 insertions(+), 36 deletions(-)

diff --git a/css/categories.css b/css/categories.css
index 69af8dde..50e7ff81 100644
--- a/css/categories.css
+++ b/css/categories.css
@@ -1,3 +1,116 @@
+.categorylist-wrapper {
+  width: 100vw;
+  overflow-x: scroll;
+  /* z-index: 500; */
+}
+
+.categorylist-wrapper::-webkit-scrollbar {
+  display: none;
+}
+
+
+.categories {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  background-color: rgb(255, 253, 253);
+  position: relative;
+  padding: 0 4%;
+  width: 100%;
+  min-width: 1000px;
+  box-shadow: 0 0 10px rgb(87, 110, 172);
+
+}
+
+.categories>li {
+  position: static;
+  display: inline-block;
+  padding: 20px 15px;
+  /* cursor: pointer; */
+}
+
+.categories li a {
+  text-decoration: none;
+}
+
+.categories > li > .subcategories-container {
+  display: none;
+  position: fixed;
+  background-color: #fff;
+  padding: 15px;
+  gap: 15px 5px;
+  flex-wrap: wrap;
+  width: auto;
+  max-width: 300px;
+  height: auto;
+  left: 100%;
+  top: 0;
+  font-size: 14px;
+  overflow: hidden;
+  z-index: 500;
+  border: 1px solid #ddd;
+}
+
+.categories > li:hover > .subcategories-container {
+  display: block;
+}
+
+.categories > li:hover {
+  background-color: #bac8f6;
+  transition: all 0.5s;
+  border-radius: 20px;
+}
+
+.categories > li > .subcategories-container > .subcategories-list > li {
+  margin: 15px 0;
+  flex: 1 1 200px;
+  list-style-type: none;
+}
+
+.categories > li > .subcategories-container > .subcategories-list > li:hover {
+  color: rgb(112, 112, 166);
+}
+.categories li ul li img{
+  display: none;
+}
+
+#category-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.category {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease 0.1s, width 2s, height 2.5s;
+
+}
+
+.category:hover {
+  transform: scale(1.1025);
+}
+
+.category h3 {
+  font-size: 18px;
+  color: #333333;
+}
+
+/*adding transition property to the images of the cateogory-grid section*/
+#category-grid img {
+  transition: transform 0.3s ease-in-out;
+}
+
+#category-grid img:hover {
+  transform: scale(1.1);
+  opacity: 0.82;
+}
+
 #categories {
     list-style: none;
     padding: 0;
@@ -6,6 +119,7 @@
 .category-item {
     position: relative;
     padding: 10px;
+    cursor: pointer;
 }
 
 .category-item a {
@@ -16,13 +130,12 @@
 .subcategories-container {
     display: none;
     position: absolute;
-    top: 100%;
-    left: 0;
+    top: 0;
+    left: 100%;
     background: #fff;
     border: 1px solid #ddd;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     z-index: 1000;
-    display: flex;
 }
 
 .subcategories-list {
@@ -42,6 +155,5 @@
 }
 
 .category-item:hover .subcategories-container {
-    display: flex;
+    display: block;
 }
-
diff --git a/css/index.css b/css/index.css
index 3432a0e8..ec8d8a9f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -129,34 +129,7 @@ body {
   display: none;
 }
 
-/*#category-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 40px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
-.category {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.3s ease 0.1s, width 2s, height 2.5s;
 
-}
-
-.category:hover {
-  transform: scale(1.1025);
-}
-
-.category h3 {
-  font-size: 18px;
-  color: #333333;
-}*/
-
-/*Other Top Deals*/
 #category-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -201,7 +174,7 @@ body {
 .category-container:hover .show-items-btn {
   display: block;
 }
-
+ 
 /* Responsive adjustments */
 @media (max-width: 768px) {
   #category-grid {
@@ -234,6 +207,8 @@ body {
   line-height: 20px;
   font-size: 12px;
   z-index: 1000;
+  margin-top: 25px;
+
 }
 .grocery{
   left:5%;
@@ -260,7 +235,7 @@ body {
   left:70%;
 }
 .twowheelers{
-  left:80%;
+  right:15%;
 }
 
 .dropdownbox > div > div + div{
@@ -720,7 +695,7 @@ Search Bar
   font-weight: 500;
   font-size: 16px;
   color: #878787;
-
+}
 .brand-directory{
   background-color: white;
   padding: 20px 30px;
@@ -731,4 +706,4 @@ Search Bar
 .brand-directory-heading{
   font-weight: 24px;
   color:black ;
-
+}
\ No newline at end of file

From 2b3b7b1ac4781f8021bc4960a5054b8cccd608b7 Mon Sep 17 00:00:00 2001
From: Shristi Sharan <shristisharan05@gmail.com>
Date: Tue, 18 Jun 2024 17:36:08 +0530
Subject: [PATCH 4/5] ReadMe updated with environment setup

---
 README.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6e4f467f..24863f74 100644
--- a/README.md
+++ b/README.md
@@ -115,8 +115,13 @@
    ```bash
    git switch -c <your-branch-name>
    ```
+6. **Setup Environment:** 
+   ```bash
+      npm install
+   ```
+7. **To preview** Go to index.html and "Go Live" to view in localhost
 
-6. **Make changes:** Deployment failed with the following error:
+8. **Make changes:** Deployment failed with the following error:
 ```bash
    Resource is limited - try again in 2 hours (more than 100, code: "api-deployments-free-per-day").
 ```

From 498afb108e105dd076074d5ab7daeed2f58d4b47 Mon Sep 17 00:00:00 2001
From: Shristi Sharan <shristisharan05@gmail.com>
Date: Tue, 18 Jun 2024 17:55:54 +0530
Subject: [PATCH 5/5] "Environment setup added

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 24863f74..b8388d4d 100644
--- a/README.md
+++ b/README.md
@@ -119,7 +119,9 @@
    ```bash
       npm install
    ```
-7. **To preview** Go to index.html and "Go Live" to view in localhost
+   
+7. **To preview:** Go to index.html and "Go Live" to view in localhost
+
 
 8. **Make changes:** Deployment failed with the following error:
 ```bash