templates/page/contact.html.twig line 1

{% extends "base.html.twig" %}

{% block title %}
    {{ parent() }}
    | Contact
{% endblock %}
{% block stylesheets_add %}
    {{ parent() }}
    {{ encore_entry_link_tags('contact') }}
{% 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">
        <div class="section se1 text-center">
            {% for c in cont %}


                {% if (is_mobile()) and not (is_tablet()) %}
                    <div class="slide sl1 d-flex align-items-center justify-content-center" style="background-image: url('/uploads/personnage/{{c.imageMobile}}'); background-size: cover; background-position:center; position:relative">
                        <div class="container-fluid cont">
                            <div class="row mt-2">
                                <div class="col-sm">
                                    {{ form_start(Contact) }}
                                    <div class="card border-0 cardM" style="background-color:rgba(0,0,0,0.8); ">
                                        <h5 class=" text-center text-white">Une question, une interrogation ?</h5>
                                        <h5 class="card-header text-center text-white">No problemo contactez nous !</h5>
                                        <div class="card-body border-0 text-white">
                                            {{form_row(Contact.nom)}}
                                            {{form_row(Contact.prenom)}}
                                            {{form_row(Contact.email)}}
                                            {{form_row(Contact.tel)}}
                                            {{form_row(Contact.societe)}}
                                            {{form_row(Contact.message)}}
                                            <div class="mt-3 mb-2" align="center">
                                                <button type="submit" class="btn btn-secondary">ENVOYEZ VOTRE MESSAGE</button>
                                            </div>
                                            <div class="mt-3" align="center">
                                                Notre adresse : 91 Rue du Faubourg Saint-Honoré, 75008 Paris
                                            </div>
                                        </div>
                                    </div>
                                    {{ form_end(Contact) }}
                                </div>


                            </div>
                        </div>

                    </div>
                {% else %}
                    <div class="slide sl1 d-flex align-items-center justify-content-center" style="background-image: url('/uploads/personnage/{{c.image}}'); background-size: cover; background-position: center; position:relative; height: 100vh;">
                        <div class="container cont">
                            <div class="row justify-content-end">
                                <div class="col-md-4">
                                    {{ form_start(Contact) }}
                                    <div class="card border-0 cardC" style="background-color:rgba(0,0,0,0.8);">
                                        <div class="card-body border-0 text-white">

                                            <h5 class="text-center text-white">Vous avez quelque chose à nous dire ? Profitez-en</h5>
                                            {{form_row(Contact.nom)}}
                                            {{form_row(Contact.prenom)}}
                                            {{form_row(Contact.email)}}
                                            {{form_row(Contact.tel)}}
                                            {{form_row(Contact.societe)}}
                                            {{form_row(Contact.message)}}
                                            <div class="mt-3 mb-3" align="center">
                                                <button type="submit" class="btn btn-secondary">ENVOYEZ VOTRE MESSAGE</button>
                                            </div>
                                            <div class="mt-3 mb-1" align="center">
                                                Notre adresse : 91 Rue du Faubourg Saint-Honoré, 75008 Paris
                                            </div>
                                        </div>
                                    </div>
                                    {{ form_end(Contact) }}
                                </div>
                            </div>
                        </div>
                    </div>


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


{% endblock %}


{% block javascripts_add %}
    <!-- parse-ignore-start -->
    <script>
    <!-- parse-ignore-start -->
var g_interval;
document.addEventListener('DOMContentLoaded', function () {
    new fullpage('#fullpage', {
        autoScrolling: true,
        navigation: false,
        scrollingSpeed: 1000,
        responsiveWidth:1100,
        controlArrows: false,
        slidesNavigation: true,
        continuousHorizontal: true,
        afterLoad: function (origin, destination, direction) {
            clearInterval(g_interval);
            const lapse = 5000;
            if (destination.item.querySelectorAll('.fp-slides').length) {
                g_interval = setInterval(function () {
                fullpage_api.moveSlideRight();
            }, lapse);
            }
        }
    });
});
    <!-- parse-ignore-end -->
</script>{% endblock %}