One Hat Cyber Team

View File Name : header.php

 <style>
        .hero-wrapper-two{
            padding: 80px 0 10px;
        }
        
            .section-image-box.style-one .experience-box {
        right: 95px !important;
        top: 71% !important;
    }
    
    
    .hero-content.style-two h1 span{
        color: #99475a !important;
    }
    
    .hero-content.style-two span.tag-line i{
        color: #99475a !important;
    }
    
    .headline-wrap.style-one .marquee-item i{
         color: #99475a !important;
    }
    
    .sub-title{
         color: #99475a !important;
    }
    
    .ratings.rating4 li i{
        color: #99475a !important;
    }
    
    .section-image-box.style-one .experience-box .text .year{
         color: #99475a !important;
    }
    
    .back-to-top {
        background-color:#99475a !important ;
    }
    
    .sidebar-banner-widget .banner-widget-content .content span.sale, .shop-details-wrapper .product-info .special-features span, .product-item.style-three .product-thumbnail .hover-content a:hover, .product-item.style-three .product-thumbnail .discount, .iconic-box-item.style-two .sn-number, .hero-content.style-one h1 span, .header-navigation.style-one, .header-top {
    background-color: #d7b1bb !important;
}
    
    .product-search-category form input {
    width: 100%;
    border-width: 0px;
    border-radius: 0 5px 5px 0;
    margin-left: 0px;
    border: none;
    font-size: 18px;
    line-height: 1;
    padding: 15px 0px;
    border-left: none;
}

.product-search-category form .search-btn{
    margin-top: 15px;
}

@media (min-width: 1801px) {
    .container {
        max-width: 1755px !important;
    }
}

.main-categories-wrap .categories-dropdown-active {
    min-width: 390px !important;
}
        </style> 
 
 <header class="header-area">
            <!--===  Search Header Main  ===-->
            <div class="search-header-main">
                <div class="container">
                    <!--===  Search Header Inner  ===-->
                    <div class="search-header-inner">
                        <!--=== Site Branding  ===-->
                        <div class="site-branding">
                            <a href="index.php" class="brand-logo"><img src="assets/images/logo/awaha.png" alt="Logo" height="100"></a>
                        </div>
                        <!--===  Product Search Category  ===-->
                       <div class="product-search-category">
   <form action="search.php" method="get">
    <input type="text" name="query" placeholder="Search for products..." required>
    <button type="submit">Search</button>
</form>

</div>

                        <!--===  Hotline Support  ===-->
                        <div class="hotline-support item-rtl">
                            <div class="icon">
                                <i class="flaticon-support"></i>
                            </div>
                            <div class="info">
                                <span>24/7 Support</span>
                                <h5><a href="tel:+7666435218">7666435218</a></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--===  Header Navigation  ===-->
            <div class="header-navigation style-one">
                <div class="container">
                    <!--=== Primary Menu ===-->
                    <div class="primary-menu">
                        <div class="site-branding d-lg-none d-block">
                            <a href="index.php" class="brand-logo"><img src="assets/images/logo/awaha.png" alt="Logo"></a>
                        </div>
                        <!--=== Nav Inner Menu ===-->
                        <div class="nav-inner-menu">
                            <!--=== Main Category ===-->
                            <div class="main-categories-wrap d-none d-lg-block">
                                <a class="categories-btn-active" href="#">
                                    <span class="fas fa-list"></span><span class="text">Products</span>
                                </a>
                                <div class="categories-dropdown-wrap categories-dropdown-active">
                                    <?php
                                    include 'admin/connection.inc.php'; // Include your database connection file
                                    
                                    $query = "SELECT id, product_name, product_img FROM products WHERE id BETWEEN 7 AND 11";
                                    $result = mysqli_query($conn, $query);
                                    ?>
                                    
                                    <div class="categori-dropdown-item">
                                        <ul>
                                            <?php while ($row = mysqli_fetch_assoc($result)) { ?>
                                                <li>
                                                    <a href="product-details.php?id=<?php echo $row['id']; ?>">
                                                        <img src="uploads/<?php echo $row['product_img']; ?>" alt="<?php echo $row['product_name']; ?>">
                                                        <?php echo $row['product_name']; ?>
                                                    </a>
                                                </li>
                                            <?php } ?>
                                        </ul>
                                    </div>

                                    
                                </div>
                            </div>
                            <!--=== Pesco Nav Main ===-->
                            <div class="pesco-nav-main">
                                <!--=== Pesco Nav Menu ===-->
                                <div class="pesco-nav-menu">
                                    <!--=== Responsive Menu Search ===-->
                                    <div class="nav-search mb-40 d-block d-lg-none">
                                        <div class="form-group">
                                            <input type="search" class="form_control" placeholder="Search Here" name="search">
                                            <button class="search-btn"><i class="fas fa-search"></i></button>
                                        </div>
                                    </div>
                                    <!--=== Responsive Menu Tab ===-->
                                    <div class="pesco-tabs style-three d-block d-lg-none">
                                        <ul class="nav nav-tabs mb-30" role="tablist">
                                            <li>
                                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#nav1" role="tab">Menu</button>
                                            </li>
                                            <li>
                                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#nav2" role="tab">Category</button>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div class="tab-pane fade show active" id="nav1">
                                                <nav class="main-menu">
                                                    <ul>
                                                        <li class="menu-item has-children"><a href="index.php">Home</a></li>
                                                        <li class="menu-item has-children"><a href="shop.php">Shop</a></li>
                                                        
                                                       <li class="menu-item has-children"><a href="about.php">About</a></li>
                                            
                                            <li class="menu-item"><a href="contact.php">Contact</a></li>
                                            <li class="menu-item">
                                                <?php
                                               
                                                if (isset($_SESSION['user_id'])) {
                                                    echo '<a href="logout.php">Logout</a>';
                                                } else {
                                                    echo '<a href="login.php">Login/Register</a>';
                                                }
                                                ?>
                                            </li>
                                                    </ul>
                                                </nav>
                                            </div>
                                            <div class="tab-pane fade" id="nav2">
                                                <div class="categori-dropdown-item">
                                                    <ul>
                                            <li>
                                                <a href="rose.php"> <img src="assets/images/soap/2.webp" alt="Shirts">Rose</a>
                                            </li>
                                            <li>
                                                <a href="#"> <img src="assets/images/soap/3.webp" alt="Jeans">Sandalwood</a>
                                            </li>
                                            <li>
                                                <a href="#"> <img src="assets/images/soap/4.webp" alt="Suit">Jasmin</a>
                                            </li>
                                            <li>
                                                <a href="#"> <img src="assets/images/soap/5.webp" alt="Dress">Fresh Lemon</a>
                                            </li>
                                            <li>
                                                <a href="#"> <img src="assets/images/soap/7.webp" alt="Sweaters">Avocado</a>
                                            </li>
                                        </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--===  Hotline Support  ===-->
                                    <div class="hotline-support d-flex d-lg-none mt-30">
                                        <div class="icon">
                                            <i class="flaticon-support"></i>
                                        </div>
                                        <div class="info">
                                            <span>24/7 Support</span>
                                            <h5><a href="tel:7666435218">7666435218</a></h5>
                                        </div>
                                    </div>
                                    <!--=== Main Menu ===-->
                                    <nav class="main-menu d-none d-lg-block">
                                        <ul>
                                            <li class="menu-item has-children"><a href="index.php">Home</a></li>
                                            <li class="menu-item has-children"><a href="shop.php">Shop</a></li>
                                            <li class="menu-item has-children"><a href="about.php">About</a></li>
                                            
                                            <li class="menu-item"><a href="contact.php">Contact</a></li>
                                             <li class="menu-item"><a href="blogs.php">Blogs</a></li>
                                                  <li class="menu-item"><a href="distributer.php"> Be a Distributer</a></li>
                                            <?php 

                                            // Check if the user is logged in and get the username
                                            $user_name = $_SESSION['user_name'] ?? ''; 
                                            $is_logged_in = isset($_SESSION['user_id']);
                                            ?>
                                            
                                             <li class="menu-item has-children">
                                              <a href="<?php echo $is_logged_in ? '#' : 'login.php'; ?>">
                                                <?php echo $is_logged_in ? htmlspecialchars($user_name) : 'Login/Register'; ?>
                                            </a>
                                            
                                            
                                                <?php if ($is_logged_in) { ?>
                                                    <ul class="sub-menu" >
                                                        <li><a href="logout.php">Logout</a></li>
                                                         <li><a href="order.php">My order</a></li>
                                                    </ul>                                                                
                                                <?php } ?>
                                            </li>



                                        </li>
                                        </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                        <!--=== Nav Right Item ===-->
                        <div class="nav-right-item style-one">
                            <ul>
                               
                    
  

                         <li>
    <a href="fetch-wishlist.php" class="wishlist-btn d-lg-block d-none">
        <i class="far fa-heart"></i>
        <span class="pro-countwish"><?php echo $wishlist_count; ?></span> <!-- Display the dynamic count -->
    </a>
</li>




                                <li>
                                    <div class=" d-flex align-items-center" >
                                        <div class="cart-button d-flex align-items-center">
                                        <div class="icon">
                                            <i class="fas fa-shopping-bag"></i><span class="pro-count" id="cart-count">01</span>
                                        </div>
                                    </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="navbar-toggler d-block d-lg-none">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        
        <script>
       
    fetch('count.php')
        .then(response => response.json())
        .then(data => {
            const wishlistCount = data.wishlist_count;
            // Update the pro-countwish span with the count from the server
            document.querySelector('.pro-countwish').textContent = wishlistCount;
        })
        .catch(error => {
            console.error('Error fetching wishlist count:', error);
        });



        </script>
        
        
        <script>
            document.addEventListener('DOMContentLoaded', () => {
    const cartCountElement = document.querySelector('#cart-count');
    const cartContainer = document.querySelector('#cart-items-list');

    // Function to fetch cart items and update UI
    function updateCart() {
        fetch('fetch-cart-items.php')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    let totalItems = 0;

                    // Count total items in the cart
                    data.cart_items.forEach(item => {
                        totalItems += item.quantity;
                    });

                    // Update the cart count
                    cartCountElement.textContent = totalItems;

                    // Optionally update cart items list
                    let itemsHTML = '';
                    data.cart_items.forEach(item => {
                        const { product_name, product_img, quantity, product_price } = item;
                        itemsHTML += `
                            <li class="sidebar-cart-item">
                                <a href="#" class="remove-cart"><i class="far fa-trash-alt"></i></a>
                                <a href="#">
                                    <img src="${product_img}" alt="${product_name}">
                                    ${product_name}
                                </a>
                                <span class="quantity">${quantity} × <span><span class="currency">$</span>${product_price}</span></span>
                            </li>
                        `;
                    });
                    cartContainer.innerHTML = itemsHTML;
                } else {
                    cartCountElement.textContent = '0';
                }
            })
            .catch(error => {
                console.error('Error fetching cart items:', error);
                cartCountElement.textContent = '0';
            });
    }

    // Initial cart update
    updateCart();

    // Update the cart dynamically when an item is added or removed
    document.body.addEventListener('cartUpdated', () => {
        updateCart();
    });
});

        </script>