templates/accueil/accueil.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}
  5. {% endblock %}
  6. {% block stylesheets %}
  7.   <link rel="stylesheet" href="{{ asset('css/temoignage.css') }}" />
  8.   <link rel="stylesheet" href="{{ asset('css/home-style.css') }}" />
  9.   <link rel="stylesheet" href="{{ asset('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css') }}" />
  10.   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  12.   {{ parent() }}
  13.   <style>
  14.     .custom-paragraph {
  15.       text-align: right; /* Aligne le texte à droite */
  16.       font-weight: bold; /* Met le texte en gras */
  17.       color: #ff0000; /* Couleur du texte d'avertissement (rouge par exemple) */
  18.       font-size: 13px;
  19.       /* Vous pouvez ajouter d'autres styles ici selon vos besoins */
  20.     }
  21.   </style>
  22. {% endblock %}
  23. {% block body %}
  24.   <div class="slider-section" id="section-actualites">
  25.     <div class="row align-items-center mt-2">
  26.       <div class="col-md-12" id="courselText">
  27.         <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  28.           <div class="carousel-inner">
  29.             {% for slider in sliders %}
  30.               <div class="carousel-item {% if loop.first %}{% endif %}">
  31.                 <div class="row align-items-center">
  32.                   <div class="col-md-5">
  33.                     <div class="slider-content">
  34.                       <h5 class="{{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">{{ slider.title }}</h5>
  35.                       <p class="{{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">{{ slider.description }}</p>
  36.                       {# <button class="btn-slider-text "> {% trans %} acceuil.Voir Plus {% endtrans %}</button> #}
  37.                     </div>
  38.                   </div>
  39.                   <div class="col-md-7">
  40.                     <img class="d-block w-100" src="{{ asset('imagees/galery/') }}{{ slider.image }}" alt="First slide" />
  41.                   </div>
  42.                 </div>
  43.               </div>
  44.             {% endfor %}
  45.           </div>
  46.         </div>
  47.       </div>
  48.       <div class="col-md-6 align-self-end">
  49.         <div class="btn-caroussel">
  50.           <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"><i class="fa-solid fa-chevron-left"></i></a>
  51.           <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"><i class="fa-solid fa-angle-right"></i></a>
  52.         </div>
  53.       </div>
  54.     </div>
  55.   </div>
  57.   <!-- ***********End-silder*********** -->
  58.   <!-- ***********scroll to top*********** -->
  59.   <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
  60.   <!-- ***********scroll to top*********** -->
  61.   <!-- ***********section-about*********** -->
  62.   <div class="section-about" id="section-about">
  63.     <div class="row align-items-center">
  64.       <div class="col-md-5 {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  65.         {% if about|length %}
  66.           <h5>{% trans %}acceuil.QUI_SOMMES_NOUS{% endtrans %}</h5>
  68.           <h2>{{ about[0].title }}</h2>
  69.           <p>{{ about[0].description|u.truncate(230, '...')|striptags }}</p>
  70.           <a href="{{ path('show_about_detail') }}"><button class="btn-slider-text">{% trans %}acceuil.Voir Plus{% endtrans %}</button></a>
  71.         {% endif %}
  72.       </div>
  73.       <div class="col-md-7">
  74.         <div class="about-imgs">
  75.           <div class="about-img-1 text-center">
  76.             <img src="{{ asset('/images/Groupe 402.png') }}" alt="" class="img-fluid" />
  77.           </div>
  78.           <div class="about-img-2 text-center">
  79.             <img src="{{ asset('/images/Groupe 401.png') }}" alt="" class="img-fluid" />
  80.             <img src="{{ asset('/images/Groupe 403.png') }}" alt="" class="img-fluid" />
  81.           </div>
  82.           <div class="about-img-3 text-center">
  83.             <img src="{{ asset('/images/Groupe 404.png') }}" alt="" class="img-fluid" />
  84.           </div>
  85.         </div>
  86.       </div>
  87.     </div>
  88.   </div>
  89.   <!-- ***********End-section-about*********** -->
  91.   <!-- ***********section-services*********** -->
  92.   <div class="section-services" id="section-services">
  93.     <div class="container">
  94.       <div class="row align-items-center">
  95.         <div class="col-md-6 services-cards">
  96.           <div class="row" id="row-service-home">
  97.             {% for key, service in services %}
  98.               {% if service is not null %}
  99.                 <div class="col-md-6 {% if key % 2 != 0 %}{% endif %}" id="card-service-home">
  100.                   <div class="card" style="height: 94%;">
  101.                     <div class="card-body">
  102.                       <i class="fa-solid fa-book"></i>
  103.                       <p class="note-position note-color">
  104.                         {% trans %}rating.note{% endtrans %}:
  105.                         {{ averageStars[service.getId()].averageStars is not null ? averageStars[service.getId()].averageStars|number_format(1) : '0' }}/5
  106.                       </p>
  107.                       <h6 class="card-title {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  108.                         {% trans %}acceuil.Service{% endtrans %}
  109.                         {{ key + 1 }}
  110.                       </h6>
  111.                       <h4 class="card-subtitle mb-2 text-muted {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}" style="text-align: initial !important;">{{ service.axe }}</h4>
  112.                       <p class="card-text" style="height:100px !important;">{{ service.description|u.truncate(200, '...')|striptags }}</p>
  114.                       <a href="{{ path('show_service_detail', { id: service.id }) }}" class="card-link"><i class="fa-solid fa-angle-right"></i></a>
  115.                     </div>
  116.                   </div>
  117.                 </div>
  118.               {% endif %}
  119.             {% endfor %}
  120.           </div>
  121.         </div>
  122.         <div class="col-md-6 services-text {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  123.           <h5>{% trans %}acceuil.Services{% endtrans %}</h5>
  124.           <h2>Lorem ipsum dolor</h2>
  125.           <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.</p>
  126.           <a href="{{ path('index_service') }}"><button class="btn-slider-text">{% trans %}acceuil.Voir Plus{% endtrans %}</button></a>
  127.         </div>
  128.       </div>
  129.     </div>
  130.   </div>
  131.   <!-- ***********End-section-services*********** -->
  132.   <!-- ***********section-formation*********** -->
  133.   <div class="section-formation" id="section-formation">
  134.     <div class="row align-items-end">
  135.       <div class="col-md-8 {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  136.         <h5>{% trans %}acceuil.Sessions_formation{% endtrans %}</h5>
  137.         <h2>Lorem ipsum dolor</h2>
  138.         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et sed diam voluptua. At vero eos et accusam et.</p>
  139.       </div>
  140.       <div class="col-md-4 text-right">
  141.         <a href="{{ path('index_formation') }}"><button class="btn-slider-text">{% trans %}acceuil.Voir Plus{% endtrans %}</button></a>
  142.       </div>
  143.     </div>
  144.     {% if formations|length %}
  145.       <div class="row article-box align-items-center">
  146.         {% set formation = formations|first %}
  147.         <div class="col-md-5 big-col" id="first-session">
  148.           <div class="card bg-dark text-white" style="background-image : url('{{ asset('imagees/galery/') }}{{ formation.photo }}'); height: 640px; max-height: 640px; background-size: cover;background-repeat: no-repeat; background-position: center" class="card-img">
  149.             {# <img src="{{asset('imagees/galery/')}}{{lastArticle.image}}" class="card-img" alt="..."> #}
  150.             <div class="card-img-overlay">
  151.               <div class="{{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }} {{ app.request.locale == 'ar_TN' ? 'text-right' : 'text-left' }}">
  152.                 <div class="">
  153.                   <h6 class="card-title">
  154.                     {% trans %}acceuil.Session N°{% endtrans %}
  155.                     {{ formation.titre }}
  156.                   </h6>
  157.                   <p class="card-text{{ app.request.locale == 'ar_TN' ? 'text-right' : 'text-left' }}">{{ formation.description|u.truncate(200, '...')|striptags }}</p>
  158.                   <p id="date-foramtion-1">
  159.                     <i class="fa-solid fa-calendar-check"></i>
  160.                     {{ app.request.locale == 'ar_TN' ? formation.dateDebut|date('y-m-d') : formation.dateDebut|date('d-m-y') }}
  161.                     <br />
  162.                     <i class="fa-regular fa-calendar-xmark"></i>
  163.                     {{ app.request.locale == 'ar_TN' ? formation.dateFin|date('y-m-d') : formation.dateFin|date('d-m-y') }}
  164.                   </p>
  165.                 </div>
  166.                 <br />
  167.                 <div class="">
  168.                   <a href="{{ path('show_formation_detail', { id: formation.id }) }}" class="btn btn-primary">{% trans %}showmore{% endtrans %}</a>
  169.                 </div>
  170.               </div>
  171.             </div>
  172.           </div>
  173.         </div>
  174.         <div class="col-md-7 small-col" id="group-formation">
  175.           <div class="row align-items-center">
  176.             {% set number_formations = formations|slice(1) %}
  177.             {% for formation in number_formations %}
  178.               <div class="col-md-6">
  179.                 <div class="card mb-3">
  180.                   <div class="row g-0">
  181.                     <div class="col-md-6">
  182.                       <div class="card-img-top" style="background-image : url('{{ asset('imagees/galery/') }}{{ formation.photo }}'); height: 300px;background-size: cover;background-repeat: no-repeat; background-position: center"></div>
  183.                       {# <img src="{{asset('imagees/galery/')}}{{article.image}}" class="card-img-top" alt="..."> #}
  184.                     </div>
  185.                     <div class="col-md-6">
  186.                       <div class="card-body {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }} {{ app.request.locale == 'ar_TN' ? 'text-right' : 'text-left' }}">
  187.                         <h6 class="card-title">{{ formation.titre }}</h6>
  188.                         <p id="date-foramtion">
  189.                           <i class="fa-solid fa-calendar-check"></i>
  190.                           {{ app.request.locale == 'ar_TN' ? formation.dateDebut|date('y-m-d') : formation.dateDebut|date('d-m-y') }}
  191.                           <br />
  192.                           <i class="fa-regular fa-calendar-xmark"></i>
  193.                           {{ app.request.locale == 'ar_TN' ? formation.dateFin|date('y-m-d') : formation.dateFin|date('d-m-y') }}
  194.                         </p>
  195.                         <p class="card-text {{ app.request.locale == 'ar_TN' ? 'text-right' : 'text-left' }}">{{ formation.description|u.truncate(100, '...')|striptags }}</p>
  196.                         <a href="{{ path('show_formation_detail', { id: formation.id }) }}" class="btn btn-primary">{% trans %}acceuil.Voir Plus{% endtrans %}</a>
  197.                       </div>
  198.                     </div>
  199.                   </div>
  200.                 </div>
  201.               </div>
  202.             {% endfor %}
  203.           </div>
  204.         </div>
  205.       </div>
  206.     {% endif %}
  207.   </div>
  208.   <!-- ***********End-section-formation*********** -->
  209.   <!-- ***********section-rappel*********** -->
  210.   <div class="section-rappel" id="section-rappel">
  211.     <div class="row align-items-center">
  212.       <div class="col-md-8">
  213.         <div class="block-text {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  214.           <h3>Lorem ipsum dolor</h3>
  215.           <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit.</p>
  216.         </div>
  217.       </div>
  218.       <div class="col-md-4 text-center">
  219.         <div class="btn-inscription">
  220.           <a class="nav-link" href="{{ path('login') }}">{% trans %}acceuil.Connexion{% endtrans %}</a>
  221.         </div>
  222.       </div>
  223.     </div>
  224.   </div>
  225.   <!-- ***********End-section-rappel*********** -->
  226.   <!-- ***********section-article*********** -->
  227.   <div class="section-article" id="section-article">
  228.     <div class="row align-items-end">
  229.       <div class="col-md-8 {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  230.         <h5>{% trans %}acceuil.Nos_articles{% endtrans %}</h5>
  231.         <h2>Lorem ipsum dolor</h2>
  232.         <p>Lorem ipsum dolor sit amet invidunt ut labore et sed diam voluptua. At vero eos et accusam et sed diam voluptua. At vero eos et accusam et.</p>
  233.       </div>
  234.       <div class="col-md-4 text-right">
  235.         <a href="{{ path('index_article') }}"><button class="btn-slider-text">{% trans %}acceuil.Voir Plus{% endtrans %}</button></a>
  236.       </div>
  237.     </div>
  238.     {% if articles|length %}
  239.       <div class="row article-box align-items-center">
  240.         {% set lastArticle = articles|first %}
  241.         <div class="col-md-5 big-col" id="first-session">
  242.           <div class="card bg-dark text-white" style="background-image : url('{{ asset('imagees/galery/') }}{{ lastArticle.image }}'); height: 640px; max-height: 640px; background-size: cover;background-repeat: no-repeat; background-position: center" class="card-img">
  243.             {# <img src="{{asset('imagees/galery/')}}{{lastArticle.image}}" class="card-img" alt="..."> #}
  244.             <span class="{{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  245.               {{ lastArticle.prix }}
  246.               {% trans %}acceuil.TND{% endtrans %}
  247.             </span>
  248.             <div class="card-img-overlay">
  249.               <div class="text-overlay">
  250.                 <h6 class="card-title">{{ lastArticle.titre }}</h6>
  251.                 <p class="card-text {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'text-left' }}">{{ lastArticle.description|u.truncate(200, '...')|striptags }}</p>
  252.                 <a href="{{ path('show_article_detail', { id: lastArticle.id }) }}" class="btn btn-primary">{% trans %}acceuil.Voir Plus{% endtrans %}</a>
  253.               </div>
  254.             </div>
  255.           </div>
  256.         </div>
  258.         <div class="col-md-7 small-col" id="group-formation">
  259.           <div class="row align-items-center">
  260.             {% set arrayArticles = articles|slice(1) %}
  261.             {% for article in arrayArticles %}
  262.               <div class="col-md-6">
  263.                 <div class="card mb-3">
  264.                   <div class="row g-0">
  265.                     <div class="col-md-6">
  266.                       <div class="card-img-top" style="background-image : url('{{ asset('imagees/galery/') }}{{ article.image }}'); height: 300px;background-size: cover;background-repeat: no-repeat; background-position: center"></div>
  267.                       {# <img src="{{asset('imagees/galery/')}}{{article.image}}" class="card-img-top" alt="..."> #}
  268.                     </div>
  269.                     <div class="col-md-6">
  270.                       <div class="card-body  {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}" style="text-align: initial !important ;">
  271.                         <h6 class="card-title">{{ article.titre }}</h6>
  272.                         <p id="date-foramtion">
  273.                           {{ article.prix }}
  274.                           {% trans %}acceuil.TND{% endtrans %}
  275.                         </p>
  276.                         <p class="card-text">{{ article.description|u.truncate(100, '...')|striptags }}</p>
  277.                         <a href="{{ path('show_article_detail', { id: article.id }) }}" class="btn btn-primary">{% trans %}acceuil.Voir Plus{% endtrans %}</a>
  278.                       </div>
  279.                     </div>
  280.                   </div>
  281.                 </div>
  282.               </div>
  283.             {% endfor %}
  284.           </div>
  285.         </div>
  286.       </div>
  287.     {% endif %}
  288.   </div>
  289.   <!-- ***********End-section-article*********** -->
  291.   <!-- ***********section-doc*********** -->
  292.   <div class="section-doc" id="section-doc">
  293.     <div class="row align-items-end">
  294.       <div class="col-md-8 {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  295.         <h5>{% trans %}acceuil.Centre_ressources{% endtrans %}</h5>
  296.         <h2>Lorem ipsum dolor</h2>
  297.         <p>Lorem ipsum dolor sit amet invidunt ut labore et sed diam voluptua. At vero eos et accusam et sed diam voluptua. At vero eos et accusam et.</p>
  298.       </div>
  299.       <div class="col-md-4 text-right">
  300.         <a href="{{ path('index_ressource') }}"><button class="btn-slider-text">{% trans %}acceuil.Voir Plus{% endtrans %}</button></a>
  301.       </div>
  302.     </div>
  303.     <div class="row doc-box">
  304.       {% for ressource in ressources %}
  305.         <div class="col-md-4" id="card_ressource">
  306.           <div class="card mb-3">
  307.             <div style="background-image : url('{{ asset('/upload/galerie/images/') }}{{ ressource.image }}'); height: 300px; max-height:300px; background-size: cover;background-repeat: no-repeat; border-radius: 15px; background-position: center"></div>
  308.             {# <img src="{{asset('imagees/galery/')}}{{ressource.image}}" class="card-img-top" alt="..."> #}
  309.             <div class="card-body">
  310.               <h6 class="card-title" style="  font-size:16px; text-align:left;   margin-bottom: 1.5rem">{{ ressource.titre|u.truncate(50, '...')|striptags }}</h6>
  311.               <p class="card-text" style="height: 100px">{{ ressource.description|u.truncate(200, '...')|striptags }}</p>
  312.               <a href="{{ path('show_ressource_detail', { id: ressource.id }) }}" class="btn btn-primary">{% trans %}acceuil.Voir Plus{% endtrans %}</a>
  313.               {% if ressource.getDateExpiration %}
  314.                 <p id="date-ressource">
  315.                   {% trans %}acceuil.Date_expiration{% endtrans %}
  316.                   <br />
  317.                   <i class="fa-regular fa-calendar-xmark"></i>
  318.                   {{ ressource.getDateExpiration|date('d-m-Y') }}
  319.                 </p>
  320.               {% endif %}
  321.             </div>
  322.           </div>
  323.         </div>
  324.       {% endfor %}
  325.     </div>
  326.   </div>
  327.   <!-- ***********End-section-doc*********** -->
  329.   <!-- ***********section-avis*********** -->
  330.   <div class="section-avis" id="section-tem">
  331.     <div class="row mb-5">
  332.       <div class="col-md-8 {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  333.         <h5>{% trans %}acceuil.Références_témoignages{% endtrans %}</h5>
  334.         <h2>Lorem ipsum dolor</h2>
  335.       </div>
  336.       <div class="col-md-4 text-right">
  337.         {# <a href="{{ path('index_temoignage') }}"><button class="btn-slider-text">Voir Plus</button></a> #}
  338.       </div>
  339.     </div>
  340.   </div>
  341.   <div class="container testimonials" style="    max-width: fit-content;">
  342.     <div class="row">
  343.       <div class="col-md-12">
  344.         <div class="testimonials-container">
  345.           <div class="content row align-items-center">
  346.             {% set x = 1 %}
  347.             {% for tem in temoignages %}
  348.               <div class="selectedCard" style="display:none;" id="card-{{ x }}">
  349.                 <div class="col-md-4 video pr-4" id="outer">
  350.                   {# <img src="{{asset('imagees/galery/')}}{{tem.image}}" alt="" id="imgTest"> #}
  351.                   {% if tem.videoType == 'Url' %}
  352.                     <iframe class="iframe" src="{{ tem.url }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  353.                   {% else %}
  354.                     <video width="135%" controls>
  355.                       <source class="{{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}" src="{{ asset('imagees/galery/') }}{{ tem.video }}" type="video/mp4" />
  356.                       {% trans %}acceuil.Browser_does_not_support{% endtrans %}
  357.                     </video>
  358.                   {% endif %}
  359.                 </div>
  360.                 <div class="col-md-5" id="bloc_tm">
  361.                   <h5 class="title-test">{{ tem.beneficiaire }}</h5>
  362.                   <h3 class="title-test">{{ tem.date|date('d-m-y') }}</h3>
  363.                   <strong class="name"></strong>
  364.                   <p class="{{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}" id="discription">{{ tem.description|striptags }}</p>
  365.                   <div class="{{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  366.                     <span class="fa fa-star checked"></span>
  367.                     <span class="fa fa-star checked"></span>
  368.                     <span class="fa fa-star checked"></span>
  369.                     <span class="fa fa-star"></span>
  370.                     <span class="fa fa-star"></span>
  371.                   </div>
  372.                   <a href="{{ path('show_temoignage_detail', { id: tem.id }) }}"><button class="btn-slider-text-bloc" id="btn_temoign">{% trans %}acceuil.Voir Plus{% endtrans %}</button></a>
  373.                 </div>
  374.                 <div class="col-md-2" id="bloc-logo-next">
  375.                   <div id="myCarousel" class="carousel slide" data-ride="carousel">
  376.                     <div class="carousel-inner">
  377.                       <div class="carousel-item-slider active">
  378.                         <div id="myDIV" class="authors-container">
  379.                           <div class="author selected animate__animated animate__bounce" onclick="displayCard({{ x }})">
  380.                             <img src="{{ asset('imagees/galery/') }}{{ tem.image }}" alt="" />
  381.                           </div>
  382.                           {# <div class="author selected" onclick="displayCard({{ tem.id }})"><img src="{{asset('https://img.freepik.com/free-vector/clear-blurred-background_1034-587.jpg')}} " alt="" ></div>
  383.                                                                                                                                                                                                                                                <div class="author selected" onclick="displayCard({{ tem.id }})"><img src="{{asset('https://img.freepik.com/free-vector/clear-blurred-background_1034-587.jpg')}} " alt="" ></div> #}
  384.                         </div>
  385.                         <div>
  386.                           <a class="carousel-control-next nextBtn" id="nextBtn" role="button" data-slide="next">
  387.                             <span class="carousel-control-next-icon" aria-hidden="true"></span>
  388.                             <span class="sr-only">{% trans %}acceuil.Next{% endtrans %}</span>
  389.                           </a>
  390.                           <a class="carousel-control-next prevBtn" id="prevBtn" role="button" data-slide="prev">
  391.                             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  392.                             <span class="sr-only">{% trans %}acceuil.Previous{% endtrans %}</span>
  393.                           </a>
  394.                         </div>
  395.                       </div>
  396.                     </div>
  397.                   </div>
  398.                   {#
  399.                                                                                                                                                 
  400.                                                                                                                                                             <div class="col-md-1">
  401.                                                                                                                                                             <div id="myDIV"  class="authors-container">
  402.                                                                                                                                                               {% for tem in temoignages %}
  403.                                                                                                                                                                   <div class="author selected" onclick="displayCard({{ tem.id }})"><img src="{{asset('imagees/galery/')}}{{tem.image}}" alt="" ></div>
  404.                                                                                                                                                               {% endfor %}
  405.                                                                                                                                                 #}
  406.                 </div>
  407.               </div>
  408.               {% set x = x + 1 %}
  409.             {% endfor %}
  410.           </div>
  411.         </div>
  412.       </div>
  413.     </div>
  414.   </div>
  416.   <!-- ***********End-section-avis*********** -->
  417.   <!-- ***********section-team*********** -->
  418.   <div class="section-team" id="section-equipe">
  419.     <div class="row">
  420.       <div class="col-md-8">
  421.         <div class="block-text {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  422.           <h5>{% trans %}acceuil.Equipe{% endtrans %}</h5>
  423.           <h2>Lorem ipsum dolor</h2>
  424.         </div>
  425.       </div>
  426.     </div>
  427.     <div class="row justify-content-end">
  428.       <div class="col-md-10">
  429.         <div class="owl-block">
  430.           <div class="owl-carousel owl-theme">
  431.             {% for equipe in equipes %}
  432.               <a href="{{ path('show_equipe_detail', { id: equipe.id }) }}">
  433.                 <div class="item" style="background-image : url('{{ asset('imagees/galery/') }}{{ equipe.image }}'); height: 100%;background-size: cover;background-repeat: no-repeat; background-position: center; border-radius: 15px;">
  434.                   {# <img src="{{asset('imagees/galery/')}}{{equipe.image}}" alt="" class="img-fluid"> #}
  435.                   <div class="owl-item-content">
  436.                     <div class="text-item {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}">
  437.                       <h6>{{ equipe.nom }}</h6>
  438.                       <p>{{ equipe.poste }}</p>
  439.                     </div>
  440.                   </div>
  441.                 </div>
  442.               </a>
  443.             {% endfor %}
  444.           </div>
  445.         </div>
  446.       </div>
  447.     </div>
  448.   </div>
  449.   <!-- ***********End-section-team*********** -->
  450.   <!-- ***********footer*********** -->
  451.   <div class="footer" id="footer">
  452.     <div class="row align-items-center {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }} ">
  453.       <div class="col-md-12 mb-4">
  454.         <a class="navbar-brand" href="{{ path('accueil') }}"><img src="{{ asset('/images/Fichier1.png') }}" alt="" class="img-fluid" /></a>
  455.       </div>
  456.       <div class="col-md-2" id="lien-footer">
  457.         <div class="footer-info">
  458.           {# <h6>{% trans %}acceuil.title{% endtrans %}</h6> #}
  459.           <div class="links-footer">
  460.             <a href="{{ path('accueil') }}#section-equipe">{% trans %}acceuil.Equipe{% endtrans %}</a>
  461.             <a href="{{ path('accueil') }}#section-tem">{% trans %}acceuil.Références_témoignages{% endtrans %}</a>
  462.             <a href="{{ path('index_forum') }}">{% trans %}acceuil.Forum{% endtrans %}</a>
  463.             <a href="{{ path('show_faq') }}">{% trans %}acceuil.FAQ{% endtrans %}</a>
  464.             {# <a href="{{ path('accueil') }}#footer">{% trans %}acceuil.Contact{% endtrans %}</a> #}
  465.           </div>
  466.         </div>
  467.       </div>
  468.       <div class="col-md-4" id="rsx-footer">
  469.         <div class="footer-info">
  470.           <i class="fa fa-location-dot fa-4x icon-3d"></i>
  471.           <p>
  472.             {% trans %}acceuil.Adresse{% endtrans %}
  473.           </p>
  474.         </div>
  475.         <div class="footer-info">
  476.           <i class="fa fa-phone fa-4x icon-3d"></i>
  477.           <p>71286687 - 71286935 - 71288812 - 71786350 - 71846112</p>
  478.         </div>
  479.         <div class="footer-info">
  480.           <i class="fa fa-fax fa-4x icon-3d"></i>
  481.           <p>71847225</p>
  482.         </div>
  483.         <a href="https://twitter.com/cnfcpp1" target="_blanck"><i class="fa fa-twitter fa-4x icon-3d"></i></a>
  484.         <a href="https://www.facebook.com/Centre-National-de-Formation-Continue-et-de-Promotion-Professionnelle-512963868742905/" target="_blanck"><i class="fa fa-facebook fa-4x icon-3d"></i></a>
  485.         <a href="https://plus.google.com/u/0/101359012792714963428/posts" target="_blanck"><i class="fa fa-google fa-4x icon-3d"></i></a>
  486.         <a href="https://www.linkedin.com/in/cnfcpp-tunis-38943611a/" target="_blanck"><i class="fa fa-linkedin fa-4x icon-3d"></i></a>
  487.         <a href="https://www.youtube.com/channel/UCq6adUtZTqLW3QahCmPCASw" target="_blanck"><i class="fa fa-youtube fa-4x icon-3d"></i></a>
  488.       </div>
  490.       <div class="flex-center col-md-6" id="contact-footer">
  491.         <h3>Contactez-nous</h3>
  492.         <form action="{{ path('contact') }}" method="post">
  493.           <div class="row">
  494.             <div class="col">
  495.               <input type="text" id="name" name="name" required class="feedback-input" placeholder="Nom" />
  496.             </div>
  497.             <div class="col">
  498.               <input type="tel" id="phone" name="phone" required class="feedback-input" placeholder="Téléphone" />
  499.             </div>
  500.           </div>
  501.           <div class="row">
  502.             <div class="col">
  503.               <input type="email" id="email" name="email" required class="feedback-input" placeholder="E-mail" />
  504.             </div>
  505.             <div class="col">
  506.               <input type="text" id="subject" name="subject" required class="feedback-input" placeholder="Objet" />
  507.             </div>
  508.           </div>
  509.           <div class="col-md-12 col-sm-12">
  510.             <textarea id="message" name="message" rows="5" required class="feedback-input" placeholder="Message"></textarea>
  511.             <button type="submit">Envoyer</button>
  512.           </div>
  513.         </form>
  514.       </div>
  515.     </div>
  516.   </div>
  517.   <!-- ***********End-footer*********** -->
  518.   <!-- ***********copy-rights*********** -->
  519.   <div class="copy-rights">
  520.     <div class="row align-items-center justify-content-center">
  521.       <div class="col-md-6 text-center">
  522.         <p>
  523.           {% trans %}acceuil.Copyright{% endtrans %}
  524.         </p>
  525.       </div>
  526.     </div>
  527.   </div>
  528.   <!-- ***********End-copy-rights*********** -->
  529. {% endblock %}
  531. {% block javascripts %}
  532.   {{ parent() }}
  534.   <script>
  535.         jQuery(document).ready(function ($) {
  536. $('.carousel-indicators > li:first').addClass('active');
  537. $('.carousel-inner > .carousel-item:first').addClass('active');
  538. $('.carousel').carousel({interval: 2000});
  539. });{% if temoignages | length %}let firstTem = 1
  540. console.log(firstTem)
  541. function displayCard(x) {
  543. const authorsEl = document.querySelectorAll(".author");
  544. const allCards = document.querySelectorAll(".selectedCard")
  545. authorsEl.forEach((author) => {
  546. author.classList.remove("selected");
  547. });
  548. allCards.forEach((card) => {
  549. $(card).css("display", "none");
  550. });
  552. var card = "#card-" + x;
  553. $(card).css("display", "flex");
  554. firstTem = x
  555. }
  557. displayCard(firstTem);
  558. $(".nextBtn").click(function () {
  559. if (firstTem + 1 < {{ temoignages | length }} + 1) {
  560. displayCard(firstTem + 1);
  561. }
  562. });
  564. $(".prevBtn").click(function () {
  565. console.log("prev")
  566. if (firstTem - 1 >= 1) {
  567. displayCard(firstTem - 1);
  568. }
  569. });{% endif %}
  570. /******scroll to top*******/
  571. // Get the button
  572. let mybutton = document.getElementById("myBtn");
  574. // When the user scrolls down 20px from the top of the document, show the button
  575. window.onscroll = function () {
  576. scrollFunction()
  577. };
  579. function scrollFunction() {
  580. if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  581. mybutton.style.display = "block";
  582. } else {
  583. mybutton.style.display = "none";
  584. }
  585. }
  587. // When the user clicks on the button, scroll to the top of the document
  588. function topFunction() {
  589. document.body.scrollTop = 0;
  590. document.documentElement.scrollTop = 0;
  591. }
  592.     </script>
  593.     <script>
  594. document.querySelector('.navbar-toggler').addEventListener('click', function() {
  595.     var section = document.getElementById('section-actualites');
  596.     
  597.     // Vérifiez si la marge supérieure est déjà définie sur 77%
  598.     if (section.style.marginTop === '77%') {
  599.         // Réinitialisez la marge à l'état initial
  600.         section.style.marginTop = '41px';  
  601.     } else {
  602.         // Changez la marge à 77% si elle est différente de la valeur attendue
  603.         section.style.marginTop = '77%';
  604.     }
  605. });   
  606. // Sélectionner l'élément
  607. const element = document.querySelector('.navbar-collapse.align-items-center.collapse');
  608. const section = document.getElementById('section-actualites');
  610. // Fonction pour gérer l'événement de défilement
  611. function handleScroll() {
  612.     if (element) {
  613.         element.classList.remove('show');
  614.         if (section) {
  615.             section.style.marginTop = '41px';  
  616.         }
  617.     }
  618. } 
  619. // Ajouter un écouteur d'événement de défilement à la fenêtre
  620. window.addEventListener('scroll', handleScroll);
  621. </script> 
  622.   <script>
  623.     $('form_').submit(function (e) {
  624.       $('button[type=submit]').hide()
  625.       $('#spinner').show()
  626.       e.preventDefault()
  627.       var formData = new FormData(this)
  628.       $.ajax({
  629.         url: window.location.pathname,
  630.         type: 'POST',
  631.         data: formData,
  632.         success: function (response) {
  633.           $('button[type=submit]').show()
  634.           if (response.success === false) {
  635.             Swal.fire('', response.message, 'error')
  636.           } else {
  637.             Swal.fire({
  638.               title: 'Succès',
  639.               icon: 'success',
  640.               showCancelButton: false
  641.             }).then((result) => {
  642.               if (result.isConfirmed) {
  643.                 window.location.href = '/'
  644.               }
  645.             })
  646.             form[0].reset()
  647.           }
  648.         },
  649.         cache: false,
  650.         contentType: false,
  651.         processData: false
  652.       })
  653.     })
  655.     
  656.   </script>
  657.   <script>
  658.     $('form').submit(function (e) {
  659.       $('button[type=submit]').hide()
  660.       $('#spinner').show()
  661.       e.preventDefault()
  662.       var formData = new FormData(this)
  663.       $.ajax({
  664.         url: "{{ path('contact') }}",
  665.         type: 'POST',
  666.         data: formData,
  667.         success: function (response) {
  668.           $('button[type=submit]').show()
  669.           if (response.success === false) {
  670.             Swal.fire('', response.message, 'error')
  671.           } else {
  672.             Swal.fire({
  673.               title: "Succès",
  674.               icon: 'success',
  675.               showCancelButton: false
  676.             }).then((result) => {
  677.               if (result.isConfirmed) {
  678.                 window.location.href = '/'
  679.               }
  680.             })
  681.             form[0].reset()
  682.           }
  683.         },
  684.         cache: false,
  685.         contentType: false,
  686.         processData: false
  687.       })
  688.     })
  689.   </script>
  690.   
  691. {% endblock %}