templates/_partials/home/rebour-section.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .countdown {
  3.         display: flex;
  4.     }
  6.     .countdown-item {
  7.         text-align: center;
  8.         margin-right: 20px;
  9.     }
  11.     .countdown-item:last-child {
  12.         margin-right: 0;
  13.     }
  15. </style>
  16. <div class="bg_color_1">
  17.     <div class="container margin_80_55">
  18.         <div class="main_title_2">
  19.             <span><em></em></span>
  20.         </div>
  21.         <div class="row d-flex">
  22.             <div class="col-lg-5 col-12">
  23.                 <h4 class="section-title">NOUVELLE APPLICATION MOBILE DISPONIBLE</h4>
  24.                 <span class="h2" style="color: #E6007E; font-weight: 700;">AYILA'A</span>
  25.                 <h6 class="">{{ 'appMobile.development'|trans([],'mobile_page') }}</h6>
  26.                 <p>
  27.                     {{ 'appMobile.dev1'|trans([],'mobile_page') }}
  28.                 </p>
  29.                 <p>
  30.                     {{ 'appMobile.dev3'|trans([],'mobile_page') }}
  31.                 </p>
  32.                 <div class="row d-flex">
  33.                     <div class="col-6  d-flex align-items-center">
  34.                         <a target="_blank" href="https://play.google.com/store/apps/details?id=com.ayilaacameroun">
  35.                             <img src="{{ asset('assets/img/fr_badge_web_generic.png') }}" alt="" style="width: 100%;">
  36.                         </a>
  37.                     </div>
  38.                     <div class="col-6 d-flex align-items-center">
  39.                         <a target="_blank" href="https://apps.apple.com/fr/app/ayilaa-cameroun/id6504582796">
  40.                             <img src="{{ asset('assets/img/Logo-App-Store.png') }}" alt="" style="width: 100%;">
  41.                         </a>
  42.                     </div>
  43.                 </div>
  45.             </div>
  46.             <div class="col-lg-7 col-12 mt-5">
  47. {#                <img src="{{ asset('assets/img/error-ayila-01.png') }}" alt="" style="width: 100%"/>#}
  48.                 <iframe width="100%" height="100%" src="https://www.youtube.com/embed/fQThIxcIFFQ?si=Eg0bXBBdbRkuCFME" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  49.             </div>
  50.         </div>
  51.         <!--/row-->
  52.     </div>
  53.     <!--/container-->
  54. </div>
  55. <!--/bg_color_1-->
  57. <script>
  58.     // Date cible : 25 décembre 2023
  59.     const targetDate = new Date('2023-07-01T00:00:00');
  61.     function updateCountdown() {
  62.         const currentDate = new Date();
  63.         const timeDiff = targetDate - currentDate;
  65.         // Calcul des jours, heures, minutes et secondes restants
  66.         const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
  67.         const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  68.         const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
  69.         const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
  71.         // Mise à jour des éléments HTML avec les valeurs du compte à rebours
  72.         document.getElementById('days').textContent = days;
  73.         document.getElementById('hours').textContent = hours;
  74.         document.getElementById('minutes').textContent = minutes;
  75.         document.getElementById('seconds').textContent = seconds;
  76.     }
  78.     // Mise à jour du compte à rebours chaque seconde
  79.     setInterval(updateCountdown, 1000);
  82. </script>