templates/page/nous.html.twig line 1

{% extends "base.html.twig" %}
{% block title %}
    {{ parent() }}
    | qui somme nous ?
{% endblock %}
{% block stylesheets_add %}
    {{ parent() }}
    {{ encore_entry_link_tags('Nous') }}

{% endblock %}
{% block body %}


    <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>

    <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:1000">
        <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 id="fullpage">
        {% for n in nous %}
            <div class="section" style=" background-image: url('/uploads/nous/{{n.image}}');">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="frame rounded " style="background-color: {{n.cadreColor}}dd">
                                {% if (is_mobile()) and not (is_tablet()) %}
                                    <img src="/uploads/nous/{{n.pngg}}" alt="GIF" style="width:200px;" id="Gi" class="mb-2">

                                {% else %}
                                    <img src="/uploads/nous/{{n.pngg}}" alt="GIF" style="width:300px;" id="Gi" class="mb-2">
                                {% endif %}
                                <p>Président</p>
                                <p>Toofootien depuis le début !
                                </p>
                                <p>Août 2007</p>
                                <p>Une passion : La Telecaster 1952's</p>


                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="frame rounded mb-3" style="background-color: {{n.cadreColor}}dd">
                                {% if (is_mobile()) and not (is_tablet()) %}
                                    <img src="/uploads/nous/{{n.pnga}}" alt="GIF" style="width:200px;" id="Aurel" class="mb-2">
                                {% else %}
                                    <img src="/uploads/nous/{{n.pnga}}" alt="GIF" style="width:300px;" id="Aurel" class="mb-2">
                                {% endif %}
                                <p>Directeur du développement</p>
                                <p>Toofootien de coeur depuis toujours :
                                </p>
                                <p>Novembre 2008</p>
                                <p>Une passion : l'AS de pique</p>

                            </div>
                        </div>
                    </div>
                    <img src="/uploads/nous/{{n.gifa}}" alt="GIF 1" style="display: none;">
                    <img src="/uploads/nous/{{n.gifg}}" alt="GIF 2" style="display: none;">

                </div>
            </div>
        </div>
    {% endfor %}
{% endblock %}


{% block javascripts_add %}
    <!-- parse-ignore-start -->
    <script>
        new fullpage('#fullpage', 
        { // Configuration options here

        });
        {% for n in nous %}
            var imageElement = document.getElementById('Aurel');
            var gifSrc = '/uploads/nous/{{n.gifa}}';
            var pngSrc = '/uploads/nous/{{n.pnga}}';
            var imageElement2 = document.getElementById('Gi');
            var gifSrc2 = '/uploads/nous/{{n.gifg}}';
            var pngSrc2 = '/uploads/nous/{{n.pngg}}';
        {% endfor %}

        
        

        var audioa; // Déclarez la variable en dehors des fonctions pour y accéder dans les deux écouteurs d'événements
        var  audiog;

        imageElement.addEventListener('mouseenter', function() {
            this.src = gifSrc;
            audioa = new Audio('/uploads/background/A1.mp3');
            audioa.play();
        });

        imageElement.addEventListener('mouseleave', function() {
            this.src = pngSrc;
            if (audioa) {
                audioa.pause(); // Arrête la lecture du son
                audioa = null; // Réinitialise la variable audioa
            }
        });



        imageElement2.addEventListener('mouseenter', function() {
            this.src = gifSrc2;
            audiog = new Audio('/uploads/background/G1.mp3');
            audiog.play();
        });

        imageElement2.addEventListener('mouseleave', function() {
            this.src = pngSrc2;
            if (audiog) {
                audiog.pause(); // Arrête la lecture du son
                audiog = null; // Réinitialise la variable audiog
            }
        });

    imageElement.addEventListener('touchstart', function(event) {
      event.preventDefault(); // Empêche le défilement de la page lorsqu'on appuie sur l'image
      this.src = gifSrc;
      audioa = new Audio('/uploads/background/A1.mp3');
      audioa.play();
    });

    // Écouteur pour les appareils mobiles (événement touchend)
    imageElement.addEventListener('touchend', function(event) {
      event.preventDefault(); // Empêche le défilement de la page lorsqu'on relâche l'appui
      this.src = pngSrc;
      if (audioa) {
        audioa.pause(); // Arrête la lecture du son
        audioa = null; // Réinitialise la variable audioa
      }
    });

    imageElement2.addEventListener('touchstart', function(event) {
      event.preventDefault(); // Empêche le défilement de la page lorsqu'on appuie sur l'image
      this.src = gifSrc2;
      audiog = new Audio('/uploads/background/G1.mp3');
      audiog.play();
    });

    // Écouteur pour les appareils mobiles (événement touchend)
    imageElement2.addEventListener('touchend', function(event) {
      event.preventDefault(); // Empêche le défilement de la page lorsqu'on relâche l'appui
      this.src = pngSrc2;
      if (audiog) {
        audiog.pause(); // Arrête la lecture du son
        audiog = null; // Réinitialise la variable audioa
      }
    });





    </script>
<!-- parse-ignore-end -->
{% endblock %}