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="fr">
<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>Formulaire de Réservation</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">Ville :</label>
    <select id="city" required>
      <option value="" disabled selected>Sélectionnez une ville</option>
      <option value="PORTO">Porto</option>
      <option value="PVB">Póvoa de Varzim</option>
    </select>
  </div>

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

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

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

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

  <div class="form-group">
    <label>&nbsp;</label>
    <button type="submit">Vérifier la disponibilité</button>
  </div>
</form>

<script>
  // Capacité maximale par ville
  const CITY_MAX_GUESTS = {
    PORTO: 10,
    PVB: 8
  };

  function getMaxGuestsByCity() {
    const city = document.getElementById("city").value;
    return CITY_MAX_GUESTS[city] ?? 10; // 10 par défaut si aucune ville n'est encore sélectionnée
  }

  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 {
      // Chargement initial ou changement de ville
      fillSelectOptions(adultsEl, 0, maxGuests, adultsEl.value);
      fillSelectOptions(childrenEl, 0, maxGuests, childrenEl.value);

      // Appliquer les limites croisées dans les deux sens
      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("Veuillez remplir tous les champs.");
      return;
    }

    if (adults + children < 1) {
      alert("Veuillez sélectionner au moins 1 voyageur.");
      return;
    }

    if (adults + children > maxGuests) {
      alert(`La capacité maximale pour cette ville est de ${maxGuests} voyageurs.`);
      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;
      }
    });

    // Valeurs initiales
    fillSelectOptions(adultsEl, 0, 10, "2");
    fillSelectOptions(childrenEl, 0, 10, "0");
    syncGuestLimits();

    // Recalculer les limites quand la ville change
    cityEl.addEventListener("change", () => syncGuestLimits());

    // Garder adultes/enfants interdépendants
    adultsEl.addEventListener("change", () => syncGuestLimits("adults"));
    childrenEl.addEventListener("change", () => syncGuestLimits("children"));
  });
</script>

</body>
</html>

List

<p>Chez Guest H4U, nous nous engageons à offrir un environnement chaleureux et accueillant à tous nos hôtes. Nous croyons qu’il faut traiter chaque hôte avec le plus grand respect et le plus grand soin, afin de garantir un séjour confortable et mémorable.</p>

Hospitalité

<p>Nous agissons avec honnêteté et transparence dans toutes nos démarches. Nos hôtes peuvent compter sur nous pour tenir nos promesses et maintenir les plus hauts standards de service et de fiabilité.</p>

Intégrité

<p>Faire partie de la communauté du district de Porto est un privilège que nous chérissons. Nous soutenons activement les entreprises et initiatives locales, favorisant un sentiment d’appartenance et de croissance partagée.</p>

Communauté

Image grid

Galerie

Quote/testimonial

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

Commentaires des hôtes

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.

Commentaires des hôtes

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.