templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr-FR">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>{% block title %}BOAD DOLI-P{% endblock %}</title>
  6. {#        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">#}
  7.         {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
  8.         <link rel="icon" type="image/png" sizes="56x56" href="{{ asset('assets/images/logo_boad.png') }}">
  9.         {% block stylesheets %}
  10.             <!-- bootstrap CSS -->
  11.             <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}" type="text/css" media="all">
  12.             <!-- carousel CSS -->
  13.             <link rel="stylesheet" href="{{ asset('assets/css/owl.carousel.min.css') }}" type="text/css" media="all">
  14.             <!-- animate CSS -->
  15.             <link rel="stylesheet" href="{{ asset('assets/css/animate.css') }}" type="text/css" media="all">
  16.             <!-- animated-text CSS -->
  17.             <link rel="stylesheet" href="{{ asset('assets/css/animated-text.css') }}" type="text/css" media="all">
  18.             <!-- font-awesome CSS -->
  19.             <link rel="stylesheet" href="{{ asset('assets/css/all.min.css') }}" type="text/css" media="all">
  20.             <!-- font-flaticon CSS -->
  21.             <link rel="stylesheet" href="{{ asset('assets/css/flaticon.css') }}" type="text/css" media="all">
  22.             <!-- theme-default CSS -->
  23.             <link rel="stylesheet" href="{{ asset('assets/css/theme-default.css') }}" type="text/css" media="all">
  24.             <!-- meanmenu CSS -->
  25.             <link rel="stylesheet" href="{{ asset('assets/css/meanmenu.min.css') }}" type="text/css" media="all">
  26.             <!-- transitions CSS -->
  27.             <link rel="stylesheet" href="{{ asset('assets/css/owl.transitions.css') }}" type="text/css" media="all">
  28.             <!-- venobox CSS -->
  29.             <link rel="stylesheet" href="{{ asset('venobox/venobox.css') }}" type="text/css" media="all">
  30.             <!-- bootstrap icons -->
  31.             <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-icons.css') }}" type="text/css" media="all">
  32.             <!-- Main Style CSS -->
  33.             <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}" type="text/css" media="all">
  34.             <!-- responsive CSS -->
  35.             <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}" type="text/css" media="all">
  36.             <!-- ScrollCue CSS -->
  37.             <link rel="stylesheet" href="{{ asset('assets/css/scrollCue.css') }}" type="text/css" media="all">
  38.             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" type="text/css" media="all">
  39.             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" type="text/css" media="all">
  40.         <!-- Vos autres balises head -->
  41.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css" />
  42.     </head>
  43.             <!-- modernizr js -->
  44.             <script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
  45.             <style>
  46.                 /* Ajoutez ces styles CSS pour le popup */
  47.                 .popup {
  48.                     position: fixed;
  49.                     top: 0;
  50.                     left: 0;
  51.                     width: 100%;
  52.                     height: 100%;
  53.                     background-color: rgba(0, 0, 0, 0.7);
  54.                     display: flex;
  55.                     justify-content: center;
  56.                     align-items: center;
  57.                     z-index: 1000; /* Assurez-vous que le z-index est élevé */
  58.                     visibility: hidden;
  59.                     opacity: 0;
  60.                     transition: visibility 0s, opacity 0.5s;
  61.                 }
  62.                 .popup-content {
  63.                     background-color: #fff;
  64.                     padding: 20px;
  65.                     border-radius: 10px;
  66.                     text-align: center;
  67.                     position: relative;
  68.                 }
  69.                 .popup img {
  70.                     max-width: 100%;
  71.                     height: auto;
  72.                 }
  73.                 .popup.show {
  74.                     visibility: visible;
  75.                     opacity: 1;
  76.                 }
  77.                 .popup-close {
  78.                     position: absolute;
  79.                     top: 10px;
  80.                     right: 10px;
  81.                     cursor: pointer;
  82.                     font-size: 24px;
  83.                     color: #000;
  84.                 }
  85.             </style>
  86.         {% endblock %}
  87.     </head>
  88.     <body>
  89.         {% block body %}
  90.             <!-- Popup d'image -->
  91.             <div id="image-popup" class="popup">
  92.                 <div class="popup-content">
  93.                     <span class="popup-close" onclick="closePopup()">&times;</span>
  94.                     <img src="{{ asset('assets/images/popup/DOLI_P_Banner.png') }}" alt="Popup Image">
  95.                 </div>
  96.             </div>
  97.             <!-- Body main wrapper start -->
  98.                 {% include "layouts/header.html.twig" %}
  99.                 {% if block('carousel')is defined %}
  100.                     {% include "layouts/slider.html.twig" %}
  101.                 {% endif %}
  102.                 {% block content %}{% endblock %}
  103.                 {% include "layouts/footer.html.twig" %}
  104.         {% endblock %}
  105.         {% block javascripts %}
  106.             <!-- jquery js -->
  107.             <script src="{{ asset('assets/js/vendor/jquery-3.6.2.min.js') }}"></script>
  108.             <script src="{{ asset('assets/js/popper.min.js') }}"></script>
  109.             <!-- bootstrap js -->
  110.             <script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
  111.             <!-- carousel js -->
  112.             <script src="{{ asset('assets/js/owl.carousel.min.js') }}"></script>
  113.             <!-- counterup js -->
  114.             <script src="{{ asset('assets/js/jquery.counterup.min.js') }}"></script>
  115.             <!-- waypoints js -->
  116.             <script src="{{ asset('assets/js/waypoints.min.js') }}"></script>
  117.             <!-- wow js -->
  118.             <script src="{{ asset('assets/js/wow.js') }}"></script>
  119.             <!-- imagesloaded js -->
  120.             <script src="{{ asset('assets/js/imagesloaded.pkgd.min.js') }}"></script>
  121.             <!-- venobox js -->
  122.             <script src="{{ asset('venobox/venobox.js') }}"></script>
  123.             <!--  animated-text js -->
  124.             <script src="{{ asset('assets/js/animated-text.js') }}"></script>
  125.             <!-- venobox min js -->
  126.             <script src="{{ asset('venobox/venobox.min.js') }}"></script>
  127.             <!-- isotope js -->
  128.             <script src="{{ asset('assets/js/isotope.pkgd.min.js') }}"></script>
  129.             <!-- jquery meanmenu js -->
  130.             <script src="{{ asset('assets/js/jquery.meanmenu.js') }}"></script>
  131.             <!-- jquery scrollup js -->
  132.             <script src="{{ asset('assets/js/jquery.scrollUp.js') }}"></script>
  133.             <!-- theme js -->
  134.             <script src="{{ asset('assets/js/theme.js') }}"></script>
  135.             <!-- barfiller -->
  136.             <script src="{{ asset('assets/js/jquery.barfiller.js') }}"></script>
  137.             <!-- barfiller -->
  138.             <script src="{{ asset('assets/js/jquery.scrollUp.js') }}"></script>
  139.             <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
  140.             <script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
  141.             <script>
  142.                 AOS.init();
  143.             </script>
  144.             <script>
  145.                 // HERO SLIDER
  146.                 var menu = [];
  147.                 jQuery('.swiper-slide').each( function(index){
  148.                     menu.push( jQuery(this).find('.slide-inner').attr("data-text") );
  149.                 });
  150.                 var interleaveOffset = 0.5;
  151.                 var swiperOptions = {
  152.                     loop: true,
  153.                     speed: 3000,
  154.                     parallax: true,
  155.                     autoplay: {
  156.                         delay: 2000,
  157.                         disableOnInteraction: false,
  158.                     },
  159.                     watchSlidesProgress: true,
  160.                     pagination: {
  161.                         el: '.swiper-pagination',
  162.                         clickable: true,
  163.                     },
  164.                     navigation: {
  165.                         nextEl: '.swiper-button-next',
  166.                         prevEl: '.swiper-button-prev',
  167.                     },
  168.                     on: {
  169.                         progress: function() {
  170.                             var swiper = this;
  171.                             for (var i = 0; i < swiper.slides.length; i++) {
  172.                                 var slideProgress = swiper.slides[i].progress;
  173.                                 var innerOffset = swiper.width * interleaveOffset;
  174.                                 var innerTranslate = slideProgress * innerOffset;
  175.                                 swiper.slides[i].querySelector(".slide-inner").style.transform =
  176.                                     "translate3d(" + innerTranslate + "px, 0, 0)";
  177.                             }
  178.                         },
  179.                         touchStart: function() {
  180.                             var swiper = this;
  181.                             for (var i = 0; i < swiper.slides.length; i++) {
  182.                                 swiper.slides[i].style.transition = "";
  183.                             }
  184.                         },
  185.                         setTransition: function(speed) {
  186.                             var swiper = this;
  187.                             for (var i = 0; i < swiper.slides.length; i++) {
  188.                                 swiper.slides[i].style.transition = speed + "ms";
  189.                                 swiper.slides[i].querySelector(".slide-inner").style.transition =
  190.                                     speed + "ms";
  191.                             }
  192.                         }
  193.                     }
  194.                 };
  195.                 var swiper = new Swiper(".swiper-container", swiperOptions);
  196.                 // DATA BACKGROUND IMAGE
  197.                 var sliderBgSetting = $(".slide-bg-image");
  198.                 sliderBgSetting.each(function(indx){
  199.                     if ($(this).attr("data-background")){
  200.                         $(this).css("background-image", "url(" + $(this).data("background") + ")");
  201.                     }
  202.                 });
  203.             </script>
  204.             <script>
  205.                 // JavaScript pour afficher et fermer le popup
  206.                 document.addEventListener('DOMContentLoaded', function () {
  207.                     setTimeout(function () {
  208.                         document.getElementById('image-popup').classList.add('show');
  209.                     }, 1000); // Afficher le popup après 1 seconde
  210.                 });
  211.                 function closePopup() {
  212.                     document.getElementById('image-popup').classList.remove('show');
  213.                 }
  214.             </script>
  215.         {% endblock %}
  216.     </body>
  217. </html>