templates/main/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil - CinéDevRT{% endblock %}
  5. {% block body %}
  7.     <main>
  8.         <div id="slider_container">
  9.             <div> Les films du moment </div>
  10.             <section id="slider">
  11.                 <div>
  12.                     <a>  </a>
  13.                     {% set sliderImgNumber = "-2" %}
  14.                     {% for movie in movies %}
  15.                         <a href="{{ path('filmsShow', {id: movie.id}) }}">
  16.                             <img src="{{ asset('uploads/' ~ movie.file) }}"> 
  17.                             <div id="sliderImg{{ sliderImgNumber }}"> </div>
  18.                         </a>
  19.                         {% set sliderImgNumber = sliderImgNumber + 1 %}
  20.                     {% endfor %}
  21.                     <a>  </a>
  22.                 </div>
  23.             </section>
  24.             <div id="arrow">
  25.                     <div> <i id="arrowLeft" onclick="slideLeft()" class="fas fa-chevron-circle-left"></i> </div>
  26.                     <div> <i id="arrowRight" onclick="slideRight()" class="fas fa-chevron-circle-right"></i> </div>
  27.             </div>
  28.         </div>
  30.         <section id="onDisplay">
  31.             <div> <h2> Films à l'affiche </h2> </div>
  32.             <section>
  33.                 {% for movie in movies %}
  34.                     <div>
  35.                         <div> <img src="{{ asset('uploads/' ~ movie.file) }}"> </div>
  36.                         <div>  
  37.                             <h3> {{ movie.title }} </h3>
  38.                             <div>
  39.                                 <div> <strong> Durée : </strong> 2h </div>
  40.                                 <div> <strong> Genres : </strong> Fantaisie, Action </div>
  41.                                 <div> <strong> Réalisateurs : </strong> {{ movie.realisedBy }} </div>
  42.                             </div>
  43.                             <a href="{{ path('filmsShow', {id: movie.id}) }}"> Séances </a>
  44.                         </div>
  45.                     </div>
  46.                 {% endfor %}
  47.             </section>
  48.         </section>
  49.         {# modal #}
  50.             <div id="modal"> 
  51.                 <div> 
  52.                     <h2> Ce site est un petit projet fictif de développeur </h2>
  53.                     <h3> Le projet est actuellement en pause et non terminé </h3>
  54.                     <p> Vous pouvez tout de même tester les fonctionnalités actuelles en créant votre compte </p>
  55.                     <p> Retrouvez davantage d'information dans la page "Contact" </p>
  56.                     <p> (Non responsive pour le moment) </p>
  57.                     <button onclick="closeModal()"> Fermer la pop up </button>
  58.                 </div>
  59.             </div>
  60.         {# end modal #}
  61.     </main>
  63.     <script>
  65.         function closeModal(){
  66.             document.getElementById("modal").style.display = "none";
  67.         }
  69.         var valueInitR;
  70.         var valueInitL;
  71.         var counter = 0;
  72.         
  73.         function resetLeftArrow() {
  74.             document.getElementById("arrowLeft").style.transform = "rotate(0deg)";
  75.         }
  77.         function resetRightArrow() {
  78.             document.getElementById("arrowRight").style.transform = "rotate(0deg)";
  79.         }
  81.         function resetTransitionLeftArrow() {
  82.             document.getElementById("arrowLeft").style.transition = "unset";
  83.         }
  85.         function resetTransitionRightArrow() {
  86.             document.getElementById("arrowRight").style.transition = "unset";
  87.         }
  89.         function slideLeft() {
  91.             console.log(counter);
  93.             switch (counter) {
  94.                 case -2:
  95.                     break;
  97.                 case -1:
  98.                     document.getElementById("slider").style.right = "33.33%";
  99.                     document.getElementById("slider").style.transform = "translateX(33.33%)";
  100.                     document.getElementById("arrowLeft").style.transform = "rotate(360deg)";
  101.                     document.getElementById("arrowLeft").style.transition = "transform 0.5s";
  103.                     document.getElementById("sliderImg-2").style.opacity = "unset";
  104.                     document.getElementById("sliderImg-2").style.backgroundColor = "unset";
  105.                     document.getElementById("sliderImg-1").style.opacity = "0.7";
  106.                     document.getElementById("sliderImg-1").style.backgroundColor = "black";
  108.                     counter--;
  109.                     break;
  111.                 case 0:
  112.                     document.getElementById("slider").style.right = "16.66%";
  113.                     document.getElementById("slider").style.transform = "translateX(-16.66%)";
  114.                     document.getElementById("arrowLeft").style.transform = "rotate(360deg)";
  115.                     document.getElementById("arrowLeft").style.transition = "transform 0.5s";
  117.                     document.getElementById("sliderImg-1").style.opacity = "unset";
  118.                     document.getElementById("sliderImg-1").style.backgroundColor = "unset";
  119.                     document.getElementById("sliderImg0").style.opacity = "0.7";
  120.                     document.getElementById("sliderImg0").style.backgroundColor = "black";
  122.                     counter--;
  123.                     break;
  125.                 case 1:
  126.                     document.getElementById("slider").style.right = "33.33%";
  127.                     document.getElementById("slider").style.transform = "translateX(-33.33%)";
  128.                     document.getElementById("arrowLeft").style.transform = "rotate(360deg)";
  129.                     document.getElementById("arrowLeft").style.transition = "transform 0.5s";
  131.                     document.getElementById("sliderImg0").style.opacity = "unset";
  132.                     document.getElementById("sliderImg0").style.backgroundColor = "unset";
  133.                     document.getElementById("sliderImg1").style.opacity = "0.7";
  134.                     document.getElementById("sliderImg1").style.backgroundColor = "black";
  136.                     counter--;
  137.                     break;
  139.                 case 2:
  140.                     document.getElementById("slider").style.right = "49.99%";
  141.                     document.getElementById("slider").style.transform = "translateX(-49.99%)";
  142.                     document.getElementById("arrowLeft").style.transform = "rotate(360deg)";
  143.                     document.getElementById("arrowLeft").style.transition = "transform 0.5s";
  145.                     document.getElementById("sliderImg1").style.opacity = "unset";
  146.                     document.getElementById("sliderImg1").style.backgroundColor = "unset";
  147.                     document.getElementById("sliderImg2").style.opacity = "0.7";
  148.                     document.getElementById("sliderImg2").style.backgroundColor = "black";                
  150.                     counter--;
  151.                     break;
  153.                 default:
  154.                     break;
  155.             }
  157.             setTimeout(resetTransitionLeftArrow, 501);
  158.             setTimeout(resetLeftArrow, 502);
  160.         }
  162.         function slideRight() {
  164.             console.log(counter);
  166.             switch (counter) {
  167.                 case -2:
  168.                     document.getElementById("slider").style.right = "16.66%";
  169.                     document.getElementById("slider").style.transform = "translateX(-16.66%)";
  170.                     document.getElementById("arrowRight").style.transform = "rotate(360deg)";
  171.                     document.getElementById("arrowRight").style.transition = "transform 0.5s";
  173.                     document.getElementById("sliderImg-1").style.opacity = "unset";
  174.                     document.getElementById("sliderImg-1").style.backgroundColor = "unset";
  175.                     document.getElementById("sliderImg-2").style.opacity = "0.7";
  176.                     document.getElementById("sliderImg-2").style.backgroundColor = "black";
  178.                     counter++;
  179.                     break;
  181.                 case -1:
  182.                     document.getElementById("slider").style.right = "33.33%";
  183.                     document.getElementById("slider").style.transform = "translateX(-33.33%)";
  184.                     document.getElementById("arrowRight").style.transform = "rotate(360deg)";
  185.                     document.getElementById("arrowRight").style.transition = "transform 0.5s";
  187.                     document.getElementById("sliderImg0").style.opacity = "unset";
  188.                     document.getElementById("sliderImg0").style.backgroundColor = "unset";
  189.                     document.getElementById("sliderImg-1").style.opacity = "0.7";
  190.                     document.getElementById("sliderImg-1").style.backgroundColor = "black";
  192.                     counter++;
  193.                     break;
  196.                 case 0:
  197.                     document.getElementById("slider").style.right = "49.99%";
  198.                     document.getElementById("slider").style.transform = "translateX(-49.99%)";
  199.                     document.getElementById("arrowRight").style.transform = "rotate(360deg)";
  200.                     document.getElementById("arrowRight").style.transition = "transform 0.5s";
  202.                     document.getElementById("sliderImg1").style.opacity = "unset";
  203.                     document.getElementById("sliderImg1").style.backgroundColor = "unset";
  204.                     document.getElementById("sliderImg0").style.opacity = "0.7";
  205.                     document.getElementById("sliderImg0").style.backgroundColor = "black";
  207.                     counter++;
  208.                     break;
  210.                 case 1:
  211.                     document.getElementById("slider").style.right = "66.66%";
  212.                     document.getElementById("slider").style.transform = "translateX(-66.66%)";
  213.                     document.getElementById("arrowRight").style.transform = "rotate(360deg)";
  214.                     document.getElementById("arrowRight").style.transition = "transform 0.5s";
  216.                     document.getElementById("sliderImg2").style.opacity = "unset";
  217.                     document.getElementById("sliderImg2").style.backgroundColor = "unset";
  218.                     document.getElementById("sliderImg1").style.opacity = "0.7";
  219.                     document.getElementById("sliderImg1").style.backgroundColor = "black";
  221.                     counter++;
  222.                     break;
  224.                 case 2:
  225.                     break;
  227.                 default:
  228.                     break;
  229.             }
  231.             setTimeout(resetTransitionRightArrow, 501);
  232.             setTimeout(resetRightArrow, 502);
  234.         }
  235.     
  237.     </script>
  239. {% endblock %}