templates/default/digitalManufacturingServices.html.twig line 1

Open in your IDE?
  1. {# BASE LOAD #}
  2. {% extends 'base.html.twig' %}
  5. {# TITLE TOP PAGE #}
  6. {% block title %}CPI | Digital Manufacturing Services{% endblock %}
  8. {# CSS #}
  9. {% block stylesheet %}
  10.     <meta property="og:image" content="{{asset('img/industrialisation/expertise.png')}}">
  11.     
  12.     {# CSS DU CMS #}
  13.     <link rel="stylesheet" href="{{ asset('css/cmsContent.css')}}">
  14.     <link rel="stylesheet" href="{{ asset('css/cms.css')}}">
  15.     {# / #}
  16.     <link rel="stylesheet" href="{{asset('slick/slick.css')}}">
  17.     <link rel="stylesheet" href="{{asset('slick/slick-theme.css')}}">
  18. {% endblock %}
  22. {# BODY HOME PAGE #}
  23. {% block body %}
  25. <main>
  27. {% if ip == '90.63.222.84' or ip =='193.148.82.168' or ip =='5.48.160.74' %}
  29. {# CMS LOAD ADMIN MODE #}
  30. {% if app.user %}
  31.     {% include 'cms.html.twig' %}
  32. {% endif %}
  34. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ -->
  37. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  GESTION DES SECTION ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  39. {% set i = 0 %}
  40. {% for section in sections %}
  41. {% set i = i +1 %}
  42.           
  43. <section id="section{{section.id}}" style="
  44.     {% if section.image %}
  45.         background-image: url(../uploads/sections/{{section.image}});
  46.         background-size: contain;
  47.         background-repeat: repeat-x;
  48.         background-color: #170069;
  50.     {% else %}
  51.         background-color:{{section.color}}; 
  52.     {% endif %}
  55.     {% if i > 1 %}
  56.         margin-top:-54px
  57.     {% endif %} 
  58. ">
  60. <style>
  61. .accordion-body li{
  62.     color:white;
  63. }
  64. .accordion-body li p{
  65.     margin-bottom:0;
  66. }
  69. @media screen and (max-width: 990px) {
  70.     
  71.   #bloc424{
  72.     order:1;
  73. }
  75. #bloc426{
  76.     order:2;
  77. }
  79. #bloc452{
  80.     order:3;
  81. }
  83. #bloc486{
  84.     order:2;
  85. }
  87.     
  88. }
  95. </style>
  97. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  99. {% set y = 0 %}
  100. {% for res in section.lignes %}
  101. {% set y = y+1 %}
  102.     <div  id="{% if i == 1 %}sectionMain{% else %}sectionReste{% endif %}" data-aos="fade-up" data-aos-duration="1000" style="{% if i == 1 %}padding-top:237px;padding-bottom:237px;
  103.     {% else %}
  104.     {% if i > 1 %}
  105.     padding-top:112px; padding-bottom:112px;
  106.     {% endif %}
  107.     {% if y > 1 %}
  108.     padding-top:0; padding-bottom:112px;
  109.     {% endif %}
  110.     
  111.     {% endif %}">
  112.         <div class="container text-light pb-3"> 
  113.             <div class="row pt-5 justify-content-center justify-content-md-start">
  115.               {% if app.user %}
  116.                             <a href="{{path('app_deleteLigne',{'id':res.id,'pages':page.id} )}}" onclick="return confirm('Êtes-vous sûr ?')">
  117.                                 <div class="d-flex justify-content-end">
  118.                                     <div class="d-flex justify-content-center align-items-center cubeIcon2">
  119.                                         <i class="fa-solid fa-trash"></i>
  120.                                     </div>
  121.                                 </div>
  122.                             </a>
  123.                         {% endif %}
  124.                 {% for res2 in res.blocs %}
  125.                     <div id="bloc{{res2.id}}" data-aos="fade-up" data-aos-duration="1000" class="
  126.                     
  128.                         {% if res2.type == 2 %}
  129.                             col-xl-2 col-12
  130.                         {% endif %}
  132.                         {% if res2.type == 3 %}
  133.                             col-xl-3 col-md-6 col-12
  134.                         {% endif %}
  136.                         {% if res2.type == 4 %}
  137.                             col-xl-4 col-md-6 col-12
  138.                         {% endif %}
  140.                         {% if res2.type == 6 %}
  141.                             col-lg-6 col-12
  142.                         {% endif %}
  144.                         {% if res2.type == 8 %}
  145.                             col-lg-8 col-12
  146.                         {% endif %}
  148.                         {% if res2.type == 12 %}
  149.                             col-12
  150.                         {% endif %}
  154.                         
  155.                     
  156.                     
  157.                     " {% if app.user %} style="border:dashed 1px grey; border-radius:10px; margin-bottom:10px"{% endif %}>
  158.                     
  159.                                     
  160.                         {% if res2.contenuses is not empty %}
  161.                             {% if res2.contenuses.0.typesContenus.id != 8 %}
  162.                             {% endif %}
  163.                         {% endif %}
  165. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  166. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   AFFCHER CONTENUS   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  167. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  169.                         {% if res2.contenuses is not empty %}
  172.                             <!-- ///\\\ ///\\\ TEXTE ///\\\ ///\\\  -->
  174.                             {% if res2.contenuses.0.typesContenus.id == 1 %}
  176.                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  177.                                 
  178.                                 {% if res2.contenuses.0.document is not empty %}
  179.                                 <a href="{{res2.contenuses.0.document}}" target="_blank" style="text-decoration:none;">
  180.                                             <button type="button btn-modal" class="justify-content-center align-items-center text-center" 
  181.                                                 style="
  182.                                                   background-color:{{res2.contenuses.0.background}}!important; 
  183.                                                     border:solid 3px {{res2.contenuses.0.couleur1}}!important;
  184.                                                     border-radius: 30px!important;
  185.                                                     color: rgb(0, 206, 255);
  186.                                                     font-weight: bold;
  187.                                                     background-color: #0c24b3;
  188.                                                     cursor: pointer;
  189.                                                     padding-top: 12px;
  190.                                                     padding-left: 50px;
  191.                                                     padding-right: 50px;
  192.                                                     margin-top:20px
  193.                                                  
  194.                                                     
  195.                                             ">
  196.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</button>
  197.                                         </a>
  198.                                 {% endif %}
  199.                             {% endif %}
  201.                             {% if i == 1 %}
  202.                                 {% if loop.first %}
  203.                                     <div class="traitBlanc"></div>
  204.                                 {% endif %}
  205.                             {% endif %}
  207.                             <!-- ///\\\ ///\\\ FIN TEXTE ///\\\ ///\\\  -->
  210.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  213.                             <!-- ///\\\ ///\\\ IMAGE ///\\\ ///\\\  -->
  215.                             {% if res2.contenuses is not empty %}
  216.                                 {% if res2.contenuses.0.typesContenus.id == 2 %}
  217.                                     <div  class="col-12 d-flex  mt-5 mt-lg-0 justify-content-{{res2.contenuses.0.background}}">
  218.                                     {% if res2.contenuses.0.lien %}
  219.                                     <a href="{{res2.contenuses.0.lien}}" target="_blank">
  220.                                     {% endif %}
  221.                                         <img data-aos="fade-up" data-aos-duration="1000" class="img-fluid imgRadius" src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  222.                                     
  223.                                     {% if res2.contenuses.0.lien %}
  224.                                     </a>
  225.                                     {% endif %}
  226.                                     </div>
  227.                                 {% endif %}
  228.                             {% endif %}
  230.                             <!-- ///\\\ ///\\\ FIN IMAGE ///\\\ ///\\\  -->
  233.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  236.                             <!-- ///\\\ ///\\\ VIDEOS ///\\\ ///\\\  -->
  238.                             {% if res2.contenuses is not empty %}
  239.                                 {% if res2.contenuses.0.typesContenus.id == 3 %}
  240.                                     <div data-aos="fade-up" data-aos-duration="1000" class="col-12 justify-content-center">
  241.                                         <div class="image">             
  242.                                             <iframe class="img-fluid" style="height: 165px !important; width: 100% !important; border-radius: 15px!important;" src="{{res2.contenuses.0.video}}" title="YouTube video {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  243.                                         </div>
  245.                                         <div class="texte">
  246.                                             <p style="font-weight:bold">
  247.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}
  248.                                             </p>
  249.                                         </div>
  250.                                     </div>            
  251.                                 {% endif %}
  252.                             {% endif %}
  254.                             <!-- ///\\\ ///\\\ FIN VIDEO ///\\\ ///\\\  -->
  257.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  260.                             <!-- ///\\\ ///\\\ BOX PICTO  ///\\\ ///\\\  -->
  262.                             {% if res2.contenuses is not empty %}
  263.                                 {% if res2.contenuses.0.typesContenus.id == 4 %}  
  264.                                 <div class="cartes-2">           
  265.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  266.                                         <div class="image d-flex justify-content-center">
  267.                                             <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  268.                                         </div>
  269.                                         <div class="corps-carte">
  270.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}};">
  271.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  272.                                             </div>
  273.                                             <div class="texte-carte" style=" background-color:{{res2.contenuses.0.couleur1}}">
  274.                                                 <div class="texte-1" style="min-height: 161px;">
  275.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  276.                                                 </div>
  277.                                                 {% if res2.contenuses.0.video is not empty %}
  278.                                                     <div class="button-carte">
  279.                                                         <a href="{{res2.contenuses.0.video}}" >
  280.                                                             <button class="buttonMore">En savoir plus</button>
  281.                                                         </a>
  282.                                                     </div>
  283.                                                 {% endif %}
  284.                                             </div>   
  285.                                         </div>
  286.                                     </div>
  287.                                 </div>
  288.                                 {% endif %}
  289.                             {% endif %}
  290.                             
  291.                             <!-- ///\\\ ///\\\ FIN BOX PICTO ///\\\ ///\\\  -->
  292.                                    
  294.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  297.                             <!-- ///\\\ ///\\\ AVANTAGES  ///\\\ ///\\\  -->
  299.                             {% if res2.contenuses is not empty %}
  300.                                 {% if res2.contenuses.0.typesContenus.id == 7 %}
  301.                                     <div data-aos="fade-up" data-aos-duration="1000" class="avantages">
  302.                                         <div class="carteA bg-bleu" style="background-color:{{res2.contenuses.0.background}}">
  303.                                             <div class="tete-carte d-flex flex-column flex-md-row">
  304.                                                 {% if res2.contenuses.0.image != '' %}
  305.                                                     <img class="img-fluid" src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="">
  306.                                                 {% endif %}
  307.                                                 <span style="font-weight:bold">{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</span>
  308.                                             </div>
  309.                                             <div class="texte-carte">
  310.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  311.                                             </div>
  312.                                         </div>
  313.                                     </div>
  314.                                 {% endif %}
  315.                             {% endif %}
  317.                             <!-- ///\\\ ///\\\ FIN AVANTAGES ///\\\ ///\\\  -->
  320.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  323.                             <!-- ///\\\ ///\\\ ACCORDEON  ///\\\ ///\\\  -->
  325.                             {% if res2.contenuses.0.typesContenus.id == 8 %}
  326.                                 <div data-aos="fade-up" data-aos-duration="1000" class="texteDeroulant text-light">
  327.                                     <div class="accordion" id="accordionExample">
  328.                                         {% set ac = 0 %}
  330.                                          <div style="margin-bottom:32px;">
  331.                                         {% if app.request.locale == 'fr' %}{{res2.contenuses.0.titreFr|raw}}{% else %}{{res2.contenuses.0.titreEn|raw}}{% endif %}
  332.                                         </div>
  334.                                         {% for res3 in res2.contenuses.0.accordeons %}
  335.                                             {% set ac = ac+1 %}
  336.                                             <div class="accordion-item" style="background-color:{{res3.background}}!important;">
  337.                                                 <h2 class="accordion-header" id="heading{{res3.id}}">
  338.                                                     <button class="button1-accordion accordion-button" style="background-color:{{res3.background}}!important;" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{res3.id}}" aria-expanded="true" aria-controls="collapse{{res3.id}}">
  339.                                                     <i class="fa {{ ac == 1 ? 'fa-plus-circle' : 'fa-plus-circle' }}" style="margin-right:10px;font: normal!important;" aria-hidden="true"></i>{% if app.request.locale == 'en' %}{{res3.TitreEn|raw}}{% else %}{{res3.TitreFr|raw}}{% endif %}
  340.                                                     </button>
  341.                                                 </h2>
  342.                                                         
  343.                                                 <div id="collapseOne" class="accordion-collapse collapse {% if ac == 1 %}{% endif %}" aria-labelledby="heading{{res3.id}}" data-bs-parent="#accordionExample">
  344.                                                     <div class="accordion-body">
  345.                                                         <div class="accordion-hr"></div>
  346.                                                         {% if app.request.locale == 'en' %}{{res3.TexteEn|raw}}{% else %}{{res3.TexteFr|raw}}{% endif %}   
  347.                                                     </div>
  348.                                                 </div>
  349.                                             </div>
  351.                                         {% endfor %}
  352.                                     </div>                                                        
  353.                                 </div>
  355.                                 <script>
  356.                                     $(document).ready(function () {
  357.                                         $('.accordion-button').click(function () {
  358.                                             $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
  359.                                             $('.accordion-button').not(this).find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
  360.                                         });
  361.                                     });
  362.                                </script>
  363.  
  364.                                 {% if app.user %}           
  365.                                     <br>
  366.                                     <div class="d-flex justify-content-center">
  367.                                         <a href="{{path('app_accordeons_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les accordéons</button></a>
  368.                                     </div>
  369.                                 {% endif %}
  370.               
  371.                             {% endif %}
  373.                             <!-- ///\\\ ///\\\ FIN ACCORDEON  ///\\\ ///\\\  -->
  375.                         {% endif %}
  377.                             
  378.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  382.                         {% if res2.contenuses is not empty %}
  384.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  386.                             {% if res2.contenuses.0.typesContenus.id == 10 %}
  387.                                 <div data-aos="fade-up" data-aos-duration="1000" class="container d-flex paddingPerso2" >
  388.                                     <div class="slider-demo-valeur">
  391.                                         {% for carou in  res2.contenuses.0.carousels|sort((a, b) => a.ordre < b.ordre ? -1 : 1) %}
  392.                                             <div data-aos="fade-up" data-aos-duration="1000" class="carte " style="padding-left: 15px!important;padding-right: 15px;!important">
  393.                                                 <div class="col-12">
  394.                                                     <div class="image d-flex justify-content-center">
  395.                                                         <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  396.                                                     </div>
  397.                                                     <div class="corps-carte">
  398.                                                         <div class="tete-carte">
  399.                                                             <p>{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %} </p>
  400.                                                         </div>
  401.                                                         <div class="texte-carte">
  402.                                                             <div class="texte-1">
  403.                                                                 {% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %} 
  404.                                                             </div>
  405.                                                         </div>
  406.                                                     </div>
  407.                                                 </div>
  408.                                             </div>
  409.                                         {% endfor %}
  410.                                     </div>
  411.                                 </div>
  412.                             {% endif %}
  413.                                 
  414.                             {% if app.user %}
  415.                                 {% if res2.contenuses.0.typesContenus.id == 10 %}            
  416.                                     <br>
  417.                                     <div data-aos="fade-up" data-aos-duration="1000" class="d-flex justify-content-center">
  418.                                         <a href="{{path('app_carousels_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les carousels</button></a>
  419.                                     </div>
  420.                                 {% endif %}
  421.                             {% endif %}
  423.                             <!-- ///\\\ ///\\\ FIN BOXPICTO CAROUSEL ///\\\ ///\\\  -->
  424.                         {% endif %}
  427.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  430.                         {% if res2.contenuses is not empty %}
  432.                             <!-- ///\\\ ///\\\ BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  434.                             {% if res2.contenuses.0.typesContenus.id == 11  %}
  435.                                 <div  class="row justify-content-center justify-content-md-start" >
  436.                                     <div class="col-12">
  437.                                         <div class="row pb-4">
  438.                                             <div class="titre ">
  439.                                                 <p class="opensans_bold_red_15">TEMOIGNAGES</p>
  440.                                             </div>
  441.                                         </div>  
  442.                                     </div> 
  443.                                 </div>
  444.                                 {% set tem = -1 %}
  445.                                 <div class="row text-light" >
  446.                                     <div class="col-12">
  447.                                         <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  448.                                             <div class="carousel-indicators">
  449.                                                 {% for res in temoignages %}
  450.                                                     {% set tem = tem + 1 %}
  451.                                                     <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{tem}}" {% if tem == 0 %}class="active" aria-current="true"{% endif %} aria-label="Slide {{tem}}"></button>
  452.                                                 {% endfor %}
  453.                                             </div>
  455.                                             {% set tem2 = -1 %}
  456.                                             <div class="carousel-inner">
  457.                                                 {% for res in temoignages %}
  458.                                                     {% set tem2 = tem2 + 1 %}
  459.                                                     <div class="carousel-item {% if tem2 == 0 %}active{% endif %}">
  460.                                                         <div class="row text-light">
  461.                                                             <h2 class="">{{res.titre}}</hé>
  462.                                                         </div>
  463.                                                         <br>
  464.                                                         <p class="citation ">{{res.texte}}</p>
  465.                                                         <br>
  466.                                                         <p style="color:red; font-weight: bold; ">{{res.auteur}}</p>  
  467.                                                     </div>
  468.                                                 {% endfor %}
  469.                                             </div>
  470.                                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
  471.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  472.                                                 <span class="visually-hidden">Previous</span>
  473.                                             </button>
  474.                                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
  475.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  476.                                                 <span class="visually-hidden">Next</span>
  477.                                             </button>
  478.                                         </div>
  479.                                     </div>
  480.                                 </div>
  481.                                 {% if app.user %}
  482.                                     {% if res2.contenuses.0.typesContenus.id == 11 %}        
  483.                                         <br>
  484.                                         <div class="d-flex justify-content-center">
  485.                                             <a href="{{path('app_temoignages_index')}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les témoignages</button></a>
  486.                                         </div>
  487.                                     {% endif %}
  488.                                 {% endif %}
  489.                             {% endif %}
  491.                             <!-- ///\\\ ///\\\ FIN BOX PICTO CAROUSEL ///\\\ ///\\\  -->
  493.                         {% endif %}
  496.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  499.                         {% if res2.contenuses is not empty %}
  501.                             <!-- ///\\\ ///\\\ CAROUSEL ///\\\ ///\\\  -->
  503.                               
  504.                              
  506.                                 
  507.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}
  508.                                     <div class="carouselcms">
  509.                                             <div class="slider-cms">
  510.                                                 {% for carou in res2.contenuses.0.carousels|sort((a, b) => a.ordre < b.ordre ? -1 : 1)%}
  511.                                                     <div class="carte-slider-cms d-flex flex-column"  >        
  512.                                                         <div class="container-img-slider-cms">                               
  513.                                                             <img src="{{asset('uploads/carousels/'~carou.image)}}" alt="{% if app.request.locale == 'en' %}{{carou.titreEn}}{% else %}{{carou.titreFr}}{% endif %}">
  514.                                                         </div>
  516.                                                         {% if carou.titreEn != '' or carou.titreFr != '' %}
  517.                                                         <div class="container-titre-slider-cms"> 
  518.                                                             <h3 class="opensans_bold_32">{% if app.request.locale == 'en' %}{{carou.titreEn|raw}}{% else %}{{carou.titreFr|raw}}{% endif %}</h3>   
  519.                                                         </div>
  520.                                                         {% endif %}
  522.                                                         {% if carou.texteEn != '' or carou.texteFr != '' %}
  523.                                                             <div class="container-text-slider-cms"> 
  524.                                                                 <p>{% if app.request.locale == 'en' %}{{carou.texteEn|raw}}{% else %}{{carou.texteFr|raw}}{% endif %}</p>
  525.                                                             </div>
  526.                                                         {% endif %}
  528.                                                      
  530.                             
  531.                                                     </div>
  532.                                                 {% endfor %}
  533.                                             </div>
  534.                                     </div>
  536.                                        {% endif %}
  537.                                    
  538.                                     <style>
  539.                                     
  540.                                         .carouselcms{
  541.                                             width:100%;
  542.                                         
  543.                                         }
  545.                                         .slider-cms{
  546.                                             width:100%;
  547.                                            
  548.                                             height: 100%;
  549.                                             
  550.                                         }
  555.                                         .carte-slider-cms{
  556.                                           
  557.                                             padding-left: 5px;
  558.                                             padding-right: 5px;
  559.                                             height:100%;
  560.                                             
  561.                                             
  562.                                         }
  564.                                          .container-img-slider-cms {
  565.                                             width: 100%;
  566.                                             height: 220px;
  567.                                        
  568.                                            
  569.                                             
  570.                                         }
  572.                                         .container-img-slider-cms img{
  573.                                             width: 100%;
  574.                                             height: 100%;
  575.                                             border-radius:30px;
  576.                                             
  577.                                             
  578.                                         }
  580.                                 
  583.                                         .container-titre-slider-cms{
  584.                                   
  585.                                             height:60px;
  586.                                             padding:0;
  587.                                             margin:0;
  588.                                         }
  590.                                             .container-titre-slider-cms h3 p{
  591.                                            color:#30278d!important;
  592.                                            font-size: 26px!important;
  593.                                            margin-top:20px;
  594.                                            margin-left:2px;
  595.                                         }
  597.                                         .container-text-slider-cms{
  598.                                             height:180px;
  599.                                         }
  601.                                          .container-text-slider-cms p{
  602.                                             color: white;
  603.                                             font-weight: 100;
  604.                                             font-size:14px;
  605.                                             margin-left:2px;
  606.                                             padding-right:20px;
  608.                                         }
  610.                                             
  611.                                   
  615.                                         .slick-slide img {
  616.                                          
  617.                                             object-fit: cover!important;
  618.                                         }
  622.                                     </style>
  625.                                
  626.                                   
  628.                                 
  637.                                 
  638.                                 {% if app.user %}
  639.                                     {% if res2.contenuses.0.typesContenus.id == 9 %}              
  640.                                         <br>
  641.                                         <div class="d-flex justify-content-center">
  642.                                             <a href="{{path('app_carousels_index',{'contenu':res2.contenuses.0.id})}}"><button type="button"  style="margin-bottom:5px" class="btn btn-info"  >Gérer les carousels</button></a>
  643.                                         </div>
  644.                                     {% endif %}
  645.                                 {% endif %}
  646.                                       
  647.                             <!-- ///\\\ ///\\\ FIN CAROUSEL ///\\\ ///\\\  -->
  649.                         {% endif %}
  652.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  655.                         {% if res2.contenuses is not empty %}
  657.                             <!-- ///\\\ ///\\\ CHIFFRES CLES ///\\\ ///\\\  -->
  659.                                  {% if res2.contenuses.0.typesContenus.id == 5  %}
  660.                                     <div class="cartes-3" style="background:{{res2.contenuses.0.background}}; border-radius: 30px;">
  661.                                         <div class="carte">
  662.                                             {% if res2.contenuses.0.image is not empty %}
  663.                                                 <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="" style="width:100%;height:100%;border-radius:25px;">
  665.                                             {% else %}
  666.                                                 <div class="titre">
  667.                                                     <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} </p>
  668.                                                 </div>
  669.                                                 <div class="texte">
  670.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  671.                                                 </div>
  672.                                             {% endif %}
  673.                                         </div>
  674.                                     </div>
  675.                                 {% endif %}
  677.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES ///\\\ ///\\\  -->
  679.                         {% endif %}
  683.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  685.         
  686.                         
  687.                         {% if res2.contenuses is not empty %}
  689.                             <!-- ///\\\ ///\\\ CHIFFRES CLES 2 ///\\\ ///\\\  -->
  691.                                 {% if res2.contenuses.0.typesContenus.id == 6  %}
  692.                                     <div class="accueil4">
  693.                                         <div {% if res2.contenuses.0.titreFr|length > 4 %}id="soixante-dix"{% endif %} class="carte">
  694.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  695.                                                 <div class="chiffre justify-content-center" style="background-color:{{res2.contenuses.0.background}}">
  696.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.titreEn|raw}}{% else %}{{res2.contenuses.0.titreFr|raw}}{% endif %} 
  697.                                                 </div>
  698.                                             </div>
  699.                                             <div class="texte">
  700.                                                 {% if app.request.locale == 'en' %}{{res2.contenuses.0.texteEn|raw}}{% else %}{{res2.contenuses.0.texteFr|raw}}{% endif %} 
  701.                                             </div>
  702.                                         </div>
  703.                                     </div>
  704.                                 {% endif %}
  706.                             <!-- ///\\\ ///\\\ FIN CHIFFRES CLES 2 ///\\\ ///\\\  -->
  708.                         {% endif %}
  711.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  714.                         {% if res2.contenuses is not empty %}
  716.                             <!-- ///\\\ ///\\\ BOX PICTO + LIEN ///\\\ ///\\\  -->
  718.                                 {% if res2.contenuses.0.typesContenus.id == 13 %}
  719.                                     <div data-aos="fade-up" data-aos-duration="1000" class="carte">
  720.                                         <div class="image d-flex justify-content-center">
  721.                                             <img src="{{asset('uploads/contenus/'~res2.contenuses.0.image)}}" alt="{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}">
  722.                                         </div>
  723.                                         <div class="corps-carte">
  724.                                             <div class="tete-carte" style="background-color:{{res2.contenuses.0.background}}">
  725.                                                 <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  726.                                             </div>
  727.                                             <div class="texte-carte" style="min-height:204px; background-color:{{res2.contenuses.0.couleur1}}">
  728.                                                 <div class="texte-1">
  729.                                                     {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}
  730.                                                 </div>
  731.                                                 
  732.                                             </div>    
  733.                                         </div>
  734.                                     </div>
  735.                                 {% endif %}
  737.                             <!-- ///\\\ ///\\\ FIN BOX PICTO + LIEN ///\\\ ///\\\  -->
  738.        
  739.                         {% endif %}
  742.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  745.                         {% if res2.contenuses is not empty %}
  747.                             <!-- ///\\\ ///\\\ BOUTON ///\\\ ///\\\  -->    
  749.                                 {% if res2.contenuses.0.typesContenus.id == 12 %}   
  750.                                     {% if res2.contenuses.0.modal == "modalConsultation2" %}
  752.                                      <button type="button btn-modal" class="" data-bs-toggle="modal" data-bs-target="#exampleModalConsultationERP" 
  753.                                             style="
  754.                                                 background-color:{{res2.contenuses.0.background}}; 
  755.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  756.                                                 border-radius: 30px!important;
  757.                                                 padding-right: 0%!important;
  758.                                                 padding-left: 0%!important;
  759.                                                 padding-top: 4%!important;   
  760.                                                 width: 400px;
  761.                                                 float:right;
  762.                                         ">
  763.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  765.                                     {% elseif res2.contenuses.0.modal == "modalConsultation" %}
  767.                                      <button type="button btn-modal" class="" data-bs-toggle="modal" data-bs-target="#exampleModalConsultationBaseOutil" 
  768.                                             style="
  769.                                                 background-color:{{res2.contenuses.0.background}}; 
  770.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  771.                                                 border-radius: 30px!important;
  772.                                                 padding-right: 0%!important;
  773.                                                 padding-left: 0%!important;
  774.                                                 padding-top: 4%!important;   
  775.                                                 width: 400px;
  776.                                                 float:right;
  777.                                         ">
  778.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  780.                                     {% elseif res2.contenuses.0.modal == "modalDocumentation" %}
  782.                                      <button type="button btn-modal" class=""  data-bs-toggle="modal" data-bs-target="#exampleModalDoc" 
  783.                                             style="
  784.                                                 background-color:{{res2.contenuses.0.background}}; 
  785.                                                 border:solid 3px {{res2.contenuses.0.couleur1}};
  786.                                                 border-radius: 30px!important;
  787.                                                 padding-right: 0%!important;
  788.                                                 padding-left: 0%!important;
  789.                                                 padding-top: 4%!important;   
  790.                                                 width: 400px;
  791.                                                 float:right;
  792.                                         ">
  793.                                         {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  794.                                    
  795.                                     {% else %}
  796.                                         <a href="{{res2.contenuses.0.lien}}" target="_blank" style="text-decoration:none;">
  797.                                             <button type="button btn-modal" class="" 
  798.                                                 style="
  799.                                                     background-color:{{res2.contenuses.0.background}}; 
  800.                                                     border:solid 3px {{res2.contenuses.0.couleur1}};
  801.                                                     border-radius: 30px!important;
  802.                                                     padding-right: 0%!important;
  803.                                                     padding-left: 0%!important;
  804.                                                     padding-top: 4%!important;   
  805.                                                     width: 400px;
  806.                                                     float:right;
  807.                                             ">
  808.                                             {% if app.request.locale == 'en' %}{{res2.contenuses.0.TexteEn|raw}}{% else %}{{res2.contenuses.0.TexteFr|raw}}{% endif %}</button>
  809.                                         </a> 
  810.                                     {% endif %}
  813.                                 
  816.                                 {% endif %}
  818.                                 <!-- ///\\\ ///\\\ FIN BOUTON ///\\\ ///\\\  --> 
  820.                         {% endif %}
  823.                              <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  826.                         {% if res2.contenuses is not empty %}
  828.                             <!-- ///\\\ ///\\\ DOCUMENT ///\\\ ///\\\  -->    
  830.                                 {% if res2.contenuses.0.typesContenus.id == 14 %}                  
  831.                                      <div data-aos="fade-up" data-aos-duration="1000" class="accueil9">
  832.                                         <div class="carte">
  833.                                             <div class="image">
  834.                                                 <div class="image-container">
  835.                                                     <img src="{{asset('uploads/contenus/'~res2.contenuses.0.Image)}}" alt="Votre image">
  836.                                                     <div class="image-overlay">
  837.                                                         <center>
  838.                                                         
  839.                                                                     <!-- Button trigger modal -->
  840.                                                                 
  841.                                                                 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDoc" onclick="recupDoc({{res2.contenuses.0.id}})">
  842.                                                                 Récupérer le pdf
  843.                                                                 </button>
  845.                                                                 
  847.                                                         </center>
  848.                                                     </div>
  849.                                                 </div>
  850.                                             </div>
  851.                                             <div class="texte">
  852.                                                   <p>{% if app.request.locale == 'en' %}{{res2.contenuses.0.TitreEn|raw}}{% else %}{{res2.contenuses.0.TitreFr|raw}}{% endif %}</p>
  853.                                             </div>
  854.                                         </div>
  855.                                     </div>
  857.                                     <!-- Modal Doc -->
  859.                                     <div class="modalForm">
  860.                                     <div class="modal fade" id="exampleModalDoc" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  861.                                     <div class="modal-dialog">
  862.                                         <div class="modal-content">
  863.                                         <div class="modal-body">
  864.                                             <div class="formulaireFile">
  865.                                             <p class="pa1">Nous vous remercions de votre intérêt pour la solution DELMIAWorks.</p>
  866.                                             <p class="pa2">Afin de pouvoir obtenir la documentation, nous vous remercions de bien vouloir renseigner vos coordonnées.</p>
  868.                                             <form action="{{path('sendDocument')}}" method="post">
  869.                                                     <input type="hidden" id="idDocumentSend" name="document">
  870.                                                     <div class="row">
  871.                                                         <div class="d-flex">
  872.                                                             <div class="col-6 w100" style="">
  874.                                                                 <p class="pa3"> <b>Nom </b><span style="color:red;">*</span></p>
  875.                                                                 <input type="text" id="Nom" name="nom" required>
  876.                                                             </div>
  877.                                                             <div class="col-6 w100">
  878.                                                                 <p class="pa3"> <b>Prénom </b><span style="color:red;">*</span></p>
  879.                                                                 <input type="text" id="Prenom" name="prenom" required>
  880.                                                             </div>
  881.                                                         </div>
  883.                                                         <div class="d-flex">
  884.                                                             <div class="col-12 w100">
  885.                                                                 <p class="pa3"> <b>Nom de la société </b><span style="color:red;">*</span></p>
  886.                                                                 <input type="text" id="nomSociete" name="societe" required>
  887.                                                             </div>
  888.                                                         </div>
  890.                                                         <div class="d-flex">
  891.                                                             <div class="col-12 w100">
  892.                                                                 <p class="pa3"> <b>Votre adresse mail </b><span style="color:red;">*</span></p>
  893.                                                                 <input type="text" id="mail" name="mail" required>
  894.                                                             </div>
  895.                                                         </div>
  898.                                                         <div class="d-flex flex-md-row flex-column">
  899.                                                         <div class="col-md-7 col-12">
  900.                                                             <div class="form-check d-flex">
  901.                                                                 <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  902.                                                                 <label class="form-check-label text-light" for="flexCheckDefault">
  903.                                                                     En cochant cette case, vous acceptez le traitement des données personnelles soumises conformément à la <a href="#">Politique de Confidentialité</a>                                                       </label>
  904.                                                             </div>
  905.                                                         </div>
  906.                                                             <div class="col-md-5 col-12">
  907.                                                                 <div class="d-flex justify-content-center align-items-start">
  908.                                                                     <a href="{{ asset('../public/uploads/contenus/'~res2.contenuses.0.document)}}" target="_blank">      
  909.                                                                         <button type="submit" class="buttonDoc">Obtenir le document</button>
  910.                                                                     </a>
  911.                                                                 </div>
  912.                                                             </div>
  913.                                                         </div>
  915.                                                     </div>
  916.                                             </form>
  917.                                             </div>
  918.                                                 
  919.                                         </div>
  920.                                         </div>
  921.                                     </div>
  922.                                     </div>
  923.                                     </div>
  925.                                 {% endif %}
  927.                             <!-- ///\\\ ///\\\ FIN DOCUMENT ///\\\ ///\\\  -->    
  928.                           
  930.                         {% endif %}
  934.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  935.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  936.                             <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  941.                         <!-- ///\\\ ///\\\ BOUTON MODIFIER CMS ///\\\ ///\\\  --> 
  942.                         {% if res2.contenuses is not empty %}
  943.                             {% if res2.contenuses.0.typesContenus.id != 10 and res2.contenuses.0.typesContenus.id != 9 %}
  944.                                 {% if app.user %}
  945.                                     <div class="d-flex justify-content-center mb-3">
  946.                                         <a href="{{path('app_editContent',{'id':res2.contenuses.0.id,'type':res2.contenuses.0.typesContenus.libelle})}}">
  947.                                             <div class="d-flex justify-content-center align-items-center cubeIcon">
  948.                                                 <i class="fa-solid fa-pen"></i>
  949.                                             </div>
  950.                                         </a>
  951.                                         <a href="{{path('app_deleteContent',{'id':res2.contenuses.0.id})}}" onclick="return confirm('Êtes-vous sûr ?')">
  952.                                             <div class="d-flex justify-content-center align-items-center cubeIcon2">
  953.                                                 <i class="fa-solid fa-trash"></i>
  954.                                             </div>
  955.                                         </a>
  956.                                     </div>
  957.                                 {% endif %}
  958.                             {% endif %}
  959.                         {% endif %}
  962. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->                   
  963. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL CONTENUS    ///\\\ ///\\\ ///\\\ ///\\\ ///\\\   -->
  964. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  967. {% if app.user %}
  968.     {% if res2.contenuses is  empty %}
  969.         <button type="button" style="margin-bottom:5px" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#addContenu{{res2.id}}" >Ajouter un contenu</button>
  970.     {% endif %}
  974. <!-- ///\\\ ///\\\ MODAL CONTENUS ///\\\ ///\\\  --> 
  975.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  976.         <div class="modal-dialog">
  977.             <div class="modal-content">
  978.                 <div class="modal-body">
  979.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  981.                     <div class="container-modal d-flex flex-column">
  982.                         <h2>Ajouter un contenu</h2>
  983.                         <p>Les «blocs» peuvent contenir chacun un «Contenu» dédiés à du texte, une image, un lien youtube, …</p>
  984.                     </div>
  985.                     
  986.                     <div class="container-contenu d-flex flex-wrap  justify-content-start">
  987.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  988.                             <div class="container-picto container-picto-texte">
  989.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  990.                                     <img src="{{asset('img/cms/cpi-textes.svg')}}" alt="">
  991.                                 </div>
  992.                                 <p class="colonneText text-center">Texte</p>
  993.                             </div>
  994.                         </a>
  996.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'image'})}}">
  997.                             <div class="container-picto container-picto-texte">
  998.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  999.                                     <img src="{{asset('img/cms/cpi-images.svg')}}" alt="">
  1000.                                 </div>
  1001.                                 <p class="colonneText text-center">Image</p>
  1002.                             </div>
  1003.                         </a>
  1004.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'video'})}}">
  1005.                             <div class="container-picto container-picto-texte">
  1006.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1007.                                     <img src="{{asset('img/cms/cpi-videos.svg')}}" alt="">
  1008.                                 </div>
  1009.                                 <p class="colonneText text-center">Vidéo</p>
  1010.                             </div>
  1011.                         </a>
  1012.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'boxpicto'})}}">
  1013.                             <div class="container-picto container-picto-texte">
  1014.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1015.                                     <img src="{{asset('img/cms/cpi-box-picto.svg')}}" alt="">
  1016.                                 </div>
  1017.                                 <p class="colonneText text-center">Box + picto</p>
  1018.                             </div>
  1019.                         </a>
  1021.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'boxpictocarousel'})}}">
  1022.                             <div class="container-picto container-picto-texte">
  1023.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1024.                                     <img src="{{asset('img/cms/cpi-box-picto.svg')}}" alt="">
  1025.                                 </div>
  1026.                                 <p class="colonneText text-center">Box + picto <br> (carousel)</p>
  1027.                             </div>
  1028.                         </a>
  1029.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'chiffrescles'})}}">
  1030.                             <div class="container-picto container-picto-texte">
  1031.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1032.                                     <img src="{{asset('img/cms/cpi-chiffres-cles.svg')}}" alt="">
  1033.                                 </div>
  1034.                                 <p class="colonneText text-center">Chiffre clé</p>
  1035.                             </div>
  1036.                         </a>
  1037.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'chiffrescles2'})}}">
  1038.                             <div class="container-picto container-picto-texte">
  1039.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1040.                                     <img src="{{asset('img/cms/cpi-chiffres-cles-2.svg')}}" alt="">
  1041.                                 </div>
  1042.                                 <p class="colonneText text-center">Chiffre clé 2</p>
  1043.                             </div>
  1044.                         </a>
  1045.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'accordeon'})}}">
  1046.                             <div class="container-picto container-picto-texte">
  1047.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1048.                                     <img src="{{asset('img/cms/cpi-accordeons.svg')}}" alt="">
  1049.                                 </div>
  1050.                                 <p class="colonneText text-center">Accordéon</p>
  1051.                             </div>
  1052.                         </a>
  1053.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'avantage'})}}">
  1054.                             <div class="container-picto container-picto-texte">
  1055.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1056.                                     <img src="{{asset('img/cms/cpi-avantages.svg')}}" alt="">
  1057.                                 </div>
  1058.                                 <p class="colonneText text-center">Avantages</p>
  1059.                             </div>
  1060.                         </a>
  1061.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'carousel'})}}">
  1062.                             <div class="container-picto container-picto-texte">
  1063.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1064.                                     <img src="{{asset('img/cms/cpi-carousel.svg')}}" alt="">
  1065.                                 </div>
  1066.                                 <p class="colonneText text-center">Carousel</p>
  1067.                             </div>
  1068.                         </a>
  1069.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'temoignage'})}}">
  1070.                             <div class="container-picto container-picto-texte">
  1071.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1072.                                     <img src="{{asset('img/cms/cpi-temoignage.svg')}}" alt="">
  1073.                                 </div>
  1074.                                 <p class="colonneText text-center">Témoignage</p>
  1075.                             </div>
  1076.                         </a>
  1077.                        <a href="{{path('app_addContent',{'bloc':res2.id,'type':'button'})}}">
  1078.                             <div class="container-picto container-picto-texte">
  1079.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1080.                                     <img src="{{asset('img/cms/cpi-btn.svg')}}" alt="" style="width:57px">
  1081.                                 </div>
  1082.                                 <p class="colonneText text-center">Bouton</p>
  1083.                             </div>
  1084.                         </a> 
  1085.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'document'})}}">
  1086.                             <div class="container-picto container-picto-texte">
  1087.                                 <div class="simu-grid-picto d-flex justify-content-center align-items-center">
  1088.                                     <img src="{{asset('img/cms/cpi-doc.svg')}}" alt="" style="width:57px">
  1089.                                 </div>
  1090.                                 <p class="colonneText text-center">Document</p>
  1091.                             </div>
  1092.                         </a>                
  1093.                     </div>
  1095.                     <div class="modal-submit d-flex justify-content-end align-items-end">
  1096.                         <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1097.                     </div>
  1098.                 </div>
  1099.             </div>
  1100.         </div> 
  1101.     </div>   
  1103. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS ///\\\ ///\\\  -->                                                                        
  1106. <!-- ///\\\ ///\\\ MODAL CONTENUS 2 ///\\\ ///\\\  -->                             
  1107.     <div class="modal fade" id="addContenu{{res2.id}}" tabindex="-1" aria-labelledby="addContenu" aria-hidden="true">
  1108.         <div class="modal-dialog">
  1109.             <div class="modal-content">
  1110.                 <div class="modal-body">
  1111.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1113.                     <div class="container-modal d-flex flex-column">
  1114.                         <h2>Ajouter un contenu</h2>
  1115.                         <p>Les «blocs» sont des éléments de « Section » répartis en colonnes contenant chacun un «Contenu» dédiés à du texte, une image ou un lien youtube.</p>
  1116.                     </div>
  1117.                     
  1118.                     <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  1119.                         <a href="{{path('app_addContent',{'bloc':res2.id,'type':'texte'})}}">
  1120.                             <div class="container-choix">
  1121.                                 <div class="simu-grid d-flex justify-content-center align-items-center">
  1122.                                     <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  1123.                                         <p>12</p>
  1124.                                     </div>
  1125.                                 </div>
  1126.                                 <p class="colonneText text-center">Texte</p>
  1127.                             </div>
  1128.                         </a>
  1129.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  1130.                         <div class="container-choix">
  1131.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1132.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1133.                                     <p>6</p>
  1134.                                 </div>
  1135.                                 <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1136.                                     <p>6</p>
  1137.                                 </div>
  1138.                             </div>  
  1139.                             <p class="colonneText text-center">3 colonne</p>
  1140.                         </div>
  1141.                     </a>
  1143.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  1144.                         <div class="container-choix">
  1145.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1146.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1147.                                     <p>4</p>
  1148.                                 </div>
  1149.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1150.                                     <p>4</p>
  1151.                                 </div>
  1152.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1153.                                     <p>4</p>
  1154.                                 </div>
  1155.                             </div>
  1156.                             <p class="colonneText text-center">2 colonne</p>
  1157.                         </div>
  1158.                     </a>
  1160.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  1161.                         <div class="container-choix">
  1162.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1163.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1164.                                     <p>8</p>
  1165.                                 </div>
  1166.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1167.                                     <p>4</p>
  1168.                                 </div>
  1169.                             </div>
  1170.                             <p class="colonneText text-center">2 colonne</p>
  1171.                         </div>
  1172.                     </a>
  1174.                     <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  1175.                         <div class="container-choix">
  1176.                             <div class="simu-grid d-flex justify-content-around align-items-center">
  1177.                                 <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1178.                                     <p>4</p>
  1179.                                 </div>
  1180.                                 <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1181.                                     <p>8</p>
  1182.                                 </div>                    
  1183.                             </div>
  1184.                             <p class="colonneText text-center">2 colonne</p>
  1185.                         </div>
  1186.                     </a>
  1188.                 </div>
  1190.                 <div class="modal-submit d-flex justify-content-end align-items-end">
  1191.                     <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1192.                 </div>
  1193.             </div>
  1194.         </div>
  1195.     </div> 
  1196. </div>
  1197. {% endif %}
  1200. <!-- ///\\\ ///\\\ FIN MODAL CONTENUS 2 ///\\\ ///\\\  -->  
  1202. </div>
  1203. {% endfor %}                       
  1204. </div>
  1208. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1209. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL BLOCK       ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1210. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1211.                       
  1212. {% if app.user %}
  1213.     <div style="d-flex justify-content-center padding-top:20px">
  1214.         <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#addBloc{{res.id}}" >Ajouter un bloc</button>
  1215.             <div class="modal fade" id="addBloc{{res.id}}" tabindex="-1" aria-labelledby="addBloc" aria-hidden="true">
  1216.                 <div class="modal-dialog">
  1217.                     <div class="modal-content">
  1218.                         <div class="modal-body">
  1219.                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1221.                             <div class="container-modal d-flex flex-column">
  1222.                                 <h2>Ajouter un bloc</h2>
  1223.                                 <p>Les «blocs» sont des éléments de « Section » répartis en colonnes contenant chacun un «Contenu» dédiés à du texte, une image ou un lien youtube.</p>
  1224.                             </div>
  1225.                             
  1226.                             <div class="container-grid-choix d-flex flex-wrap justify-content-around ">
  1228.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':12})}}">
  1229.                                     <div class="container-choix">
  1230.                                         <div class="simu-grid d-flex justify-content-center align-items-center">
  1231.                                             <div class="simu-col simu-col-12 d-flex justify-content-center align-items-center">
  1232.                                                 <p>12</p>
  1233.                                             </div>
  1234.                                         </div>
  1235.                                         <p class="colonneText text-center">1 colonne</p>
  1236.                                     </div>
  1237.                                 </a>
  1238.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':66})}}">
  1239.                                     <div class="container-choix">
  1240.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1241.                                             <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1242.                                                 <p>6</p>
  1243.                                             </div>
  1244.                                             <div class="simu-col simu-col-6 d-flex justify-content-center align-items-center">
  1245.                                                 <p>6</p>
  1246.                                             </div>
  1247.                                         </div>
  1248.                                         <p class="colonneText text-center">2 colonnes</p>
  1249.                                     </div>
  1250.                                 </a>
  1251.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':444})}}">
  1252.                                     <div class="container-choix">
  1253.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1254.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1255.                                                 <p>4</p>
  1256.                                             </div>
  1257.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1258.                                                 <p>4</p>
  1259.                                             </div>
  1260.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1261.                                                 <p>4</p>
  1262.                                             </div>
  1263.                                         </div>
  1264.                                         <p class="colonneText text-center">3 colonnes</p>
  1265.                                     </div>
  1266.                                 </a>
  1268.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':84})}}">
  1269.                                 <div class="container-choix">
  1270.                                     <div class="simu-grid d-flex justify-content-around align-items-center">
  1271.                                         <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1272.                                             <p>8</p>
  1273.                                         </div>
  1274.                                         <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1275.                                             <p>4</p>
  1276.                                         </div>
  1277.                                     </div>
  1278.                                     <p class="colonneText text-center">2 colonnes</p>
  1279.                                 </div>
  1280.                                 </a>
  1282.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':48})}}">
  1283.                                     <div class="container-choix">
  1284.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1285.                                             <div class="simu-col simu-col-4 d-flex justify-content-center align-items-center">
  1286.                                                 <p>4</p>
  1287.                                             </div>
  1288.                                             <div class="simu-col simu-col-8 d-flex justify-content-center align-items-center">
  1289.                                                 <p>8</p>
  1290.                                             </div>
  1291.                                     
  1292.                                         </div>
  1293.                                         <p class="colonneText text-center">2 colonnes</p>
  1294.                                     </div>
  1295.                                 </a>
  1297.                                 <a href="{{path('app_addBloc',{'ligne':res.id,'type':3333})}}">
  1298.                                     <div class="container-choix">
  1299.                                         <div class="simu-grid d-flex justify-content-around align-items-center">
  1300.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1301.                                                 <p>3</p>
  1302.                                             </div>
  1303.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1304.                                                 <p>3</p>
  1305.                                             </div>
  1306.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1307.                                                 <p>3</p>
  1308.                                             </div>
  1309.                                             <div class="simu-col simu-col-3 d-flex justify-content-center align-items-center">
  1310.                                                 <p>3</p>
  1311.                                             </div>
  1312.                                     
  1313.                                         </div>
  1314.                                         <p class="colonneText text-center">4 colonnes</p>
  1315.                                     </div>
  1316.                                 </a>
  1317.                             </div>
  1318.                             <div class="modal-submit d-flex justify-content-end align-items-end">
  1319.                                 <button type="submit" class=" btnAdd btnAdd2">Ajouter</button>
  1320.                             </div>
  1321.                         </div>
  1322.                     </div>
  1323.                 </div> 
  1324.             </div>
  1325. {% endif %}                 
  1326.     </div>
  1328. </div>
  1329. {% endfor %}
  1332. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1333. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    MODAL SECTION     ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1334. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1337. <!-- ///\\\ ///\\\  MODAL AJOUT SECTION ///\\\ ///\\\  -->  
  1339. <div class="modal fade" id="addSection" tabindex="-1" aria-labelledby="addSection" aria-hidden="true">
  1340.     <div class="modal-dialog">
  1341.         <div class="modal-content">
  1342.             <div class="modal-body">
  1343.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  1345.                 <div class="container-modal d-flex flex-column">
  1346.                     <h2>Ajouter une section</h2>
  1347.                     <p>Les pages dont composées «Sections» contenant chacune des « Blocs » de « Contenus » répartis en colonnes</p>
  1348.                 </div>
  1349.                 <form action="{{path('app_addSection')}}" method="post" enctype="multipart/form-data">
  1350.                     <input type="hidden" name="page" value="{{page.id}}">
  1351.                     <div class="container-contenus-modal">
  1352.                         <h3>Image de fond</h3>
  1353.                         <input type="file"  name="imageSection" >  
  1354.                     </div>
  1355.                     <div class="container-contenus-modal">
  1356.                         <h3>Image rond</h3>
  1357.                         <input type="file"  name="imageRond" >   
  1358.                     </div>
  1359.                     <div class="container-contenus-modal">
  1360.                         <h3>Ordre affichage</h3>
  1361.                         <input type="number" name="ordreSection" id="ordreSection" value="{{ordreMax}}">
  1362.                     </div>
  1363.                     <div class="container-contenus-modal">
  1364.                         <h3>Couleur de section</h3>
  1365.                         <input type="text" name="couleurSection" id="couleurSection" value="#fff">
  1366.                         <div class="container-all-couleur d-flex flex-wrap">
  1367.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#ffffff')">
  1368.                                 <div class="seeColor seeColor1"></div>
  1369.                                 <p>Blanc</p>
  1370.                             </div>
  1371.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#F6F6F6')">
  1372.                                 <div class="seeColor seeColor2"></div>
  1373.                                 <p>Gris</p>
  1374.                             </div>
  1375.                             <div class="button-couleur button-color-active d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#EBE7F7')">
  1376.                                 <div class="seeColor seeColor3"></div>
  1377.                                 <p>Violet 1</p>
  1378.                             </div>
  1379.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#30278D')">
  1380.                                 <div class="seeColor seeColor4"></div>
  1381.                                 <p>Violet 2</p>
  1382.                             </div>
  1383.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#180068')">
  1384.                                 <div class="seeColor seeColor5"></div>
  1385.                                 <p>Violet 3</p>
  1386.                             </div>
  1387.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#00CEFF')">
  1388.                                 <div class="seeColor seeColor6"></div>
  1389.                                 <p>Bleu 1</p>
  1390.                             </div>
  1391.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#0047FF')">
  1392.                                 <div class="seeColor seeColor7"></div>
  1393.                                 <p>Bleu 2</p>
  1394.                             </div>
  1395.                             <div class="button-couleur button-color-noactive d-flex align-items-center justify-content-center text-center" onclick="changeColor(this, 'addSection'); saveColor('#ffda2b')">
  1396.                                 <div class="seeColor seeColor8"></div>
  1397.                                 <p>Jaune</p>
  1398.                             </div>                
  1399.                         </div> 
  1400.                     </div>
  1401.                     <div class="modal-submit d-flex justify-content-center">
  1402.                         <button type="submit" class=" btnAdd">Ajouter</button>
  1403.                     </div>    
  1404.                 </form>
  1405.             </div>
  1406.         </div>
  1407.     </div> 
  1408. </div>
  1411. <!-- ///\\\ ///\\\  UPDATE SECTION ///\\\ ///\\\  -->  
  1413. {% if app.user %}
  1415.     <div class="d-flex justify-content-center mb-3">
  1416.         <a href="{{path('app_updateSection',{'id':section.id,'pages':page.id})}}" style="color:white; text-decoration:none">
  1417.             <div class="d-flex justify-content-center align-items-center cubeIcon" style="width:200px">
  1418.                 <i class="fa-solid fa-pen" style="padding-right:10px"></i> Modifier la section
  1419.             </div>
  1420.         </a>
  1422.         <a href="{{path('app_deleteSection',{'id':section.id,'pages':page.id})}}" onclick="return confirm('Êtes-vous sûr ?')" style="color:white; text-decoration:none">
  1423.             <div class="d-flex justify-content-center align-items-center cubeIcon2" style="width:200px">
  1424.                 <i class="fa-solid fa-trash" style="padding-right:10px"></i> Supprimer la section
  1425.             </div>
  1426.         </a>
  1427.     </div>
  1428. {% endif %}
  1431. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->  
  1434. <!-- ///\\\ ///\\\  FIN SECTION + FORME BLEU SOUS SECTION DANS LE DOM ///\\\ ///\\\  --> 
  1436. </section>
  1437. <div class="container">
  1438.     <div class="formeBleu">
  1439.         <div class="row justify-content-center d-flex">
  1440.             {% if section.rond != '' %}
  1441.                 <img src="{{asset('uploads/sections/'~section.rond)}}" class="img-fluid d-none d-lg-block">                        
  1442.             {% endif %}
  1443.         </div>
  1444.     </div>
  1445. </div>
  1446. {% endfor %}
  1449. <!-- ///\\\ ///\\\  AJOUT SECTION DANS LE DOM ///\\\ ///\\\  --> 
  1452. {% if app.user %}
  1453. <div style="{% if sections|length > 0 %}padding-top:20px{% else %}padding-top:250px{% endif %}" align="center">
  1454. <!-- Button trigger modal -->
  1455. <hr style="border-top:dashed #000;">
  1456. <a data-bs-toggle="modal" data-bs-target="#addSection" style="font-size: 25px;
  1457. font-weight: bold;
  1458. color: #bfbfbf; cursor:pointer" >+ Ajouter une section</a>
  1459. <hr  style="border-top:dashed #000;">
  1462. <script>
  1463.     function saveColor(value) {
  1464.         $('#couleurSection').val(value);
  1465.     }
  1466. </script>
  1468. {% endif %}
  1469. {% endif %}
  1474. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->                   
  1475. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\    SCRIPT PCONTENT   ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1476. <!-- ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\ ///\\\  -->
  1479. <!-- ///\\\ ///\\\  SCRIPT ACCORDEON ///\\\ ///\\\  -->  
  1481. <script>
  1482.     let accordionHeaders = document.querySelectorAll('.accordion-header');
  1484.     accordionHeaders.forEach(header => {
  1485.         let button = header.querySelector('.texteDeroulant button');
  1487.         button.addEventListener('click', function () {
  1488.             let parentAccordion = header.closest('.accordion');
  1489.             let buttons = parentAccordion.querySelectorAll('.texteDeroulant button');
  1490.             let content = header.nextElementSibling; // The content section to show/hide
  1492.             // Check if the content section is already open
  1493.             if (content.classList.contains('show')) {
  1494.                 // Close the content section
  1495.                 content.classList.remove('show');
  1496.                 content.classList.add('collapse');
  1497.             } else {
  1498.                 // Close all other open sections (if any) and open this content section
  1499.                 buttons.forEach(btn => {
  1500.                     let contentToClose = btn.parentElement.nextElementSibling;
  1501.                     if (contentToClose.classList.contains('show')) {
  1502.                         contentToClose.classList.remove('show');
  1503.                         contentToClose.classList.add('collapse');
  1504.                     }
  1505.                 });
  1507.                 // Open the content section
  1508.                 content.classList.remove('collapse');
  1509.                 content.classList.add('show');
  1510.             }
  1512.             // Toggle the button color
  1513.             if (button.style.color !== 'red') {
  1514.                 buttons.forEach(btn => {
  1515.                     btn.style.color = 'white';
  1516.                 });
  1517.                 button.style.color = 'red';
  1518.             } else {
  1519.                 button.style.color = 'white';
  1520.             }
  1521.         });
  1522.     });
  1524.     let buttonsForIcon = document.querySelectorAll('.texteDeroulant button');
  1525.     let icons = document.querySelectorAll('.jsIcon');
  1526.     let previousIcon = null;
  1528.     buttonsForIcon.forEach((button, index) => {
  1529.         let icon = icons[index];
  1531.         button.addEventListener('click', function () {
  1532.             if (previousIcon !== null && previousIcon !== icon) {
  1533.                 // Restore the previous icon to fa-plus-circle
  1534.                 previousIcon.classList.remove('fa-minus-circle');
  1535.                 previousIcon.classList.add('fa-plus-circle');
  1536.             }
  1538.             if (icon.classList.contains('fa-plus-circle')) {
  1539.                 icon.classList.remove('fa-plus-circle');
  1540.                 icon.classList.add('fa-minus-circle');
  1541.             } else {
  1542.                 icon.classList.remove('fa-minus-circle');
  1543.                 icon.classList.add('fa-plus-circle');
  1544.             }
  1546.             previousIcon = icon;
  1547.         });
  1548.     });
  1549. </script>
  1551. </section>
  1560. </main>
  1562.          
  1564.          
  1565.         
  1566.          
  1567.            <script type="text/javascript">
  1568.             $(document).ready(function(){
  1569.                 $('.slider-demo-valeur').slick({
  1570.                     arrows: true,
  1571.                     infinite:true,
  1572.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1573.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1574.                     slidesToShow:4,
  1575.                     slidesToScroll:4,
  1576.                     responsive:[{
  1577.                         breakpoint:1400,
  1578.                         settings:{
  1579.                             slidesToShow:3,  
  1580.                             slidesToScroll:3,            
  1581.                         }
  1582.                     },{
  1583.                         breakpoint:1200,
  1584.                         settings:{
  1585.                             slidesToShow:2,
  1586.                             slidesToScroll:2, 
  1587.                         }
  1588.                     },
  1589.                     {
  1590.                         breakpoint:769,
  1591.                         settings:{
  1592.                             slidesToShow:1,
  1593.                             slidesToScroll:1, 
  1594.                         }
  1595.                     }],
  1596.                 });
  1597.             });
  1598.         </script>
  1600.         <script>
  1601.             function changeLanguage(selectedButton, modalId) {
  1602.                 let modal = document.getElementById(modalId);
  1603.                 let buttons = modal.querySelectorAll(".button-langue");
  1604.                 let inputField = modal.querySelector(".sectionTitle");
  1605.                 
  1606.                 buttons.forEach((button) => {
  1607.                     if (button === selectedButton) {
  1608.                         button.classList.add("button-langue-active");
  1609.                         button.classList.remove("button-langue-noactive");
  1610.         
  1611.                         // Set the input field value based on the active language
  1612.                         switch (button.textContent) {
  1613.                             case "FR":
  1614.                                 inputField.value = "Titre de la section FR";
  1615.                                 break;
  1616.                             case "EN":
  1617.                                 inputField.value = "Section Title EN";
  1618.                                 break;
  1619.                             case "DE":
  1620.                                 inputField.value = "Abschnittstitel DE";
  1621.                                 break;
  1622.                             // Add cases for other languages if needed
  1623.                             default:
  1624.                                 inputField.value = "";
  1625.                         }
  1626.                     } else {
  1627.                         button.classList.remove("button-langue-active");
  1628.                         button.classList.add("button-langue-noactive");
  1629.                     }
  1630.                 });
  1631.             }
  1632.         
  1633.             function changeColor(selectedColorButton, modalId) {
  1634.                 let modal = document.getElementById(modalId);
  1635.                 const colorButtons = modal.querySelectorAll(".button-couleur");
  1636.                 colorButtons.forEach((colorButton) => {
  1637.                     if (colorButton === selectedColorButton) {
  1638.                         colorButton.classList.add("button-color-active");
  1639.                         colorButton.classList.remove("button-color-noactive");
  1640.                     } else {
  1641.                         colorButton.classList.remove("button-color-active");
  1642.                         colorButton.classList.add("button-color-noactive");
  1643.                     }
  1644.                 });
  1645.             }
  1646.         
  1647.             function clearDefaultText(inputField) {
  1648.                 // Clear the default value if it matches the default text
  1649.                 if (inputField.value === inputField.defaultValue) {
  1650.                     inputField.value = '';
  1651.                 }
  1652.             }
  1653.         
  1654.             function restoreDefaultText(inputField) {
  1655.                 // Restore the default value if the input is empty
  1656.                 if (inputField.value === '') {
  1657.                     inputField.value = inputField.defaultValue;
  1658.                 }
  1659.             }
  1662.             function recupDoc(id)
  1663.             {
  1664.                 $('#idDocumentSend').val(id)
  1665.             }
  1666. </script>
  1667.         
  1669.   
  1670.        
  1672. <!-- ///\\\ ///\\\  IMPORT ///\\\ ///\\\  -->  
  1674. <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
  1675. <script src="{{asset('js/jquery-latest.min.js')}}"></script>
  1676. <script src="{{asset('slick/slick.js')}}"></script>
  1677. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  1681. <script type="text/javascript">
  1682.     $(document).ready(function() {
  1683.         $('.slider-demo-galerie').slick({
  1684.             arrows: true,
  1685.             infinite:true,
  1686.             autoplay: true, // Ajout de l'option autoplay
  1687.             autoplaySpeed: 4000, // Durée de chaque diapositive en millisecondes
  1688.             slidesToShow:4,
  1689.             slidesToScroll:4,
  1690.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1691.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1692.             responsive:[{
  1693.                 breakpoint:1400,
  1694.                 settings: {
  1695.                     slidesToShow:3,  
  1696.                     slidesToScroll:3,            
  1697.                 }
  1698.                 },{
  1699.                     
  1700.                 breakpoint:1200,
  1701.                 settings:{
  1702.                     slidesToShow:2,
  1703.                     slidesToScroll:2, 
  1704.                 }
  1705.                 },
  1706.                 {
  1707.                 breakpoint:769,
  1708.                 settings:{
  1709.                     slidesToShow:1,
  1710.                     slidesToScroll:1, 
  1711.                 }
  1712.             }],
  1713.         });
  1714.        
  1716.         $('.slider-demo-actu').slick({
  1717.             arrows: true,
  1718.             infinite: true,
  1719.             prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1720.             nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1721.             slidesToShow: 4,
  1722.             slidesToScroll: 4,
  1723.                 responsive:[{
  1724.                     breakpoint:1400,
  1725.                     settings:{
  1726.                         slidesToShow:3,  
  1727.                         slidesToScroll:3,            
  1728.                     }
  1729.                 },{
  1730.                     breakpoint:1200,
  1731.                     settings:{
  1732.                         slidesToShow:2,
  1733.                         slidesToScroll:2, 
  1734.                     }
  1735.                 },
  1736.                 {
  1737.                     breakpoint:769,
  1738.                     settings:{
  1739.                         slidesToShow:1,
  1740.                         slidesToScroll:1, 
  1741.                     }
  1742.                 }],
  1743.             });
  1744.         });
  1745.         
  1746.          $(document).ready(function(){
  1747.                 $('.slider-demo-actu').slick({
  1748.                     arrows: true,
  1749.                     infinite:true,
  1750.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1751.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1752.                     slidesToShow:4,
  1753.                     slidesToScroll:4,
  1754.                     responsive:[{
  1755.                         breakpoint:1400,
  1756.                         settings:{
  1757.                             slidesToShow:3,  
  1758.                             slidesToScroll:3,            
  1759.                         }
  1760.                     },{
  1761.                         breakpoint:1200,
  1762.                         settings:{
  1763.                             slidesToShow:2,
  1764.                             slidesToScroll:2, 
  1765.                         }
  1766.                     },
  1767.                     {
  1768.                         breakpoint:500,
  1769.                         settings:{
  1770.                             slidesToShow:1,
  1771.                             slidesToScroll:1, 
  1772.                         }
  1773.                     }],
  1774.                 });
  1775.             });
  1778.                $(document).ready(function(){
  1779.                 $('.slider-cms').slick({
  1780.                     arrows: true,
  1781.                     infinite:true,
  1782.                     prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  1783.                     nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',
  1784.                     slidesToShow:4,
  1785.                     slidesToScroll:4,
  1786.                     responsive:[{
  1787.                         breakpoint:1400,
  1788.                         settings:{
  1789.                             slidesToShow:3,  
  1790.                             slidesToScroll:3,            
  1791.                         }
  1792.                     },{
  1793.                         breakpoint:1200,
  1794.                         settings:{
  1795.                             slidesToShow:2,
  1796.                             slidesToScroll:2, 
  1797.                         }
  1798.                     },
  1799.                     {
  1800.                         breakpoint:600,
  1801.                         settings:{
  1802.                             slidesToShow:1,
  1803.                             slidesToScroll:1, 
  1804.                         }
  1805.                     }],
  1806.                 });
  1807.             });
  1808.     </script>
  1810. <!-- ================================================= -->
  1813. <!-- Modal Consultation ERP -->
  1814. <div class="modalForm">
  1815. <div class="modal fade" id="exampleModalConsultationERP" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1816.   <div class="modal-dialog">
  1817.     <div class="modal-content">
  1818.       <div class="modal-body">
  1819.         <div class="formulaireFile">
  1820.           <p class="pa1">
  1821.             {% if app.request.locale == 'fr' %}
  1822.             Nous vous remercions de votre intérêt pour la solution DELMIAWorks.
  1823.             {% else %}
  1824.             Thank you for your interest in the DELMIAWorks solution.
  1825.             {% endif %}
  1826.           </p>
  1827.           <p class="pa2">
  1828.             {% if app.request.locale == 'fr' %}
  1829.             Pour réserver une consultation gratuite, nous vous remercions de bien vouloir renseigner vos coordonnées.
  1830.             {% else %}
  1831.             To book a free consultation, please enter your contact details.
  1832.             {% endif %}
  1833.           </p>
  1835.           <form action="{{path('sendConsultationERP')}}" method="post">
  1836.             <input type="hidden" id="idDocument" name="document">
  1837.             <div class="row">
  1838.               <div class="d-flex">
  1839.                 <div class="col-6 w100" style="">
  1840.                   <p class="pa3"> <b>{% trans %}form-nom{% endtrans %}</b><span style="color:red;">*</span></p>
  1841.                   <input type="text" id="Nom" name="nom" required>
  1842.                 </div>
  1843.                 <div class="col-6 w100">
  1844.                   <p class="pa3"> <b>{% trans %}form-prenom{% endtrans %}</b><span style="color:red;">*</span></p>
  1845.                   <input type="text" id="Prenom" name="prenom" required>
  1846.                 </div>
  1847.               </div>
  1849.               <div class="d-flex">
  1850.                 <div class="col-12 w100">
  1851.                   <p class="pa3"> <b>{% trans %}form-societe{% endtrans %}</b><span style="color:red;">*</span></p>
  1852.                   <input type="text" id="nomSociete" name="societe" required>
  1853.                 </div>
  1854.               </div>
  1856.               <div class="d-flex">
  1857.                 <div class="col-12 w100">
  1858.                   <p class="pa3"> <b>{% trans %}form-email{% endtrans %}</b><span style="color:red;">*</span></p>
  1859.                   <input type="text" id="mail" name="mail" required>
  1860.                 </div>
  1861.               </div>
  1863.               <div class="d-flex flex-md-row flex-column">
  1864.                 <div class="col-md-7 col-12">
  1865.                   <div class="form-check d-flex">
  1866.                     <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  1867.                     <label class="form-check-label text-light" for="flexCheckDefault">
  1868.                       {% trans %}form-condition1{% endtrans %}<a href="{{asset('P-CPI-0032-RevOR-Politique protection des données site internet.pdf')}}" target="_blank"> {% trans %}form-condition2{% endtrans %}</a>
  1869.                     </label>
  1870.                   </div>
  1871.                 </div>
  1872.                 <div class="col-md-5 col-12">
  1873.                   <div class="d-flex justify-content-center align-items-start">
  1874.                     <button type="submit" class="buttonDoc">
  1875.                       {% if app.request.locale == 'fr' %}Envoyer votre demande{% else %}Send your request{% endif %}
  1876.                     </button>
  1877.                   </div>
  1878.                 </div>
  1879.               </div>
  1880.             </div>
  1881.           </form>
  1882.         </div>
  1883.       </div>
  1884.     </div>
  1885.   </div>
  1886. </div>
  1887. </div>
  1890. <!-- Modal Consultation Base Outil -->
  1891. <div class="modalForm">
  1892. <div class="modal fade" id="exampleModalConsultationBaseOutil" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  1893.   <div class="modal-dialog">
  1894.     <div class="modal-content">
  1895.       <div class="modal-body">
  1896.         <div class="formulaireFile">
  1897.           <p class="pa1">
  1898.             {% if app.request.locale == 'fr' %}
  1899.             Nous vous remercions de votre intérêt pour la solution Base outils coupants - Wintool.
  1900.             {% else %}
  1901.             Thank you for your interest in the Wintool cutting tool base solution.
  1902.             {% endif %}
  1903.           </p>
  1904.           <p class="pa2">
  1905.             {% if app.request.locale == 'fr' %}
  1906.             Pour réserver une consultation gratuite, nous vous remercions de bien vouloir renseigner vos coordonnées.
  1907.             {% else %}
  1908.             To book a free consultation, please enter your contact details.
  1909.             {% endif %}
  1910.           </p>
  1912.           <form action="{{ path('sendConsultationBaseOutils') }}" method="post">
  1913.             <input type="hidden" id="idDocument" name="document">
  1914.             <div class="row">
  1915.               <div class="col-6 mb-3">
  1916.                 <div class="pa3"> <b>{% trans %}form-nom{% endtrans %}</b><span style="color:red;">*</span></div>
  1917.                 <input type="text" id="Nom" name="nom" required>
  1918.               </div>
  1919.               <div class="col-6 mb-3">
  1920.                 <div class="pa3"> <b>{% trans %}form-prenom{% endtrans %}</b><span style="color:red;">*</span></div>
  1921.                 <input type="text" id="Prenom" name="prenom" required>
  1922.               </div>
  1923.               <div class="col-12 mb-3">
  1924.                 <div class="pa3"> <b>{% trans %}form-societe{% endtrans %}</b><span style="color:red;">*</span></div>
  1925.                 <input type="text" id="nomSociete" name="societe" required>
  1926.               </div>
  1927.               <div class="col-12 mb-3">
  1928.                 <div class="pa3"> <b>{% trans %}form-email{% endtrans %}</b><span style="color:red;">*</span></div>
  1929.                 <input type="text" id="mail" name="mail" required>
  1930.               </div>
  1931.               <div class="col-md-7 col-12 mb-3">
  1932.                 <div class="form-check d-flex">
  1933.                   <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  1934.                   <label class="form-check-label text-light" for="flexCheckDefault">
  1935.                     {% trans %}form-condition1{% endtrans %}<a href="{{ asset('P-CPI-0032-RevOR-Politique protection des données site internet.pdf') }}" target="_blank"> {% trans %}form-condition2{% endtrans %}</a>
  1936.                   </label>
  1937.                 </div>
  1938.               </div>
  1939.               <div class="col-md-5 col-12 mb-3">
  1940.                 <div class="d-flex justify-content-center align-items-start">
  1941.                   <button type="submit" class="buttonDoc">
  1942.                     {% if app.request.locale == 'fr' %}Envoyer votre demande{% else %}Send your request{% endif %}
  1943.                   </button>
  1944.                 </div>
  1945.               </div>
  1946.             </div>
  1947.           </form>
  1948.         </div>
  1949.       </div>
  1950.     </div>
  1951.   </div>
  1952. </div>
  1953. </div>
  1960. <style>
  1961. .modalForm .modal-body{
  1962.     width: 100%;
  1963. }
  1966. .modalForm .modal-content{
  1967.     align-items: start!important;
  1968. }
  1970. .modalForm .modal-body form p{
  1971.     color:white;
  1972.     font-weight: 400;
  1973.     font-size: 18px;
  1974. }
  1976. .modalForm .modal input{
  1977.     width: 100%!important;
  1978.     border-radius: 20px;
  1979.     padding: 7px;
  1980. }
  1982. .modalForm .buttonDoc{
  1983.     background-color: #FFDE2B;
  1984.     border-radius: 50px;
  1985.     color: #30278E;
  1986.     font-family: "Open Sans";
  1987.     font-weight: bold;
  1988.     font-size: 14px;
  1989.     border: none;
  1990.     padding-left: 35px;
  1991.     padding-right: 35px;
  1992.     padding-top: 16px;
  1993.     padding-bottom: 16px;
  1995. }
  1997. .modalForm .formulaire{
  1998.     width: 100%;
  1999.     height: 100%;
  2000. }
  2002. .modalForm .formulaire p{
  2003.     color: white;
  2004.     padding: 0;
  2005.     margin: 0;
  2006.     margin-bottom: 10px;
  2008. }
  2014. .modalForm .formulaireFile input{
  2015.     /* width: 100%; */
  2016.     border-radius: 25px;
  2017.     padding-top: 1%;
  2018.     padding-bottom: 1%;
  2019.     padding-right: 10px;
  2020.     padding-left: 10px;
  2021.     border: solid 1px #ececec;
  2022.     margin-right: 5px;
  2023. }
  2025. .modalForm .formulaireFile .w100 input{
  2026.     width: 100%;
  2027.     margin-bottom: 15px;
  2028. }
  2030. .modalForm .formulaireFile .pa1{
  2031.     font-family: "Open Sans";
  2032.     font-size: 32px;
  2033.     color: #FFDE2B;
  2034.     font-weight: bold;
  2035. }
  2037. .modalForm .formulaireFile .pa2{
  2038.     font-family: "Open Sans";
  2039.     font-size: 18px;
  2040.     color: white;
  2041.     font-weight: 100;
  2042. }
  2044. .modalForm .formulaireFile .pa3{
  2045.     font-family: "Open Sans";
  2046.     font-size: 18px;
  2047.     color: white;
  2048.     font-weight: normal;
  2049. }
  2051. .modalForm .responsive-txt{
  2052.     margin-left: 50px;
  2053. }
  2055. .modalForm .form-check-input[type="checkbox"] {
  2056.     height: 20px !important;
  2057.     width: 20px!important;
  2058. }
  2060. .modalForm .responsive-img{
  2061.     width: 30%;
  2062. }
  2064. .modalForm .modal{
  2065.     --bs-modal-header-border-width: 0px!important;
  2066.     --bs-modal-footer-border-width: 0px!important;
  2067.     --bs-modal-bg: white!important;
  2068.     --bs-modal-bg: transparent!important;
  2069.     --bs-modal-border-color:transparent!important;
  2070.     --bs-modal-width: 828px!important;
  2071. }
  2073. .modalForm .modal-title{
  2074.     color: #FFDE2B;
  2075.     font-size: 32px;
  2076.     font-weight: bold;
  2078. }
  2080. /* RESPONSIVE */
  2081. @media screen and (max-width: 1080px) {
  2083.     .responsive-txt{
  2084.         margin-left: 0px;
  2085.     }
  2087.     .responsive-img{
  2088.         width: 100%;
  2089.         margin-bottom: 25px;
  2090.     }
  2092. }
  2093. </style>
  2095. {% endblock %}