templates/front/detail/detail-seminaire-inter.html.twig line 1

Open in your IDE?
  1. {% extends 'front.html.twig' %}
  3. {% block title %}Détail Séminaire internationaux | CIMEF-INTERNATIONAL{% endblock %}
  4. {% block styleSheets %}
  5. <style id='wp-emoji-styles-inline-css' type='text/css'>
  6. #map {
  7.     height: 500px;
  8.     width: 100%;
  9. }
  10. .row {
  11.     display: flex;            /* flexbox pour aligner les colonnes */
  12.     flex-wrap: wrap;          /* les colonnes passent à la ligne si nécessaire */
  13.     margin-right: -0.75rem;   /* -gutter/2 */
  14.     margin-left: -0.75rem;    /* -gutter/2 */
  15. }
  16. .btn-register {
  17.     background-color: #ff6600;
  18.     color: #fff;
  19.     font-weight: bold;
  20.     margin-top: 10px;
  21.     text-align: center; 
  22.     border: 1px solid #ff6600!important; 
  23.     width: 100% !important;
  24.     padding: 10px;
  25.     border-radius: 2px;
  26. }
  27. .btn-register:hover {
  28.     background-color: #051a53;
  29.     color: #fff;
  30.     margin-top: 10px;
  31.     text-align: center; 
  32.     border: 1px solid #051a53!important; 
  33.     width: 100% !important;
  34.     padding: 10px;
  35.     border-radius: 2px;
  36. }
  37. .text-lien{
  38.    color: #ff6600;
  39.    font-size: 16px;
  40. }
  41. .mon-div-fixe {
  42.     position: fixed;
  43.     top: 250px;     /* distance du haut */
  44.     /* right: 20px;   distance de la droite */
  45.     z-index: 9999; /* pour passer au-dessus des autres éléments */
  46. }
  47. .btn-fichier{
  48.     margin-bottom: 30px; background: #ff6600; padding: 10px; height: 70px; width: 100%; line-height: 50px;
  49. }
  50. .btn-fichier:hover{
  51.     margin-bottom: 30px; background: #051a53; padding: 10px; height: 70px; width: 100%;
  52. }
  53. .shadow {
  54.     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  55. }
  56. .header_title{ font-size: 25px !important; text-transform: lowercase; color: #fff!important; font-weight: bold !important; }
  57. /* Small devices ≥576px */
  58. @media (min-width: 576px) {
  59.   .col-3 { flex: 0 0 100%; max-width: 100%; }
  60.   .col-sm-4 { flex: 0 0 100%; max-width: 100%; }
  61.   .col-sm-6 { flex: 0 0 100%; max-width: 100%; }
  62.   .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  63.   .header_title{ font-size: 20px; text-transform: lowercase; color: #fff!important; }
  64.   .header_banner_el { padding: 10px!important; }
  65. }
  67. /* Medium devices ≥768px */
  68. @media (min-width: 768px) {
  69.   .col-md-3 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  70.   .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  71.   .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  72.   .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  73. }
  75. /* Large devices ≥992px */
  76. @media (min-width: 992px) {
  77.   .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  78.   .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  79.   .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  80.   .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  81. }
  83. .wrap_header_banner .overlay-slider {
  84.     position: absolute;
  85.     top: 0;
  86.     left: 0;
  87.     padding-top: 30px; 
  88.     width: 100%;
  89.     height: 100%;
  90.     background-color: rgba(0, 0, 0, 0.6392156863);
  91. }
  92. </style>
  93. {% endblock %}
  94. {% block mapjs %}
  95.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
  96.     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  97. {% endblock %}
  98. {% block body %}
  99. {% include 'section/navbar.html.twig' %}
  100. <div class="wrap_header_banner" style="height: 200px; background: url({{ asset('public/inter/wp-content/uploads/2023/06/header-banner.jpg')}});">
  101.     <div class="overlay-slider">
  102.         <div class="row_site">
  103.             <div class="container_site">
  104.                 <div class="cover_color"></div>
  105.                 <div class="header_banner_el">
  106.                     {% if query != null %}
  107.                         {% for f in query %}
  108.                     <div class="header_breadcrumbs">
  109.                         <div id="breadcrumbs">
  110.                             <ul class="breadcrumb">
  111.                                 <li><a href="{{ path('front.inter.index') }}" style="color: #fff!important;" title="accueil">Accueil</a></li>
  112.                                 <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  113.                                 <li style="color: #fff!important; text-transform: lowercase;">Formations</li>
  114.                                 <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  115.                                 <li style="color: #fff!important; text-transform: lowercase;">{{ type }}</li>
  116.                                 <li class="li_separator"><span class="separator"><i class="ovaicon-next" style="color: #fff!important;"></i></span></li>
  117.                                 <!--
  118.                                 <li style="color: #fff!important; text-transform: lowercase;">{{ f.thmnom }}</li>
  119.                                 -->
  120.                             </ul>
  121.                         </div>
  122.                     </div>
  123.                     <h1 class="header_title">{{ f.nom }} </h1>
  124.                         {% endfor %}
  125.                     {% endif %}
  126.                 </div>
  127.             </div>
  128.         </div>
  129.     </div>
  130. </div>
  135.        <style id="elementor-post-1308">.elementor-1308 .elementor-element.elementor-element-6df1039{margin-top:0px;margin-bottom:110px;}.elementor-1308 .elementor-element.elementor-element-7668bb9 .ovaev-event-title{font-size:30px;}.elementor-1308 .elementor-element.elementor-element-5dc2e39 > .elementor-widget-container{margin:0px 0px 35px 0px;}.elementor-1308 .elementor-element.elementor-element-ee883c9 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:30px;}.elementor-1308 .elementor-element.elementor-element-ee883c9 > .elementor-element-populated{margin:-50px 0px 0px 10px;--e-column-margin-right:0px;--e-column-margin-left:10px;}@media(max-width:1024px){.elementor-1308 .elementor-element.elementor-element-6df1039{margin-top:0px;margin-bottom:80px;}.elementor-1308 .elementor-element.elementor-element-ee883c9 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}}@media(max-width:767px){.elementor-1308 .elementor-element.elementor-element-7668bb9 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-1308 .elementor-element.elementor-element-ff09908 > .elementor-widget-container{margin:0px 0px 50px 0px;}}@media(min-width:768px){.elementor-1308 .elementor-element.elementor-element-d6d4b6c{width:67%;}.elementor-1308 .elementor-element.elementor-element-ee883c9{width:33%;}}</style>
  136.         <div data-elementor-type="page" data-elementor-id="1308" class="elementor elementor-1308">
  137.         {% if query != null %}
  138.             {% for f in query %}
  139.             <section class="elementor-section elementor-top-section elementor-element elementor-element-6df1039 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="6df1039" data-element_type="section">
  140.                 <div class="elementor-container elementor-column-gap-default">
  141.                 <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-d6d4b6c" data-id="d6d4b6c" data-element_type="column">
  142.                     <div class="elementor-widget-wrap elementor-element-populated">
  143.                         <div class="elementor-element elementor-element-7668bb9 elementor-widget elementor-widget-ova_event_title" data-id="7668bb9" data-element_type="widget" data-widget_type="ova_event_title.default">
  144.                             <div class="elementor-widget-container">
  145.                                 <h1 class="ovaev-event-title" style="font-family: Arial; font-weight: bold; font-size: 25px;">
  146.                                     {{ f.nom }}                    
  147.                                 </h1>
  148.                             </div>
  149.                             <div class="elementor-widget-container">
  150.                                 <h5 class="ovaev-event-title" style="font-size: 25px; color: #ff6600; font-family: Arial;font-weight: bolder;">
  151.                                     {{ f.thmnom }}                    
  152.                                 </h5>
  153.                             </div>
  154.                         </div>
  155.                         <div class="elementor-element elementor-element-e0d81c8 elementor-widget elementor-widget-ova_event_content" data-id="e0d81c8" data-element_type="widget" data-widget_type="ova_event_content.default">
  156.                             <div class="elementor-widget-container">
  157.                                 <div class="ovaev-event-content">
  158.                                     {% if f.description != null %}
  159.                                         {{ f.description|raw }}
  160.                                     {% else %}
  161.                                         <p>The City Government is excited to announce an upcoming event that will showcase all the amazing things our community has to offer. Join us on Saturday for our community fair, where local vendors, artists, and organizations will come together to showcase their products and services.</p>
  162.                                         <p>This fun-filled event will feature live music performances, food trucks, children&#8217;s activities, and much more. Meet local business owners and community leaders and learn about their vision for our city&#8217;s future. There will also be opportunities to learn more about local government initiatives and community development projects.</p>
  163.                                         <h2 class="wp-block-heading">Event requirements</h2>
  164.                                         <p>This event is free and open to the public, so bring your family and friends along to enjoy a day of fun and community spirit. We look forward to seeing you there!</p>
  165.                                         
  166.                                     {% endif %}
  167.                                 </div>
  168.                             </div>
  169.                         </div>
  170.                     </div>
  171.                 </div>
  172.                 <div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-ee883c9" data-id="ee883c9" data-element_type="column">
  173.                     <div class="elementor-widget-wrap elementor-element-populated">
  175.                         <div  class="elementor-element elementor-element-bdfb755 elementor-widget elementor-widget-ova_event_info" data-id="bdfb755" data-element_type="widget" data-widget_type="ova_event_info.default">
  176.                             <div class="elementor-widget-container">
  177.                             <div class="ovaev-event-info">
  178.                                 <div class="row">
  179.                                     <div class="col-md-2">
  180.                                         <span class="label"><i class="fa fa-calendar-o" aria-hidden="true"></i> </span>
  181.                                     </div>
  182.                                     <div class="col-md-10">
  183.                                         <span class="info"><b style="color: #051a53;">{{ f.dates_session}} {{ annee }}</b></span>
  184.                                     </div>
  185.                                 </div>
  186.                                 <div class="row" style="margin-top: 30px !important;">
  187.                                     <div class="col-md-2">
  188.                                         <span class="label"><i class="fa fa-map-marker" aria-hidden="true"></i> </span>
  189.                                     </div>
  190.                                     <div class="col-md-10">
  191.                                         <span class="info"><b style="color: #051a53;">{{ f.pays }}, {{ f.vilnom }}</b></span>
  192.                                     </div>
  193.                                 </div>
  194.                                 <div class="row" style="margin-top: 20px !important; margin-bottom: 20px !important;">
  195.                                     <div class="col-md-2">
  196.                                         <span class="label"><i class="fa fa-money" aria-hidden="true"></i> </span>
  197.                                     </div>
  198.                                     <div class="col-md-10">
  199.                                         <span class="info"><b style="color: #051a53;">{{ f.prix }} {{ f.devise }}</b></span>
  200.                                     </div>
  201.                                 </div>
  202.                                 <!--
  203.                                 <ul class="info-contact">
  204.                                     <li>
  205.                                         <span class="label"><i class="fa fa-calendar-o" aria-hidden="true"></i> </span>
  206.                                         <span class="info">{{ f.dates_session}} {{ annee }}</span>
  207.                                     </li>
  208.                                     <li style="margin-top: -10px !important;">
  209.                                         <span class="label"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
  210.                                         <span class="info">{{ f.pays }}, {{ f.vilnom }}</span>
  211.                                     </li>
  212.                                     <li style="margin-top: -10px;">
  213.                                         <span class="label"><i class="fa fa-money" aria-hidden="true"></i></span>
  214.                                         <span class="info">
  215.                                             <a href="https://demo.ovathemewp.com/gimont/event_category/museum/" title="Museum">{{ f.prix }} {{ f.devise }}</a>
  216.                                         </span>                        
  217.                                     </li>
  219.                                 </ul>
  220.                                 -->
  221.                         
  222.                                 
  223.                                 <a href="{{ path('front.inscription',{'slug': f.slug, 'id': f.id,'seminaires': 'seminaires interantionaux'}) }}">
  224.                                     <div class="btn-register" style="">
  225.                                         S'inscrire        
  226.                                     </div>
  227.                                 </a>
  228.                             
  229.                             </div>
  230.                             </div>
  231.                         </div>
  232.                         <div class="shadow btn-fichier">
  233.                             <a href="{{ asset('public/catalogues/Catalogue_2026_CIMEF_INTERNATIONAL.pdf') }}">
  234.                                 <div class="row">
  235.                                     <div class="col-md-2 col-sm-12" style="text-align: center;">
  236.                                         <a href="{{ asset('public/catalogues/Catalogue_2026_CIMEF_INTERNATIONAL.pdf') }}" title="Download files" class="icon" data-id="829">
  237.                                             <i class="gimonticon-download" style="font-size: 22px; color: #fff;" aria-hidden="true"></i>
  238.                                         </a>    
  239.                                     </div>
  240.                                     <div class="col-md-10 col-sm-12">
  241.                                         <a href="{{ asset('public/catalogues/Catalogue_2026_CIMEF_INTERNATIONAL.pdf') }}">
  242.                                         <label style="color: #fff; font-size: 20px; font-family: arial; cursor: pointer;">Télécharger le catalogue 2026</h3>
  243.                                         </a>
  244.                                     </div>
  245.                                 </div>
  246.                             </a>
  247.                         </div>
  250.                         <div class="elementor-element elementor-element-4d96d43 elementor-widget elementor-widget-ova_event_location" 
  251.                         data-id="4d96d43" data-element_type="widget" data-widget_type="ova_event_location.default">
  252.                             <div class="elementor-widget-container">
  253.                                 <div id="map"></div>
  254.                             </div>
  255.                         </div>
  259.                     </div>
  260.                 </div>
  261.                 </div>
  262.             </section>
  263.             {% endfor %}
  264.         {% else %}
  265.             <div style="margin-top: 20px; text-align: justify;">
  266.                 <h2>Informations indisponible</h2>
  267.             </div>
  268.         {% endif %}
  270.         </div>
  271.       </div>
  277.   
  278.   <script>
  279.     // Icône personnalisée
  280.     var customIcon = L.icon({
  281.         iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
  282.         shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
  283.         iconSize: [25, 41],
  284.         iconAnchor: [12, 41],
  285.         popupAnchor: [1, -34]
  286.     });
  288.     // Layers de base
  289.     var planLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  290.         attribution: '&copy; OpenStreetMap contributors'
  291.     });
  293.     var satelliteLayer = L.tileLayer(
  294.         'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  295.         {
  296.             attribution: '© Esri, Maxar'
  297.         }
  298.     );
  300.     // Initialisation de la carte (Plan par défaut)
  301.     var map = L.map('map', {
  302.         center: [20, 0],
  303.         zoom: 2,
  304.         layers: [planLayer]
  305.     });
  307.     // Bouton Plan / Satellite
  308.     L.control.layers({
  309.         "Plan": planLayer,
  310.         "Satellite": satelliteLayer
  311.     }).addTo(map);
  313.     // Données venant de Twig
  314.     var locations = {{ locations|json_encode|raw }};
  315.     var markers = [];
  316.     
  317.     locations.forEach(function(location) {
  318.     var marker = L.marker([location.lat, location.lng], { icon: customIcon })
  319.         .addTo(map)
  320.         .bindPopup(`
  321.             <strong>${location.ville}</strong><br>
  322.             <a href="https://www.google.com/maps?q=&layer=c&cbll=${location.lat},${location.lng}"
  323.                target="_blank">
  324.                Voir Street View
  325.             </a>
  326.         `);
  328.     markers.push(marker);
  329. });
  332. /*
  333.     locations.forEach(function(location) {
  334.         var marker = L.marker([location.lat, location.lng], { icon: customIcon })
  335.             .addTo(map)
  336.             .bindPopup(location.ville);
  337.         markers.push(marker);
  338.     });
  339.     */
  341.     // Zoom + ouverture popup
  342.     function zoomOn(lat, lng) {
  343.         map.setView([lat, lng], 12);
  345.         markers.forEach(function(marker) {
  346.             var position = marker.getLatLng();
  347.             if (position.lat === lat && position.lng === lng) {
  348.                 marker.openPopup();
  349.             }
  350.         });
  351.     }
  352.         
  356.     
  357. </script>
  359. </div>
  360.     {% include 'section/footer.html.twig' %}               
  361. {% endblock %}