grainParisArt/templates/index.html

{% extends 'base.html' %}

{% block head %}

{% endblock %}

{% block body %}

<a href="#headerTop">
    <div class="goTop">
        <p>🍿</p>
    </div>
</a>

<img src="../static/images/background.svg" class="background_svg">


<div id="map"></div>

<div class="planning">
    <div class="container_titrePlanning">
        <div class="contenu_edt">
            <h2 class="txt_edt">Emploi du temps</h2>
            <div class="calendrier">
            {% for date in dates %}
                {% if date.choisi %}
                <div class="date-selectionne">
                    <p class="jour">{{date.jour}}</p>
                    <p class="chiffre">{{date.chiffre}}</p>
                    <p class="mois">{{date.mois}}</p>
                </div>
                {% else %}
                <a href="{{ url_for('home', delta=date.index) }}">
                    <div class="date">
                        <p class="jour">{{date.jour}}</p>
                        <p class="chiffre">{{date.chiffre}}</p>
                        <p class="mois">{{date.mois}}</p>
                    </div>
                </a>
                {% endif %}
            {% endfor %}
            </div>
        </div>
        <div class="line"></div>
    </div>
    {% for film in films %}
    <div class="container_infoFilm">
        <img src={{ film.affiche }} class="affiche" />
        <div class="infoFilm">
            <div class="blur-background"></div>
            <div>
                <h3 class="titreFilm"><a href="{{ film.url }}">{{film.title}}</a></h3>
                <div class="info-content">
                    <p class="realisateur">Réalisateur : {{film.director}}</p>
                    <p class="casting">Casting : {{ film.casting }}</p>
                    <p class="genre">Genre : {{ film.genres }}</p>
                    <p class="duree">Durée : {{film.duree}}</p>
                </div>
                <div class="synopsis_container">
                    <p class="synopsis">
                        {{film.synopsis}}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div style="height: 10px;"></div>
    {% for cinename, seances in film.seances.items() %}
    <div class="seance_container">
        <div class="cinema">
            <p>{{cinename}}</p>
        </div>
        <div class="horaires_container">
            {% for seance in seances %}
            <div class="horaire">
                <p>{{seance}}</p>
            </div>
            {% endfor %}
        </div>
    </div>
    <div class="responsive-petite-div"></div>
    {% endfor %}
    <div class="responsive-div"></div>
    {% endfor %}

</div>



<script>
    mapboxgl.accessToken = {{ mapbox_token | tojson }};

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [2.3522, 48.8566],
        zoom: 12
    });

    map.addControl(new mapboxgl.NavigationControl());

    var locations = {{ theater_locations | tojson }};

    locations.forEach(function (location) {
        var el = document.createElement('div');
        el.className = 'custom-marker';

        var popup = new mapboxgl.Popup({ offset: 25 }).setText(location.description);

        new mapboxgl.Marker(el)
            .setLngLat(location.coordinates)
            .setPopup(popup)
            .addTo(map);
    });
</script>


{% endblock %}