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="es">
<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>Formulario de Reserva</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">Ciudad:</label>
    <select id="city" required>
      <option value="" disabled selected>Seleccione una ciudad</option>
      <option value="PORTO">Porto</option>
      <option value="PVB">Póvoa de Varzim</option>
    </select>
  </div>

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

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

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

  <div class="form-group">
    <label for="children">Niño(s):</label>
    <select id="children" required></select>
  </div>

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

<script>
  // Max 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 city not 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 or city change: ensure both selects fit 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("Por favor, complete todos los campos.");
      return;
    }

    if (adults + children < 1) {
      alert("Por favor, seleccione al menos 1 huésped.");
      return;
    }

    if (adults + children > maxGuests) {
      alert(`La capacidad máxima para esta ciudad es de ${maxGuests} huéspedes.`);
      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 max capacity when city changes
    cityEl.addEventListener("change", () => syncGuestLimits());

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

</body>
</html>

List

<p>En Guest H4U, nos comprometemos a ofrecer un ambiente cálido y acogedor para todos nuestros huéspedes. Creemos en tratar a cada huésped con el máximo respeto y cuidado, asegurando una estancia cómoda y memorable.</p>

Hospitalidad

<p>Actuamos con honestidad y transparencia en todas nuestras gestiones. Nuestros huéspedes pueden confiar en que cumpliremos nuestras promesas y mantendremos los más altos estándares de servicio y fiabilidad.</p>

Integridad

<p>Formar parte de la comunidad del distrito de Oporto es un privilegio que valoramos profundamente. Apoyamos activamente a los negocios e iniciativas locales, fomentando un sentido de pertenencia y crecimiento mutuo.</p>

Comunidad

Image grid

Galería

Quote/testimonial

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

Opiniones de nuestros huéspedes

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.

Opiniones de nuestros huéspedes

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.