Outiref

Code source de l'URL : http://ecolodge-poutpout.com/nos-chambres.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Écolodge - Réservation</title>
    <link rel="icon" href="assets/images/icons/logo.svg" type="image/svg">
    <link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
    <script type="module" src="https://unpkg.com/cally"></script>
<script defer src="bundle.js"></script><link href="styles.css" rel="stylesheet"></head>

<body class="bg-[#fefdf6]" v-scope @vue:mounted="init">
    <div id="header"></div>
    <section class="h-[50vh] header_cust  flex flex-col  relative"
        :class="{ 'animate-pulse !bg-gray-400': !header_chambre?.[0]?.image }"
        :style="{ backgroundImage: `url('${header_chambre?.[0]?.image || 'assets/images/bh.jpg'}')`}"
        style="  background-position: 50% -300px;">
        <p class="m-auto w-max self-center text-center relative z-20 ftrm" v-if="header_chambre?.[0]">
            <span v-html="header_chambre?.[0]?.libelle" class="uppercase text-2xl lg:text-5xl text-white">Un refuge
                entre </span><br>
            <!-- <span class="w-[80%] mx-auto text-center text-c_yellow text-xs md:text-lg" v-html="header_chambre?.[0]?.sous_titre">ciel, mer & terre.</span> -->
        </p>

        <div v-else class="m-auto w-full self-center text-white uppercase text-2xl lg:text-5xl">
            <div class="m-auto self-center text-white uppercase text-2xl lg:text-5xl bg-gray-300 animate-pulse w-[50%] h-[30px] rounded-full"
                v-else></div>
            <div class="m-auto mt-5 self-center text-white uppercase text-2xl lg:text-5xl bg-gray-300 animate-pulse w-[40%] h-[30px] rounded-full"
                v-else></div>
        </div>

    </section>
    <section class="">
        <div class="py-5 md:py-10  limit">
            <!-- <div class="pile_title">
                <span class="!text-[#88BAB2]" v-html="getMessageField('sejour_ethique')">Un séjour éthique et
                    ressourçant vous attend.</span>
                <div style=" background: no-repeat center/cover url('assets/images/shape/line.svg');"></div>
            </div> -->
            <p class="w-[80%] mx-auto text-center text-black  text-xs md:text-lg"> 
                <span class="font-bold"
                    v-html="getMessageField('decouvrez_l')">Découvrez l’</span> 
                    <br><br>
                    <span v-html="getMessageField('un_veritable')">, un véritable havre de paix niché au
                    cœur de jardins luxuriants, où 17 chambres accueillent avec charme couples et familles. Engagé pour
                    la
                    préservation de notre belle région, l’Écolodge propose une</span> </p>
        </div>
    </section>
    <section>
        <section class="sticky top-[60px] z-10  md:top-[138px] py-3 bg-[#fefdf6]">
            <div
                class="limit ftrm text-primary2 whitespace-nowrap disables-scrollbar overflow-auto text-md md:text-lg  uppercase text-center flex gap-5 justify-start md:justify-center">
                <a :href="'#'+typechambre?.libelle" class="flex gap-5" v-for="(typechambre, index) in typechambres">
                    <span>{{typechambre?.libelle}}</span>
                    <span v-if="index !== typechambres.length - 1">|</span>
                </a>
                
            </div>
        </section>
        
        <div class="limit">
            <div class="w-full" v-if="!typechambres?.length">
                <div
                    class="w-full flex flex-col items-start gap-4 md:grid grid-cols-2 shadow-sm p-5 bg-white  rounded-xl">
                    <div class="w-full h-[380px] animate-pulse bg-gray-100  rounded-lg">

                    </div>
                    <div class="w-full flex flex-col justify-between gap-4 h-full">
                        <div class="w-2/3 h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                        <div class="flex flex-col items-start gap-4">
                            <div class="flex items-center gap-2 w-full">
                                <div class="w-[30px] h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                                <div class="w-full h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                            </div>
                            <div class="flex items-center gap-2 w-full">
                                <div class="w-[30px] h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                                <div class="w-full h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                            </div>
                            <div class="flex items-center gap-2 w-full">
                                <div class="w-[30px] h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                                <div class="w-full h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                            </div>
                            <div class="flex items-center gap-2 w-full">
                                <div class="w-[30px] h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                                <div class="w-full h-[30px] animate-pulse bg-gray-100  rounded-full"></div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 w-full">
                            <div class="w-[100px] h-[30px] animate-pulse bg-gray-100  rounded-lg"></div>
                            <div class="w-1/2 h-[30px] animate-pulse bg-gray-100  rounded-lg"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="my-5 mx-auto">
                <a href="https://direct-book.com/properties/poutpoutecolodge" target="_blank"
                    class="btn w-max mx-auto border-none flex items-center !text-white btn_cmp !bg-[#edb477]">
                    <span class="uppercase text-xs font-medium text-white">
                        <span v-html="getMessageField('resa_chambre_btn')"> Réservez votre activité</span>
                    </span>
                </a>
            </div>
                <div v-for="(typechambre, index) in typechambres" :key="index" :id="typechambre?.libelle"
                    class="w-full flex flex-col md:flex-row items-start gap-4 scroll-mt-[130px]  md:scroll-mt-[210px] mt-10 shadow-sm p-5 bg-white rounded-xl"
                    :class="index % 2 !== 0 ? 'md:flex-row-reverse' : 'md:flex-row'">
                    <!-- Colonne image -->
                    <div class="w-full md:max-w-[50%] h-full">
                        <div class="glide_ch h-full relative">
                            <div data-glide-el="track" class="glide__track h-full">
                                <ul class="glide__slides h-full">
                                    <li class="glide__slide" v-for="image in typechambre?.images">
                                        <img :src="image.url" class="h-full max-h-[380px] w-full object-cover" alt="">
                                    </li>
                                </ul>
                            </div>
                            <div class="glide__arrows flex w-[95%] absolute justify-between top-[50%] left-[50%] -translate-x-[50%]"
                                data-glide-el="controls" v-if="typechambre?.images.length > 0">
                                <button
                                    class="glide__arrow glide__arrow--left rotate-90 h-5 w-5   flex items-center justify-center rounded-full"
                                    data-glide-dir="<">
                                    <img src="assets/images/shape/arb.svg" class="!w-5" alt="" srcset="">
                                </button>
                                <button
                                    class="glide__arrow glide__arrow--right h-5 w-5 -rotate-90  flex items-center justify-center rounded-full"
                                    data-glide-dir=">">
                                    <img src="assets/images/shape/arb.svg" class="!w-5" alt="" srcset="">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="w-full flex flex-col justify-between gap-4 h-full"
                        :class="index % 2 == 0 ? 'md:order-1' : 'md:order-2'">
                        <div class="font-bold text-primary ftrm text-xl lg:text-2xl uppercase" v-if="typechambre">
                            {{typechambre?.libelle}}
                        </div>
                        <p class="text-black" v-if="typechambre" v-html="typechambre?.description"></p>
                        <div class="space-y-2">
                            <div class="flex items-center gap-2 text-primary"
                                v-for="specification in typechambre?.specifications"><img class="h-[20px] w-[20px]"
                                    :src="'assets/images/shape/' + specification.field + '.svg'" alt="" srcset="">
                                {{specification.value}}</div>
                        </div>
                        <div class="flex flex-col-reverse gap-0 md:flex-row md:gap-4 md:items-center text-primary">
                            <!-- <button class="btn flex items-center text-white btn_cmp " onclick="my_modal_1.showModal()">
                                <span className="uppercase text-xs font-medium" v-html="getMessageField('reserver')">Réserver maintenant</span>
                            </button> -->
                            <!-- <span>~</span> -->
                            <p>
                                <span class="font-bold"> <span v-html="getMessageField('from')">À partir de </span> {{
                                    formatNumber(convertMontantToDevise(typechambre?.tarif))}} {{ getSigneDevise()
                                    }} </span> <span v-html="getMessageField('par_nuit')"> / nuit</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="my-5 mx-auto">
                <a href="https://direct-book.com/properties/poutpoutecolodge" target="_blank"
                    class="btn w-max mx-auto border-none flex items-center !text-white btn_cmp !bg-[#edb477]">
                    <span class="uppercase text-xs font-medium text-white">
                        <span v-html="getMessageField('resa_chambre_btn')"> Réservez votre activité</span>
                    </span>
                </a>
            </div>
            </div>
        </div>
    </section>
    <section>
        <div class="py-5 md:py-10  limit">
            <p class="text-primary ftrm text-center text-xl lg:text-2xl w-full uppercase font-bold"
                v-html="getMessageField('informations_complementaires')">Informations Complémentaires<span
                    class="text-red-600"> *</span> </p>
        </div>
    </section>
    <section class="mb-10">
        <div class="limit flex flex-col md:flex-row gap-4">
            <div class="p-5 shadow-lg rounded-xl w-full bg-white">
                <ul class="list-disc pl-5 space-y-1 text-gray-700">
                    <li><span v-html="getMessageField('enfant_0_5')">1 enfant de  -5 ans : </span> <span class="font-bold" v-html="getMessageField('enfant_0_5_price')">Gratuit</span></li>
                    <li><span v-html="getMessageField('enfant_5_11')">1 enfant de 5 à 11 ans : </span> <span class="font-bold" v-html="getMessageField('enfant_5_11_price')">Gratuit</span></li>
                   
                </ul>
            </div>
            <div class="p-5 shadow-lg rounded-xl w-full flex items-center bg-white">
                <ul class="list-disc pl-5 space-y-1 text-gray-700">
                    <li> <span v-html="getMessageField('finalisation_taxe')"> Taxe du sejour</span>
                        <span class="font-semibold" v-html="getMessageField('finalisation_taxe_price')">1.000 FCFA </span>
                        <span v-html="getMessageField('plus_treize_ans')"></span>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- Open the modal using ID.showModal() method -->
    <dialog id="my_modal_1" class="modal">
        <div class="modal-box w-11/12 max-w-5xl">
            <div class="flex flex-col gap-4 md:flex-row items-center">
                <p class="font-bold w-full text-center md:text-start md:w-1/2 text-xl md:text-3xl text-primary"> <span
                        v-html="getMessageField('finalisation_verifier')"></span> <br> <span
                        v-html="getMessageField('finalisation_disponibilites')"></span>
                </p>
                <form method="dialog">
                    <div class="absolute flex justify-end items-center rounded-t-lg right-0 top-0 w-full p-2 bg-primary text-white">
                        <button class="btn btn-xs btn-circle mr-3">✕</button>
                        <button v-html="getMessageField('fermer')">Fermer</button>
                    </div>
                </form>
                <div
                    class="w-full mt-10 md:w-1/2 flex flex-col text-center md:text-start md:grid gap-4 grid-cols-1 md:grid-cols-2">
                    <div class="w-full col-span-2 flex flex-col gap-2 justify-start">
                        <label for="prenom" v-html="getMessageField('type_chambre')">Type de chambre</label>
                        <p
                            class="w-full text-xs outline-none p-3 text-primary2 font-bold rounded-lg border border-slate-100">
                            Bungalows Terre
                        </p>
                    </div>
                    <div class="dropdown dropdown-center md:dropdown-end col-span-2">
                        <div class="w-full col-span-2 flex flex-col gap-2 justify-start" tabindex="0" role="button">
                            <label for="prenom"><span v-html="getMessageField('adulte')"></span> ~ <span
                                    v-html="getMessageField('enfant')"></span> ~ <span
                                    v-html="getMessageField('chambre')"></span></label>
                            <p
                                class="w-full text-xs outline-none p-3 text-primary2 font-bold rounded-lg border border-slate-100">
                                00 <span v-html="getMessageField('adulte')"></span> - 00 <span
                                    v-html="getMessageField('enfant')"></span> - 00 <span
                                    v-html="getMessageField('chambre')"></span>
                            </p>
                        </div>
                        <ul tabindex="0" class="dropdown-content bgb100 rounded-box z-1 w-full md:w-1/2 p-2 shadow-sm">
                            <li>
                                <div class="flex items-center  justify-between">
                                    <span class="text-primary2 font-bold"
                                        v-html="getMessageField('adulte')">Adultes</span>
                                    <div class="wraper p-2 rounded-xl border border-slate-100">
                                        <span class="mines">-</span>
                                        <span class="num">01</span>
                                        <span class="plus">+</span>
                                    </div>
                                </div>
                            </li>
                            <li><a>Item 2</a></li>
                        </ul>
                    </div>
                    <div class="">
                        <div class="w-full flex flex-col gap-2 justify-start" tabindex="0" role="button">
                            <label for="prenom" v-html="getMessageField('du')">Du</label>
                        </div>
                        <button popovertarget="cally-popover1"
                            class="input input-border w-full text-xs outline-none p-3 rounded-lg border border-slate-100"
                            id="cally1" style="anchor-name:--cally1">
                            Pick a date
                        </button>
                        <!-- <div popover id="cally-popover1" class="dropdown bgb100 rounded-box shadow-lg"
                            style="position-anchor:--cally1">
                            <calendar-date class="cally"
                                onchange={document.getElementById('cally1').innerText=this.value}>
                                <svg aria-label="Previous" class="fill-current size-4" slot="previous"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M15.75 19.5 8.25 12l7.5-7.5"></path>
                                </svg>
                                <svg aria-label="Next" class="fill-current size-4" slot="next"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                                </svg>
                                <calendar-month></calendar-month>
                            </calendar-date>
                        </div> -->
                    </div>
                    <div class="">
                        <div class="w-full flex flex-col gap-2 justify-start" tabindex="0" role="button">
                            <label for="prenom" v-html="getMessageField('au')">Au</label>

                        </div>
                        <button popovertarget="cally-popover2"
                            class="input input-border w-full text-xs outline-none p-3 rounded-lg border border-slate-100"
                            id="cally2" style="anchor-name:--cally2">
                            Pick a date
                        </button>
                        <!-- <div popover id="cally-popover2" class="dropdown bgb100 rounded-box shadow-lg"
                            style="position-anchor:--cally2">
                            <calendar-date class="cally"
                                onchange={document.getElementById('cally2').innerText=this.value}>
                                <svg aria-label="Previous" class="fill-current size-4" slot="previous"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M15.75 19.5 8.25 12l7.5-7.5"></path>
                                </svg>
                                <svg aria-label="Next" class="fill-current size-4" slot="next"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
                                </svg>
                                <calendar-month></calendar-month>
                            </calendar-date>
                        </div> -->
                    </div>
                    <button class="btn col-start-2 flex items-center text-white btn_cmp">
                        <a href="disponibilite.html" id="link-disponibilite">
                            <span v-html="getMessageField('verifier_maintenant')"
                                classname="uppercase text-xs font-medium">Vérifier maintenant</span>
                        </a>
                    </button>

                </div>
            </div>
        </div>
    </dialog>
    <div id="footer"></div>
</body>

<script>
    // Vérifie si on est sur la version test
    const basePath = window.location.pathname.includes("front_test") ? "/front_test" : "";

    // Récupère tous les liens du menu
    const menuLinks = [
        { selector: '#link-disponibilite', href: '/disponibilite.html' }
    ];

    menuLinks.forEach(link => {
        const el = document.querySelector(link.selector);
        if (el) {
            el.setAttribute('href', basePath + link.href);
        }
    });

    const basePathAssets = window.location.pathname.includes("front_test") ? "../" : "";
    const adjustImages = () => {
        document.querySelectorAll('img[src^="assets/"]').forEach(img => {
            const src = img.getAttribute('src');
            if (!src.startsWith(basePathAssets)) {
                img.src = basePathAssets + src;
            }
        });
    };

    // appliquer immédiatement
    adjustImages();

    // vérifier toutes les secondes
    setInterval(adjustImages, 1000);

    (() => {
        const basePath = window.location.pathname.includes("front_test") ? "../" : "";

        const style = document.createElement("style");
        style.innerHTML = `
        @font-face {
          font-family: 'Ramona';
          src: url('${basePath}assets/fonts/Ramona-Light.ttf') format('truetype');
          font-weight: normal;
          font-style: normal;
          font-display: swap;
        }

        .ftrm{
          font-family: "Ramona", sans-serif;
        }
      `;
        document.head.appendChild(style);
    })();

</script>

</html>

A propos d'Outiref

Contact / Signaler un bug

FAQ

Crédits et Mentions Légales

Audit SEO par Abondance

Suivez nous sur...

Un site du Réseau Abondance

Agence SEO Neper
Formations SEO NEPER
Googlefight
Cabinet de conseil en IA - Neper AI
La météo du SEO
Klemo