| Current Path : /home/h/a/p/happyrenas/find.myreco.online/v2/ |
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/h/a/p/happyrenas/find.myreco.online/v2/index.php |
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Find Myreco — Trouvez votre hébergement dans votre ville</title>
<link rel="shortcut icon" href="img/icone.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/style_halt.css?v=<?= filemtime(__DIR__.'/css/style_halt.css') ?>">
<link rel="stylesheet" href="css/neige.css">
<script src="js/neige.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<div class="page-bg">
<div class="topbar">
<div class="container py-3">
<div class="d-flex align-items-center justify-content-between gap-3">
<a href="https://find.myreco.online/" class="brand-link d-flex align-items-center gap-2"><span class="brand-mark"></span><span class="brand-text"><span class="brand-a">Find.</span><span class="brand-b">MyReco</span></span></a>
<div class="d-none d-md-flex align-items-center gap-2">
<div class="nav-pill small"><i class="bi bi-lightning-charge me-1"></i>Rapide</div>
<div class="nav-pill small"><i class="bi bi-shield-check me-1"></i>Sécurisé</div>
<a href="referencement.php" class="btn btn-sm btn-ghost"><i class="bi bi-person-circle me-1"></i>Demande de référencement</a>
<a href="contact.php" class="btn btn-sm btn-ghost"><i class="bi bi-envelope me-1"></i>Contact</a>
</div>
</div>
</div>
</div>
<section class="hero">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-lg-7">
<h1 class="display-5 fw-bold mb-3">
Évitez les frais de réservation. <br><span style="color:var(--accent)">Passez en direct.</span>
</h1>
<!--<p class="mb-0">
Votre application indispensable pour trouver un hébergement dans votre ville
</p>
-->
</div>
<div class="col-lg-5 d-none d-lg-block">
<div class="p-3" style="border-radius: var(--radius); background: #fff; border: 1px solid rgba(0,0,0,.08); box-shadow: var(--shadow2);">
<div class="d-flex align-items-start justify-content-between">
<div>
<div class="small" style="color:var(--muted)">Find vous mets en relation directe</div>
<div class="small" style="color:var(--muted)">avec <b>185 000 Propriétaires d'hébergements touristiques.</b></div>
</div>
</div>
<div class="mt-3 small" style="">
<span class="badge-soft">Appartement</span>
<span class="badge-soft">Maison</span>
<span class="badge-soft">Gîte</span>
<span class="badge-soft">Chambre d'hôte</span>
<span class="badge-soft">Hôtel</span>
<span class="badge-soft">Camping</span>
</div>
</div>
</div>
</div>
<div class="mt-4">
<div class="search-bar">
<div class="row g-2 align-items-center">
<div class="col-12 col-md-5">
<div class="city-wrap position-relative">
<div class="d-flex align-items-center gap-2 search-field">
<i class="bi bi-geo-alt"></i>
<input id="qCity" class="form-control form-control-lg search-input"
placeholder="Ville, Pays (ex: Nice, FR)" autocomplete="off" />
</div>
<div id="suggestBox" class="suggestBox"></div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="d-flex align-items-center gap-2 search-field">
<i class="bi bi-people"></i>
<select id="qGuests" class="form-select form-select-lg search-select">
<!-- valeur par défaut -->
<option value="" selected>Sélectionner</option>
<?php
// 1 à 10
for ($i = 1; $i <= 10; $i++) {
echo "<option value=\"$i\">$i voyageur" . ($i > 1 ? 's' : '') . "</option>";
}
// paliers
$paliers = [12, 16, 20];
foreach ($paliers as $p) {
echo "<option value=\"$p\">$p+ voyageurs</option>";
}
?>
</select>
</div>
</div>
<div class="col-12 col-md-2">
<div class="d-flex align-items-center gap-2 search-field">
<i class="bi bi-crosshair"></i>
<select id="qRadius" class="form-select form-select-lg search-select">
<option value="5">5 km</option>
<option value="10" selected>10 km</option>
<option value="20">20 km</option>
<option value="50">50 km</option>
</select>
</div>
</div>
</div>
<div id="filtersBar" class="filters mt-3 px-2">
<button type="button" class="chip js-filter" data-filter="type" data-value="hotel">
<i class="bi bi-building me-1"></i>Hôtel
</button>
<button type="button" class="chip js-filter" data-filter="type" data-value="location">
<i class="bi bi-house-door me-1"></i>Location
</button>
<button type="button" class="chip js-filter" data-filter="type" data-value="camping">
<i class="bi bi-tree me-1"></i>Camping
</button>
</div>
</div>
</div>
</div>
</section>
<br>
<!-- Resultats -->
<section class="pb-4">
<div class="container">
<div class="results-split" id="resultsSplit">
<div class="results-pane">
<div id="resultsBlock" style="display:none;">
<div class="section-title d-flex align-items-center">
<div>
<h4 class="mb-1 fw-bold">Contactez plusieurs hébergements</h4>
<div class="small" style="color:var(--muted)" >(en une seule demande)</div>
<div class="small" style="color:var(--muted)" id="meta">—</div>
</div>
<div class="d-none d-md-flex gap-2 align-items-center ms-auto">
<button type="button" class="btn btn-ghost btn-sm" id="status" style="pointer-events:none;">—</button>
<button type="button" class="btn btn-ghost btn-sm" id="btnClearCache" style="display:none;">
<i class="bi bi-trash3 me-1"></i>Vider
</button>
<button type="button" class="btn btn-ghost btn-sm" id="btnShuffle">
<i class="bi bi-shuffle me-1"></i>Mélanger
</button>
<button class="btn btn-ghost btn-sm" id="btnToggleMap">
<i class="bi bi-map me-1"></i>Carte
</button>
</div>
</div>
<!-- Filtres-->
<div class="filters" style="margin-top:6px;">
<button type="button" class="chip js-filter" data-filter="piscine" data-value="1">
<i class="bi bi-water me-1"></i>Piscine
</button>
<!--<button type="button" class="chip js-filter" data-filter="reset">
<i class="bi bi-arrow-counterclockwise me-1"></i>Reset
</button>
-->
</div>
<div class="row g-3 mt-1" id="grid"></div>
</div>
<div id="homeSections" class="mt-3"></div>
</div>
<!-- CARTE -->
<div class="map-pane" id="mapPane">
<div id="map" class="map"></div>
</div>
</div>
<!-- Erreurs -->
<div class="mt-4" id="errorBox" style="display:none;">
<div class="alert alert-danger border mb-0" id="errorMsg"></div>
</div>
<!-- Top villes -->
<div class="mt-2 d-flex flex-wrap gap-2" id="topVilles"></div>
<!-- MODALE -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content" style="border-radius:18px;">
<div class="modal-header contact-header border-0 pb-0 align-items-start">
<div class="flex-grow-1 pe-2">
<h5 class="modal-title fw-bold mb-1" id="contactTitle">En attente de validation</h5>
<div class="small" style="color:var(--muted)" id="contactMeta">—</div>
<div class="small" style="color:var(--muted)" id="contactMeta1">—</div>
</div>
<div class="d-flex gap-1">
<button type="button" class="btn btn-sm btn-light" id="btnDockToggle" aria-label="Agrandir/Réduire">
<i class="bi bi-arrows-angle-expand"></i>
</button>
</div>
</div>
<div class="modal-body pt-3">
<form id="contactForm">
<!-- Tokens sélectionnés (inputs hidden générés en JS) -->
<div id="contactTokensWrap"></div>
<input type="hidden" id="contactSelectionJson" name="selection_json" value="[]">
<!-- Liste des hébergements sélectionnés -->
<div class="mt-1 contact-box">
<label class="form-label small fw-bold mb-1">Hébergements sélectionnés</label>
<div id="contactSelectionList" class="contact-selection"></div>
</div>
<div class="row g-2 mt-2">
<div class="col-6">
<label class="form-label small fw-bold">Date début</label>
<input type="date" value="" class="form-control" name="date_debut" id="date_debut" required>
</div>
<div class="col-6">
<label class="form-label small fw-bold">Date fin</label>
<input type="date" value="" class="form-control" name="date_fin" id="date_fin" required>
</div>
</div>
<div class="mt-2">
<label class="form-label small fw-bold">Nombre de voyageurs</label>
<input type="number" value="2" class="form-control" name="voyageur_nombre" min="1" max="99" required>
</div>
<div class="row g-2">
<div class="col-6">
<label class="form-label small fw-bold">Nom</label>
<input class="form-control" value="" id="contactNom" name="nom" required>
</div>
</div>
<div class="mt-2">
<label class="form-label small fw-bold">Email</label>
<input type="email" value="" class="form-control" id="contactEmail" name="email" required>
</div>
<div class="mt-2">
<label class="form-label small fw-bold">Message</label>
<textarea class="form-control" id="contactMsg" name="message" rows="4"
placeholder="Bonjour, je souhaiterais en savoir plus sur…"
required>Bonjour, merci de m'indiquer la disponibilité et le prix aux dates sélectionnées.</textarea>
</div>
<div class="small mt-2 d-flex align-items-start gap-2" style="color:var(--muted);">
<i class="bi bi-info-circle mt-1"></i>
<div>Après envoi, vous recevrez également leur descriptifs et coordonnées complets</div>
</div>
<div class="mt-3">
<button type="submit" class="btn btn-accent w-100">
<i class="bi bi-send me-1"></i>Envoyer (à tous les hébergements sélectionnés)
</button>
</div>
</form>
<div class="alert alert-success mt-3 d-none" id="contactSuccess">
Votre demande a bien été prise en compte.
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="photosModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content" style="border-radius:18px;">
<div class="modal-header border-0 pb-0">
<div>
<h5 class="modal-title fw-bold mb-1" id="photosModalTitle">Photos</h5>
<div class="small" style="color:var(--muted)" id="photosModalMeta">—</div>
</div>
<button type="button" class="btn btn-sm btn-light ms-auto" data-bs-dismiss="modal" aria-label="Fermer">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="modal-body pt-3">
<div id="photosModalMain" class="mb-3 text-center"></div>
<div id="photosModalThumbs" class="d-flex flex-wrap gap-2"></div>
</div>
</div>
</div>
</div>
<?if ($_SERVER['REMOTE_ADDR']=="580.11.247.64") {?>
<div id="debugRecherche" class="alert alert-secondary small mt-3" style="display:none;"></div>
<?}?>
<footer class="mt-5 py-4">
<div class="d-flex flex-column flex-md-row justify-content-between gap-2">
<div>© Myreco — 2025</div>
<div class="small">Halt • Applications</div>
</div>
</footer>
<button class="btn btn-ghost" style="display:none;" id="btnClear"><i class="bi bi-x-lg me-1"></i>Reset</button>
</div>
</section>
</div>
<script src="js/script_halt.js?v=<?= filemtime(__DIR__.'/js/script_halt.js') ?>"></script>
</body>
</html>