templates/achievement/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Nos différentes réalisation - RénovAtHome {% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <link rel="stylesheet" href="{{ asset('assets/styles/realisation.css')}}">
  8.     <meta name="description" content="Plusieurs projets ont été réalisés par RénovAtHome. Couverture, Toiture, Isolation, Ravalement de façade, Sur mesure. Nos clients ont su faire confiance à l'entreprise et le referont sans hésitations.">
  9. {% endblock %}
  11. {% block banner %}{% endblock %}
  13. {% block main %}
  14.     <main>
  15.         <div class="container-real">
  16.             <ul class="category-real flex-wrap justify-center">
  17.                 <li class="label-real">Trier par :</li>
  18.                 <li id="all" class="category actif">TOUT</li>
  19.                 {% for cat in categories |sort((a, b) => a.id <= b.id) %}
  20.                     <li id="{{ cat.nom |lower|replace({' ': '-'}) }}" class="category">{{ cat.nom }}</li>
  21.                 {% endfor %}
  22.             </ul>
  23.             {% set cpt = 1 %}
  24.             {% for last in lasts %}
  25.                 <div class="last-real {{ cpt == 1 ? 'all'}} {{ last.catName|lower|replace({' ': '-'}) }}" {{ cpt != 1 ? 'style ="display:none;"'}}>
  26.                     {% if last.avant != "" and last.apres != "" %}
  27.                     <div class="slider">
  28.                         <div class="slider__before" style="background-image:url({{ asset('uploads/realisations/'~last.avant) | imagine_filter('middle')}});"></div>
  29.                         <div class="slider__separator">
  30.                             <div class="bar__separator"></div>
  31.                             <div class="btn__separator">
  32.                                 <span class="btn__separator_left_arrow"></span>
  33.                                 <span class="btn__separator_right_arrow"></span>
  34.                             </div>
  35.                             <div class="bar__separator"></div>
  36.                         </div>
  37.                         <div class="slider__after" style="background-image:url({{ asset('uploads/realisations/'~last.apres) | imagine_filter('middle')}});"></div>
  38.                         <input class="slider__range" type="range" min="2" max="98" value="50"/>
  39.                     </div>
  40.                     {% else %}
  41.                     <img src="{{ asset('uploads/realisations/'~last.cover) | imagine_filter('middle')}}" alt="photo de couverture de la réalisation" class="img-place-holder">
  42.                     {% endif %}
  43.                     <div class="desc-real">
  44.                         <div class="titre">
  45.                             <div class="deco-sous-titre"></div>
  46.                             <span class="sous-titre">dernière Réalisation</span>
  47.                         </div>
  48.                         <h2 class="titre-real">{{ last.nom }}</h2>
  49.                         <p>{{ last.description |raw }}</p>
  50.                         <p>
  51.                             <b>Solution apportée par nos équipes :</b><br>
  52.                             {{ last.taches |raw}}
  53.                         </p>
  54.                         <a class="show-real" href="{{ path('realisation', { 'slug' : last.slug })}}">en découvrir plus <i class="fa-solid fa-arrow-right"></i></a>
  55.                     </div>
  56.                 </div>
  57.                 {% set cpt = cpt + 1 %}
  58.             {% endfor %}
  59.             
  60.             <div class="all-real">
  61.                 {% for realisation in realisations |sort((a, b) => a.id <= b.id) %}
  62.                     <div class="card-real {{ realisation.categorie.nom|lower|replace({' ': '-'}) }}">
  63.                         <a class="titre-evenement" href="{{ path('realisation', { 'slug' : realisation.slug })}}">
  64.                             <div class="layer">
  65.                                 <img src="{{ asset('uploads/realisations/'~realisation.cover) | imagine_filter('miniature')}}" alt="{{ realisation.nom }}">
  66.                                 <div class="overlay">
  67.                                     <div class="text"><span>EN DÉCOUVRIR PLUS <i class="fa-solid fa-arrow-right"></i></span></div>
  68.                                 </div>
  69.                             </div>
  70.                             <span class="card-real-category">{{ realisation.categorie.nom }}</span>
  71.                             <h3 class="card-real-title">{{ realisation.nom }}</h3>
  72.                         </a>
  73.                     </div>
  74.                 {% endfor %}
  75.             </div>
  76.             <div class="more">
  77.                 <span href="" class="btn-more">afficher plus de réalisations</span>
  78.             </div>
  79.         </div>
  80.     </main>
  81. {% endblock %}
  83. {% block contact %}{% endblock %}
  85. {% block footer %}{% endblock %}
  87. {% block script %}
  88.     {{ parent() }}
  89.     <script src="{{ asset('assets/js/main.js')}}"></script>
  90.     <script>
  91.         $(document).ready(function () {
  92.             var card = $('.card-real')
  93.             var nombrereal = 4;
  94.             for (var i =nombrereal ; i < card.length; i++) {
  95.                card[i].style.display = 'none';
  96.             }
  97.             $(".btn-more").click(function () {
  98.                 for (var i = nombrereal; i < nombrereal + 4; i++) {
  99.                     if (card[i]) {
  100.                         card[i].style.display = 'block';
  101.                     }
  102.                 }
  103.                 nombrereal += 4;
  104.                 if (nombrereal >= card.length) {
  105.                     event.target.style.display = 'none';
  106.                 }
  107.             });
  109.             $('.category').click(function() {
  110.                 $('.category').each(function () {
  111.                     $(this).removeClass('actif');
  112.                 });
  113.                 $(this).addClass('actif');
  114.                 var category = $(this).attr('id');
  115.                 $('.card-real').each(function() {
  116.                     if ($(this).hasClass(category) || category === 'all'){
  117.                         $(this).show();
  118.                     }
  119.                     else {
  120.                         $(this).hide();
  121.                     }
  122.                 });
  123.                 $('.last-real').each(function() {
  124.                     if ($(this).hasClass(category)){
  125.                         $(this).show();
  126.                     }
  127.                     else {
  128.                         $(this).hide();
  129.                     }
  130.                 });
  131.             });
  132.         });
  133.     </script>
  134. {% endblock %}