Items added

cart.html

@@ -22,24 +22,65 @@
             </div>
         </header>
         <div class="listProduct">
-            <div class="item">
+    <div class="item">
                 <img src="Shop/Tshirt Fitness Planet.PNG" alt="Product 1" class="pictur">
                 <h2>Tshirt Fitness Planet</h2>
                 <div class="price">₹499</div>
                 <button class="addCart">Add to Cart</button>
             </div>
             <div class="item">
-                <img src="images/product2.jpg" alt="Product 2">
-                <h2>Classic Watch</h2>
-                <div class="price">$79.99</div>
+                <img src="Shop/Treadmill.webp" alt="Product 2" class="pictur">
+                <h2>Treadmill</h2>
+                <div class="price">₹36,999</div>
+                <button class="addCart">Add to Cart</button>
+            </div>
+            <div class="item">
+                <img src="Shop/Dumbbells.webp" alt="Product 3">
+                <h2>Dumbbells</h2>
+                <div class="price">₹799</div>
                 <button class="addCart">Add to Cart</button>
             </div>
+
+            <div class="item">
+                <img src="Shop/Perplexity cap.avif" alt="Product 4">
+                <h2>Perplexity Cap</h2>
+                <div class="price">₹2199</div>
+                <button class="addCart">Add to Cart</button>
+            </div>  
+
+            <!-- first line ends -->
+            <!-- second line starts -->
+
             <div class="item">
-                <img src="images/product3.jpg" alt="Product 3">
-                <h2>Denim Jacket</h2>
-                <div class="price">$99.99</div>
+                <img src="Shop/Trackpants.webp" alt="Product 5">
+                <h2>Track Pant</h2>
+                <div class="price">₹1,199</div>
                 <button class="addCart">Add to Cart</button>
             </div>
+
+            <div class="item">
+                <img src="Shop/shorts.avif" alt="Product 6">
+                <h2>GYM Shorts</h2>
+                <div class="price">₹799</div>
+                <button class="addCart">Add to Cart</button>
+            </div>
+
+            <div class="item">
+                <img src="Shop/cycle.avif" alt="Product 7">
+                <h2>Exercise Bike</h2>
+                <div class="price">₹35,999</div>
+                <button class="addCart">Add to Cart</button>
+            </div>
+
+            <div class="item">
+                <img src="Shop/rope.avif" alt="Product 8">
+                <h2>Skipping Rope</h2>
+                <div class="price">₹799</div>
+                <button class="addCart">Add to Cart</button>
+            </div>
+
+            <!-- second line ends -->
+
         </div>
     </div>
     <div class="cartTab">

cart.js

@@ -20,15 +20,45 @@ products = [
     },
     {
         id: 2,
-        name: "Classic Watch",
-        price: 79.99,
-        image: "images/product2.jpg"
+        name: "Treadmill",
+        price: 36999,
+        image: "Shop/Treadmill.webp"
     },
     {
         id: 3,
-        name: "Denim Jacket",
-        price: 99.99,
-        image: "images/product3.jpg"
+        name: "Dumbbells",
+        price: 799,
+        image: "Shop/Dumbbells.webp"
+    },
+    {
+        id: 4,
+        name: "Perplexity Cap",
+        price: 2199,
+        image: "Shop/Perplexity cap.avif"
+    },
+    {
+        id: 5,
+        name: "Track Pant",
+        price: 1199,
+        image: "Shop/Trackpants.webp"
+    },
+    {
+        id: 6,
+        name: "GYM Shorts",
+        price: 799,
+        image: "Shop/shorts.avif"
+    },
+    {
+        id: 7,
+        name: "Exercise Bike",
+        price: 35999,
+        image: "Shop/cycle.avif"
+    },
+    {
+        id: 8,
+        name: "Skipping Rope",
+        price: 799,
+        image: "Shop/rope.avif"
     }
 ];
 

index.html

@@ -32,7 +32,6 @@ <h5>WELCOME TO PLANET FITNESS PLANET</h5>
                     <div class="input-area">
                         <input type="text" class="prompt" placeholder="Ask anything">
                         <button type="button" class="arrow"><img src="pictures/btn.svg" alt="img"></button>
-
                     </div>
 
                 </div>

navbar.css

@@ -104,122 +104,6 @@ body {
     background-color: #cdc7c7b1;
 }
 
-.chatbox {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    width: 350px;
-    max-height: 500px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 20px;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-    opacity: 0;
-    transform: translateY(20px);
-    pointer-events: none;
-    transition: opacity 0.3s ease, transform 0.3s ease;
-    z-index: 1000;
-}
-
-.chatbox.active {
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
-}
-
-.chat-container{
-    width:100%;
-    height:70%;
-    overflow:auto;
-    min-height: 300px;
-    overflow-y: auto;
-    padding-right: 10px;
-}
-
-.h1{
-    font-size: 3vw;
-    text-align: center;
-    color: #fff;
-}
-.input-area{
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    background: rgba(255, 255, 255, 0.1);
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 0 0 20px 20px;
-    gap: 10px;
-}
-
-.arrow {
-    width: 45px;
-    height: 45px;
-    margin: 0px;
-    background: rgba(0, 0, 0, 0.6);
-    border: none;
-    border-radius: 50%;
+.chatboticon{
     cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.3s ease;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-/* White arrow */
-.arrow img {
-    width: 20px;
-    height: 20px;
-    filter: brightness(0) invert(1);
-}
-
-/* Prevent blue glow on hover and add subtle effect */
-.arrow:hover {
-    background: rgba(0, 0, 0, 0.8);
-}
-
-
-.prompt {
-    flex: 1;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 20px;
-    outline: none;
-    font-size: 14px;
-    background: rgba(255, 255, 255, 0.2);
-    color: white;
-}
-
-.user-chat-box {
-    background-color: rgba(0, 0, 0, 0.8);
-    color: white;
-    align-self: flex-end;
-    padding: 10px 15px;
-    margin: 8px;
-    max-width: 70%;
-    border-radius: 20px 20px 0 20px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    margin-left: auto;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    border-bottom-left-radius: 12px;
-}
-.ai-chat-box {
-    background-color: rgba(255, 255, 255, 0.85);
-    color: black;
-    align-self: flex-start;
-    padding: 10px 15px;
-    margin: 8px;
-    max-width: 70%;
-    border-radius: 20px 20px 20px 0;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-    margin-right: auto;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
 }

navbar.html

@@ -14,7 +14,7 @@ <h4 class="navbar"><a href="index.html#bmi-section">BMI</a></h4>
             <h4 class="navbar"><a href="about.html">About Us</a></h4>
             <h4 class="navbar"><a href="cart.html">Store</a></h4>
             <h4 class="navbar"><a href="signin.html">Sign In</a></h4>
-            <img class="navbar" src="pictures/chatbot.svg" alt="chatbot-png">
+            <img class="navbar chatboticon" src="pictures/chatbot.svg" alt="chatbot-png">
         </div>
     </div>
 

style.css

@@ -116,7 +116,125 @@ video {
     height:calc(100% - 280px);
     position:relative;
 }
+.chatbox {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    width: 350px;
+    max-height: 500px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    opacity: 0;
+    transform: translateY(20px);
+    pointer-events: none;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    z-index: 1000;
+}
+
+.chatbox.active {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
 
+.chat-container{
+    width:100%;
+    height:70%;
+    overflow:auto;
+    min-height: 300px;
+    overflow-y: auto;
+    padding-right: 10px;
+}
+
+.h1{
+    font-size: 3vw;
+    text-align: center;
+    color: #fff;
+}
+.input-area{
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0 0 20px 20px;
+    gap: 10px;
+}
+
+.arrow {
+    width: 45px;
+    height: 45px;
+    margin: 0px;
+    background: rgba(0, 0, 0, 0.6);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s ease;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* White arrow */
+.arrow img {
+    width: 20px;
+    height: 20px;
+    filter: brightness(0) invert(1);
+}
+
+/* Prevent blue glow on hover and add subtle effect */
+.arrow:hover {
+    background: rgba(0, 0, 0, 0.8);
+}
+
+
+.prompt {
+    flex: 1;
+    border: none;
+    padding: 10px 15px;
+    border-radius: 20px;
+    outline: none;
+    font-size: 14px;
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.user-chat-box {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    align-self: flex-end;
+    padding: 10px 15px;
+    margin: 8px;
+    max-width: 70%;
+    border-radius: 20px 20px 0 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    margin-left: auto;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+.ai-chat-box {
+    background-color: rgba(255, 255, 255, 0.85);
+    color: black;
+    align-self: flex-start;
+    padding: 10px 15px;
+    margin: 8px;
+    max-width: 70%;
+    border-radius: 20px 20px 20px 0;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    margin-right: auto;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
 
 
 /* page 2 */