Banrière avec boutons et calendrier
/* Style de la bannière */
.banner {
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0; /* Couleur de fond claire */
padding: 10px 20px; /* Espacement autour des boutons */
border-radius: 15px; /* Coins arrondis */
width: fit-content; /* La largeur de la bannière s’ajuste à son contenu */
margin: 20px auto; /* Centrer la bannière et un peu d’espace autour */
}
/* Style des boutons */
.btn {
background-color: transparent;
color: #333; /* Couleur des boutons (gris foncé) */
border: none;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
font-size: 16px;
}
/* Séparateurs verticaux entre les boutons */
.separator {
border-left: 2px solid #333; /* Couleur des séparateurs */
height: 30px;
}
/* Style pour le calendrier */
.calendar {
display: none;
position: absolute;
top: 60px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
z-index: 10;
padding: 10px;
}
/* Style du champ de recherche */
#searchInput {
padding: 10px;
font-size: 16px;
width: 250px;
margin-left: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
/* Liste déroulante des suggestions */
.autocomplete-items {
position: absolute;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
z-index: 1;
max-height: 200px;
overflow-y: auto;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
}
.autocomplete-items div:hover {
background-color: #ddd;
}
Où trouver ma pension
Arrivée
Départ
Sélectionnez la date d’arrivée :
Sélectionnez la date de départ :
https://cdn.jsdelivr.net/npm/flatpickr
// Liste d’exemple de villes et villages
const villes = [« Paris », « Marseille », « Lyon », « Toulouse », « Nice », « Nantes », « Strasbourg », « Bordeaux », « Lille », « Rennes », « Reims », « Le Havre », « Montpellier », « Rouen », « Saint-Étienne », « Le Mans », « Aix-en-Provence », « Avignon », « Cannes », « Antibes »];
// Initialisation des calendriers pour Arrivée et Départ
flatpickr(« #arrival-date », {
altInput: true,
altFormat: « F j, Y »,
dateFormat: « Y-m-d »,
minDate: « today », // Empêcher de sélectionner des dates passées
onChange: function(selectedDates) {
const arrivalDate = selectedDates[0];
calculateDuration(arrivalDate, document.getElementById(« departure-date »)._flatpickr.selectedDates[0]);
}
});
flatpickr(« #departure-date », {
altInput: true,
altFormat: « F j, Y »,
dateFormat: « Y-m-d »,
minDate: « today », // Empêcher de sélectionner des dates passées
onChange: function(selectedDates) {
const departureDate = selectedDates[0];
calculateDuration(document.getElementById(« arrival-date »)._flatpickr.selectedDates[0], departureDate);
}
});
// Fonction pour calculer la durée de séjour
function calculateDuration(arrivalDate, departureDate) {
if (arrivalDate && departureDate) {
const duration = Math.floor((departureDate – arrivalDate) / (1000 * 60 * 60 * 24)); // Durée en jours
alert(`La durée de votre séjour est de ${duration} jour(s).`);
}
}
// Afficher ou masquer le calendrier à l’ouverture de chaque bouton
document.getElementById(« arriveeBtn »).addEventListener(« click », function() {
var calendar = document.getElementById(« calendar-arrivee »);
var departCalendar = document.getElementById(« calendar-depart »);
if (calendar.style.display === « none » || calendar.style.display === « ») {
calendar.style.display = « block »;
departCalendar.style.display = « none »; // Cacher le calendrier de départ
} else {
calendar.style.display = « none »;
}
});
document.getElementById(« departBtn »).addEventListener(« click », function() {
var calendar = document.getElementById(« calendar-depart »);
var arriveeCalendar = document.getElementById(« calendar-arrivee »);
if (calendar.style.display === « none » || calendar.style.display === « ») {
calendar.style.display = « block »;
arriveeCalendar.style.display = « none »; // Cacher le calendrier d’arrivée
} else {
calendar.style.display = « none »;
}
});
Scrumptious cookies, locally made with love
Golden
🍪
Gooey
🍪
Moreish
🍪
Munchable
🍪
Indulgent
🍪
Dunkable
🍪
Scrumptious
🍪
Delish
Currently serving
Signature Box
Gift Box
“Crispy on the outside, gooey on the inside, and packed with chocolatey goodness in every bite. One taste, and you’ll be hooked—it’s like a warm hug in cookie form!”
– Valerie, NY
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
Classic chocolate chip cookies – box of six
$40.00
Navigating life’s intricate fabric, choices unfold paths to the extraordinary, demanding creativity, curiosity, and courage for a truly fulfilling journey.
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
❤️
Bestseller
Pension pour chien 