<!DOCTYPE html>
<html lang="fr" style="{% block paddingTop %}padding-top:0;{% endblock %}" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
{% block title %}Toofoot
{% endblock %}
</title>
{% block stylesheets %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.9/fullpage.min.css"/>
{{ encore_entry_link_tags('app') }}
{{ encore_entry_link_tags('basetwig') }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" integrity="sha512-nNlU0WK2QfKsuEmdcTwkeh+lhGs6uyOxuUs+n+0oXSYDok5qy0EI0lt01ZynHq6+p/tbgpZ7P+yUb+r71wqdXg==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link href="https://fonts.googleapis.com/css?key=AIzaSyAsySnpaII77txymxTp9Z3UgkbZfL2s9SM" rel="stylesheet">
{% endblock %}
{% block stylesheets_add %}{% endblock %}
</head>
<body class="site-wrapper">
<header>
<nav id="navMain" class="navbar navbar-expand-lg fixed-top bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="{{ path('app_index') }}"><img src="/img/logo.PNG" class="" alt="logo toofoot"></a>
<button class="navbar-toggler" style="" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-solid fa-bars" style="color: #ffffff;"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-0 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link me-3 link-light rounded {% if 'concept' in app.request.attributes.get('_route') %}active{% endif %}" {% if 'concept' in app.request.attributes.get('_route') %} aria-current="page" {% endif %} href="{{ path('app_concept') }}">Concepts</a>
</li>
{% if (is_mobile()) and not (is_tablet()) %}
{% block NavLink %}{% endblock %}
{% else %}
{% endif %}
<li class="nav-item">
<a class="nav-link me-3 link-light rounded {% if 'contact' in app.request.attributes.get('_route') %}active{% endif %}" {% if 'contact' in app.request.attributes.get('_route') %} aria-current="page" {% endif %} href="{{ path('app_contact') }}">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link me-3 link-light rounded {% if 'QuiSommeNous' in app.request.attributes.get('_route') %}active{% endif %}" {% if 'QuiSommeNous' in app.request.attributes.get('_route') %} aria-current="page" {% endif %} href="{{ path('app_QuiSommeNous') }}">Qui sommes nous ?</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-black">
<button type="button" class="btn-close btn-close-white open-offcanvas" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<div class="video-containerM">
<div id="videoWrapper">
<video controls muted id="videoElement">
<source src="/uploads/video/WBS2.mp4" type="video/mp4">
Votre navigateur ne supporte pas la lecture de vidéos au format MP4.
</video>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end bg-dark text-light xxl" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel">Je règle mon Web Sound Design</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" id="closeButton"></button>
</div>
<div class="offcanvas-body">
<div class="mb-3">
<hr class="bg-white">
<h6 class="text-center">Qui m'accompagne ?</h6>
<hr class="bg-white">
</div>
{% set Perso = PersoService.findAllWithSon() %}
<div class="d-flex flex-column align-items-center mb-3">
{% for p in Perso %}
<div class="nav-item son mb-2">
<button type="button" class="btn btn-link btn-lg nav-link text-white rounded" style="padding:5px;" id="{{p.nom|lower|replace({' ':''})}}">
{{p.nom}}
</button>
</div>
{% endfor %}
<div class="nav-item son mb-2">
<button type="button" class="btn btn-link nav-link text-white rounded" style="padding:5px;" id="mute">
Aucune voix
</button>
</div>
</div>
<hr class="bg-white">
<p class="mb-2">Ce site utilise des cookies et des sons, veuillez activer votre son pour une meilleure expérience !</p>
<p class="mb-2">Si vous ne voulez pas de son, utilisez l'option "mute".</p>
<div class="logo-container">
<img src="/uploads/logosd/WB_small.png" alt="Logo" class="offcanvas-logo">
</div>
</div>
</div>
</header>
</body>
</html></body></html></div><div class="offcanvas offcanvas-start bg-dark text-light" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"><div class="offcanvas-header"><h5 class="offcanvas-title" id="offcanvasExampleLabel">Menu</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button></div><div class="offcanvas-body"><div>
{% if app.user %}
{{ include('_menu.html.twig') }}
{% endif %}</div></div></div>{% block nav2 %}{% endblock %}</body></html></header>{% block body %}{% endblock %}{% block javascripts %}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.9/fullpage.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha512-uURl+ZXMBrF4AwGaWmEetzrd+J5/8NRkWAvJx5sbPSSuOb0bZLqf+tOzniObO00BjHa/dD7gub9oCGMLPQHtQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>{% endblock %}{% block javascripts_add %}{% endblock %}{% block javascripts_add2 %}<script><!-- parse-ignore-start -->
// Fonction pour supprimer un cookie
function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
// Fonction pour définir un cookie
function setCookie(name, value, expireInHours) {
let date = new Date();
date.setTime(date.getTime() + (expireInHours * 60 * 60 * 1000));
let expires = "; expires=" + date.toUTCString();
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
let nameEQ = name + "=";
let ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
var boutons = document.querySelectorAll('.nav-item button');
// Nom du cookie pour chaque bouton
var cookieNames = {
{% for p in Perso %}
{{p.nom|lower|replace({' ':''})}}: '{{p.nom|lower|replace({' ':''})}}',
{% endfor %}
mute: 'mute'
};
// Fonction pour gérer les clics sur les boutons
function handleButtonClick(buttonName) {
// Enregistrer la valeur dans un cookie
document.cookie = cookieNames[buttonName] + '=true; path=/;';
// Supprimer les cookies des autres boutons
for (var name in cookieNames) {
if (name !== buttonName) {
deleteCookie(cookieNames[name]);
}
}
location.reload();
}
function handleButtonClickDefault(buttonName) {
// Enregistrer la valeur dans un cookie
document.cookie = cookieNames[buttonName] + '=true; path=/;';
// Supprimer les cookies des autres boutons
for (var name in cookieNames) {
if (name !== buttonName) {
deleteCookie(cookieNames[name]);
}
}
boutons.forEach(function (bouton) {
if (bouton.id === buttonName) {
bouton.classList.add('active');
} else {
bouton.classList.remove('active');
}
});
}
function adjustVideoSize() {
var videoWrapper = document.getElementById('videoWrapper');
var modalWidth = videoModal.offsetWidth;
var modalHeight = videoModal.offsetHeight;
videoWrapper.style.width = modalWidth + 'px';
videoWrapper.style.height = modalHeight + 'px';
}
var currentAudio = null;
function playSound(soundUrl) {
// Si un son est en cours de lecture, l'arrêter
// Créer un nouvel objet Audio avec le nouveau fichier son
var audio = new Audio(soundUrl);
// Jouer le nouveau son
audio.play();
// Enregistrer l'objet audio en cours
currentAudio = audio;
}
function stopSound() {
if (currentAudio) {
currentAudio.pause();
currentAudio.currentTime = 0;
}
}
// Vérifier tous les cookies et lancer le fichier audio correspondant si nécessaire
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(!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();
}
}
};
// Ajout des boutons
{% for p in Perso %}
document.getElementById('{{p.nom|lower|replace({' ':''})}}').addEventListener('click', function () {
handleButtonClickDefault('{{p.nom|lower|replace({' ':''})}}');
});
{% endfor %}
document.getElementById('mute').addEventListener('click', function () {
handleButtonClickDefault('mute');
});
function checkModalCookie() {
const modalCookie = getCookieM('modalShown');
return modalCookie === null;
}
// Crée un cookie avec une durée de vie de 30 jours
function setModalCookie() {
const expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 30);
document.cookie = 'modalShown=true; expires=' + expiryDate.toUTCString() + '; path=/';
}
function getCookieM(name) {
const cookieArr = document.cookie.split(';');
for (let i = 0; i < cookieArr.length; i++) {
const cookiePair = cookieArr[i].split('=');
const cookieName = cookiePair[0].trim();
if (cookieName === name) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
// Vérifie si le modal doit être affiché au chargement de la page
window.addEventListener('DOMContentLoaded', function() {
// Vérifier si aucun des cookies du tableau cookieNames n'est présent
var cookiesPresent = Object.keys(cookieNames).some(function(cookieName) {
return getCookie(cookieName);
});
if (!cookiesPresent && !getCookie('mute') ) {
// Récupérer le premier cookie du tableau cookieNames
var defaultCookie = Object.values(cookieNames)[0];
// Créer le cookie par défaut
handleButtonClickDefault(defaultCookie);
// Définir la classe "active" sur le bouton correspondant
boutons.forEach(function(bouton) {
if (bouton.id === defaultCookie) {
bouton.classList.add('active');
} else {
bouton.classList.remove('active');
}
});
}
else {
for (var cookieName in cookieNames) {
if (getCookie(cookieName)) {
boutons.forEach(function(bouton) {
if (bouton.id === cookieName) {
bouton.classList.add('active');
}
else {
bouton.classList.remove('active');
}
});
}
}
}
});
window.addEventListener('resize', function () {
// Ajuster la taille de la vidéo lorsque la fenêtre est redimensionnée
adjustVideoSize();
});
const videoModal = document.getElementById('videoModal');
var video = document.getElementById('videoElement');
// Attendez que la fenêtre soit chargée
window.addEventListener('load', function() {
var offcanvas = new bootstrap.Offcanvas(document.getElementById("offcanvasRight"));
if (checkModalCookie()) {
offcanvas.show();
//rajouter la fonction mute ici
} else {
video.muted = true;
video.pause();
}
offcanvas._element.addEventListener("hide.bs.offcanvas", function() {
if (checkModalCookie()) {
if (!getCookie("mute")){
const bootstrapModal = new bootstrap.Modal(videoModal);
bootstrapModal.show();
adjustVideoSize();
video.muted = true;
video.play(); // Lancez la vidéo automatiquement
if (!video.paused) {
video.muted = false;
}
}
else{
setModalCookie();
}
} else {
video.muted = true;
video.pause();
}
});
});
// Gère l'événement de fermeture du modal
videoModal.addEventListener('hidden.bs.modal', function() {
setModalCookie(); // Crée le cookie pour empêcher l'affichage du modal pendant 30 jours
video.pause();
video.muted = true;
});
/* $('.open-offcanvas').click(function() {
// Ouvrir le offcanvas right
$('#offcanvasRight').offcanvas('show');
}); */
function setCookieB(name, value, days) {
const expires = new Date();
expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = name + '=' + encodeURIComponent(value) + ';expires=' + expires.toUTCString();
}
function getCookieB(name) {
const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
if (match) {
return decodeURIComponent(match[2]);
}
}
var buttonall = document.getElementById('btnsound');
var audioc = new Audio('/uploads/button/transi.mp3');
buttonall.addEventListener('mouseenter', function() {
audioc.play();
});
buttonall.addEventListener('mouseleave', function() {
audioc.pause();
audioc.currentTime = 0;
});
<!-- parse-ignore-end --></script>{% endblock %}</body></html>