{% extends 'base.html.twig' %}
{% block title %}Nos différentes réalisation - RénovAtHome {% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('assets/styles/realisation.css')}}">
<meta name="description" content="Plusieurs projets ont été réalisés par RenovAtHome. Couverture, Toiture, Isolation, Ravalement de façade, Sur mesure. Nos clients ont su faire confiance à l'entreprise et le referont sans hésitations.">
{% endblock %}
{% block banner %}{% endblock %}
{% block main %}
<main>
<div class="container-real">
<ul class="category-real flex-wrap justify-center">
<li class="label-real">Trier par :</li>
<li id="all" class="category actif">TOUT</li>
{% for cat in categories |sort((a, b) => a.id <= b.id) %}
<li id="{{ cat.nom |lower|replace({' ': '-'}) }}" class="category">{{ cat.nom }}</li>
{% endfor %}
</ul>
{% set cpt = 1 %}
{% for last in lasts %}
<div class="last-real {{ cpt == 1 ? 'all'}} {{ last.catName|lower|replace({' ': '-'}) }}" {{ cpt != 1 ? 'style ="display:none;"'}}>
{% if last.avant != "" and last.apres != "" %}
<div class="slider">
<div class="slider__before" style="background-image:url({{ asset('uploads/realisations/'~last.avant) | imagine_filter('middle')}});"></div>
<div class="slider__separator">
<div class="bar__separator"></div>
<div class="btn__separator">
<span class="btn__separator_left_arrow"></span>
<span class="btn__separator_right_arrow"></span>
</div>
<div class="bar__separator"></div>
</div>
<div class="slider__after" style="background-image:url({{ asset('uploads/realisations/'~last.apres) | imagine_filter('middle')}});"></div>
<input class="slider__range" type="range" min="2" max="98" value="50"/>
</div>
{% else %}
<img src="{{ asset('uploads/realisations/'~last.cover) | imagine_filter('middle')}}" alt="photo de couverture de la réalisation" class="img-place-holder">
{% endif %}
<div class="desc-real">
<div class="titre">
<div class="deco-sous-titre"></div>
<span class="sous-titre">dernière Réalisation</span>
</div>
<h2 class="titre-real">{{ last.nom }}</h2>
<p>{{ last.description |raw }}</p>
<p>
<b>Solution apportée par nos équipes :</b><br>
{{ last.taches |raw}}
</p>
<a class="show-real" href="{{ path('realisation', { 'slug' : last.slug })}}">en découvrir plus <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
{% set cpt = cpt + 1 %}
{% endfor %}
<div class="all-real">
{% for realisation in realisations |sort((a, b) => a.id <= b.id) %}
<div class="card-real {{ realisation.categorie.nom|lower|replace({' ': '-'}) }}">
<a class="titre-evenement" href="{{ path('realisation', { 'slug' : realisation.slug })}}">
<div class="layer">
<img src="{{ asset('uploads/realisations/'~realisation.cover) | imagine_filter('miniature')}}" alt="{{ realisation.nom }}">
<div class="overlay">
<div class="text"><span>EN DÉCOUVRIR PLUS <i class="fa-solid fa-arrow-right"></i></span></div>
</div>
</div>
<span class="card-real-category">{{ realisation.categorie.nom }}</span>
<h3 class="card-real-title">{{ realisation.nom }}</h3>
</a>
</div>
{% endfor %}
</div>
<div class="more">
<span href="" class="btn-more">afficher plus de réalisations</span>
</div>
</div>
</main>
{% endblock %}
{% block contact %}{% endblock %}
{% block footer %}{% endblock %}
{% block script %}
{{ parent() }}
<script src="{{ asset('assets/js/main.js')}}"></script>
<script>
$(document).ready(function () {
var card = $('.card-real')
var nombrereal = 4;
for (var i =nombrereal ; i < card.length; i++) {
card[i].style.display = 'none';
}
$(".btn-more").click(function () {
for (var i = nombrereal; i < nombrereal + 4; i++) {
if (card[i]) {
card[i].style.display = 'block';
}
}
nombrereal += 4;
if (nombrereal >= card.length) {
event.target.style.display = 'none';
}
});
$('.category').click(function() {
$('.category').each(function () {
$(this).removeClass('actif');
});
$(this).addClass('actif');
var category = $(this).attr('id');
$('.card-real').each(function() {
if ($(this).hasClass(category) || category === 'all'){
$(this).show();
}
else {
$(this).hide();
}
});
$('.last-real').each(function() {
if ($(this).hasClass(category)){
$(this).show();
}
else {
$(this).hide();
}
});
});
});
</script>
{% endblock %}