function generateHeaderAndFooter() {
    // Add the header and footer HTML as you've done in your dynamic script
    const header = document.getElementById('header-placeholder');
    const footer = document.getElementById('footer-placeholder');

    header.innerHTML = `
    <nav class="bg-gray-800 p-4">
  <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">
      
      <!-- Mobile Menu Button (only visible on mobile) -->
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <button type="button" id="mobile-menu-toggle" class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-400 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Otwórz główne 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>

      <!-- Logo Section -->
      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex-shrink-0 text-white text-2xl font-semibold">
          <a href="./index.html">ProdailyReview</a>
        </div>
        <!-- Separator between Logo and Nav -->
        <div class="hidden sm:block sm:mx-4 text-white">|</div>

        <!-- Navigation Links (Desktop View) -->
        <div class="hidden sm:block sm:ml-6">
          <div class="flex space-x-4">
            <a href="./home.html" class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Strona główna</a>
            <a href="./about.html" class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">O nas</a>
            <a href="./jobs.html" class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Oferty pracy</a>
            <a href="./categories.html" class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Kategorie</a>
            <a href="./contact.html" class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Kontakt</a>
          </div>
        </div>
      </div>

      <!-- Search Section -->
      <div class="flex items-center space-x-4">
        <input id="search-input" type="text" placeholder="Szukaj pracy..." class="p-2 rounded-md text-black hidden sm:block">
        <button id="search-button" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md text-sm font-medium hidden sm:block">Szukaj</button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default on desktop) -->
  <div class="sm:hidden hidden" id="mobile-menu" style="display: none;">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="./home.html" class="text-white block px-3 py-2 rounded-md text-base font-medium">Strona główna</a>
      <a href="./jobs.html" class="text-white block px-3 py-2 rounded-md text-base font-medium">Oferty pracy</a>
      <a href="./categories.html" class="text-white block px-3 py-2 rounded-md text-base font-medium">Kategorie</a>
      <a href="./about.html" class="text-white block px-3 py-2 rounded-md text-base font-medium">O nas</a>
      <a href="./contact.html" class="text-white block px-3 py-2 rounded-md text-base font-medium">Kontakt</a>

      <!-- Mobile Search Section -->
      <div class="class="flex items-center space-x-4"s">
        <input id="mobile-search-input" type="text" placeholder="Szukaj pracy..." class="w-full p-2 rounded-md text-black">
        <button id="mobile-search-button" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded-md text-sm font-medium">Szukaj</button>
      </div>
    </div>
  </div>
</nav>

    `;

    // Add the footer HTML
    footer.innerHTML = `
      <footer class="bg-gray-800 text-white py-4">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 text-center">
    <ul class="space-x-6">
      <li class="inline-block">
        <a href="./terms-of-use.html" class="text-sm hover:text-gray-400">Warunki użytkowania</a>
      </li>
      <li class="inline-block">
        <a href="./cookies.html" class="text-sm hover:text-gray-400">Polityka plików cookie</a>
      </li>
      <li class="inline-block">
        <a href="./privacy.html" class="text-sm hover:text-gray-400">Polityka prywatności</a>
      </li>
      <li class="inline-block">
        <a href="./copyright.html" class="text-sm hover:text-gray-400">Polityka praw autorskich</a>
      </li>
    </ul>
    <p class="mt-4 text-sm">&copy; 2024 ProdailyReview. Wszelkie prawa zastrzeżone.</p>
    <p class="mt-4 text-sm text-gray-500 ">W prodailyreview dbamy o bezpieczeństwo i profesjonalizm naszej platformy, zapewniając użytkownikom wiarygodne i bezpieczne środowisko. Zgodnie z naszą polityką, nie tolerujemy treści nielegalnych, szkodliwych ani wprowadzających w błąd, szczególnie tych, które mogą zagrażać nieletnim lub naruszać prywatność. Zabrania się także podszywania tożsamości oraz publikowania fałszywych informacji.</p>
  </div>
</footer>

    `;
    const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');
    const searchButton = document.getElementById('mobile-search-button');
    
    // Close mobile menu on search button click
    searchButton.addEventListener('click', function() {
      if (mobileMenu.style.display === "block") {
        mobileMenu.style.display = "none"; // Close the mobile menu
      }
    });
    
    // Toggle mobile menu visibility on menu button click
    mobileMenuToggle.addEventListener('click', function() {
      if (mobileMenu.style.display === "none" || mobileMenu.style.display === "") {
        mobileMenu.style.display = "block"; // Open the mobile menu
      } else {
        mobileMenu.style.display = "none"; // Close the mobile menu
      }
    });
    
    // Optional: If you want the mobile menu to close on clicking any menu item
    const menuItems = document.querySelectorAll('#mobile-menu a');
    menuItems.forEach(item => {
      item.addEventListener('click', function() {
        mobileMenu.style.display = "none"; // Close the mobile menu when an item is clicked
      });
    });
    
    // Function to handle the resize and hide the mobile menu on desktop
    function handleResize() {
      if (window.innerWidth >= 768) {
        mobileMenu.classList.add('hidden'); // Hide the mobile menu on desktop
        mobileMenu.style.display = "none"; // Ensure it's closed when resizing to desktop
      } else {
        mobileMenu.classList.remove('hidden'); // Show the mobile menu on mobile
      }
    }
    
    // Initialize and listen for window resizing
    handleResize();
    window.addEventListener('resize', handleResize);
    
    
};