From a3b1228f660afeeb645b09edeb4c24dd7f587d22 Mon Sep 17 00:00:00 2001
From: aditya07389 <kradi2004@gmail.com>
Date: Sat, 19 Oct 2024 09:03:39 +0530
Subject: [PATCH 1/2] improved about us page

---
 aboutus.html | 75 +++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 60 insertions(+), 15 deletions(-)
diff --git a/aboutus.html b/aboutus.html
index b68c19aa..94090f02 100644
--- a/aboutus.html
+++ b/aboutus.html
@@ -11,6 +11,9 @@
 
     <link rel="stylesheet" href="style.css">
     <link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
+    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
+
     <style>
         body {
 
@@ -37,16 +40,20 @@
             padding: 40px 0;
         }
 
-        h1,h2
+        h2
          {
             color: #c7becf;
             text-align: center;
             margin-bottom: 40px;
         }
-        h1 span{
-            color: #f4be0c;
+        h1{
+            color: black;
+            text-align: center;
+        }
+        h1:hover{
+            transform: scale(1.2);
+            animation: zoom-out 1200  300;
         }
-
         /* h2{
             color: #f4be0c;
             text-align: center;
@@ -122,10 +129,44 @@
                 opacity: 1;
             }
         }
+        .head{
+            text-align: center;
+        }
+        .h2 {
+    display: inline-block; /* Ensures the animation applies correctly */
+    overflow: hidden; /* Hides the text that is not yet visible */
+    white-space: nowrap; /* Prevents the text from wrapping */
+    border-right: 3px solid; /* Creates a cursor effect */
+    
+    animation: typing 2.5s steps(15), blink-caret 0.75s step-end infinite; /* Adjust steps based on characters */
+}
+
+/* Typing effect */
+@keyframes typing {
+    from {
+        width: 0; /* Start with no width */
+    }
+    to {
+        width: 15ch; /* End with width equal to the length of the text */
+    }
+}
+
+/* Blinking cursor effect */
+@keyframes blink-caret {
+    from, to {
+        border-color: transparent; /* No border */
+    }
+    50% {
+        border-color: black; /* Visible border */
+    }
+}
+
     </style>
 </head>
 
 <body>
+    
+      
     <div class="navbar">
         <div class="logo-outer">
             <a href="/"> <img src="images/logo.png" class="logo" alt="Logo"></a>
@@ -173,55 +214,57 @@
 
     <div class="container main-content">
         <h1>About <span> Gaming </span>Tools</h1>
-        <p class="intro">Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're
+        <p class="intro typewriter">Welcome to GamingTools, your ultimate destination for premium gaming accessories. We're
             passionate about providing gamers with the best tools to elevate their gaming experience to new heights.</p>
+        <div class="head">
+            <h2 class="h2">Why Choose Us?</h2>
+        </div>
 
-        <h2>Why Choose Us?</h2>
         
         <div class="features-grid">
-            <div class="feature">
+            <div class="feature" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-gamepad feature-icon"></i>
                 <h3>Wide Range of Accessories</h3>
                 <p>From controllers to VR headsets, we offer a comprehensive selection for all gaming platforms.</p>
             </div>
 
-            <div class="feature">
+            <div class="feature" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-tags feature-icon"></i>
                 <h3>Competitive Pricing</h3>
                 <p>Get the best gaming gear at unbeatable prices, with regular discounts and promotions.</p>
             </div>
 
-            <div class="feature">
+            <div class="feature" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-truck feature-icon"></i>
                 <h3>Free Shipping</h3>
                 <p>Enjoy free courier services on all orders, making it easy to get your hands on the latest gear.</p>
             </div>
 
-            <div class="feature">
+            <div class="feature" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-user-shield feature-icon"></i>
                 <h3>Secure Shopping</h3>
                 <p>Shop with confidence using our secure checkout process to protect your information.</p>
             </div>
 
-            <div class="feature">
+            <div class="feature" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-exchange-alt feature-icon"></i>
                 <h3>Easy Returns</h3>
                 <p>Hassle-free returns and exchanges to ensure your complete satisfaction with every purchase.</p>
             </div>
 
-            <div class="feature">
+            <div class="feature" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-headset feature-icon"></i>
                 <h3>Customer Support</h3>
                 <p>Our dedicated team is always ready to assist you with any questions or concerns.</p>
             </div>
 
-            <div class="feature">
+            <div class="feature" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-star feature-icon"></i>
                 <h3>Product Reviews</h3>
                 <p>Make informed decisions with help from our customer reviews and ratings.</p>
             </div>
 
-            <div class="feature">
+            <div class="feature" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
                 <i class="fas fa-question-circle feature-icon"></i>
                 <h3>FAQs Section</h3>
                 <p>Find quick answers to common questions in our comprehensive FAQ section.</p>
@@ -362,7 +405,9 @@ <h2>Feedback Form</h2>
     <div class="gtranslate_wrapper"></div>
     <script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
     <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
-
+    <script>
+        AOS.init();
+      </script>
 
 </body>
 

From 2966956fe7ac7ae32a92c942fd1c2b2a3a5d47f2 Mon Sep 17 00:00:00 2001
From: aditya07389 <kradi2004@gmail.com>
Date: Sat, 19 Oct 2024 12:58:18 +0530
Subject: [PATCH 2/2] addtocart

---
 index.html | 86 ++++++++++++++++++++++++++++++++++++++++++++----------
 style.css  | 34 ++++++++++++++++++---
 2 files changed, 100 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index d6e4689d..a77180d1 100644
--- a/index.html
+++ b/index.html
@@ -55,16 +55,27 @@
                             <span class="slider"></span>
                         </label></li>
                     <!-- Inside the navbar ul -->
-                    <a href="#" class="cart-button">
+                    <a href="#" class="cart-button" id="cart-icon">
                         <img src="images/cart.png" alt="Cart Icon">
                         <span id="cart-count">0</span>
                         </a>
                 </ul>
 
+                
+
                 <!-- Hamburger Menu Icon -->
                 <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
             </nav>
         </div>
+        <div id="cart-popover" class="popover">
+            <div class="popover-content" id="popover-content">
+                <p>Your cart is empty</p>
+                
+            </div>
+            <div style="align-items: center;">
+                <button style="border-radius: 4px;">Checkout</button>
+            </div>
+        </div>
         </nav>
 
         <nav>
@@ -152,7 +163,7 @@ <h3>Wireless Controllers for PlayStation 4</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -182,7 +193,7 @@ <h3>Controllers for Xbox One and Series X</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -214,7 +225,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -246,7 +257,7 @@ <h3>VR Headset from Meta</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -278,7 +289,7 @@ <h3>VR Headset from Apple</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -310,7 +321,7 @@ <h3>High Performance Gaming Mouse</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -341,7 +352,7 @@ <h3>Mechanical Gaming Keyboard</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -372,7 +383,7 @@ <h3>Wireless Gaming Headset</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -403,7 +414,7 @@ <h3>Ergonomic Gaming Chair</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -719,13 +730,56 @@ <h2>Feedback Form</h2>
 
     <script>
         let cartItemCount = 0;
-
-        // Function to handle Add to Cart button click
-        document.getElementById('cart-btn').addEventListener('click', function () {
-            cartItemCount++; // Increment cart count
-            document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
-            alert('Item added to cart'); // Show alert
+let cartItems = [];
+
+// Handle Add to Cart button click for all buttons with the class 'cart-btn'
+const cartButtons = document.querySelectorAll('.cart-btn');
+
+cartButtons.forEach((button) => {
+    button.addEventListener('click', function () {
+        cartItemCount++; // Increment cart count
+        document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
+
+        // Get the item name from the closest .col-1 element
+        const itemName = this.closest('.col-1').querySelector('.card-heading').textContent;
+
+        const newItem = `${itemName} ${cartItemCount}`; // Example item, you can change this
+        cartItems.push(newItem); // Add item to the cart
+
+        
+    });
+});
+
+// Handle Cart Button click to toggle popover
+document.getElementById('cart-icon').addEventListener('click', function (e) {
+    e.preventDefault();
+    const popover = document.getElementById('cart-popover');
+    const popoverContent = document.getElementById('popover-content');
+
+    if (cartItems.length > 0) {
+        popoverContent.innerHTML = ''; // Clear the popover content
+        cartItems.forEach((item, index) => {
+            const itemElement = document.createElement('p');
+            itemElement.textContent = `${index + 1}. ${item}`;
+            popoverContent.appendChild(itemElement);
         });
+    } else {
+        popoverContent.innerHTML = '<p>Your cart is empty</p>';
+    }
+
+    // Toggle popover visibility
+    popover.style.display = popover.style.display === 'block' ? 'none' : 'block';
+});
+
+// Close the popover if clicked outside
+document.addEventListener('click', function (e) {
+    const cartButton = document.getElementById('cart-icon');
+    const popover = document.getElementById('cart-popover');
+
+    if (!cartButton.contains(e.target) && !popover.contains(e.target)) {
+        popover.style.display = 'none';
+    }
+});
 
     </script>
     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
diff --git a/style.css b/style.css
index 83f7ea5e..228d17b3 100644
--- a/style.css
+++ b/style.css
@@ -10,6 +10,32 @@ html {
   scroll-behavior: smooth;
 }
 
+/* Style for the popover */
+.popover {
+  display: none;
+  position: fixed;
+  top: 50px; 
+  right: 20px; 
+  background-color: bisque;
+  border: 1px solid black;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 200px;
+  height: 200px;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+
+.popover-content {
+  padding: 10px;
+  max-height: 200px;
+  
+}
+.popover-content p{
+  color: black;
+}
 html::-webkit-scrollbar {
   width: 12px; /* Increased the scrollbar width */
   transition: width 0.3s ease;
@@ -537,7 +563,7 @@ button {
   transform: translateX(5px); /* Slightly move the icon to the right on hover */
 }
 
-#cart-btn {
+.cart-btn {
   padding: 12px 14px; /* Padding for the cart button */
   display: flex; /* Use flexbox for alignment */
   align-items: center; /* Center align items vertically */
@@ -550,18 +576,18 @@ button {
   transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transition for background color */
 }
 
-#cart-btn:hover {
+.cart-btn:hover {
   width: 160px; /* Increased width on hover */
   background-color: #e53935; /* Darker red on hover */
 }
 
-#cart-btn img {
+.cart-btn img {
   width: 18px; /* Icon size */
   opacity: 0; /* Initially hidden */
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for opacity and transform */
 }
 
-#cart-btn:hover img {
+.cart-btn:hover img {
   opacity: 1; /* Fully visible on hover */
   transform: translateX(5px); /* Slightly move the icon to the right on hover */
 }
