Init Project

public/assets/js/main.js

@@ -0,0 +1,886 @@
+/*=============== SHOW MENU ===============*/
+const navMenu = document.getElementById('nav-menu'),
+    navToggle = document.getElementById('nav-toggle'),
+    navClose = document.getElementById('nav-close')
+
+/* Menu show */
+if(navToggle) {
+    navToggle.addEventListener('click', () =>{
+        navMenu.classList.add('show-menu')
+    })
+}
+
+/* Menu hidden */
+if(navClose) {
+    navClose.addEventListener('click', () =>{
+        navMenu.classList.remove('show-menu')
+    })
+}
+
+/*=============== SHOW AGENCY DROPDOWN MENU ===============*/
+const agencyDropdownItems = document.querySelectorAll('.dropdownagency__item')
+
+// 1. Select each dropdown item.
+agencyDropdownItems.forEach((item) =>{
+    const dropdownButton = item.querySelector('.dropdown__button')
+
+    // 2. Select each button click.
+    dropdownButton.addEventListener('click', () =>{
+
+        // 7. Select the current show-dropdown class.
+        const showDropdown = document.querySelector('.show-dropdown')
+        
+        // 5. Call the toggleItem function.
+        agencyToggleItem(item)
+
+        // 8. Remove the show-dropdown class from other items.
+        if(showDropdown && showDropdown != item) {
+            toggleItem(showDropdown)
+        }
+    })
+})
+
+// 3. Create a function to display the dropdown.
+const agencyToggleItem = (item) =>{
+
+    // 3.1. Select each dropdown content.
+    const agencyDropdownContainer = item.querySelector('.dropdownagency__container')
+
+    // 6. If the same item contains the show-dropdown class, remove.
+    if(item.classList.contains('show-dropdown')) {
+        agencyDropdownContainer.removeAttribute('style')
+        item.classList.remove('show-dropdown')
+    } else {
+        // 4. Add the maximum height to dropdown content and add the show-dropdown class.
+        agencyDropdownContainer.style.height = agencyDropdownContainer.scrollHeight + 'px'
+        item.classList.add('show-dropdown')
+    }
+}
+
+/*=============== SHOW PRODUCTS DROPDOWN MENU ===============*/
+const dropdownItems = document.querySelectorAll('.dropdown__item')
+
+// 1. Select each dropdown item.
+dropdownItems.forEach((item) =>{
+    const dropdownButton = item.querySelector('.dropdown__button')
+
+    // 2. Select each button click.
+    dropdownButton.addEventListener('click', () =>{
+
+        // 7. Select the current show-dropdown class.
+        const showDropdown = document.querySelector('.show-dropdown')
+        
+        // 5. Call the toggleItem function.
+        toggleItem(item)
+
+        // 8. Remove the show-dropdown class from other items.
+        if(showDropdown && showDropdown != item) {
+            agencyToggleItem(showDropdown)
+        }
+    })
+})
+
+// 3. Create a function to display the dropdown.
+const toggleItem = (item) =>{
+
+    // 3.1. Select each dropdown content.
+    const dropdownContainer = item.querySelector('.dropdown__container')
+
+    // 6. If the same item contains the show-dropdown class, remove.
+    if(item.classList.contains('show-dropdown')) {
+        dropdownContainer.removeAttribute('style')
+        item.classList.remove('show-dropdown')
+    } else {
+        // 4. Add the maximum height to dropdown content and add the show-dropdown class.
+        dropdownContainer.style.height = dropdownContainer.scrollHeight + 'px'
+        item.classList.add('show-dropdown')
+    }
+}
+
+/*=============== DELETE DROPDOWN STYLES ===============*/
+const mediaQuery = matchMedia('(min-width: 1150px)'),
+      dropdownContainer = document.querySelectorAll('.dropdown__container')
+
+// Function to remove dropdown styles in mobile mode when browser resizes
+const removeStyle = () =>{
+    // Validate if the media query reaches 1118px
+    if(mediaQuery.matches){
+        // Remove the dropdown container height style
+        dropdownContainer.forEach((e) =>{
+            e.removeAttribute('style')
+        })
+
+        // Remove the show-dropdown class from dropdown item
+        dropdownItems.forEach((e) =>{
+            e.classList.remove('show-dropdown')
+        })
+    }
+}
+
+addEventListener('resize', removeStyle)
+
+/*=============== LOGIN ===============*/
+const loginButton = document.getElementById('login-button'),
+    loginClose = document.getElementById('login-close'),
+    loginContent = document.getElementById('login-content')
+
+/* Login show */
+if(loginButton) {
+    loginButton.addEventListener('click', () =>{
+        loginContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(loginClose) {
+    loginClose.addEventListener('click', () =>{
+        loginContent.classList.remove('show-login')
+    })
+}
+
+/*=============== PELLETEUSE BOOKING LOGIN ===============*/
+const pelleteuseBooking = document.getElementById('pelleteuse-booking'),
+    pelleteuseBookingClose = document.getElementById('login-close'),
+    pelleteuseBookingContent = document.getElementById('login-content')
+
+/* Modal show */
+if(pelleteuseBooking) {
+    pelleteuseBooking.addEventListener('click', () =>{
+        pelleteuseBookingContent.classList.add('show-login')
+    })
+}
+
+/* Modal hidden */
+if(pelleteuseBookingClose) {
+    pelleteuseBookingClose.addEventListener('click', () =>{
+        pelleteuseBookingContent.classList.remove('show-login')
+    })
+}
+
+/*=============== PELLETEUSE BOOKING BY PHONE ===============*/
+const pelleteuseBookingPhone = document.getElementById('pelleteuse-booking-phone'),
+    pelleteuseBookingPhoneClose = document.getElementById('modal-close'),
+    pelleteuseBookingPhoneContent = document.getElementById('modal-content')
+
+/* Modal show */
+if(pelleteuseBookingPhone) {
+    pelleteuseBookingPhone.addEventListener('click', () =>{
+        pelleteuseBookingPhoneContent.classList.add('show-modal')
+    })
+}
+
+/* Modal hidden */
+if(pelleteuseBookingPhoneClose) {
+    pelleteuseBookingPhoneClose.addEventListener('click', () =>{
+        pelleteuseBookingPhoneContent.classList.remove('show-modal')
+    })
+}
+
+/*=============== MARTEAU PIQUEUR BOOKING LOGIN ===============*/
+const marteauPiqueurBooking = document.getElementById('marteau-piqueur-booking'),
+    marteauPiqueurBookingClose = document.getElementById('login-close'),
+    marteauPiqueurBookingContent = document.getElementById('login-content')
+
+/* Login show */
+if(marteauPiqueurBooking) {
+    marteauPiqueurBooking.addEventListener('click', () =>{
+        marteauPiqueurBookingContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(marteauPiqueurBookingClose) {
+    marteauPiqueurBookingClose.addEventListener('click', () =>{
+        marteauPiqueurBookingContent.classList.remove('show-login')
+    })
+}
+
+/*=============== MARTEAU PIQUEUR BOOKING BY PHONE ===============*/
+const marteauPiqueurBookingPhone = document.getElementById('marteau-piqueur-booking-phone'),
+    marteauPiqueurBookingPhoneClose = document.getElementById('modal-close'),
+    marteauPiqueurBookingPhoneContent = document.getElementById('modal-content')
+
+/* Modal show */
+if(marteauPiqueurBookingPhone) {
+    marteauPiqueurBookingPhone.addEventListener('click', () =>{
+        pelleteuseBookingPhoneContent.classList.add('show-modal')
+    })
+}
+
+/* Modal hidden */
+if(marteauPiqueurBookingPhoneClose) {
+    pelleteuseBookingPhoneClose.addEventListener('click', () =>{
+        pelleteuseBookingPhoneContent.classList.remove('show-modal')
+    })
+}
+
+/*=============== BENNE A BETON BOOKING LOGIN ===============*/
+const benneBetonBooking = document.getElementById('benne-beton'),
+    benneBetonBookingClose = document.getElementById('login-close'),
+    benneBetonBookingContent = document.getElementById('login-content')
+
+/* Login show */
+if(benneBetonBooking) {
+    benneBetonBooking.addEventListener('click', () =>{
+        benneBetonBookingContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(benneBetonBookingClose) {
+    benneBetonBookingClose.addEventListener('click', () =>{
+        benneBetonBookingContent.classList.remove('show-login')
+    })
+}
+
+/*=============== BENNE A BETON BOOKING BY PHONE ===============*/
+const benneBetonBookingPhone = document.getElementById('benne-beton-phone'),
+    benneBetonBookingPhoneClose = document.getElementById('modal-close'),
+    benneBetonBookingPhoneContent = document.getElementById('modal-content')
+
+/* Modal show */
+if(benneBetonBookingPhone) {
+    benneBetonBookingPhone.addEventListener('click', () =>{
+        benneBetonBookingPhoneContent.classList.add('show-modal')
+    })
+}
+
+/* Modal hidden */
+if(benneBetonBookingPhoneClose) {
+    benneBetonBookingPhoneClose.addEventListener('click', () =>{
+        benneBetonBookingPhoneContent.classList.remove('show-modal')
+    })
+}
+
+/*=============== GOULOTTE BOOKING LOGIN ===============*/
+const goulotteBooking = document.getElementById('goulotte'),
+    goulotteBookingClose = document.getElementById('login-close'),
+    goulotteBookingContent = document.getElementById('login-content')
+
+/* Login show */
+if(goulotteBooking) {
+    goulotteBooking.addEventListener('click', () =>{
+        goulotteBookingContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(goulotteBookingClose) {
+    goulotteBookingClose.addEventListener('click', () =>{
+        goulotteBookingContent.classList.remove('show-login')
+    })
+}
+
+/*=============== GOULOTTE BOOKING BY PHONE ===============*/
+const goulotteBookingPhone = document.getElementById('goulotte-phone'),
+    goulotteBookingPhoneClose = document.getElementById('modal-close'),
+    goulotteBookingPhoneContent = document.getElementById('modal-content')
+
+/* Modal show */
+if(goulotteBookingPhone) {
+    goulotteBookingPhone.addEventListener('click', () =>{
+        goulotteBookingPhoneContent.classList.add('show-modal')
+    })
+}
+
+/* Modal hidden */
+if(goulotteBookingPhoneClose) {
+    goulotteBookingPhoneClose.addEventListener('click', () =>{
+        goulotteBookingPhoneContent.classList.remove('show-modal')
+    })
+}
+
+/*=============== DISCOUNT LOGIN ===============*/
+const discountLogin = document.getElementById('discount-login'),
+    discountLoginClose = document.getElementById('login-close'),
+    discountLoginContent = document.getElementById('login-content')
+
+/* Login show */
+if(discountLogin) {
+    discountLogin.addEventListener('click', () =>{
+        discountLoginContent.classList.add('show-login')
+    })
+}
+
+/* Login hidden */
+if(discountLoginClose) {
+    discountLoginClose.addEventListener('click', () =>{
+        discountLoginContent.classList.remove('show-login')
+    })
+}
+
+
+
+/*=============== REMOVE MENU MOBILE ===============*/
+const navLink = document.querySelectorAll('.nav__link')
+
+const linkAction = () =>{
+    const navMenu = document.getElementById('nav-menu')
+    navMenu.classList.remove('show-menu')
+}
+navLink.forEach(n => n.addEventListener('click', linkAction))
+
+/*=============== ADD SHADOW HEADER ===============*/
+/*const shadowHeader = ()=>{
+    const header = document.getElementById('header')
+    this.scrollY >= 50 ? header.classList.add('shadow-header')
+        : header.classList.remove('shadow-header')
+}
+window.addEventListener('scroll', shadowHeader)*/
+
+/*=============== SWIPER HOME ===============*/
+let swiperHome = new Swiper('.home__swiper', {
+    loop: true,
+    spaceBetween: -24,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    autoplay: {
+        delay: 3000,
+        disableOnInteraction: false,
+    },
+
+    breakpoints: {
+        1220: {
+            spaceBetween: -32,
+            slidesPerView: 3,
+        }
+    }
+})
+
+/*=============== FARMLAND SWIPER ===============*/
+let swiperFarmland = new Swiper('.farmland__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        }
+    }
+})
+
+/*=============== FARMLAND ATTECOUBÉ BOOKING BY PHONE ===============*/
+const farmlandAttecoubePhoneClose = document.getElementById('modal-close'),
+    farmlandAttecoubePhoneContent = document.getElementById('modal-content')
+function farmlandAttecoubeByPhone() {
+    farmlandAttecoubePhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND ATTECOUBÉ  BOOKING LOGIN ===============*/
+const farmlandAttecoubeClose = document.getElementById('login-close'),
+    farmlandAttecoubeContent = document.getElementById('login-content')
+function farmlandAttecoube() {
+    farmlandAttecoubeContent.classList.add('show-login');
+}
+
+/*=============== FARMLAND TREICHVILLE BOOKING BY PHONE ===============*/
+const farmlandTreichvillePhoneClose = document.getElementById('modal-close'),
+    farmlandTreichvillePhoneContent = document.getElementById('modal-content')
+function farmlandTreichvilleByPhone() {
+    farmlandTreichvillePhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND TREICHVILLE  BOOKING LOGIN ===============*/
+const farmlandTreichvilleClose = document.getElementById('login-close'),
+    farmlandTreichvilleContent = document.getElementById('login-content')
+function farmlandTreichville() {
+    farmlandTreichvilleContent.classList.add('show-login');
+}
+
+/*=============== FARMLAND MARCORY BOOKING BY PHONE ===============*/
+const farmlandMarcoryPhoneClose = document.getElementById('modal-close'),
+    farmlandMarcoryPhoneContent = document.getElementById('modal-content')
+function farmlandMarcoryByPhone() {
+    farmlandMarcoryPhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND MARCORY  BOOKING LOGIN ===============*/
+const farmlandMarcoryClose = document.getElementById('login-close'),
+    farmlandMarcoryContent = document.getElementById('login-content')
+function farmlandMarcory() {
+    farmlandMarcoryContent.classList.add('show-login');
+}
+
+/*=============== FARMLAND BRACODI BOOKING BY PHONE ===============*/
+const farmlandBracodiPhoneClose = document.getElementById('modal-close'),
+    farmlandBracodiPhoneContent = document.getElementById('modal-content')
+function farmlandBracodiByPhone() {
+    farmlandBracodiPhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND BRACODI  BOOKING LOGIN ===============*/
+const farmlandBracodiClose = document.getElementById('login-close'),
+    farmlandBracodiContent = document.getElementById('login-content')
+function farmlandBracodi() {
+    farmlandBracodiContent.classList.add('show-login');
+}
+
+/*=============== FARMLAND SIKASSO BOOKING BY PHONE ===============*/
+const farmlandSikassoPhoneClose = document.getElementById('modal-close'),
+    farmlandSikassoPhoneContent = document.getElementById('modal-content')
+function farmlandSikassoByPhone() {
+    farmlandSikassoPhoneContent.classList.add('show-modal');
+}
+
+/*=============== FARMLAND SIKASSO  BOOKING LOGIN ===============*/
+const farmlandSikassoClose = document.getElementById('login-close'),
+    farmlandSikassoContent = document.getElementById('login-content')
+function farmlandSikasso() {
+    farmlandSikassoContent.classList.add('show-login');
+}
+
+/*=============== BUILDING PELLETEUSE BOOKING BY PHONE ===============*/
+const buildingPelleteusePhoneClose = document.getElementById('modal-close'),
+    buildingPelleteusePhoneContent = document.getElementById('modal-content')
+function buildingPelleteuseByPhone() {
+    buildingPelleteusePhoneContent.classList.add('show-modal');
+}
+
+/*=============== BUILDING PELLETEUSE  BOOKING LOGIN ===============*/
+const buildingPelleteuseClose = document.getElementById('login-close'),
+    buildingPelleteuseContent = document.getElementById('login-content')
+function buildingPelleteuse() {
+    buildingPelleteuseContent.classList.add('show-login');
+}
+
+/*=============== BUILDING MARTEAU BOOKING BY PHONE ===============*/
+const buildingMarteauPhoneClose = document.getElementById('modal-close'),
+    buildingMarteauPhoneContent = document.getElementById('modal-content')
+function buildingMarteauByPhone() {
+    buildingMarteauPhoneContent.classList.add('show-modal');
+}
+
+/*=============== BUILDING MARTEAU  BOOKING LOGIN ===============*/
+const buildingMarteauClose = document.getElementById('login-close'),
+    buildingMarteauContent = document.getElementById('login-content')
+function buildingMarteau() {
+    buildingMarteauContent.classList.add('show-login');
+}
+
+/*=============== BUILDING BENNE BOOKING BY PHONE ===============*/
+const buildingBennePhoneClose = document.getElementById('modal-close'),
+    buildingBennePhoneContent = document.getElementById('modal-content')
+function buildingBenneByPhone() {
+    buildingBennePhoneContent.classList.add('show-modal');
+}
+
+/*=============== BUILDING BENNE  BOOKING LOGIN ===============*/
+const buildingBenneClose = document.getElementById('login-close'),
+    buildingBenneContent = document.getElementById('login-content')
+function buildingBenne() {
+    buildingBenneContent.classList.add('show-login');
+}
+
+/*=============== BUILDING GOULOTTE BOOKING BY PHONE ===============*/
+const buildingGoulottePhoneClose = document.getElementById('modal-close'),
+    buildingGoulottePhoneContent = document.getElementById('modal-content')
+function buildingGoulotteByPhone() {
+    buildingGoulottePhoneContent.classList.add('show-modal');
+}
+
+/*=============== BUILDING GOULOTTE  BOOKING LOGIN ===============*/
+const buildingGoulotteClose = document.getElementById('login-close'),
+    buildingGoulotteContent = document.getElementById('login-content')
+function buildingGoulotte() {
+    buildingGoulotteContent.classList.add('show-login');
+}
+
+/*=============== SONGON BY PHONE ===============*/
+const songonPhoneClose = document.getElementById('modal-close'),
+    songonPhoneContent = document.getElementById('modal-content')
+function songonPhone() {
+    songonPhoneContent.classList.add('show-modal');
+}
+
+function explore() {
+    setTimeout(function () {
+        location.reload();
+    }, 3000);
+}
+
+function zoneSongon() {
+    setTimeout(function () {
+        location.reload();
+    }, 3000);
+}
+
+function deposerAnnonce() {
+    setTimeout(function () {
+        location.reload();
+    }, 10);
+}
+
+/*=============== DEPOSER ANNONCE LOGIN ===============*/
+const deposerAnnonceClose = document.getElementById('login-close'),
+    deposerAnnonceContent = document.getElementById('login-content')
+function deposerAnnonceToLogin() {
+    deposerAnnonceContent.classList.add('show-login');
+}
+
+/*=============== INSCRIPTION ANNONCE ===============*/
+function inscriptionAnnonce() {
+    setTimeout(function () {
+        location.reload();
+    }, 10);
+}
+
+/*=============== EVENTROOM SALLE A BY PHONE ===============*/
+const eventroomSalleAPhoneClose = document.getElementById('modal-close'),
+    eventroomSalleAPhoneContent = document.getElementById('modal-content')
+function eventroomSalleAPhone() {
+    eventroomSalleAPhoneContent.classList.add('show-modal');
+}
+
+/*=============== EVENTROOM SALLE A LOGIN ===============*/
+const eventroomSalleAClose = document.getElementById('login-close'),
+    eventroomSalleAContent = document.getElementById('login-content')
+function eventroomSalleA() {
+    eventroomSalleAContent.classList.add('show-login');
+}
+
+/*=============== EVENTROOM SALLE B BY PHONE ===============*/
+const eventroomSalleBPhoneClose = document.getElementById('modal-close'),
+    eventroomSalleBPhoneContent = document.getElementById('modal-content')
+function eventroomSalleBPhone() {
+    eventroomSalleBPhoneContent.classList.add('show-modal');
+}
+
+/*=============== EVENTROOM SALLE B LOGIN ===============*/
+const eventroomSalleBClose = document.getElementById('login-close'),
+    eventroomSalleBContent = document.getElementById('login-content')
+function eventroomSalleB() {
+    eventroomSalleBContent.classList.add('show-login');
+}
+
+/*=============== EVENTROOM SALLE C BY PHONE ===============*/
+const eventroomSalleCPhoneClose = document.getElementById('modal-close'),
+    eventroomSalleCPhoneContent = document.getElementById('modal-content')
+function eventroomSalleCPhone() {
+    eventroomSalleCPhoneContent.classList.add('show-modal');
+}
+
+/*=============== EVENTROOM SALLE C LOGIN ===============*/
+const eventroomSalleCClose = document.getElementById('login-close'),
+    eventroomSalleCContent = document.getElementById('login-content')
+function eventroomSalleC() {
+    eventroomSalleCContent.classList.add('show-login');
+}
+
+/*=============== EVENTROOM SALLE D BY PHONE ===============*/
+const eventroomSalleDPhoneClose = document.getElementById('modal-close'),
+    eventroomSalleDPhoneContent = document.getElementById('modal-content')
+function eventroomSalleDPhone() {
+    eventroomSalleDPhoneContent.classList.add('show-modal');
+}
+
+/*=============== EVENTROOM SALLE D LOGIN ===============*/
+const eventroomSalleDClose = document.getElementById('login-close'),
+    eventroomSalleDContent = document.getElementById('login-content')
+function eventroomSalleD() {
+    eventroomSalleDContent.classList.add('show-login');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE A BY PHONE ===============*/
+const tarpaulinBacheAPhoneClose = document.getElementById('modal-close'),
+    tarpaulinBacheAPhoneContent = document.getElementById('modal-content')
+function tarpaulinBacheAPhone() {
+    tarpaulinBacheAPhoneContent.classList.add('show-modal');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE A LOGIN ===============*/
+const tarpaulinBacheAClose = document.getElementById('login-close'),
+    tarpaulinBacheAContent = document.getElementById('login-content')
+function tarpaulinBacheA() {
+    tarpaulinBacheAContent.classList.add('show-login');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE B BY PHONE ===============*/
+const tarpaulinBacheBPhoneClose = document.getElementById('modal-close'),
+    tarpaulinBacheBPhoneContent = document.getElementById('modal-content')
+function tarpaulinBacheBPhone() {
+    tarpaulinBacheBPhoneContent.classList.add('show-modal');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE B LOGIN ===============*/
+const tarpaulinBacheBClose = document.getElementById('login-close'),
+    tarpaulinBacheBContent = document.getElementById('login-content')
+function tarpaulinBacheB() {
+    tarpaulinBacheBContent.classList.add('show-login');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE C BY PHONE ===============*/
+const tarpaulinBacheCPhoneClose = document.getElementById('modal-close'),
+    tarpaulinBacheCPhoneContent = document.getElementById('modal-content')
+function tarpaulinBacheCPhone() {
+    tarpaulinBacheCPhoneContent.classList.add('show-modal');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE C LOGIN ===============*/
+const tarpaulinBacheCClose = document.getElementById('login-close'),
+    tarpaulinBacheCContent = document.getElementById('login-content')
+function tarpaulinBacheC() {
+    tarpaulinBacheCContent.classList.add('show-login');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE D BY PHONE ===============*/
+const tarpaulinBacheDPhoneClose = document.getElementById('modal-close'),
+    tarpaulinBacheDPhoneContent = document.getElementById('modal-content')
+function tarpaulinBacheDPhone() {
+    tarpaulinBacheDPhoneContent.classList.add('show-modal');
+}
+
+/*=============== TARPAULIN BACHE STRUCTURE D LOGIN ===============*/
+const tarpaulinBacheDClose = document.getElementById('login-close'),
+    tarpaulinBacheDContent = document.getElementById('login-content')
+function tarpaulinBacheD() {
+    tarpaulinBacheDContent.classList.add('show-login');
+}
+
+/*=============== SPOTLIGHT CHAISE BY PHONE ===============*/
+const spotlightChaisePhoneClose = document.getElementById('modal-close'),
+    spotlightChaisePhoneContent = document.getElementById('modal-content')
+function spotlightChaisePhone() {
+    spotlightChaisePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT BATEAU BY PHONE ===============*/
+const spotlightBateauPhoneClose = document.getElementById('modal-close'),
+    spotlightBateauPhoneContent = document.getElementById('modal-content')
+function spotlightBateauPhone() {
+    spotlightBateauPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT VAISSELLE BY PHONE ===============*/
+const spotlightVaissellePhoneClose = document.getElementById('modal-close'),
+    spotlightVaissellePhoneContent = document.getElementById('modal-content')
+function spotlightVaissellePhone() {
+    spotlightVaissellePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT BACHE BY PHONE ===============*/
+const spotlightBachePhoneClose = document.getElementById('modal-close'),
+    spotlightBachePhoneContent = document.getElementById('modal-content')
+function spotlightBachePhone() {
+    spotlightBachePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT TERRAIN ATTECOUBE BY PHONE ===============*/
+const spotlightTerrainAttecoubePhoneClose = document.getElementById('modal-close'),
+    spotlightTerrainAttecoubePhoneContent = document.getElementById('modal-content')
+function spotlightTerrainAttecoubePhone() {
+    spotlightTerrainAttecoubePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT TERRAIN TREICHVILLE BY PHONE ===============*/
+const spotlightTerrainTreichvillePhoneClose = document.getElementById('modal-close'),
+    spotlightTerrainTreichvillePhoneContent = document.getElementById('modal-content')
+function spotlightTerrainTreichvillePhone() {
+    spotlightTerrainTreichvillePhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT TERRAIN MARCORY BY PHONE ===============*/
+const spotlightTerrainMarcoryPhoneClose = document.getElementById('modal-close'),
+    spotlightTerrainMarcoryPhoneContent = document.getElementById('modal-content')
+function spotlightTerrainMarcoryPhone() {
+    spotlightTerrainMarcoryPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT TERRAIN BRACODI BY PHONE ===============*/
+const spotlightTerrainBracodyPhoneClose = document.getElementById('modal-close'),
+    spotlightTerrainBracodiPhoneContent = document.getElementById('modal-content')
+function spotlightTerrainBracodiPhone() {
+    spotlightTerrainBracodiPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT RENAULT BY PHONE ===============*/
+const spotlightRenaultPhoneClose = document.getElementById('modal-close'),
+    spotlightRenaultPhoneContent = document.getElementById('modal-content')
+function spotlightRenaultPhone() {
+    spotlightRenaultPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT MAZDA BY PHONE ===============*/
+const spotlightMazdaPhoneClose = document.getElementById('modal-close'),
+    spotlightMazdaPhoneContent = document.getElementById('modal-content')
+function spotlightMazdaPhone() {
+    spotlightMazdaPhoneContent.classList.add('show-modal');
+}
+
+/*=============== SPOTLIGHT AUDI BY PHONE ===============*/
+const spotlightAudiPhoneClose = document.getElementById('modal-close'),
+    spotlightAudiPhoneContent = document.getElementById('modal-content')
+function spotlightAudiPhone() {
+    spotlightAudiPhoneContent.classList.add('show-modal');
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*=============== BUILDING SWIPER ===============*/
+let swiperBuilding = new Swiper('.building__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        }
+    }
+})
+
+/*=============== VEHICLE SWIPER ===============*/
+let swiperVehicle = new Swiper('.vehicle__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    slidesPerView: 'auto',
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 3,
+        }
+    }
+})
+
+/*=============== TESTIMONIAL SWIPER ===============*/
+let swiperTestimonial = new Swiper('.testimonial__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 3,
+            centeredSlides: false,
+        }
+    }
+})
+
+/*=============== EVENTROOMS SWIPER ===============*/
+let swiperEventrooms = new Swiper('.eventrooms__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        }
+    }
+})
+
+/*=============== TARPAULIN SWIPER ===============*/
+let swiperTarpaulin = new Swiper('.tarpaulin__swiper', {
+    loop: true,
+    spaceBetween: 16,
+    grabCursor: true,
+    slidesPerView: 'auto',
+    centeredSlides: 'auto',
+
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },
+
+    breakpoints: {
+        1150: {
+            slidesPerView: 4,
+            centeredSlides: false,
+        }
+    }
+})
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*=============== SHOW SCROLL UP ===============*/ 
+const scrollUp = () => {
+    const scrollUp = document.getElementById('scroll-up')
+    this.scrollY >= 350 ? scrollUp.classList.add('show-scroll') 
+        :scrollUp.classList.remove('show-scroll')
+}
+window.addEventListener('scroll', scrollUp)
+
+/*=============== SCROLL REVEAL ANIMATION ===============*/
+const sr = ScrollReveal({
+    origin: 'top',
+    distance: '60px',
+    duration: 2500,
+    delay: 400,
+    reset: true, // Repeat
+})
+
+sr.reveal(`.home__data, .building__container, .vehicle__container,
+    .join__data, .testimonial__container, .footer`)
+sr.reveal(`.home__images`, {delay: 600})
+sr.reveal(`.services__card`, {interval: 100})
+sr.reveal(`.discount__data`, {origin: 'left'})
+sr.reveal(`.discount__images`, {origin: 'right'})
+