index.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collect your GamingTools</title>

    <!--adding meta keywords and description -->
    <meta name="keywords"
        content="gaming tools, game accessories, gaming gear, gaming equipment, gaming setup, game controller, gaming mouse, gaming keyboard, gaming headset, gaming software, eSports tools, gaming community, gaming chair, VR gaming tools, game streaming equipment, console gaming, PC gaming, mobile gaming, gaming tips, game reviews, gaming news">
    <meta name="description"
        content="Collect and discover the ultimate gaming tools and accessories to enhance your gaming experience. From high-performance controllers and mice to immersive headsets and VR gaming equipment, we have everything you need for console, PC, and mobile gaming. Join our gaming community for tips and reviews to stay ahead in the game!">

    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
        integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMhZj7z9qvhs8kcJ6D6t3h7jsKK4Gk16+/D57g" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./popup/popup.css" />
    <link rel ="stylesheet" href="./Loader/Loader.css"/>
    <link rel="manifest" href="/manifest.json">
</head>

<body>
    <div class="loader" id="loader"></div>
    <div class="main-content">
    <div id="progressBarContainer">
        <div id="progressBar"></div>
    </div>

    <div class="container">

        <div class="navbar">
            <div class="logo-outer">
                <a href="/"> <img src="images/logo.png" class="logo" alt="Logo"></a>
                <a href="/"><span class="website-name">Collect your GamingTools</span></a>
            </div>
            <nav>
                <ul>
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="./aboutus.html">About Us</a></li>
                    <li><a href="#controller">Game Controllers</a></li>
                    <li><a href="#vrsection">VR Accessories</a></li>
                    <li><a href="#keyboard">Gaming Keyboard</a></li>
                    <li><a href="#others">Others</a></li>

                    <li class="login"><a href="login/login.html">Login</a></li>
                    <li><label class="switch">
                            <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
                            <span class="slider"></span>
                        </label></li>
                    <!-- Inside the navbar ul -->
                    <a href="#" class="cart-button">
                        <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>
        </nav>

        <nav>
            <ul id="menuList">
                <li><a href="#controller">Game Controllers</a></li>
                <li><a href="#vrsection">VR Accessories</a></li>
                <li><a href="#keyboard">Gaming Keyboard</a></li>
                <li><a href="#others">Others</a></li>
                <li class="login"><a href="login/login.html">Login</a></li>
                <!-- Theme Toggle -->
                <li><label class="switch">
                        <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
                        <span class="slider"></span>
                    </label></li>
            </ul>
            <!-- Hamburger Menu Icon -->
            <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
        </nav>

        <section class="hero">
            <div class="overlay"></div>
            <div class="hero-content">
                <!-- Search Bar (initially hidden) -->

                <div class="searchbar-outer">
                    <div class="search-bar hidden" id="searchBar">
                        <input type="text" id="search-input" placeholder="Search..." />
                        <button type="button" onclick="performSearch()"><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <h1 data-aos="fade-down">Welcome to GamingTools</h1>
                <p data-aos="fade-down">Your one-stop shop for all gaming accessories.</p>
                <a href="#controller" class="cta-btn" data-aos="fade-down">Explore Products</a>
            </div>
        </section>

        <!-- Pop-up for email registration  HTML Goes Here -->


        <div id="popup" class="popup">
            <div class="popup-content">
                <div class="popup-left">
                    <img src="images/popup.png" alt="Gaming Tools Image" loading="lazy">
                </div>

                <div class="popup-right">
                    <a href="# " class="close1-btn"> <img src="images/logo.png" class="logo1" alt="Logo"></a>
                    <h1>Unlock the Ultimate Gaming Experience!</h1>
                    <h2 class="h2">Sign up for exclusive offers & updates</h2>
                    <p class="pop_up">Join our community and get upto <strong class="bold">30% off</strong> on your first deal</p>
                    <form id="emailForm">
                        <input type="email" id="email" placeholder="Enter your email" required>
                        <button type="submit" class="signup-btn1">Get 30% Off Now</button>
                    </form>
                    <a href="#" class="no-thanks close1-btn">No thanks</a>
                    <p class="terms">By signing up, you agree to our <a href="terms.html">Terms of Service</a> and <a
                            href="PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a>.</p>
                </div>
            </div>
        </div>

        <!-- Pop up HTML Ends here -->


        <!-- PS4 Controller Section -->

        <div class="row" id="controller">

            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">PS4 V2 Dualshock 4</h2>
                <h3>Wireless Controllers for PlayStation 4</h3>
                <p>(Compatible/Generic)</p>
                <div class="price">
                    <span class="original-price">&#8377;5500</span>
                    <span class="discounted-price">&#8377;3999</span>
                    <span class="discount">30% off</span>
                </div>
                <div class="rating">
                    <span>★★★★☆</span>
                    <p>(2252 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">4.1</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/controller1.png" class="controller" alt="Controller" loading="lazy">
                <div class="color-box"></div>
            </div>
        </div>

        <!-- Xbox Controller Section -->
        <div class="row">
            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">Xbox Wireless Controller</h2>
                <h3>Controllers for Xbox One and Series X</h3>
                <p>(Official)</p>
                <div class="price">
                    <span class="original-price">&#8377;4500</span>
                    <span class="discounted-price">&#8377;3499</span>
                    <span class="discount">22% off</span>
                </div>
                <div class="rating">
                    <span>★★★★★</span>
                    <p>(1189 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">4.8</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/newcontroller3.png" class="controller" alt="Controller" loading="lazy">
                <!-- replaced old blurry image with enhanced image -->
                <div class="color-box"></div>

            </div>
        </div>

        <!-- Nintendo Switch Controller Section -->
        <div class="row">
            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">Nintendo Switch Pro Controller</h2>
                <h3>Wireless Controllers for Nintendo Switch</h3>
                <p>(Official)</p>
                <div class="price">
                    <span class="original-price">&#8377;6000</span>
                    <span class="discounted-price">&#8377;4999</span>
                    <span class="discount">17% off</span>
                </div>
                <div class="rating">
                    <span>★★★★☆</span>
                    <p>(3145 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">4.2</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/controller2.png" class="controller"
                    alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
                <div class="color-box"></div>

            </div>
        </div>

        <!-- VR Headset Section -->
        <div class="row" id="vrsection">
            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">Meta Quest Pro</h2>
                <h3>VR Headset from Meta</h3>
                <p>(Official)</p>
                <div class="price">
                    <span class="original-price">&#8377;40000</span>
                    <span class="discounted-price">&#8377;35200</span>
                    <span class="discount">12% off</span>
                </div>
                <div class="rating">
                    <span>★★★★☆</span>
                    <p>(871 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">4.2</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/metaquest.jpg" class="controller"
                    alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
                <div class="color-box"></div>

            </div>
        </div>

        <!-- VR Headset Section 2 -->
        <div class="row">
            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">Apple Vision Pro</h2>
                <h3>VR Headset from Apple</h3>
                <p>(Official)</p>
                <div class="price">
                    <span class="original-price">&#8377;293999</span>
                    <span class="discounted-price">&#8377;264599</span>
                    <span class="discount">10% off</span>
                </div>
                <div class="rating">
                    <span>★★★★★</span>
                    <p>(235 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">4.8</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/visionpro.png" class="controller"
                    alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
                <div class="color-box"></div>

            </div>
        </div>

        <!-- Gaming Mouse Section -->
        <div class="row" id="others">
            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">Logitech G502 Hero</h2>
                <h3>High Performance Gaming Mouse</h3>
                <p>(Wired)</p>
                <div class="price">
                    <span class="original-price">&#8377;4000</span>
                    <span class="discounted-price">&#8377;2999</span>
                    <span class="discount">25% off</span>
                </div>
                <div class="rating">
                    <span>★★★★★</span>
                    <p>(9256 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">5.0</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/mouse.png" class="controller" alt="Gaming Mouse" loading="lazy">
                <div class="color-box"></div>

            </div>
        </div>

        <!-- Gaming Keyboard Section -->
        <div class="row" id="keyboard">
            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">Razer BlackWidow</h2>
                <h3>Mechanical Gaming Keyboard</h3>
                <p>(Wired)</p>
                <div class="price">
                    <span class="original-price">&#8377;7000</span>
                    <span class="discounted-price">&#8377;5499</span>
                    <span class="discount">21% off</span>
                </div>
                <div class="rating">
                    <span>★★★★☆</span>
                    <p>(6184 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">4.5</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/keyboard.png" class="controller" alt="Gaming Keyboard" loading="lazy">
                <div class="color-box"></div>

            </div>
        </div>

        <!-- Gaming Headset Section -->
        <div class="row">
            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">SteelSeries Arctis 7</h2>
                <h3>Wireless Gaming Headset</h3>
                <p>(Surround Sound)</p>
                <div class="price">
                    <span class="original-price">&#8377;12000</span>
                    <span class="discounted-price">&#8377;8999</span>
                    <span class="discount">25% off</span>
                </div>
                <div class="rating">
                    <span>★★★★★</span>
                    <p>(8452 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">4.7</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/headset.png" class="controller" alt="Gaming Headset" loading="lazy">
                <div class="color-box"></div>

            </div>
        </div>

        <!-- Gaming Chair Section -->
        <div class="row">
            <div class="col-1" data-aos="fade-right">
                <h2 class="card-heading">Secretlab Omega</h2>
                <h3>Ergonomic Gaming Chair</h3>
                <p>(Adjustable)</p>
                <div class="price">
                    <span class="original-price">&#8377;30000</span>
                    <span class="discounted-price">&#8377;24999</span>
                    <span class="discount">17% off</span>
                </div>
                <div class="rating">
                    <span>★★★★★</span>
                    <p>(3564 reviews)</p>
                </div>
                <div class="overall-rating">
                    Overall Rating<span class="rating-value">4.8</span><span class="star">★</span>
                </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>
                </div>
            </div>
            <div class="col-2" data-aos="fade-left">
                <img src="images/newchair.png" class="controller" alt="Gaming Chair" loading="lazy">
                <div class="color-box"></div>

            </div>
        </div>
    </div>

    <div class="most-loved-products">
        <h2>Our Most Loved Products</h2>
        <div class="product-slider">
          <div class="product-card">
            <img src="images/gaming-chair.jpg" alt="Gaming Chair">
            <h3>Gaming Chair</h3>
          </div>
          <div class="product-card">
            <img src="images/wireless-headset.jpg" alt="Wireless Headset">
            <h3>Wireless Headset</h3>
          </div>
          <div class="product-card">
            <img src="images/gaming-keyboard.jpg" alt="Mechanical Gaming Keyboard">
            <h3>Mechanical Gaming Keyboard</h3>
          </div>
          <div class="product-card">
            <img src="images/gaming-mouse.jpg" alt="High Performing Gaming Mouse">
            <h3>High Performing Gaming Mouse</h3>
          </div>
          <div class="product-card">
            <img src="images/apple-vr-headset.jpg" alt="VR Headset by Apple">
            <h3>VR Headset by Apple</h3>
          </div>
          <div class="product-card">
            <img src="images/wireless-headset-2.jpg" alt="VR Headset">
            <h3>VR Headset</h3>
          </div>
          <div class="product-card">
            <img src="images/wireless-controller.jpg" alt="Wireless Controller">
            <h3>Wireless Controller</h3>
          </div>
          <!-- Duplicate first few items for seamless effect -->
          <div class="product-card">
            <img src="images/gaming-chair-2.jpg" alt="Gaming Laptop">
            <h3>Gaming Laptop</h3>
          </div>
          <div class="product-card">
            <img src="images/gaming-laptop.jpg" alt="Gaming Laptop">
            <h3>Gaming Laptop</h3>
          </div>
          <div class="product-card">
            <img src="images/gaming-keyboard-mouse.jpg" alt="Mechanical Gaming Keyboard and Mouse">
            <h3>Mechanical Gaming Keyboard and Mouse</h3>
          </div>
        </div>
      </div>
      
      
    <!-- FAQ Section -->
    <section id="faq">
        <div class="faq-container">
            <h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>

            <div class="faq" data-aos="fade-right">
                <input type="checkbox" id="faq1">
                <label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools? <span
                        class="arrow"></span></label>
                <div class="faq-answer">
                    We have tried our best to make all the tools available for enthusiastic gamers.
                </div>
            </div>

            <div class="faq" data-aos="fade-right">
                <input type="checkbox" id="faq2">
                <label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the
                    product be replaced as per my need? <span class="arrow"></span></label>
                <div class="faq-answer">
                    By considering our terms and conditions, further actions will be taken.
                </div>
            </div>

            <div class="faq" data-aos="fade-right">
                <input type="checkbox" id="faq3">
                <label for="faq3" class="faq-question">3. Can I buy multiple products at once? <span
                        class="arrow"></span></label>
                <div class="faq-answer">
                    Yes, you are welcome to buy multiple products at one time.
                </div>
            </div>

            <div class="faq" data-aos="fade-right">
                <input type="checkbox" id="faq4">
                <label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid? <span
                        class="arrow"></span></label>
                <div class="faq-answer">
                    We have courier services for our customers and it's absolutely free.
                </div>
            </div>
        </div>
    </section>

    <!-- testimonial -->

    <div id="page" class="site">
        <div class="container-swipe">
            <div class="testi">
                <div class="head">
                    <h3>Testimonials</h3>
                    <p>What Our Customers Say</p>
                </div>
                <div class="body swiper">
                    <ul class="swiper-wrapper">
                        <li class="swiper-slide">
                            <div class="wrapper">
                                <div class="thumbnail">
                                    <img src="images/girl1.png" alt="">
                                </div>
                                <div class="aside">
                                    <p>I’ve been searching for the perfect gaming accessories for ages, and I finally
                                        found them on this website! The variety available is truly impressive; I was
                                        able to find exactly what I needed to enhance my gaming experience. The quality
                                        of the products exceeded my expectations.</p>
                                    <div class="name">
                                        <h4>Sarah malik</h4>
                                        <p>★★★★★</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="wrapper">
                                <div class="thumbnail">
                                    <img src="images/boy2.png" alt="" loading="lazy">
                                </div>
                                <div class="aside">
                                    <p>Shopping on this website was a breeze! I love how user-friendly the interface is;
                                        it made navigating through the different categories so easy. I was able to find
                                        exactly what I needed without any hassle. The checkout process was smooth, and I
                                        received my items promptly</p>
                                    <div class="name">
                                        <h4>John Doe</h4>
                                        <p>★★★★☆</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="wrapper">
                                <div class="thumbnail">
                                    <img src="images/boy1.png" alt="" loading="lazy">
                                </div>
                                <div class="aside">
                                    <p>My order arrived much faster than I anticipated, which was a huge plus. The
                                        customer support team was incredibly helpful when I had a question about my
                                        order. I purchased a gaming headset, and it works perfectly! It has made a
                                        significant difference in my gaming sessions.</p>
                                    <div class="name">
                                        <h4>Alex Johnson</h4>
                                        <p>★★★★★</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="swiper-slide">
                            <div class="wrapper">
                                <div class="thumbnail">
                                    <img src="images/girl2.png" alt="" loading="lazy">
                                </div>
                                <div class="aside">
                                    <p>As a serious gamer, I always look for high-quality gear that can enhance my
                                        performance. I stumbled upon this website and was blown away by the selection! I
                                        purchased a gaming mouse and a mechanical keyboard, and both have drastically
                                        improved my gameplay. .</p>
                                    <div class="name">
                                        <h4>Emily Davismore</h4>
                                        <p>★★★★☆</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <!-- pagination -->
                    <div class="swiper-pagination"></div>

                    <!--  navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                </div>
            </div>
        </div>
    </div>

    <!-- testimonial end -->

    <section id="contact" data-aos="fade-right">
        <div class="card pb-5 pt-1">
            <div class="card-header">
                <h2>Contact Our Customer Support Team</h2>
                <p class="contact-message">
                    We're here to assist you with any questions or concerns you may have.
                </p>


            </div>
            <div class="card-body">
                <div class="image-section">
                    <img src="images/7725176.jpg" alt="Contact Image" loading="lazy"
                        style="max-width: 80%; height: auto; max-height: 500px;">
                </div>
                <div class="form-section">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name"><i class="fas fa-user"></i> Name</label>
                            <input type="text" id="name" name="name" placeholder="Your name" required >
                        </div>
                        <div class="form-group">
                            <label for="email"><i class="fas fa-envelope"></i> Email</label>
                            <input type="email" id="email" name="email" placeholder="Your email" required>
                        </div>
                        <div class="form-group">
                            <label for="message"><i class="fas fa-comment"></i> Message</label>
                            <textarea id="message" name="message" placeholder="Your message" required></textarea>
                        </div>
                        <button type="submit">Send</button>
                    </form>
                </div>
            </div>
        </div>
    </section>


    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section about">
                <div class="logo-container">
                    <img src="images/logo.png" alt="GamingTools Logo" class="footer-logo" loading="lazy">
                    <h2 class="logo-text">Collect your GamingTools</h2>
                </div>
                <p class="about-text">
                    Your one-stop shop for premium gaming accessories. Elevate your gaming experience with our curated
                    selection of controllers, VR gear, and more.
                </p>
                <div class="contact">
                    <span><a href="tel:123-456-789" style="color: white; text-decoration: none;"><i
                                class="fas fa-phone"></i> &nbsp; 123-456-789</a></span>
                    <span><a href="mailto:info@gamingtools.com" style="color: white; text-decoration: none;"><i
                                class="fas fa-envelope"></i> &nbsp; info@gamingtools.com</a></span>
                </div>
                <div class="socials">
                    <!-- Added classes to the <a> tags to add the Hover animations -->
                    <a class="facebook" href="#"><i class="fab fa-facebook"></i></a>
                    <a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
                    <a class="twitter" href="#"><i class="fa-brands fa-x-twitter"></i></a>
                    <a class="youtube" href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>

            <div class="footer-section links">
                <h2>Quick Links</h2>
                <ul>
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="./aboutus.html">About Us</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="contributor/contributor.html">Contributors</a></li>
                </ul>
            </div>

            <div class="footer-section links">
                <h2>Legal Links</h2>
                <ul>
                    <li><a href="Policies/PrivacyPolicy/PrivacyPolicy.html">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service </a></li>
                    <li><a href="#">Cookie Policy</a></li>

                    <li><a href="disclaimer/disclaimer.html">Disclaimer</a></li>
              

                    <li><a href="Policies/returnPolicy.html">Return Policy</a></li>

                    <li><a href="#">Copyright Notice</a></li>
                </ul>
            </div>

            <div class="footer-section contact-form">
                <h2>Feedback Form</h2>
                <form action="#" method="post">
                    <input type="email" name="email" class="text-input contact-input"
                        placeholder="Your email address...">
                    <textarea name="message" class="text-input contact-input" placeholder="Your message..."></textarea>
                    <button type="submit" class="btn btn-big contact-btn">
                        <i class="fas fa-envelope"></i>
                        Send
                    </button>
                </form>
            </div>
        </div>
        
    <div class="visitor-counter">
      <div>Number of Visitors</div>
      <div class="website-counter"></div>
    </div>
      <script src="visi.js"></script>

        <div class="footer-bottom">
            <p><a href="PrivacyPolicy/PrivacyPolicy.html">© 2024 GamingTools | All Rights Reserved</a></p>
            <p>Developed by <span><a href="https://my-portfolio-git-main-swaraj-das-projects.vercel.app/"
                        target="_blank">Swaraj</a></span></p>
        </div>

    </footer>

    <!-- SIDEBAR -->

    <div class="social-sidebar">
        <div class="close-btn" id="SideBar" onclick="toggleSidebar()" title="Close Sidebar">&times;</div>
        <ul id="sidebar-content">
            <li><a class="facebook" href="https://www.facebook.com/"><i class="fa-brands fa-meta"></i></a></li>
            <li><a class="twitter" href="https://x.com/"><i class="fa-brands fa-x-twitter"></i></a></li>
            <li><a class="instagram" href="https://www.instagram.com/"><i class="fa-brands fa-instagram"></i></a></li>
            <li><a class="youtube" href="https://www.youtube.com/"><i class="fa-brands fa-youtube"></i></a></li>
        </ul>
    </div>
    <div class="toggle-arrow" onclick="toggleSidebar()" title="Open Sidebar" style="display: none;">
        <span>&#8249;</span>
    </div>


    <!-- Scroll to Top Button -->
    <button id="scrollToTopBtn" class="scroll-top" aria-label="Scroll to top">
        <div class="scroll-top-icon">
            <ion-icon name="arrow-up-outline"></ion-icon>
        </div>
        <svg class="progress-ring" width="60" height="60">
            <circle class="progress-ring__circle" stroke="#ffffff" stroke-width="4" fill="transparent" r="28" cx="30"
                cy="30"></circle>
        </svg>
    </button>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

    </script>

    <!-- this script is for twitter icon  starts -->
    <script src="https://kit.fontawesome.com/856f4a44d7.js" crossorigin="anonymous"></script>
    <!-- this script is for twitter icon  ends -->

    <!-- Scripts -->
    <!-- testimonial script -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <script src="script.js"></script>
    <script src="popup/popup.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

    <script>
        window.embeddedChatbotConfig = {
            chatbotId: "awMKW3zFwW7jzUNsN4Q8O",
            domain: "www.chatbase.co"
        }
    </script>
    <script src="https://www.chatbase.co/embed.min.js" chatbotId="awMKW3zFwW7jzUNsN4Q8O" domain="www.chatbase.co" defer>
    </script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>

    <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 src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
    <script src="./Loader/Loader.js"></script>

    </script>
    </div>
    
</body>


</html>