<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8">
<title>{% block title %}BOAD DOLI-P{% endblock %}</title>
{# <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>">#}
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
<link rel="icon" type="image/png" sizes="56x56" href="{{ asset('assets/images/logo_boad.png') }}">
{% block stylesheets %}
<!-- bootstrap CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}" type="text/css" media="all">
<!-- carousel CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/owl.carousel.min.css') }}" type="text/css" media="all">
<!-- animate CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/animate.css') }}" type="text/css" media="all">
<!-- animated-text CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/animated-text.css') }}" type="text/css" media="all">
<!-- font-awesome CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/all.min.css') }}" type="text/css" media="all">
<!-- font-flaticon CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/flaticon.css') }}" type="text/css" media="all">
<!-- theme-default CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/theme-default.css') }}" type="text/css" media="all">
<!-- meanmenu CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/meanmenu.min.css') }}" type="text/css" media="all">
<!-- transitions CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/owl.transitions.css') }}" type="text/css" media="all">
<!-- venobox CSS -->
<link rel="stylesheet" href="{{ asset('venobox/venobox.css') }}" type="text/css" media="all">
<!-- bootstrap icons -->
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-icons.css') }}" type="text/css" media="all">
<!-- Main Style CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}" type="text/css" media="all">
<!-- responsive CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}" type="text/css" media="all">
<!-- ScrollCue CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/scrollCue.css') }}" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" type="text/css" media="all">
<!-- Vos autres balises head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css" />
</head>
<!-- modernizr js -->
<script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
<style>
/* Ajoutez ces styles CSS pour le popup */
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* Assurez-vous que le z-index est élevé */
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s;
}
.popup-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
position: relative;
}
.popup img {
max-width: 100%;
height: auto;
}
.popup.show {
visibility: visible;
opacity: 1;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 24px;
color: #000;
}
</style>
{% endblock %}
</head>
<body>
{% block body %}
<!-- Popup d'image -->
<div id="image-popup" class="popup">
<div class="popup-content">
<span class="popup-close" onclick="closePopup()">×</span>
<img src="{{ asset('assets/images/popup/DOLI_P_Banner.png') }}" alt="Popup Image">
</div>
</div>
<!-- Body main wrapper start -->
{% include "layouts/header.html.twig" %}
{% if block('carousel')is defined %}
{% include "layouts/slider.html.twig" %}
{% endif %}
{% block content %}{% endblock %}
{% include "layouts/footer.html.twig" %}
{% endblock %}
{% block javascripts %}
<!-- jquery js -->
<script src="{{ asset('assets/js/vendor/jquery-3.6.2.min.js') }}"></script>
<script src="{{ asset('assets/js/popper.min.js') }}"></script>
<!-- bootstrap js -->
<script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
<!-- carousel js -->
<script src="{{ asset('assets/js/owl.carousel.min.js') }}"></script>
<!-- counterup js -->
<script src="{{ asset('assets/js/jquery.counterup.min.js') }}"></script>
<!-- waypoints js -->
<script src="{{ asset('assets/js/waypoints.min.js') }}"></script>
<!-- wow js -->
<script src="{{ asset('assets/js/wow.js') }}"></script>
<!-- imagesloaded js -->
<script src="{{ asset('assets/js/imagesloaded.pkgd.min.js') }}"></script>
<!-- venobox js -->
<script src="{{ asset('venobox/venobox.js') }}"></script>
<!-- animated-text js -->
<script src="{{ asset('assets/js/animated-text.js') }}"></script>
<!-- venobox min js -->
<script src="{{ asset('venobox/venobox.min.js') }}"></script>
<!-- isotope js -->
<script src="{{ asset('assets/js/isotope.pkgd.min.js') }}"></script>
<!-- jquery meanmenu js -->
<script src="{{ asset('assets/js/jquery.meanmenu.js') }}"></script>
<!-- jquery scrollup js -->
<script src="{{ asset('assets/js/jquery.scrollUp.js') }}"></script>
<!-- theme js -->
<script src="{{ asset('assets/js/theme.js') }}"></script>
<!-- barfiller -->
<script src="{{ asset('assets/js/jquery.barfiller.js') }}"></script>
<!-- barfiller -->
<script src="{{ asset('assets/js/jquery.scrollUp.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
// HERO SLIDER
var menu = [];
jQuery('.swiper-slide').each( function(index){
menu.push( jQuery(this).find('.slide-inner').attr("data-text") );
});
var interleaveOffset = 0.5;
var swiperOptions = {
loop: true,
speed: 3000,
parallax: true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
watchSlidesProgress: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
progress: function() {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
var slideProgress = swiper.slides[i].progress;
var innerOffset = swiper.width * interleaveOffset;
var innerTranslate = slideProgress * innerOffset;
swiper.slides[i].querySelector(".slide-inner").style.transform =
"translate3d(" + innerTranslate + "px, 0, 0)";
}
},
touchStart: function() {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = "";
}
},
setTransition: function(speed) {
var swiper = this;
for (var i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + "ms";
swiper.slides[i].querySelector(".slide-inner").style.transition =
speed + "ms";
}
}
}
};
var swiper = new Swiper(".swiper-container", swiperOptions);
// DATA BACKGROUND IMAGE
var sliderBgSetting = $(".slide-bg-image");
sliderBgSetting.each(function(indx){
if ($(this).attr("data-background")){
$(this).css("background-image", "url(" + $(this).data("background") + ")");
}
});
</script>
<script>
// JavaScript pour afficher et fermer le popup
document.addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
document.getElementById('image-popup').classList.add('show');
}, 1000); // Afficher le popup après 1 seconde
});
function closePopup() {
document.getElementById('image-popup').classList.remove('show');
}
</script>
{% endblock %}
</body>
</html>