| Current Path : /home/happyrenas/myreco.online/ |
Linux webd005.cluster105.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 |
| Current File : /home/happyrenas/myreco.online/hebergements.php |
<?
include("configuration.php");
include("includes/fonctions.php");
$country_code="FR";
$trad = chargerTraductions($country_code);
?>
<html class="no-js" lang="<?echo $country_code;?>">
<html class="no-js" lang="<?echo $country_code;?>">
<head>
<?include("includes/google_head.php");?>
<meta charset="utf-8">
<title>MyReco.Online</title>
<meta name="description" content="">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="https://www.myreco.online/img/icone.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://www.myreco.online/css/custom.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/fr.js"></script>
</head>
<style>
.attention-button {
position: relative;
background-color: #6B757D !important;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
transition: background-color 0.3s ease;
}
/* Flèche animée au-dessus */
.attention-button::before {
content: "⬇";
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 1.5em;
color: #007bff;
animation: bounce 1s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-5px); }
}
</style>
<body>
<div id="halt_loader_overlay"></div><div id="halt_loader" class=""><i class="fa fa-spinner fa-spin"></i> <?echo $trad['Chargement des informations, merci de patienter'] ?? '⚠️';?></div>
<?include("includes/google_body.php");?>
<?include("includes/hebergements_head.php");?>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- CSS Awesomplete -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.css" />
<!-- JS Awesomplete -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
<script>
$(document).ready( function(){
function showLoader() {
$('#halt_loader_overlay').show();
$('#halt_loader').show();
$('#message_erreur').text("").removeClass('alert-danger').attr("title", '').show();
}
function hideLoader(error = null) {
$('#halt_loader_overlay').hide();
$('#halt_loader').hide();
if (error) {
$('#message_erreur')
.text("Une erreur est survenue")
.addClass('alert-danger')
.attr("title", error) // Affiche l'erreur au survol
.show();
}
}
$("#btn_rechercher").on("click", function() {
showLoader();
});
// Initialisation des deux champs
const dateArrivee = flatpickr("#date_arrivee", {
dateFormat: "d-m-Y",
locale: "fr",
onChange: function(selectedDates, dateStr, instance) {
// Met à jour la date min du champ départ
dateDepart.set("minDate", dateStr);
}
});
const dateDepart = flatpickr("#date_depart", {
dateFormat: "d-m-Y",
locale: "fr"
});
const input = document.getElementById("ville_pays");
const clearBtn = document.getElementById("clear_ville");
let lastPrefix = "";
let lastList = [];
let awesomplete = new Awesomplete(input, {
minChars: 3,
maxItems: 20,
autoFirst: true
});
// Si le champ est prérempli (ex : via GET), afficher la croix et précharger les suggestions
const initialVal = input.value.trim();
if (initialVal.length >= 2) {
clearBtn.style.display = "inline";
const prefix = initialVal.substring(0, 2).toLowerCase();
fetch("includes/data/villes_prefix/villes_" + prefix + ".json")
.then(res => res.ok ? res.json() : [])
.then(data => {
lastPrefix = prefix;
lastList = data;
// Prépare les suggestions en filtrant le JSON local
awesomplete.list = filterSuggestions(data, initialVal);
})
.catch(() => {
awesomplete.list = [];
});
}
input.addEventListener("input", function () {
const term = input.value.trim();
clearBtn.style.display = term.length ? "inline" : "none";
if (term.length >= 2) {
const prefix = term.substring(0, 2).toLowerCase();
if (prefix !== lastPrefix) {
// Nouveau préfixe → charger nouveau fichier JSON
fetch("includes/data/villes_prefix/villes_" + prefix + ".json")
.then(res => {
if (!res.ok) throw new Error("Fichier non trouvé");
return res.json();
})
.then(data => {
lastPrefix = prefix;
lastList = data;
awesomplete.list = filterSuggestions(data, term);
})
.catch(() => {
awesomplete.list = [];
});
} else {
// Même préfixe → filtrer localement
awesomplete.list = filterSuggestions(lastList, term);
}
} else {
awesomplete.list = [];
}
});
// Filtrage des suggestions
function filterSuggestions(list, term) {
const lc = term.toLowerCase();
return list.filter(item => item.toLowerCase().includes(lc)).slice(0, 40);
}
// Affiche suggestions précédentes au focus
input.addEventListener("focus", function () {
if (lastList.length && input.value.trim().length >= 2) {
awesomplete.list = filterSuggestions(lastList, input.value.trim());
}
});
// Action lors de la sélection
input.addEventListener("awesomplete-selectcomplete", function () {
console.log("Ville sélectionnée :", input.value);
setTimeout(() => dateArrivee.open(), 100);
});
// Bouton de reset
clearBtn.addEventListener("click", function () {
input.value = "";
input.focus();
clearBtn.style.display = "none";
awesomplete.list = [];
});
});
</script>
</body>
</html>