<!DOCTYPE html>
<html lang="en">
<head><!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#3b1e54">
<meta name="description" content="DelightX is an online grocery platform offering a wide range of products like soap, noodles, toothpastes, and more. Get fresh groceries delivered to your doorstep in just one day, all tailored to your location. Groceries made for you!">

<!-- Multiple sizes for different use cases -->
<link rel="icon" type="image/svg+xml" sizes="16x16" href="src/Logo/fav.svg">
<link rel="icon" type="image/svg+xml" sizes="32x32" href="src/Logo/fav.svg">
<link rel="icon" type="image/svg+xml" sizes="48x48" href="src/Logo/fav.svg">
<link rel="icon" type="image/svg+xml" sizes="96x96" href="src/Logo/fav.svg">
<link rel="icon" type="image/svg+xml" sizes="144x144" href="src/Logo/fav.svg">
<link rel="icon" type="image/svg+xml" sizes="192x192" href="src/Logo/fav.svg">
<link rel="icon" type="image/svg+xml" sizes="256x256" href="src/Logo/fav.svg">
<link rel="icon" type="image/svg+xml" sizes="384x384" href="src/Logo/fav.svg">
<link rel="icon" type="image/svg+xml" sizes="512x512" href="src/Logo/fav.svg">


<!-- Title -->
<title>DelightX</title>

<!-- Google Fonts (Capriola, Montserrat, PT Sans, Righteous) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Capriola&family=Montserrat+Alternates&family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Righteous&display=swap" rel="stylesheet">

<!-- Link to the manifest -->
<link rel="manifest" href="/manifest.json">
<!-- Stylesheets -->
<link rel="stylesheet" href="css/style.css?v=1.0.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css?v=1.0.0" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css?v=1.0.0" rel="stylesheet">


<!-- Scripts -->
<!-- Google Tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NF2714JWJE"></script>
<script>
    window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-NF2714JWJE');
</script>

<!-- JSON-LD Schema Markup -->
<script type="application/ld+json">
    { "@context": "http://schema.org", "@type": "WebPage", "name": "DelightX - Groceries Made For You", "url": "https://www.delightX.com", "mainEntityOfPage": "https://www.delightX.com" }
</script>

<script type="application/ld+json">
    { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.delightX.com" } ] }
</script>

<!-- Service Worker script -->
<script>
    if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/service-worker.js')
                .then(function (registration) {
                    console.log('Service Worker registered with scope:', registration.scope);
                }).catch(function (error) {
                    console.log('Service Worker registration failed:', error);
                });
        }
</script>
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "9e4d0078-0226-47d7-a932-8d2fb350f915",
    });
  });
</script>
<!-- Bootstrap JS and Popper.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<style>
    /* Add margin-top to prevent the content from sticking to the navbar */
     .mt-5 {
          margin-top: 5rem !important; /* Adjust this as necessary */
        }
        body {
        height: 100vh;
        font-family: 'Righteous', cursive;
        background: #ffffff !important;
    }
</style>


<body>
    <div class="wrapper">
        <!-- App Installation Prompt -->
        <!-- PWA Install Modal -->
         <!-- PWA Install Modal -->
        <div class="modal fade" id="pwaInstallModal" tabindex="-1" aria-labelledby="pwaInstallModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" >
                        <!-- Close Button -->
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                        
                        <!-- Website Logo -->
                        <img src="src/Logo/fav.svg" alt="Website Logo" >
                        
                        <!-- App Message -->
                        <span class="ms-2" >Use our app for the best experience</span>
                        <div class="modal-footer">
                            <!-- Install Button -->
                            <button type="button" class="btn btn-primary w-100" id="installBtn">Install</button>
                        </div>
                    </div>
                   
                </div>
            </div>
        </div>


        <!-- Location Permission Popup -->
        <div id="location-popup">
            <div id="popup-content">
                <div class="location-request">
                    <h2 class="location-heading">Allow Access to Your Location</h2>
                    <p class="location-text">"Share your location to discover fresh local products near you!"</p>
                </div>

                <button onclick="getLocation()">Allow Location</button>
            </div>
        </div>

        <!-- Mobile-Only Navbar -->
        <div id="navbar">
            <div id="company-name">DelightX</div>
            <div class="search-container">
                <input type="text" class="search-input" id="search-bar" placeholder="Search Products" onfocus="redirectToSearch()">
            </div>
        </div>



        <div class="greeting">
            <div class="greeting-message">
                <h2 id="time-of-day"></h2>
            </div>
        </div>

        <div class="container mt-4">
            <h5 class="mb-3">Grocery and Kitchen</h5>
            <div class="row row-cols-2 row-cols-md-3 g-2 g-lg-3">
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Instant Noodles" onclick="saveCategory(event)">
                        <!-- Link to product page -->
                        <img src="https://i.postimg.cc/Nf7bMSLn/Instant-Foods.png" alt="pasta & Noodles" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Spreads & Pickle" onclick="saveCategory(event)">
                        <!-- Link to product page -->
                        <img src="https://i.postimg.cc/VvPBsWw1/Spreads-Pickle.png" alt="Atta-Rice-Oil-Dals" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Cooking Oils & Ghee" onclick="saveCategory(event)">
                        <!-- Link to product page -->
                        <img src="https://i.postimg.cc/D0161Y68/Cooking-Oils-Ghee.png" alt="Masala-Dry-Fruits" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Seasonings & Spices" onclick="saveCategory(event)">
                        <!-- Link to product page -->
                        <img src="https://i.postimg.cc/5y55XQ9z/Seasonings-Spices.png" alt="Canned Foods" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Vermicelli" onclick="saveCategory(event)">
                        <!-- Link to product page -->
                        <img src="https://i.postimg.cc/SQcfT3LK/Vermicelli.png" alt="Laundry" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Salt & Sugars" onclick="saveCategory(event)">
                        <!-- Link to product page -->
                        <img src="https://i.postimg.cc/8CsbZCw8/Salt-Sugars.png" alt="Beverages" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Biscuits & Snacks" onclick="saveCategory(event)">
                        <!-- Link to product page -->
                        <img src="src/Home Screen/Biscuits.png" alt="Beverages" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Atta & Maida" onclick="saveCategory(event)">
                        <img src="https://i.postimg.cc/MTMdpGj0/Atta-Maida.png" alt="Fresh Produce" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-0 d-md-none">
                    <a href="#" data-category="Tea & Coffee" onclick="saveCategory(event)">
                        <!-- Link to product page -->
                        <img src="https://i.postimg.cc/rmrNLYvQ/Tea-Coffee-More.png" alt="New Mobile Image" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-0 d-md-none">
                    <a href="#" data-category="Health Drinks" onclick="saveCategory(event)">
                        <img src="https://i.postimg.cc/NfwpQBGT/Malted-Milk-Beverages.png" alt="New Mobile Image" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
            </div>
        </div>

        <div class="container mt-4">
            <h5 class="mb-3">Cleaning and Household</h5>
            <div class="row row-cols-2 row-cols-md-3 g-2 g-lg-3">
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Laundry care" onclick="saveCategory(event)">
                        <img src="https://i.postimg.cc/cLxh8hnL/Laundry-Care.png" alt="Fresh Produce" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Kitchen Dishwashers" onclick="saveCategory(event)">
                        <img src="https://i.postimg.cc/2jW0pVYr/Kitchen-Dishwashers.png" alt="Dairy Products" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Oral Care" onclick="saveCategory(event)">
                        <img src="https://i.postimg.cc/cLFm73RM/Oral-Care.png" alt="Oral Care" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Soaps" onclick="saveCategory(event)">
                        <img src="https://i.postimg.cc/dV6WWpYC/Body.png" alt="Fresh Produce" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Cleaning Essentials" onclick="saveCategory(event)">
                        <img src="src/Home Screen/Cleaning Essentials.png" alt="Beverages" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
            </div>
        </div>
        <div class="container  mt-4 mb-0">
            <div class="position-relative">
                <img src="src/Greetings/offer card.gif" class="img-fluid" alt="Product Image">

            </div>
        </div>
        <!--<div class="content-body">
            <button class="btn btn-primary w-100">Shop Now</button>
        </div>-->
        <!--
        <div class="container mt-3 mb-5">
            <h5 class="mb-3">Personal and Beauty Care</h5>
            <div class="row row-cols-2 row-cols-md-3 g-2 g-lg-3">
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Fresh Produce" onclick="saveCategory(event)">
                        <img src="src/Home Screen/Body.png" alt="Fresh Produce" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Oral Care" onclick="saveCategory(event)">
                        <img src="src/Home Screen/Oral Care .png" alt="Oral Care" class="img-fluid" style="object-fit: contain;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Bath & Body" onclick="saveCategory(event)">
                        <img src="src/Home Screen/Hair Care.png" alt="Bath & Body" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Canned Foods" onclick="saveCategory(event)">
                        <img src="https://cdn.zeptonow.com/production///tr:w-210,ar-225-333,pr-true,f-auto,q-80/cms/category/470527ff-829a-499f-9d79-32efb98a6e4d.png" alt="Canned Foods" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Cookies" onclick="saveCategory(event)">
                        <img src="src/Home Screen/Health Drink.png" alt="Health Drink" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
                <div class="col-lg-2 col-md-2 col-3">
                    <a href="#" data-category="Essential Oils" onclick="saveCategory(event)">
                        <img src="https://cdn.zeptonow.com/production///tr:w-210,ar-225-333,pr-true,f-auto,q-80/cms/category/57079f1d-e559-46bf-a2f0-563f846ce0cd.png" alt="Beverages" class="img-fluid" style="object-fit: cover;">
                    </a>
                </div>
            </div
        </div>-->
        <!--
        <div class="col-lg-2 col-md-2 col-0 d-md-none mt-4 container ">
            <a href="DelightX-Tea-Coffee.html" style="text-decoration: none;">

                <video width="100%" height="120" style="border-radius: 10px; object-fit: cover; margin-top:2px" autoplay loop muted>
                    <source src="src/Home Screen/add.mp4" type="video/mp4"> Your browser does not support the video tag.
                </video>
           
                <h6 style="margin-top: 10px; text-align: center;">Explore Dal's</h6>
            </a>-->
    <div class="slogan">
        Groceries Made for You 🛒 !!
    </div>
    <footer class="mt-2">
        <p style="color: aliceblue;">&copy; 2025 Delightx. All Rights Reserved.</p>
    </footer>
    <!-- Bottom Navigation for Mobile -->
    <nav class="navbar navbar-light fixed-bottom d-lg-none bottom-nav show" style="background-color: #3b1e54;">
        <div class="container-fluid justify-content-around">
            <a class="nav-link text-center" href="#">
                <i class="fas fa-home fa-lg"></i>
                <div>Home</div>
            </a>
            <a class="nav-link text-center" href="Delightx-Profile.html">
                <i class="fas fa-user fa-lg"></i>
                <div>Profile</div>
            </a>
            <a class="nav-link text-center" href="DelightX-Coin.html">
                <i class="fas fa-ellipsis-h fa-lg"></i>
                <div>More</div>
            </a>
            <a class="nav-link text-center" href="DelightX-Cart.html">
                <i class="fas fa-shopping-cart fa-lg"></i>
                <div>Cart</div>
            </a>
        </div>
    </nav>
    </div>
</div>
</div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js?v=1.0.0"></script>
    <script type="module">
        // Firebase import statements
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
        import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-database.js";