function generateHeaderAndFooter() {
  
    const header = document.getElementById('header-placeholder');
    const footer = document.getElementById('footer-placeholder');

    header.innerHTML = `
    <nav class="bg-gradient-to-r from-blue-500 via-purple-600 to-pink-500 shadow-md">
        <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
            <div class="relative flex items-center justify-between h-16">
                <!-- Logo and Title -->
                <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                    <button class="text-white inline-flex items-center justify-center p-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-600 focus:ring-white" id="mobile-menu-button">
                        <span class="sr-only">Open main menu</span>
                        <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>

                <!-- Main Logo and Title -->
                <div class="flex-1 flex items-center justify-center sm:justify-start">
                    <a href="./index.html" class="text-white text-2xl font-bold flex items-center">
                        <!-- Logo graphic (SVG or Image) -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 1v22M1 12h22"></path>
                        </svg>
                        UPBESTRANKING
                    </a>
                </div>

                <!-- Desktop Menu -->
                <div class="hidden sm:block sm:ml-6">
                    <div class="flex space-x-4">
                       <a href="./home.html" class="text-white flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium hover:bg-purple-700">
    <!-- Home Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9l9-7 9 7v8a3 3 0 01-3 3H6a3 3 0 01-3-3V9z"></path>
    </svg>
    <span>Home</span>
</a>
<a href="./about.html" class="text-white flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium hover:bg-purple-700">
    <!-- About Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4M12 16v-2M9 6h6M5 12h14"></path>
    </svg>
    <span>About</span>
</a>
<a href="./contact.html" class="text-white flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium hover:bg-purple-700">
    <!-- Community Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
    <span>Community</span>
</a>
<a href="./play.html" class="text-white flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium hover:bg-purple-700">
    <!-- Play Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12l-6-6M5 12l6 6"></path>
    </svg>
    <span>Play Now</span>
</a>



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

        <!-- Mobile Menu -->
        <div class="sm:hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1">
                <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-purple-700">Home</a>
                <a href="#about" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-purple-700">About</a>
                <a href="#community" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-purple-700">Community</a>
                <a href="#play" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-purple-700">Play Now</a>
            </div>
        </div>
    </nav>

    `;

    // Add the footer HTML
    footer.innerHTML = `
  <footer class="bg-gradient-to-r from-blue-500 via-purple-600 to-pink-500 text-white py-6">
    <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
        <div class="flex flex-col items-center space-y-4">
            <div class="space-x-6">
                <a href="./privacy.html" class="hover:underline">Privacy Policy</a>
                <a href="./terms-of-use.html" class="hover:underline">Terms of Service</a>
                <a href="./cookies.html" class="hover:underline">Cookie Policy</a>
                <a href="./copyright.html" class="hover:underline">Copyright Policy</a>
            </div>
            <p class="mt-4 text-sm text-center">
                All games featured on our website are unpaid social games designed for entertainment purposes only. These games do not involve real money, betting, or gambling of any kind. 
                <br><br>
                The primary goal is to provide a safe and enjoyable environment where users can experience the fun of gaming without any financial risk. Please note that no real money can be won or lost in these games.
                <br><br>
                Our platform is fully compliant with relevant policies and local laws, ensuring a secure and responsible gaming experience for all users.
            </p>
            <div class="mt-4 flex items-center space-x-4">
                <span class="text-sm">For adults only:</span>
                <img src="./assets/18.png" alt="18+ Logo" class="h-20">
                <img src="./assets/log.png" alt="18+ Logo" class="h-20">
            </div>
        </div>
    </div>
</footer>


    `;


    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    mobileMenuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });

    
};