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-gradient-to-r from-teal-500 to-teal-700 p-4 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">
    <div class="md:hidden flex items-center">
        <button id="mobile-menu-button" class="text-white focus:outline-none focus:ring-2 focus:ring-teal-500">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
          </svg>
        </button>
      </div>
      
      <!-- Desktop Search Bar -->
     


      <!-- Separator -->
      <div class="hidden sm:block text-white mx-4">|</div>

      <!-- Navigation Links -->
      <div class="hidden md:flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex space-x-8">
          <a href="./home.html" class="text-white hover:text-teal-200 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Αρχική</a>
          <a href="./about.html" class="text-white hover:text-teal-200 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Σχετικά με εμάς</a>
          <a href="./jobs.html" class="text-white hover:text-teal-200 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Θέσεις εργασίας</a>
          <a href="./contact.html" class="text-white hover:text-teal-200 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Επικοινωνία</a>
        </div>
      </div>

      <!-- Separator -->
      <div class="hidden sm:block text-white mx-4">|</div>

      <!-- Domain Name -->
      <div class="flex items-center ml-auto">
        <div class="text-white font-bold tracking-wide uppercase">
          <a href="./index.html" class="text-white hover:text-teal-100 text-lg sm:text-3xl">upofferpro</a>
        </div>
      </div>

      <!-- Mobile Menu Toggle -->
      
    </div>
  </div>

  <!-- Mobile Menu -->
  <div id="mobile-menu" class="hidden md:hidden bg-teal-600">
    <!-- Mobile Search Section -->
    <div class="flex items-center space-x-4 p-4">
    <input id="mobile-search-input" type="text" placeholder="Αναζήτηση θέσεων εργασίας..." class="w-full p-2 rounded-md text-black text-xs placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-500">
    <button id="mobile-search-button" class="bg-teal-600 hover:bg-teal-700 text-white px-3 py-2 rounded-md text-xs font-medium">Αναζήτηση</button>
</div>

    <!-- Mobile Navigation Links -->
    <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">Αρχική</a>
      <a href="./about.html" class="text-white block px-3 py-2 rounded-md text-base font-medium">Σχετικά με εμάς</a>
      <a href="./jobs.html" class="text-white block px-3 py-2 rounded-md text-base font-medium">Θέσεις εργασίας</a>
      <a href="./contact.html" class="text-white block px-3 py-2 rounded-md text-base font-medium">Επικοινωνία</a>
    </div>
  </div>
</nav>


    `;

    

    // Add the footer HTML
    footer.innerHTML = `
      <footer class="bg-gradient-to-r from-teal-500 to-teal-700 py-4 text-white">
  <div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 text-center">
    <ul class="flex justify-center space-x-6">
      <li class="inline-block">
        <a href="./terms-of-use.html" class="text-sm hover:text-gray-400">Όροι χρήσης</a>
      </li>
      <li class="inline-block">
        <a href="./cookies.html" class="text-sm hover:text-gray-400">Πολιτική Cookies</a>
      </li>
      <li class="inline-block">
        <a href="./privacy.html" class="text-sm hover:text-gray-400">Πολιτική Απορρήτου</a>
      </li>
      <li class="inline-block">
        <a href="./copyright.html" class="text-sm hover:text-gray-400">Πολιτική Πνευματικών Δικαιωμάτων</a>
      </li>
    </ul>
    <p class="mt-4 text-sm text-center">&copy; 2025 Upofferpro LLC Όλα τα δικαιώματα διατηρούνται.</p>
    <p class="mt-4 text-sm text-white text-center">
      Στο upofferpro, δεσμευόμαστε να διατηρούμε την ασφάλεια και τον επαγγελματισμό της πλατφόρμας μας, προσφέροντας ένα αξιόπιστο και προστατευμένο περιβάλλον στους χρήστες μας. Σύμφωνα με την πολιτική μας, απαγορεύουμε κάθε παράνομο, επιβλαβές ή παραπλανητικό περιεχόμενο, ιδιαίτερα εκείνο που μπορεί να θέσει σε κίνδυνο ανήλικους ή να παραβιάσει την ιδιωτικότητα. Επίσης, απαγορεύεται η παραποίηση ταυτότητας και η διασπορά ψευδών πληροφοριών.
    </p>
  </div>
</footer>


    `;

    
    const mobileMenuToggle = document.getElementById('mobile-menu-button');
    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);
    
    
};