templates/site/index.html.twig line 1

Open in your IDE?
  1. {% extends '/site/base_site.html.twig' %}
  2. {% block title %}Plus vert moins cher{% endblock %}
  3. {% block bodyclass %}homeBody{% endblock %}
  4. {% block menuclass %}menuHome{% endblock %}
  5. {% block body %}
  6.     {% set mois = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ] %}
  7.     <div class="home" id="home">
  8.         <video playsinline autoplay muted loop>
  9.             <source src="/site/img/home.mp4" type="video/mp4">
  10.         </video>
  11.         {# <img src="/site/img/tgf.jpg" class="visueltgf" /> #}
  12.         <div class="homeEntete wrapper">   
  13.             <div>
  14.                 <img src="/site/img/logo_blanc.png" />
  15.             </div>
  16.             <div>
  17.                 <h1>Imaginons ensemble des solutions plus <strong>sobres</strong>, plus <strong>locales</strong> et plus <strong>durables</strong></h1>
  18.             </div>
  19.             {# <div>
  20.                 <img src="/site/img/logo_tgf.png" />
  21.                 <div>
  22.                     <p>Mardi 6 juin à 18h</p>
  23.                     <p>suivi d'un cocktail dînatoire</p>
  24.                     <p>à partir de 20h</p>
  25.                     <hr/>
  26.                     <p>&Agrave; la Maison de l'Océan</p>
  27.                     <p><span>195 rue Saint-Jacques</span></p>
  28.                     <p><span>75005 Paris</span></p>
  29.                 </div>
  30.             </div>
  31.             <div>
  32.                 <div><img src="/site/img/tgf_part.png" /></div>
  33.                 <p>La sobriété énergétique&nbsp;: phénomène de mode ou tendance de fond&nbsp;?</p>    
  34.             </div> #}
  35.         </div>
  36.         <div class="scrollInt">
  37.             <span>
  38.                 <img src="/site/img/triangle.svg" width="35" height="35" />
  39.             </span>
  40.         </div>
  41.     </div>
  42.  
  43.     <div class="homeBgBlanc charteLigne charteLigneTop">
  44.         <div class="wrapper homeEvent">
  45.                     
  46.             <h2><i class="fas fa-angle-double-right"></i>
  47.             Revivez les derniers événements
  48.             {# {% if evenementsPrev is defined and evenementsPrev is not null %}
  49.                 {% set evenements = evenementsPrev %}
  50.                 Revivez les derniers événements
  51.             {% else %}
  52.                     Événements
  53.             {% endif %}              #}
  54.             </h2>
  55.             {# <div class="retrospective">
  56.                 <p>Vidéo rétrospective</p>
  57.                 <div>
  58.                     <div>
  59.                         <a href="https://www.youtube.com/watch?v=cr-NOiKe24I" target="_blank"></a>
  60.                     </div>
  61.                     <div>
  62.                         <div>
  63.                             <h2>Plus Vert Moins Cher,<br/>Déjà 1 an !</h2>
  64.                             <p>Merci à tous les participants et intervenants d'avoir fait de ces événements un succès&nbsp;!<br/>
  65.                             En route pour 2024.</p>
  66.                         </div>
  67.                         <div>
  68.                             <a href="https://www.youtube.com/watch?v=cr-NOiKe24I" target="_blank">Voir la vidéo</a>
  69.                         </div>
  70.                     </div>                
  71.                 </div>
  72.             </div> #}
  73.             {# <div class="eventPrime">
  74.                 <div style="background-image:url('/site/upload/event1.png');">
  75.                     <a href="{{path('site_evenement', {titre:'test', idevent:0})}}"><span><i>Green Anatomy</i></span></a>
  76.                 </div>
  77.                 <div>
  78.                 </div>
  79.             </div> #}
  80.             
  81.             <ul>
  82.                 {% for item in evenements %}
  83.                 <li {{evenementsPrev is defined and evenementsPrev is not null ? 'class="archive"'}}>
  84.                     <div style="background-image:url('/site/upload/{{item.vignette}}');">
  85.                         {% if item.date is not null %}
  86.                             <a href="{{path('site_evenement', {titre:item.titre|slugify, idevent:item.id})}}"><span><i>{{item.titre}}</i></span></a>
  87.                         {% else %}
  88.                             <span><i>{{item.titre}}</i></span>                     
  89.                         {% endif %}
  90.                     </div>
  91.                     {% if item.soustitre is not null %}
  92.                     <p class="soustitre">{{item.soustitre}}</p>
  93.                     {% endif %}                 
  94.                     <p><i class="fas fa-map-marker-alt"></i> {{item.ville}}</p>
  95.                     {% if item.date is not null %}
  96.                     <p><i class="fas fa-calendar-alt"></i> {{item.date|date('j')}} {{mois[item.date|date('n')-1]}} {{item.date|date('Y')}}</p>
  97.                     {% else %}
  98.                     <p><i class="fas fa-calendar-alt"></i> A définir</p>
  99.                     {% endif %}
  100.                 </li>
  101.                 {% endfor %}
  102.                 
  103.             </ul>
  104.             <div>
  105.                 <a href="{{path('site_evenements')}}" class="btEffects">Tous les événements</a>
  106.             </div>
  107.         </div>
  108.     </div>
  109.     {% if intervenants|length > 0 %}
  110.     <div class="homeIntervenants homeIntervenantsVert" id="intervenants4col">
  111.         <div class="wrapper">
  112.             <h2><i class="fas fa-angle-double-right"></i> Intervenants</h2>
  113.             <ul>
  114.                 {% for item in intervenants %}
  115.                 <li>
  116.                     {% if item.image is not null %}
  117.                         <div style="background-image:url('/site/upload/{{item.image}}');">
  118.                         </div>
  119.                     {% else %}
  120.                         <div style="background-image:url('/site/img/profile.jpg');">   
  121.                         </div>
  122.                     {% endif %}
  123.                     <div>
  124.                         <p class="nom">{{item.prenom}} {{item.nom}}</p>
  125.                         <p class="poste">{{item.poste}}</p>
  126.                         <p class="societe">{{item.societe}}</p>
  127.                         {% if item.linkedin is not null %}
  128.                         <a href="{{item.linkedin}}" target="_blank"><i class="fab fa-linkedin-in"></i></a>
  129.                         {% endif %}
  130.                     </div>
  131.                 </li>
  132.                 {% endfor %}
  133.             </ul>
  134.             <div>
  135.                 <a href="{{ path('site_intervenants') }}" class="btEffects">Tous les Intervenants</a>
  136.             </div>
  137.         </div>
  138.     </div>        
  139.     {% endif %}
  140.     {% if reponses|length > 0 %}
  141.     <div class="homeQuotes">
  142.         <div class="wrapper">
  143.             <h2><i class="fas fa-angle-double-right"></i> Nos participants en parlent</h2>
  144.             <div>
  145.                 <img src="/site/img/arrow-left.svg" id="slideBtLeft" />
  146.                 <img src="/site/img/arrow-right.svg" id="slideBtRight" class="right" />
  147.                 <ul>
  148.                     {% for key, item in reponses %}
  149.                         <li id="quote_{{key}}" {{key ? 'style="display:none;"'}}>
  150.                             <blockquote>{{item.commentaire is not null ? item.commentaire : item.contenu}}</blockquote>
  151.                             {# <p>{{item.contact.prenom}} {{item.contact.nom}}</p> #}
  152.                         </li>
  153.                     {% endfor %}
  154.                 </ul>
  155.             </div>
  156.             
  157.         </div>
  158.     </div>   
  159.     {% endif %}
  160. {% endblock %}
  161. {% block extrajs %}
  162. <script>
  163.     $( document ).ready(
  164.         resizeVisual()
  165.     );
  166.     $(window).resize(
  167.         resizeVisual()
  168.     );
  169.     $(window).scroll(function() {
  170.         if($(window).scrollTop() > 5) {
  171.             $('.menu').removeClass('menuTransparent');
  172.         } else {
  173.             $('.menu').addClass('menuTransparent');
  174.         }
  175.     });
  176.     function resizeVisual() {
  177.         if(parseInt($(window).width())>550) {
  178.             $('.home').css('height', $(window).height());
  179.             $('.homeEntete').css('height', $(window).height());
  180.         }
  181.     }
  182.     let i=0;
  183.     let timeoutSlider = setTimeout(changeSliderAuto, 5000);
  184.     $('#slideBtRight').click(function(e) {
  185.         i++;
  186.         if(i>({{reponses|length}}-1)) i=0;
  187.         changeSlider(i);
  188.         clearTimeout(timeoutSlider);
  189.         timeoutSlider = setTimeout(changeSliderAuto, 5000);
  190.     });
  191.     $('#slideBtLeft').click(function(e) {
  192.         i--;
  193.         if(i<0) i=({{reponses|length}}-1);
  194.         changeSlider(i);
  195.         clearTimeout(timeoutSlider);
  196.         timeoutSlider = setTimeout(changeSliderAuto, 5000);
  197.     });
  198.     function changeSliderAuto() {
  199.         i++;
  200.         if(i>({{reponses|length}}-1)) i=0;
  201.         changeSlider(i);
  202.         clearTimeout(timeoutSlider);
  203.         timeoutSlider = setTimeout(changeSliderAuto, 5000);
  204.     }
  205.     function changeSlider(i) {
  206.         console.log(i);
  207.         for(var temp=0; temp<={{reponses|length - 1}}; temp++) {
  208.              $('#quote_'+temp).hide();
  209.         }
  210.         $('#quote_'+i).fadeIn(100);
  211.     }
  212. </script>
  213. {% endblock %}