{% extends "base.html.twig" %}
{% block title %}
{{ parent() }}
| Accueil
{% endblock %}
{# {% block paddingTop %}padding-top:0px;
{% endblock %} #}
{% block stylesheets_add %}
{{ parent() }}
{{ encore_entry_link_tags('accueil') }}
{% for cit in cita %}
<link href="https://fonts.googleapis.com/css?family={{cit.font}}" rel="stylesheet">
{% endfor %}
<style>
.fp-arrow.fp-next {
border: none;
color: white;
}
.fp-arrow.fp-prev {
border: none;
color: white;
}
</style>
{% endblock %}
{% block body %}
<div class="previews-container"></div>
<div style="position: absolute; top: 6rem; left: 0px; z-index:1000">
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SOUND') %}
<div class="custom-buttondroite" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<div class="logo">
<i style="color:black" class="fa-solid fa-bars fa-lg"></i>
</div>
<span style="text-align: center; color:black;" class="text">Admin menu</span>
</div>
{% endif %}
</div>
<div style="position: absolute; top: 10rem; right: 0px; z-index:1150">
<div id="btnsound" class="custom-button2" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<div class="logo">
<img src="/uploads/logosd/WP_small2.png" class="img-fluid me-auto rotas" alt="Votre image">
</div>
<span style="text-align: center;" class="text">Menu Web Sound Design</span>
</div>
</div>
<div style="position: absolute; top: 6rem; right: 0; z-index:1100">
{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_SOUND') %}
{{ render ( controller ('App\\Controller\\Admin\\SonController::Modal')) }}
{% endif %}
</div>
<!-- page d'accueil mobile-->
{% if (is_mobile()) and not (is_tablet()) %}
<div id="fullpage">
<div id="section" data-anchor="personnage" class="section se1 text-center">
{% for cit in cita %}
<div data-anchor="{{cit.TexteCi|lower|replace({' ':'-'})}}" id="idslidePerso_{{ loop.index }}" class="slide sl1 d-flex align-items-center justify-content-center" style="background-image: url('/uploads/personnage/{{cit.imageMobile}}');background-size: cover;background-position:center;position:relative">
{% if cit.DiplayCadre == 0 %}
<img src="/uploads/cadre/{{cit.cadreMobile}}" class="cadreMobile" alt="..." style="bottom:40px; position:absolute;">
{% endif %}
{% if cit.DiplayCadre == 1 %}
<div class="card card-custom-heightM border-0">
<div class="card-body text-center text-white rounded" style="background:{{cit.CadreColor}}dd; font-family: {{cit.font}}, sans-serif; font-size: {{cit.fontsizem}}px;">
{{cit.TextCadreMobile}}
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<!-- page d'accueil desc-->
{% else %}
<div id="fullpage">
<div id="section" data-anchor="personnage" class="section se1 text-center">
{% for cit in cita %}
{% if loop.index % 2 == 0 %}
<div data-anchor="{{cit.TexteCi|lower|replace({' ':'-'})}}" id="idslidePerso_{{ loop.index }}" class="slide sl1 d-flex align-items-center justify-content-center" style="background-image: url('/uploads/personnage/{{cit.image2}}');background-size: cover;background-position:center;position:relative">
{% if cit.DiplayCadre == 0 %}
<img src="/uploads/cadre/{{cit.cadre}}" class="cadregauche" alt="...">
{% endif %}
{% if cit.DiplayCadre == 1 %}
<div class="card card-custom-heightL border-0">
<div class="card-body d-flex align-items-center text-center text-white rounded" style="background: {{ cit.CadreColor }}dd; font-family: {{ cit.font }}, sans-serif; font-size: {{ cit.fontsize }}px;">
{{cit.TextCadre}}
</div>
</div>
{% endif %}
</div>
{% else %}
<div data-anchor="{{cit.TexteCi|lower|replace({' ':'-'})}}" id="idslidePerso_{{ loop.index }}" class=" slide sl1 d-flex align-items-center justify-content-center" style=" background-image: url('/uploads/personnage/{{cit.image}}');background-size: cover;background-position:center;position:relative">
{% if cit.DiplayCadre == 0 %}
<img src="/uploads/cadre/{{cit.cadre}}" class="cadredroite" alt="...">
{% endif %}
{% if cit.DiplayCadre == 1 %}
<div class="card card-custom-heightR border-0">
<div class="card-body d-flex align-items-center text-center text-white rounded" style="background: {{ cit.CadreColor }}dd; font-family: {{ cit.font }}, sans-serif; font-size: {{ cit.fontsize }}px;">
{{cit.TextCadre}}
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% endblock %}
{% block javascripts_add %}
<script>
<!-- parse-ignore-start -->
document.addEventListener('DOMContentLoaded', function() {
// Les noms des images et des ancres pour chaque slide (à adapter selon vos besoins)
var slideImages = [
{% for cit in cita %}
{% if cit.display == 1 %}
'{{ cit.image }}',
{% endif %}
{% endfor %}
];
var slideAncres = [
{% for cit in cita %}
{% if cit.display == 1 %}
'{{ cit.ancre }}',
{% endif %}
{% endfor %}
];
// Récupérer le conteneur pour les mini-previews
// JavaScript pour ajouter les mini-previews
var previewsContainer = document.querySelector('.previews-container');
// Parcourir chaque image et créer un élément div pour chaque slide
slideImages.forEach(function (imageName, index) {
var div = document.createElement('div');
div.classList.add('slide-preview'); // Vous pouvez ajouter des classes pour personnaliser les styles si nécessaire
div.style.backgroundImage = `url('/uploads/personnage/${imageName}')`;
div.setAttribute('id', 'slide-preview-' + index);
// Créer le lien pour chaque image
var link = document.createElement('a');
link.href = slideAncres[index];
link.appendChild(div);
// Ajouter le lien au conteneur des mini-previews
previewsContainer.appendChild(link);
});
});
var g_interval;
function autoplay(){
clearInterval(g_interval);
const lapse = 5000;
g_interval = setInterval(function () {
if (!$('#Modal').hasClass('show')) {
clearInterval(g_interval);
fullpage_api.moveSlideRight(); // Slide vers la droite seulement si le modal n'est pas ouvert
}
}, lapse);
}
document.addEventListener('DOMContentLoaded', function () {
new fullpage('#fullpage', {
autoScrolling: true,
navigation: false,
scrollingSpeed: 1500,
responsiveWidth:1100,
controlArrows: true,
slidesNavigation: true,
continuousHorizontal: true,
afterLoad: function (origin, destination,direction) {
},
afterSlideLoad: function(section, origin, destination, direction, trigger) {
updateActiveSlidePreview()
// Récupérez l'index de la section active
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
var cookieParts = cookie.split('=');
var cookieName = cookieParts[0];
var cookieValue = cookieParts[1];
var currentUrl2 = window.location.href;
{% for p in Perso %}
if (getCookie("{{p.nom|lower|replace({' ':''})}}")) {
{% for son in p.Son %}
if (direction == 'right' || direction == 'left') {
if(!checkModalCookie()){
if (currentUrl2 === "{{ son.nomPage }}") {
if (!getCookie("son_" + "{{son.id}}")) {
const delayInSeconds = {{ son.delay }}; // Délai du son
const delayInMilliseconds = delayInSeconds * 1000; // Conversion en millisecondes
var audio = new Audio('/uploads/sons/{{ son.sonH }}');
setTimeout(function() {
audio.play();
}, delayInMilliseconds); // Le son sera joué après un délai
setCookie("son_" + {{son.id}}, true, {{son.frequence}});
}
else{
// Vérifiez la date et l'heure du dernier jeu du son
let lastPlayedTime = getCookie("son_" + "{{son.id}}");
if (lastPlayedTime) {
// Calculer la différence de temps entre le dernier jeu du son et maintenant
let timeDiff = (new Date().getTime() - new Date(lastPlayedTime).getTime()) / 1000 / 60 / 60; // en heures
if (timeDiff >= {{son.frequence}}) {
// Le temps écoulé est supérieur ou égal à la fréquence, donc jouer le son à nouveau
const delayInSeconds = {{ son.delay }}; // Délai du son
const delayInMilliseconds = delayInSeconds * 1000; // Conversion en millisecondes
var audio = new Audio('/uploads/sons/{{ son.sonH }}');
setTimeout(function() {
audio.play();
}, delayInMilliseconds); // Le son sera joué après un délai
// Mettre à jour le cookie avec la date et l'heure du dernier jeu du son
setCookie("son_" + "{{son.id}}", new Date().toISOString(), {{son.frequence}});
}
}
}
}
}
}
{% endfor %}
}
{% endfor %}
if (getCookie("mute")) {
// Couper tous les fichiers audio
var audioElements = document.getElementsByTagName('audio');
for (var j = 0; j < audioElements.length; j++) {
audioElements[j].pause();
}
}
};
},
onSlideLeave : function (section, origin, destination, direction, trigger) {
clearInterval(g_interval);
$('#link' + section.anchor).addClass('active');
setTimeout(() => {
$('#link' + section.anchor).removeClass('active');
}, 400);
},
onLeave : function (origin, destination, direction, trigger) {
$('#link' + destination.anchor).addClass('active');
setTimeout(() => {
$('#link' + destination.anchor).removeClass('active');
}, 400);
}
});
});
function updateActiveSlidePreview() {
var slideImages = [
{% for cit in cita %}
{% if cit.display == 1 %}
'{{ cit.image }}',
{% endif %}
{% endfor %}
];
var currentSlideIndex = fullpage_api.getActiveSlide().index;
slideImages.forEach(function (imageName, index) {
var div = document.getElementById('slide-preview-' + index);
// Vérifier si le slide actif correspond à l'index du slide preview
if (index === currentSlideIndex) {
div.classList.add('active');
} else {
div.classList.remove('active');
}
});
}
updateActiveSlidePreview()
$('#Modal').on('show.bs.modal', function() {
// Arrêtez la fonction autoplay ici
});
$('#Modal').on('hide.bs.modal', function() {
// Reprenez la fonction autoplay ici
});
<!-- parse-ignore-end -->
</script>
{% endblock %}