Symfony Profiler

{% extends 'base.html.twig' %}
{% block title %}
{{ parent() }} | Nos services
{% endblock title %}
{% block stylesheets %}
{{ parent() }}
<style>
.element-services{
margin: 20px;
}
.slider-container {
width: 100%;
/*max-width: 900px;*/
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.slider {
display: flex;
transition: transform 0.3s ease-out;
cursor: grab;
padding: 20px 0;
}
.slider.grabbing {
cursor: grabbing;
transition: none;
}
.slide {
flex: 0 0 calc(33.333% - 20px);
margin: 0 10px;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
user-select: none;
}
.slide img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.slide-content {
padding: 20px;
}
.slide-content h3 {
margin-bottom: 10px;
color: #333;
}
.slide-content p {
color: #666;
line-height: 1.5;
}
/* Navigation dots */
.dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
padding-bottom: 20px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: background 0.3s;
}
.dot.active {
background: #333;
}
/* Navigation arrows */
.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 10;
opacity: 0.8;
transition: opacity 0.3s;
font-size: 20px;
}
.nav-arrow:hover {
opacity: 1;
}
.nav-arrow.prev {
left: 10px;
}
.nav-arrow.next {
right: 10px;
}
@media (max-width: 768px) {
.slide {
flex: 0 0 calc(50% - 20px);
}
.nav-arrow {
width: 35px;
height: 35px;
font-size: 18px;
}
}
@media (max-width: 480px) {
.slide {
flex: 0 0 calc(100% - 20px);
}
}
</style>
{% endblock stylesheets %}
{% block body %}
<br/><br/><br/>
<h3 class="text-center">Nos services</h3>
<hr/>
<h4 class="text-center">Des experts pour tous vos besoins !</h4>
<p class="text-center">
Une large gamme de services professionnels à domicile pour simplifier votre quotidien
</p>
<br/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slider-container">
<div class="nav-arrow prev">←</div>
<div class="nav-arrow next">→</div>
<div class="slider" id="slider">
</div>
<div class="dots" id="dots"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br/>
<h3 class="text-center">les raisons de nous choisir</h3>
<p class="text-center">HelpPlace votre partenaire de confiance pour tous vos besoins à domicile.</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="assie-card">
<div class="assie-card-body">
<h3 class="text-center"><i class="bi bi-cash"></i></h3>
<p class="text-center"><strong>Inscription gratuite</strong></p>
<p class="text-center">
Créez votre compte gratuitement, sans engagement et accédez à tous nos services.
<br/><br/>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="assie-card">
<div class="assie-card-body">
<h3 class="text-center"><i class="bi bi-clock"></i></h3>
<p class="text-center"><strong>Service simple, rapide et sécurisé</strong></p>
<p class="text-center">
Trouvez un prestataire en 2 minutes et réservez directement en ligne en toute sécurité.
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="assie-card">
<div class="assie-card-body">
<h3 class="text-center"><i class="bi bi-shield-lock"></i></h3>
<p class="text-center"><strong>Prestataire vérifié et fiable</strong></p>
<p class="text-center">
Tous nos professionnels sont soigneusement sélectionnés et vérifiés avec document à l'appui.
<br/><br/>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="assie-card">
<div class="assie-card-body">
<h3 class="text-center"><i class="bi bi-journal-bookmark"></i></h3>
<p class="text-center"><strong>Qualité garantie</strong></p>
<p class="text-center">
Satisfaction client garantie avec notre système d'évaluation et de notation.
<br/><br/>
</p>
</div>
</div>
</div>
</div>
<hr/>
<br/>
<div class="row">
<div class="col-md-12">
<h3 class="text-center"> Comment ça marche ?</h3>
<p class="text-center">
Trouvez votre prestataire en 2 minutes
Simplement, rapidement et en toute sécurité
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="assie-card">
<div class="assie-card-body">
<h3 class="text-center"><i class="bi bi-1-circle-fill"></i></h3>
<h3 class="text-center"><i class="bi bi-search"></i></h3>
<p class="text-center"><strong>Recherche</strong></p>
<p class="text-center">
Décrivez votre besoin et votre localisation en quelques clics.
<br/> <br/>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="assie-card">
<div class="assie-card-body">
<h3 class="text-center"><i class="bi bi-2-circle-fill"></i></h3>
<h3 class="text-center"><i class="bi bi-person-check"></i></h3>
<p class="text-center"><strong>Choisissez</strong></p>
<p class="text-center">
Comparez les profils, avis et tarifs des prestataires disponibles.
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="assie-card">
<div class="assie-card-body">
<h3 class="text-center"><i class="bi bi-3-circle-fill"></i></h3>
<h3 class="text-center"><i class="bi bi-calendar-check"></i></h3>
<p class="text-center"><strong>Reservez</strong></p>
<p class="text-center">
Planifiez votre intervention au moment qui vous convient.
<br/> <br/>
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="assie-card">
<div class="assie-card-body">
<h3 class="text-center"><i class="bi bi-4-circle-fill"></i></h3>
<h3 class="text-center"><i class="bi bi-star"></i></h3>
<p class="text-center"><strong>Evaluez</strong></p>
<p class="text-center">
Partagez votre expérience et aidez la communauté.
<br/> <br/>
</p>
</div>
</div>
<br/> <br/>
</div>
<br/> <br/>
</div>
</div>
<span hidden id="slidesData">{{ slidesData }}</span>
{% endblock body %}
{% block javascripts %}
{{ parent() }}
<script type="text/javascript">
class SwipeSlider {
constructor() {
this.slider = document.getElementById('slider');
this.dotsContainer = document.getElementById('dots');
this.prevBtn = document.querySelector('.prev');
this.nextBtn = document.querySelector('.next');
this.listeCategorie = document.getElementById('slidesData');
this.slidesData = JSON.parse(this.listeCategorie.innerText);
this.currentIndex = 0;
this.startX = 0;
this.currentX = 0;
this.isDragging = false;
this.visibleSlides = this.getVisibleSlidesCount();
this.init();
}
getVisibleSlidesCount() {
if (window.innerWidth <= 480) return 1;
if (window.innerWidth <= 768) return 2;
return 3;
}
init() {
this.createSlides();
this.createDots();
this.updateSliderPosition();
this.setupEventListeners();
window.addEventListener('resize', () => this.handleResize());
}
createSlides() {
this.slider.innerHTML = this.slidesData.map(slide => `
<div class="slide">
<img src="${slide.img}" alt="${slide.title}">
<div class="slide-content">
<h3>${slide.title}</h3>
</div>
</div>
`).join('');
}
createDots() {
const maxIndex = Math.max(0, this.slidesData.length - this.visibleSlides);
const dots = [];
for (let i = 0; i <= maxIndex; i++) {
dots.push(`<div class="dot${i === this.currentIndex ? ' active' : ''}" data-index="${i}"></div>`);
}
this.dotsContainer.innerHTML = dots.join('');
document.querySelectorAll('.dot').forEach(dot => {
dot.addEventListener('click', (e) => {
const index = parseInt(e.target.dataset.index);
this.goToSlide(index);
});
});
}
setupEventListeners() {
// Mouse events
this.slider.addEventListener('mousedown', (e) => this.startDrag(e));
window.addEventListener('mousemove', (e) => this.drag(e));
window.addEventListener('mouseup', () => this.endDrag());
// Touch events
this.slider.addEventListener('touchstart', (e) => this.startDrag(e));
window.addEventListener('touchmove', (e) => this.drag(e), { passive: false });
window.addEventListener('touchend', () => this.endDrag());
// Navigation buttons
this.prevBtn.addEventListener('click', () => this.prev());
this.nextBtn.addEventListener('click', () => this.next());
// Prevent context menu on slider
this.slider.addEventListener('contextmenu', (e) => e.preventDefault());
}
startDrag(e) {
e.preventDefault();
this.isDragging = true;
this.startX = e.type === 'mousedown' ? e.pageX : e.touches[0].pageX;
this.currentX = this.startX;
this.slider.classList.add('grabbing');
}
drag(e) {
if (!this.isDragging) return;
e.preventDefault();
const currentX = e.type === 'mousemove' ? e.pageX : e.touches[0].pageX;
const diff = currentX - this.startX;
// Limiter le dépassement
const maxDrag = 50; // pixels
const boundedDiff = Math.max(-maxDrag, Math.min(maxDrag, diff));
this.slider.style.transform = `translateX(calc(-${this.currentIndex * (100 / this.visibleSlides)}% + ${boundedDiff}px))`;
}
endDrag() {
if (!this.isDragging) return;
this.slider.classList.remove('grabbing');
const diff = this.currentX - this.startX;
if (Math.abs(diff) > 50) {
if (diff > 0 && this.currentIndex > 0) {
this.prev();
} else if (diff < 0 && this.currentIndex < this.slidesData.length - this.visibleSlides) {
this.next();
} else {
this.updateSliderPosition();
}
} else {
this.updateSliderPosition();
}
this.isDragging = false;
}
updateSliderPosition() {
const percentage = -(this.currentIndex * (100 / this.visibleSlides));
this.slider.style.transform = `translateX(${percentage}%)`;
// Update dots
document.querySelectorAll('.dot').forEach((dot, index) => {
dot.classList.toggle('active', index === this.currentIndex);
});
}
goToSlide(index) {
this.currentIndex = Math.max(0, Math.min(index, this.slidesData.length - this.visibleSlides));
this.updateSliderPosition();
}
prev() {
this.goToSlide(this.currentIndex - 1);
}
next() {
this.goToSlide(this.currentIndex + 1);
}
handleResize() {
const newVisibleSlides = this.getVisibleSlidesCount();
if (newVisibleSlides !== this.visibleSlides) {
this.visibleSlides = newVisibleSlides;
this.currentIndex = Math.min(this.currentIndex, this.slidesData.length - this.visibleSlides);
this.createDots();
this.updateSliderPosition();
}
}
}
// Initialiser le slider
document.addEventListener('DOMContentLoaded', () => {
new SwipeSlider();
});
</script>
{% endblock javascripts %}

templates/entreprise/nos_services.html.twig line 1