Embed

Banner carousel full

Beautiful view of the city of Porto on a beautiful summer day. Porto, Portugal

PORTO, PORTUGAL - APRIL 25, 2018: Carmelites church with Our Lady of Mount Carmel in the center of Porto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Booking Form</title>
  <style>
    .booking-form {
      max-width: 1280px;
      margin: 40px auto;
      padding: 25px;
      background: #f9f9f9;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      font-family: Arial, sans-serif;

      display: grid;
      grid-template-columns: repeat(6, minmax(180px, 1fr));
      gap: 16px;
      align-items: end;
    }

    .form-group {
      min-width: 0;
    }

    .form-group label {
      font-weight: 600;
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      line-height: 1.2;
      color: #1f3556;
    }

    .form-group select,
    .form-group input[type="date"],
    .form-group button {
      width: 100%;
      height: 46px;
      padding: 0 12px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 15px;
      box-sizing: border-box;
    }

    .form-group button,
    .booking-form button[type="submit"] {
      background-color: #2596be !important;
      border-color: #2596be !important;
      color: #ffffff !important;
      border: none;
      cursor: pointer;
      transition: background 0.3s;
      font-weight: 700;

      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      font-size: 13px;
      line-height: 46px;
      padding: 0 10px;
    }

    .form-group button:hover,
    .booking-form button[type="submit"]:hover {
      background-color: #1f7fa1 !important;
      border-color: #1f7fa1 !important;
    }

    @media (max-width: 1200px) {
      .booking-form {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
      }
    }

    @media (max-width: 640px) {
      .booking-form {
        grid-template-columns: 1fr;
      }

      .form-group button,
      .booking-form button[type="submit"] {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

<form onsubmit="loadBeds24ByGroup(); return false;" class="booking-form">
  <div class="form-group">
    <label for="city">City:</label>
    <select id="city" required>
      <option value="" disabled selected>Select a city</option>
      <option value="PORTO">Porto</option>
      <option value="PVB">Póvoa de Varzim</option>
    </select>
  </div>

  <div class="form-group">
    <label for="arrival">Arrival:</label>
    <input type="date" id="arrival" required>
  </div>

  <div class="form-group">
    <label for="departure">Departure:</label>
    <input type="date" id="departure" required>
  </div>

  <div class="form-group">
    <label for="adults">Adult(s):</label>
    <select id="adults" required></select>
  </div>

  <div class="form-group">
    <label for="children">Child(ren):</label>
    <select id="children" required></select>
  </div>

  <div class="form-group">
    <label>&nbsp;</label>
    <button type="submit">Check Availability</button>
  </div>
</form>

<script>
  // Maximum guests by city
  const CITY_MAX_GUESTS = {
    PORTO: 10,
    PVB: 8
  };

  function getMaxGuestsByCity() {
    const city = document.getElementById("city").value;
    return CITY_MAX_GUESTS[city] ?? 10; // default 10 if no city selected yet
  }

  function fillSelectOptions(selectEl, min, max, selectedValue) {
    const current = selectedValue ?? selectEl.value ?? "0";
    selectEl.innerHTML = "";
    for (let i = min; i <= max; i++) {
      const opt = document.createElement("option");
      opt.value = String(i);
      opt.textContent = String(i);
      selectEl.appendChild(opt);
    }
    const clamped = Math.min(Math.max(parseInt(current, 10) || 0, min), max);
    selectEl.value = String(clamped);
  }

  function syncGuestLimits(changed) {
    const adultsEl = document.getElementById("adults");
    const childrenEl = document.getElementById("children");
    const maxGuests = getMaxGuestsByCity();

    const adults = parseInt(adultsEl.value, 10) || 0;
    const children = parseInt(childrenEl.value, 10) || 0;

    if (changed === "adults") {
      const maxChildren = Math.max(0, maxGuests - adults);
      fillSelectOptions(childrenEl, 0, maxChildren, childrenEl.value);
    } else if (changed === "children") {
      const maxAdults = Math.max(0, maxGuests - children);
      fillSelectOptions(adultsEl, 0, maxAdults, adultsEl.value);
    } else {
      // Initial load or city change: keep both within current city limit
      fillSelectOptions(adultsEl, 0, maxGuests, adultsEl.value);
      fillSelectOptions(childrenEl, 0, maxGuests, childrenEl.value);

      // Apply cross-limits both ways
      const adultsNow = parseInt(adultsEl.value, 10) || 0;
      fillSelectOptions(childrenEl, 0, Math.max(0, maxGuests - adultsNow), childrenEl.value);

      const childrenNow = parseInt(childrenEl.value, 10) || 0;
      fillSelectOptions(adultsEl, 0, Math.max(0, maxGuests - childrenNow), adultsEl.value);
    }
  }

  function loadBeds24ByGroup() {
    const group = document.getElementById("city").value;
    const arrival = document.getElementById("arrival").value;
    const departure = document.getElementById("departure").value;
    const adults = parseInt(document.getElementById("adults").value, 10) || 0;
    const children = parseInt(document.getElementById("children").value, 10) || 0;
    const maxGuests = getMaxGuestsByCity();

    if (!group || !arrival || !departure) {
      alert("Please fill out all fields.");
      return;
    }

    if (adults + children < 1) {
      alert("Please select at least 1 guest.");
      return;
    }

    if (adults + children > maxGuests) {
      alert(`Maximum capacity for this city is ${maxGuests} guests.`);
      return;
    }

    const url = `https://beds24.com/booking2.php?ownerid=137430&group=${group}&referer=iframe&advancedays=-1&firstnight=${arrival}&lastnight=${departure}`;
    window.open(url, '_blank');
  }

  document.addEventListener('DOMContentLoaded', function () {
    const today = new Date().toISOString().split('T')[0];
    const arrivalInput = document.getElementById('arrival');
    const departureInput = document.getElementById('departure');
    const cityEl = document.getElementById("city");
    const adultsEl = document.getElementById("adults");
    const childrenEl = document.getElementById("children");

    arrivalInput.setAttribute('min', today);
    departureInput.setAttribute('min', today);

    arrivalInput.addEventListener('change', function() {
      const selectedArrival = this.value;
      departureInput.setAttribute('min', selectedArrival);
      if (departureInput.value && departureInput.value < selectedArrival) {
        departureInput.value = selectedArrival;
      }
    });

    // Initial defaults
    fillSelectOptions(adultsEl, 0, 10, "2");
    fillSelectOptions(childrenEl, 0, 10, "0");
    syncGuestLimits();

    // Recalculate limits when city changes
    cityEl.addEventListener("change", () => syncGuestLimits());

    // Keep adult/children counts interdependent
    adultsEl.addEventListener("change", () => syncGuestLimits("adults"));
    childrenEl.addEventListener("change", () => syncGuestLimits("children"));
  });
</script>

</body>
</html>

List

At Guest H4U, we are committed to providing a warm and welcoming environment for all our guests. We believe in treating every guest with the utmost respect and care, ensuring a comfortable and memorable stay.

Hospitality

We operate with honesty and transparency in all our dealings. Our guests can trust us to deliver on our promises and maintain the highest standards of service and reliability.

Integrity

Being part of the Porto District community is a privilege we cherish. We actively support local businesses and initiatives, fostering a sense of belonging and mutual growth.

Community

Image grid

Gallery

Quote/testimonial

Very friendly and very helpful - everything was great - thank you for all :-) - Jake (Airbnb)

Reviews from Our Guests

Super séjour à porto !  Tout est accessible à pied, proche de commerce et de métro ! Hôte très réactif et amical, nous as donner des conseils et des indications ! Seul bémol pas de volet dans le salon ce qui était compliqué pour les deux personne qui dormais dans le salon.

전반적으로  훌륭한 숙소입니다.
지하철역과 가까운 곳에 있고 인근에 마트도 있으며 숙소내에 필요한 기본적인 도구들이 잘 준비되어 있습니다.
호스트와의 원활한 소통으로 잘 지내고 갑니다.
감사합니다^^

Io e la mia famiglia abbiamo soggiornato in questo delizioso appartamento per tre giorni, direi tutto perfetto. L’host molto disponibile, ci ha subito dato tutte le indicazioni per poter visitare al meglio la città. Noi eravamo in 5 tra cui un bambino di 5 anni e uno di un anno e mezzo, la casa era attrezzata e confortevole per i bimbi, xbox compresa! La raccomando!

Apartamento muito bem equipado com tudo o que necessário para uma boa estadia. Localização excelente com transportens à porta.

Gostei das comodidades, a casa tem tudo o que é preciso tanto em termos de cozinha como higiene. Fiquei impressionada por ter desmaquilhante e discos de algodão, um bom secador de cabelo, ferro de engomar... a localização é otima e está perto de tudo, graças a isso nem precisamos de usar o metro, conseguimos conhecer todos os pontos a andar a pé. Os anfitriões são muito simpáticos e atenciosos. Sem dúvida uma estadia a repetir.

Reviews from Our Guests

Super séjour à porto ! Tout est accessible à pied, proche de commerce et de métro ! Hôte très réactif et amical, nous as donner des conseils et des indications ! Seul bémol pas de volet dans le salon ce qui était compliqué pour les deux personne qui dormais dans le salon.

전반적으로 훌륭한 숙소입니다. 지하철역과 가까운 곳에 있고 인근에 마트도 있으며 숙소내에 필요한 기본적인 도구들이 잘 준비되어 있습니다. 호스트와의 원활한 소통으로 잘 지내고 갑니다. 감사합니다^^

Apartamento muito bem equipado com tudo o que necessário para uma boa estadia. Localização excelente com transportens à porta.