templates/front/index.html.twig line 1

Open in your IDE?
  1. {% extends 'front/base_front.html.twig' %}
  2. {% block stylesheets %} 
  3.  <link rel="stylesheet" href="{{ asset('/css/index.css') }}">
  4.  <link  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"  />
  5. {% endblock %}
  7. {% block menu %}
  8.     {% include('include/menu.html.twig') %}
  9.     
  10. {% endblock %}
  12. {% block container %}
  13.         <!-- Carousel Start -->
  14.         <div class="container-fluid p-0 mb-5 wow fadeIn" data-wow-delay="0.1s">
  15.             <div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
  16.                 <div class="carousel-inner">
  17.                     {% for slide in slides %}
  18.                         {% if slide.isPublic == 1 %}
  20.                             <div class="carousel-item {{  loop.index == 1 ? "active" : "" }}">
  21.                                     <img class="w-100" id="img-slide" src="uploads/background/{{ slide.image}}" alt="Image">
  22.                                     <div class="carousel-caption">
  23.                                         <div class="container">
  24.                                             <div class="row justify-content-start">
  25.                                                 <div class="col-lg-7">
  26.                                                  {% if  app.request.getLocale()  == 'fr' %}
  27.                                                     <h4 class="mb-5 mt-5 animated slideInDown">{{ slide.content}} </h4>
  28.                                                  {% else %}
  29.                                                     <h4 class="mb-5 mt-5 animated slideInDown direction_rtl">{{ slide.getContentTranslate()}} </h4>
  30.                                                 {% endif %}
  31.                                                 {% if slide.getLinkSlide()  %}
  32.                                                     <a class="main-btn" target="_blank" href="{{ slide.getLinkSlide() }}">
  33.                                                         {% trans %} Voir_plus {% endtrans %}
  34.                                                     </a>
  35.                                                 {% endif %}
  36.                                                 </div>
  37.                                             </div>
  38.                                         </div>
  39.                                     </div>
  40.                             </div>
  41.                          {% endif %}
  42.                     {% endfor %}
  43.                 </div>
  44.                 <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev"  id="prv-carousel">
  45.                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  46.                     <span class="visually-hidden">Previous</span>
  47.                 </button>
  48.                 <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
  49.                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  50.                     <span class="visually-hidden">Next</span>
  51.                 </button>
  52.             </div>
  53.         </div>
  54.         <!-- Carousel End -->
  57.         <!-- About platforme Start -->
  58.         {% if  app.request.getLocale()  == 'fr' %}
  59.         <div class="container-xxl py-5">
  60.         {% else %}
  61.         <div class="container-xxl py-5 direction_rtl">
  62.         {% endif %}
  63.             <div class="container">
  64.                 <h2 class="titre-pres">{% trans %}presentation_plateforme{% endtrans %}</h2>
  65.                 <div class="row g-5 align-items-center">
  66.                     <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
  67.                         <div class="about-img position-relative overflow-hidden pe-0">
  68.                             <iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/rDNPycKqQ9Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  69.                         </div>
  70.                     </div>
  71.                     <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
  73.                         <p class="mb-3 p-3 lineleft">{% trans %} approche_modernisation_processus {% endtrans %}
  74.                              {% trans %} inscription_plateforme_gratuite_ouverte {% endtrans %}.
  75.                              {% trans %} objectif_plateforme{% endtrans %} :</p>
  76.                         <p class="mb-3 p-3 lineleftgray"> {% trans %}ameliorer_echange_communication{% endtrans %}</p>
  78.                         <p class="mb-3 p-3 lineleftgray"> {% trans %}garantir_expérience_personnell_authentique_professionnelle{% endtrans %}</p>
  79.                         <p class="mb-3 p-3 lineleftgray"> {% trans %}contribuer_centraliser_donnee_relative{% endtrans %}</p>
  80.                         <div class="text-right">
  81.                             <a class="btn btn-primary main-btn  py-3 px-5 mt-3" href="#htworks">{% trans %} Voir_plus {% endtrans %} &rarr;
  82.                             </a>
  83.                         </div>
  84.                     </div>
  85.                 </div>
  86.             </div>
  87.         </div>
  88.         <!-- About platforme End -->
  89.         <!-- How it works Start -->
  90.         {% if  app.request.getLocale()  == 'fr' %}
  91.         <div class="container-fluid htwork bg-light my-5 py-6" id="htworks">
  92.         {% else %}
  93.         <div class="container-fluid htwork bg-light my-5 py-6 direction_rtl" id="htworks">
  94.         {% endif %}
  95.             <div class="container">
  96.                 <div class="section-header text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
  97.                     <h1 class=" mb-3 upper">{% trans %}comment_ça marche{% endtrans %}</h1>
  98.                     <p>{% trans %} plateforme_facile_utilisation {% endtrans %}</p>
  99.                 </div>
  100.                 <div class="row g-4">
  101.                     <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
  102.                         <div class=" text-center h-100 p-4 p-xl-5">
  103.                             <img class="img-fluid mb-4" src="{{ asset('css/front/img/icon-1.png') }}" alt="">
  105.                             <p class="mb-4">{% trans %}inscription_gratuite{% endtrans %}</p>
  107.                         </div>
  108.                     </div>
  109.                     <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
  110.                         <div class=" text-center h-100 p-4 p-xl-5">
  111.                             <img class="img-fluid mb-4" src="{{ asset('css/front/img/icon-2.png') }}" alt="">
  113.                             <p class="mb-4">{% trans %} garantie_confidentialite_données {% endtrans %}</p>
  115.                         </div>
  116.                     </div>
  117.                     <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
  118.                         <div class=" text-center h-100 p-4 p-xl-5">
  119.                             <img class="img-fluid mb-4" src="{{ asset('css/front/img/icon-3.png') }}" alt="">
  121.                             <p class="mb-4">{% trans %} soumettre_dossier_ligne {% endtrans %}</p>
  123.                         </div>
  124.                     </div>
  125.                     <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
  126.                         <div class=" text-center h-100 p-4 p-xl-5">
  127.                             <img class="img-fluid mb-4" src="{{ asset('css/front/img/icon-4.png') }}" alt="">
  129.                             <p class="mb-4">{% trans %} suivi_dossier  {% endtrans %}</p>
  131.                         </div>
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.         <!-- How it works End -->
  137.         <!-- Forms Start -->
  138.         {% if  app.request.getLocale()  == 'fr' %}
  139.         <div class="container-xxl formContainer bg-white py-5">
  140.         {% else %}
  141.         <div class="container-xxl formContainer bg-white py-5 direction_rtl">
  142.         {% endif %}
  143.             <div class="container">
  144.                 <div class="section-header mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
  145.                     <h2 class=" mb-3">{% trans %}formulaire{% endtrans %}</h2>
  147.                 </div>
  148.                 <div class="container text-center my-3">
  149.    
  150.     <div class="row mx-auto my-auto justify-content-center">
  151.         <input type="hidden" id="dynamicForm" class="dynamicForm" value="{{ Formulaires|length }}"/>
  152.         <div id="recipeCarousel" class="carousel carousel-form slide" data-bs-ride="carousel">
  153.                 <div class="carousel-inner-form" role="listbox"  id="formulaires">
  154.                         <div class="carousel-item active">
  155.                             <div class="col-md-4 formItem card  ">
  156.                                 <div class="p-4">
  157.                                     <h3 class="">{% trans %} formulaire_demande_assistance_technique {% endtrans %}</h3>
  158.                                     <div class=" border-top pt-4">
  159.                                         <p>{% trans %} formulaire_propriétaires_publics_assistance_technique {% endtrans %}}</p>
  161.                                     </div>
  162.                                     <div class="text-center pt-4 btn-remplir" style="margin-bottom:0px !important;">
  163.                                         <a href="{{ ( not app.user or app.user.getCompleted() ) ? path('app_demande_new') : 'javascript:void(0);' }}" class="main-btn text-dark pt-5 {{ ( not app.user or app.user.getCompleted() ) ? '' : 'disabled' }}">
  164.                                             <span >{% trans %} remplir {% endtrans %}</span>
  165.                                             <i class="fa-solid fa-arrow-right"></i>
  166.                                         </a> 
  168.                                     </div>
  169.                                 </div>
  170.                             </div>
  171.                         </div>
  172.                         {% for item in Formulaires %}
  173.                         <div class="carousel-item">
  174.                                 <div class="col-md-4 formItem card   " >
  175.                                     <div class="p-4">
  176.                                         <h3 class="">
  177.                                         {{ item.nom and item.nomAr ? item.nom ~ ' - ' : ( item.nom ?? item.nom )  }}
  178.                                         {{ item.nomAr ?? item.nomAr }}
  179.                                         </h3>
  182.                                         <div class=" border-top pt-4">
  183.                                             <p>
  184.                                                 {{ item.getDescription()|length > 100 ? item.getDescription()|striptags|slice(0, 100) ~ '...' : item.getDescription()| striptags|slice(0, 10) }}
  185.                                             </p>
  186.                                               <div id="div-date-carousel">
  187.                                             <p id="date-carousel"> {% if item.getDateDebut() is not null %}
  188.                                             Date début: {{ item.getDateDebut() | date("d/m/Y")}}
  189.                                             {% endif %}  
  190.                                                 <br>
  191.                                              {% if  item.getDateFin() is not null %}
  192.                                                 Date fin: {{ item.getDateFin() | date("d/m/Y")}}
  193.                                             {% endif %}</p>
  194.                                             </div>
  195.                                         </div>
  198.                                         <div class="text-center pt-4 btn-remplir"  style="margin-bottom:0px !important;">
  199.                                             <a href="{{ ( not app.user or app.user.getCompleted() ) ? path('form_replay', { id : item.getId() } ) : 'javascript:void(0);' }}" class="main-btn text-dark pt-5 {{ ( not app.user or app.user.getCompleted() ) ? '' : 'disabled' }}">
  200.                                                 <span >{% trans %} remplir {% endtrans %} </span>
  201.                                                 <i class="fa-solid fa-arrow-right"></i>
  202.                                             </a>
  203.                                         </div>
  204.                                     </div>
  205.                                 </div>
  206.                         </div>
  207.                         {% endfor %}
  209.                 </div>
  210.                 <a class="carousel-control-prev bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev" id="prv-from">
  211.                     <span class="carousel-control-prev-icon formpre" aria-hidden="true"></span>
  212.                 </a>
  213.                 <a class="carousel-control-next bg-transparent w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
  214.                     <span class="carousel-control-next-icon formnext" aria-hidden="true"></span>
  215.                 </a>
  216.         </div>
  218.     </div>
  220.     
  221. </div>
  222.                 <div class="row text-right">
  223.                     <div
  224.                         class="col-md-12 ms-auto mt-5 text-right"><a class=" link-btn  py-3 px-5 mt-3" href="{{ ( not app.user or app.user.getCompleted() ) ? path('app_form') : 'javascript:void(0);' }}">{% trans %} voir_formulaire {% endtrans %} </i> </a>
  225.                     </div>
  226.                 </div>
  227.             </div>
  228.         </div>
  229.         <!-- forms End -->
  230.         <!-- About IGPPP  Start -->
  231.         {% if  app.request.getLocale()  == 'fr' %}
  232.         <div class="container-fluid about-igppp bg-light mt-5 py-6">
  233.         {% else %}
  234.         <div class="container-fluid about-igppp bg-light mt-5 py-6 direction_rtl">
  235.         {% endif %}
  237.             <div class="row g-5 align-items-center">
  238.                 <h2 class="p-lg-5">{% trans %} presentation {% endtrans %}</h2>
  239.                 <div class="col-md-6 wow fadeIn" data-wow-delay="0.1s">
  240.                     <iframe width="100%" height="450" src="https://www.youtube.com/embed/QsVuss6n3ak?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  242.                 </div>
  243.                 <div class="col-md-6 p-5  bg-primary  wow fadeIn" data-wow-delay="0.5s">
  244.                     <img class="img-fluid mb-4" src="{{ asset('css/front/img/ppp.png') }}" alt="">
  245.                     <p class="text-white mb-0">
  246.                     {% trans %} content_presentation_igpp {% endtrans %}
  247.                 </div>
  248.             </div>
  250.         </div>
  251.         <!-- About IGPPP End -->
  253.         <div class="container-fluid  call-igppp mt-5 py-6">
  255.             <div class="row flexdisplay">
  256.                 <div class="col-md-3">
  257.                     <svg xmlns="http://www.w3.org/2000/svg" width="415.313" height="164.906" viewbox="0 0 415.313 164.906">
  258.                         <g id="Groupe_12854" data-name="Groupe 12854" transform="translate(-1170.631 -939.989)">
  259.                             <g id="Groupe_11527" data-name="Groupe 11527" transform="translate(1431.954 939.99)">
  260.                                 <path id="Tracé_26255" data-name="Tracé 26255" d="M499.465,296.755h17.456V285.79a83.563,83.563,0,0,1-17.456,5.818Z" transform="translate(-499.465 -131.85)" fill="#fff"/>
  261.                                 <path id="Tracé_26256" data-name="Tracé 26256" d="M576.462,207.489a77.081,77.081,0,0,0-77,76.987v48.782a52.676,52.676,0,0,0,25.24-19.469,59.434,59.434,0,1,1,23.541,23.1,86.324,86.324,0,0,1-12.48,12.824,76.946,76.946,0,1,0,40.7-142.221Z" transform="translate(-499.465 -207.489)" fill="#fff"/>
  262.                             </g>
  263.                             <path id="Tracé_26257" data-name="Tracé 26257" d="M443.542,207.489a77.081,77.081,0,0,0-77,76.987c0,.685.036,1.362.053,2.044h-.053v85.873H384V333.237a76.976,76.976,0,1,0,59.538-125.748Zm0,136.523a59.539,59.539,0,1,1,59.533-59.537A59.606,59.606,0,0,1,443.542,344.012Z" transform="translate(804.088 732.5)" fill="#fff"/>
  264.                             <path id="Tracé_26258" data-name="Tracé 26258" d="M592.728,242.339a52.239,52.239,0,0,0-12.6,12.818,59.465,59.465,0,1,1-23.535-23.088,85.358,85.358,0,0,1,12.476-12.824,76.845,76.845,0,0,0-117.693,65.231c0,.685.088,1.358.1,2.044h-.1v85.873h17.46v-39.17a76.93,76.93,0,0,0,123.894-90.885Z" transform="translate(886.034 732.5)" fill="#c00020"/>
  265.                         </g>
  266.                     </svg>
  268.                 </div>
  269.                 <div class="col-md-6 text-light">
  271.                     <span class="CloudTag"></span>
  273.                 </div>
  274.                 <div class="col-md-3 align-self-center">
  275.                     <a href="mailto:contact@igppp.tn" class="main-btn">{% trans %}Contactez-Nous{% endtrans %}</a>
  276.                 </div>
  277.             </div>
  278.         </div>
  279.         <!-- Footer Start -->
  280.         {% if  app.request.getLocale()  == 'fr' %}
  281.         <div class="container-fluid footer mt-5 pt-5  wow fadeIn" data-wow-delay="0.1s">
  282.         {% else %}
  283.         <div class="container-fluid footer mt-5 pt-5  wow fadeIn direction_rtl" data-wow-delay="0.1s">
  284.         {% endif %}
  285.             <div class="container ">
  286.                 <div class="row g-5 pb-5">
  287.                     <div class="col-lg-4 col-md-4">
  288.                         <img src="{{ asset('css/front/img/igppfinallogo/logo-fr.png') }}" alt="" style="width:60%">
  289.                     </div>
  290.                     <div class="col-lg-4 col-md-4 contact">
  291.                         <h5 class=" mb-4">{% trans %}Contactez-Nous{% endtrans %}</h5>
  292.                         <p>
  293.                             <i class="fa fa-map-marker-alt me-3"></i>{% trans %}Adresse : 36, rue Zambritta, Cité Les Pins, les Berges du Lac II, 1053, Tunis{% endtrans %}</p>
  294.                         <p>
  295.                             <i class="fa fa-phone-alt me-3"></i>{% trans %}Téléphone : +216 71 268 316{% endtrans %}</p>
  296.                         <p>
  297.                             <i class="fa fa-fax me-3" aria-hidden="true"></i>{% trans %}Fax : +216 71 268 310{% endtrans %}
  298.                         </p>
  299.                     
  300.                         <p>
  301.                             <i class="fa fa-envelope me-3"></i>{% trans %}Mail : contact@igppp.tn{% endtrans %}
  302.                         </p>
  303.                     </div>
  304.                     <div class="col-lg-4 col-md-4 text-dark contact">
  305.                         <h5 class=" mb-4">{% trans %}Suivez Nous sur{% endtrans %}</h5>
  307.                         <div class="position-relative mx-auto socialIcon mt-5" style="max-width: 400px;">
  308.                             <a href="https://www.facebook.com/igppp" target="_blank">
  309.                                 <i class="fab fa-facebook-f"></i>
  310.                             </a>
  311.                             <a href="https://tn.linkedin.com/company/i-g-p-p-p" target="_blank">
  312.                                 <i class="fab fa-linkedin"></i>
  313.                             </a>
  314.                             <a href="https://www.youtube.com/channel/UCYoQYLBJSPxcxjg4ohe6aPA" target="_blank">
  315.                                 <i class="fab fa-youtube"></i>
  316.                             </a>
  318.                         </div>
  319.                     </div>
  320.         </div>
  321.     </div>
  322.     <div class="container-fluid copyright">
  323.         <div class="container">
  324.             <div class="row">
  325.                 <div class="col-md-6 text-center mb-3 bottomFotter mb-md-0 ">{% trans %}tous_droits_reserves {% endtrans %} &copy; 2022
  326.                     <a href="#">{% trans %}IGPPP{% endtrans %}</a>
  327.                 </div>
  328.                 <div class="col-md-6 text-center">
  329.                     <a href="">{% trans %}Mentions Légales |{% endtrans %}</a>
  330.                     <a href="">{% trans %}Conditions générales d'utilisation{% endtrans %}</a>
  331.                 </div>
  332.             </div>
  333.         </div>
  334.     </div>
  335. {% endblock %}
  336. {% block javascripts %}
  337.     <script>
  338.         $('.card-remplir').mouseover(function () {
  339.             $(this).find('a').addClass('RedBtn');
  340.             $(this).find('h3').addClass('whText');
  341.         });
  342.         $('.card-remplir').mouseout(function () {
  343.             $(this).find('a').removeClass('RedBtn');
  344.             $(this).find('h3').removeClass('whText');
  345.         });
  346.     </script>
  348.     <script>
  349.         let items = document.querySelectorAll('.carousel-form .carousel-item')
  351.         if ( $("#dynamicForm").val() >= 2 ){
  352.             items.forEach((el) => {
  353.                 const minPerSlide = 3;
  355.                 let next = el.nextElementSibling
  356.                 for (var i=1; i<minPerSlide; i++) {
  357.                     if (!next) {
  358.                         // wrap carousel by using first child
  359.                         next = items[0]
  360.                     }
  361.                     let cloneChild = next.cloneNode(true)
  362.                     el.appendChild(cloneChild.children[0])
  363.                     next = next.nextElementSibling
  364.                 }
  365.             })
  366.         }else{
  367.             $('.carousel-form .carousel-item').addClass('active').css({ 'display' : 'contents', 'margin-right' : 'auto'});
  368.             $('.carousel-inner-form').css('display', 'flex');
  369.         }
  371.     </script>
  372. {% endblock %}