Symfony Profiler

{#
/*
* Autheur:Marweni Marwen
* Email:Marwenimarwen63@gmail.com
* Date de création :13/1/2020
* modifier par :Salim abbessi
* Date de modification:15/01/2020
* Description: Page 5 sur 5
*/#}
{% extends 'Accueil/layoutAccueil.html.twig' %}
{% block LinksCss %}
{{ parent() }}
<link href="{{ asset ('css/Parent/css/layoutparent.css')}}" type="text/css" rel="stylesheet" >
<link href="{{ asset ('Accueil/css/album.css')}}" type="text/css" rel="stylesheet">
<link href="{{ asset ('css/product-gallery-optimizations.css')}}" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
/* Optimisations pour les galeries de produits */
.product-gallery-thumbnails {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
justify-content: center;
}
.product-gallery-thumbnails-mobile {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
justify-content: center;
}
.thumbnail-item, .thumbnail-item-mobile {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.thumbnail-item:hover, .thumbnail-item-mobile:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
.thumbnail-item img, .thumbnail-item-mobile img {
border-radius: 8px;
object-fit: cover;
}
.photoAlbum {
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.photoAlbum:hover {
transform: scale(1.02);
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.card-img-top {
border-radius: 12px 12px 0 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Animation de chargement */
.loading-placeholder {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Responsive optimizations */
@media (max-width: 768px) {
.product-gallery-thumbnails {
gap: 6px;
}
.thumbnail-item {
flex: 0 0 calc(25% - 6px);
}
.thumbnail-item-mobile {
flex: 0 0 calc(20% - 6px);
}
}
@media (max-width: 480px) {
.thumbnail-item {
flex: 0 0 calc(33.333% - 6px);
}
.thumbnail-item-mobile {
flex: 0 0 calc(25% - 6px);
}
}
</style>
{% endblock %}
{% block Head %}
{{ parent() }}
{% endblock %}
{% block Header %}
{% if app.user %}
{{ render(controller('App\\Controller\\EspaceParentController::headerparenrt')) }}
<style>
@media (max-width: 1200px) {
.imageLogo {
width: 145px !important;
height: 80.7px !important;
margin-left: 49px !important;
margin-top: -20px;
bottom: 0px !important;
}
}</style>
{% else %}
{{ render(controller('App\\Controller\\AccueilController::header')) }}
<style>
@media (max-width: 1200px) {
.imageLogo {
width: 145px !important;
height: 80.7px !important;
margin-left: 49px !important;
margin-top: -20px;
bottom: 45px !important;
}
}</style>
{% endif %}
{% endblock %}
{% block Content %}
<div class="parent">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"style="z-index: 1000000;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="text-align:center;" >
<h3 class="textpop"> Veuillez d'abord vous connecter !
</h3>
</div>
<div class="modal-footer" style="text-align:center;" >
<a href="/">
<button type="button" class="btn-primary"> OK </button> </a>
</div>
</div>
</div>
</div>
{% for produit in produit %}
{% if produit.labeleType!="Connexion" %}
<div id="{{produit.labeleType|replace({' ': ''})}}" class="carousel slide" data-ride="carousel" style="display: none;">
<div class="carousel-inner">
<div class="carousel-item activeweb">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-5 col-xs-5 col-sm-5" style="text-align:center">
<span onclick="this.parentElement.style.display = 'none'" class="closebtn" style="display:none">×</span>
<img id="expandedImg" class="photoAlbum"
src="{{(produit.attachements[0].idAttachement.path)|replace({'/upload/': '/upload/f_auto,q_auto,w_800/'}) }}"
alt="{{ produit.labeleType }}"
loading="eager"
decoding="async">
<div id="imgtext"></div>
<div class="row overflow product-gallery-thumbnails">
{% for prod in produit.attachements %}
{% if prod.statut=="pageProduit" %}
<div class="column thumbnail-item">
<img src="{{prod.idAttachement.path|replace({'/upload/': '/upload/f_auto,q_auto,w_150,h_150,c_fill/'}) }}"
alt="{{ produit.labeleType }} - Photo {{ loop.index }}"
loading="lazy"
decoding="async"
style="width:100%; cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease;"
onmouseover="this.style.transform='scale(1.05)'"
onmouseout="this.style.transform='scale(1)'"
onclick="myFunction(this);">
</div>
{% endif %}
{% endfor %}
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-7 col-xs-7 col-sm-7 divcont">
<div class="divRight">
<h2 class="titre">
{{ produit.labeleType}}
</h2>
<div class="groupeCarac">
<div class="row no-margin descriptionCarac">
<img class="caraSVG" src="{{ asset('images/SVG/5sur5-caracteristiques.svg')}}">
<h4 class="titreCaract">
Caractéristiques produit
</h4>
</div>
<div class="infoCarac">
<p class="paragraphe"><span class="paraSpice"> {% if produit.description %} {{produit.description|nl2br}} {% endif %}</span></p>
</div>
</div>
<div class="groupeCarac">
<div class="row no-margin descriptionCarac">
<img class="caraSVG" src="{{ asset('images/LesPlus5sur5.svg')}}">
<h4 class="titreCaract"> Les plus produit </h4>
</div>
<div class="infoCarac">
<p class="paragraphe"><span class="paraSpice"> {{ produit.plusDescription|nl2br }}</span></p>
</div>
</div>
<div class="groupeCarac">
<div class="row no-margin descriptionCarac">
<img class="caraSVG" src="{{ asset('images/SVG/5sur5-tarifs.svg')}}">
<h4 class="titreCaract">
Tarif & Frais de port
</h4>
</div>
<div class="infoCarac">
<p class="paragraphe"><span class="paraSpice"> {{ produit.tarifs|nl2br }}</span></p>
</div>
</div>
{% if app.user %}
{% if is_granted('ROLE_PARENT') %}
<button class="btn-primary dispnone" onclick='location.href = "{{path('projet-Parent')}}";' >Commander</button>
{%endif%}
{% if is_granted('ROLE_ACC') %}
<button class="btn-primary dispnone" onclick='location.href = "{{path('ProjetsAccompagnateur',{'id':sejour.id})}}";' >Commander</button>
{%endif%}
{%endif%}
{% if not app.user %}
<button class="btn-primary dispnone" data-toggle="modal" data-target="#exampleModal">Commander</button>
{%endif%}
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" onclick="plusSlides(-1)" role="button" data-slide="prev">
<span aria-hidden="true" ><img class="chev" src="{{ asset('images/300ppi/5sur5-fleche gauche.png')}}"></span>
</a>
<a class="carousel-control-next" onclick="plusSlides(1)" role="button" data-slide="next">
<img class="chev" src="{{ asset('images/300ppi/5sur5-fleche droite.png')}}">
</a>
</div>
</div>
{% endif %}
{% endfor %}
<div class="activemobile">
<div class="slider autoplay">
{% for produit in produit %}
{% if produit.labeleType!="Connexion" %}
<div class="col-sm-12 col-md-12 no-padding">
<div class="card">
<span onclick="this.parentElement.style.display = 'none'" class="closebtn" style="display:none">×</span>
<img id="expandedImg2" class="card-img-top"
src="{{(produit.attachements[0].idAttachement.path)|replace({'/upload/': '/upload/f_auto,q_auto,w_600/'}) }}"
alt="{{ produit.labeleType }}"
loading="eager"
decoding="async">
<div id="imgtext2"></div>
<div class="row overflow product-gallery-thumbnails-mobile">
{% for prod in produit.attachements %}
{% if prod.statut=="pageProduit" %}
{% if prod.idAttachement.path != produit.attachements[0].idAttachement.path %}
<div class="column thumbnail-item-mobile">
<img src="{{prod.idAttachement.path|replace({'/upload/': '/upload/f_auto,q_auto,w_120,h_120,c_fill/'}) }}"
alt="{{ produit.labeleType }} - Photo {{ loop.index }}"
loading="lazy"
decoding="async"
style="width:100%; cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease;"
onmouseover="this.style.transform='scale(1.05)'"
onmouseout="this.style.transform='scale(1)'"
onclick="myFunction2(this);">
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
<div class="card-body">
<div class="descri1">
<h1 class="card-title">
{{ produit.labeleType}}
</h1>
<div class="card-text">
<img class="caraSVG" src="{{ asset('images/SVG/5sur5-caracteristiques.svg')}}">
<h4 class="titreCaract">
Caracteristiques produit
</h4>
<p class="card-text1">
<span class="paraSpice"> {% if produit.description %} {{produit.description|nl2br}} {% endif %}</span>
</p>
<div class="card-text">
<img class="caraSVG" src="{{ asset('images/LesPlus5sur5.svg')}}">
<h4 class="titreCaract">
Les plus produit
</h4>
<p class="card-text1"><span class="paraSpice"> {{ produit.plusDescription|nl2br }}</span></p>
</div>
<div class="card-text">
<img class="caraSVG" src="{{ asset('images/SVG/5sur5-tarifs.svg')}}">
<h4 class="titreCaract">
Tarif & Frais de port
</h4>
<p class="card-text1"><span class="paraSpice">{{ produit.tarifs|nl2br }}</span></p>
{% if app.user %}
{% if is_granted('ROLE_PARENT') %}
<button class="dispnone btn-primary" onclick='location.href = "{{path('projet-Parent')}}";' >Commander</button>
{%endif%}
{% if is_granted('ROLE_ACC') %}
<button class=" dispnone btn-primary " onclick='location.href = "{{path('ProjetsAccompagnateur',{'id':sejour.id})}}";' >Commander</button>
{%endif%}
{%else%}
<button class=" dispnone btn-primary" data-toggle="modal" data-target="#exampleModal">Commander</button>
{%endif%}
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endblock %}
{% block Footer %}
{{ parent() }}
{% endblock %}
{% block javascript %}
{{ parent() }}
<script>
function myFunction(imgs) {
const expandedImg = document.getElementById("expandedImg");
const imgText = document.getElementById("imgtext");
// Animation de transition
expandedImg.style.opacity = '0.7';
expandedImg.style.transform = 'scale(0.95)';
setTimeout(() => {
// Remplacer l'image avec la version haute qualité
const highQualitySrc = imgs.src.replace('/w_150,h_150,c_fill/', '/w_800,f_auto,q_auto/');
expandedImg.src = highQualitySrc;
expandedImg.alt = imgs.alt;
imgText.innerHTML = imgs.alt;
// Animation de retour
expandedImg.style.opacity = '1';
expandedImg.style.transform = 'scale(1)';
}, 150);
}
</script>
<script>
$('.autoplay').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
});
</script>
<script>
function myFunction2(imgs) {
const expandedImg = document.getElementById("expandedImg2");
const imgText = document.getElementById("imgtext2");
// Animation de transition
expandedImg.style.opacity = '0.7';
expandedImg.style.transform = 'scale(0.95)';
setTimeout(() => {
// Remplacer l'image avec la version haute qualité
const highQualitySrc = imgs.src.replace('/w_120,h_120,c_fill/', '/w_600,f_auto,q_auto/');
expandedImg.src = highQualitySrc;
expandedImg.alt = imgs.alt;
imgText.innerHTML = imgs.alt;
// Animation de retour
expandedImg.style.opacity = '1';
expandedImg.style.transform = 'scale(1)';
}, 150);
}
</script>
<script>
var slideIndex = 1;
$(document).ready(function ()
{
{% if showArt == "ALL" %}
var slides = document.getElementsByClassName("slide");
slides[slideIndex - 1].style.display = "block";
{% else %}
$id = "{{showArt|replace({' ': ''})}}";
$('.slide').each(function () {
$(this).css('display', 'none');
})
$('#' + $id).css('display', 'block');
{% endif %}
});
//
//
// showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
function showSlidePreci(n) {
console.log(n);
var idSLide = "";
$('.slide').each(function () {
$(this).css('display', 'none');
if ($(this).attr('id').indexOf(n) !== -1) {
idSLide = $(this).attr('id');
}
$('#' + idSLide).css('display', 'block');
});
}
</script>
<script src="{{ asset('js/product-gallery-optimizations.js') }}"></script>
{% endblock %}

templates/Accueil/album.html.twig line 1