grainParisArt/templates/index.html

{% extends 'base.html' %}

{% block head %}

{% endblock %}

{% block body %}
<!--
<div id="loader">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
-->
<a href="#headerTop">
    <div class="goTop">
        <p>🍿</p>
    </div>
</a>

<!--
<svg class="background_svg" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="b" x="-500" y="-500" width="2000" height="2000" filterUnits="userSpaceOnUse">
            <feGaussianBlur in="SourceGraphic" stdDeviation="50" />
        </filter>
        <filter id="a" x="-500" y="-500" width="2000" height="2000" filterUnits="userSpaceOnUse">
            <feFlood flood-color="#fff" result="neutral-gray" />
            <feTurbulence type="fractalNoise" baseFrequency="2.5" numOctaves="100" stitchTiles="stitch"
                result="noise" />
            <feColorMatrix in="noise" type="saturate" values="0" result="destaturatedNoise" />
            <feComponentTransfer in="desaturatedNoise" result="theNoise">
                <feFuncA type="table" tableValues="0 0 0.1 0" />
            </feComponentTransfer>
            <feBlend in="SourceGraphic" in2="theNoise" mode="soft-light" result="noisy-image" />
        </filter>
        <radialGradient id="c" cx="50%" cy="50%" r="50%" fx="20%" fy="40%">
            <stop offset="0%" stop-color="#444cf7" />
            <stop offset="100%" stop-color="rgba(194,68,247,0.2)" />
        </radialGradient>
    </defs>
    <rect width="100%" height="100%" fill="#fff" />
    <g filter="url(#a)">
        <g filter="url(#b)">
            <svg width="800" height="800" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"
                transform="translate(140.997 117.996)">
                <path fill="url(#c)"
                    d="M993.5 849.5Q888 1099 622 1061T226.5 811.5Q97 600 220 377t362.5-192q239.5 31 378 223t33 441.5Z" />
            </svg>
        </g>
    </g>
</svg>
-->

<img src="../static/images/background.png" 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">
                <div class="date-selectionne">
                    <p class="jour">{{date.jour1.jour}}</p>
                    <p class="chiffre">{{date.jour1.chiffre}}</p>
                    <p class="mois">{{date.jour1.mois}}</p>
                </div>
                <a href="{{ url_for('jour1')}}">
                    <div class="date">
                        <p class="jour">{{date.jour2.jour}}</p>
                        <p class="chiffre">{{date.jour2.chiffre}}</p>
                        <p class="mois">{{date.jour2.mois}}</p>
                    </div>
                </a>
                <a href="{{ url_for('jour2')}}">
                    <div class="date">
                        <p class="jour">{{date.jour3.jour}}</p>
                        <p class="chiffre">{{date.jour3.chiffre}}</p>
                        <p class="mois">{{date.jour3.mois}}</p>
                    </div>
                </a>
                <a href="{{ url_for('jour3')}}">
                    <div class="date">
                        <p class="jour">{{date.jour4.jour}}</p>
                        <p class="chiffre">{{date.jour4.chiffre}}</p>
                        <p class="mois">{{date.jour4.mois}}</p>
                    </div>
                </a>
                <a href="{{ url_for('jour4')}}">
                    <div class="date">
                        <p class="jour">{{date.jour5.jour}}</p>
                        <p class="chiffre">{{date.jour5.chiffre}}</p>
                        <p class="mois">{{date.jour5.mois}}</p>
                    </div>
                </a>
                <a href="{{ url_for('jour5')}}">
                    <div class="date">
                        <p class="jour">{{date.jour6.jour}}</p>
                        <p class="chiffre">{{date.jour6.chiffre}}</p>
                        <p class="mois">{{date.jour6.mois}}</p>
                    </div>
                </a>
                <a href="{{ url_for('jour6')}}">
                    <div class="date">
                        <p class="jour">{{date.jour7.jour}}</p>
                        <p class="chiffre">{{date.jour7.chiffre}}</p>
                        <p class="mois">{{date.jour7.mois}}</p>
                    </div>
                </a>
            </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">{{film.titre}}</h3>
                <div class="info-content">
                    <p class="realisateur">Réalisateur : {{film.realisateur}}</p>
                    <p class="casting">Casting : {% for acteur in film.casting %}{{acteur}}, {% endfor %}</p>
                    <p class="genre">Genre : {% for genre in film.genres %}{{genre}}, {% endfor %}</p>
                    <p class="duree">Durée : {{film.duree.heure}}h{{film.duree.minute}}</p>
                </div>
                <div class="synopsis_container">
                    <p class="synopsis">
                        {{film.synopsis}}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div style="height: 10px;"></div>
    {% for horaire in film.horaires %}
    <div class="seance_container">
        <div class="cinema">
            <p>{{horaire.cinema}}</p>
        </div>
        <div class="horaires_container">
            {% for seance in horaire.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 = '###';

    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 = [
        { coordinates: [2.348973, 48.848363], description: "Écoles Cinéma club" },
        { coordinates: [2.546596, 48.840113], description: "UGC Ciné Cité Noisy-le-Grand" },
        { coordinates: [2.343014, 48.849777], description: "UGC Ciné Cité les Halles" },
        { coordinates: [2.342790, 48.849510], description: "Reflet Medicis" },
        { coordinates: [2.342790, 48.849510], description: "Fimothèque du quartier Latin" },
        { coordinates: [2.343223, 48.849980], description: "Le Champo" },
        { coordinates: [2.330526, 48.842813], description: "MK2 Parnasse" },
        { coordinates: [2.352129, 48.847530], description: "Le Grand Action" },
        { coordinates: [2.353602, 48.858676], description: "Luminor Hotel de Ville" },
        { coordinates: [2.344856, 48.871370], description: "Max Linder Panorama" },
        { coordinates: [2.342385, 48.847488], description: "Cinéma du Panthéon" },
        { coordinates: [2.349555, 48.841300], description: "Épée de bois" },
        { coordinates: [2.375488, 48.832448], description: "MK2 Bibliothèque" },
        { coordinates: [2.352312, 48.861584], description: "MK2 Beaubourg" }
    ];

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