templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"/>
  5.         <script src="/assets/js/jquery.min.js"></script>
  6.         <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  7.         <link defer href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  8.         <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  9.         <link rel="stylesheet" href="/assets/css/style.css">
  10.         <style>
  11.             @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600 &display=swap');
  12.         </style>
  13.         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Righteous">
  14.         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans">
  15.         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat">
  16.         <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
  17.     </head>
  18.     <body>
  19.         <div class="row nav">
  20.             <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 colLogo">
  21.                 <a href="/" rel="dofollow"><img class="logo" src="/assets/images/Logo-blanc.png" alt="logo PK Challenge"/></a>
  22.             </div>
  23.             <div class="col-xl-3 col-lg-3 col-md-3 col-sm-5"></div>
  24.             <div class="row col-xl-7 col-lg-7 col-md-7 col-sm-5 navigation">
  25.                 <ul>
  26.                     <li>
  27.                         <a class="tool link accueilLink" href="/" rel="dofollow">Accueil</a><br/></li>
  28.                     <li>
  29.                         <a class="tool link projetsLink" href="/sections" rel="dofollow">Sections</a><br/></li>
  30.                     <li>
  31.                         <a class="tool link btn-tableau-dispo-tronçons" onclick="showTableauDispoTronçons()">Disponibilité</a>
  32.                     </li>
  33.                     <li>
  34.                         <a class="tool link projetsLink" href="/explication" rel="dofollow">Explication</a><br/></li>
  35.                     <li>
  36.                         {% if is_granted('ROLE_ADMIN') %}
  37.                             <li>
  38.                                 <a class="tool link projetsLink" href="/admin" rel="dofollow">Dashboard</a>
  39.                                 <br/>
  40.                             </li>
  41.                         {% endif %}
  42.                         {% if is_granted('ROLE_USER') %}
  43.                             <li>
  44.                                 <a class="tool link projetsLink" href="/logout" rel="dofollow">Se déconnecter</a>
  45.                                 <br/>
  46.                             </li>
  47.                         {% else %}
  48.                             <li>
  49.                                 <a class="tool link projetsLink" href="/login" rel="dofollow">Se connecter</a>
  50.                                 <br/>
  51.                             </li>
  52.                         {% endif %}
  53.                     </li>
  54.                 </ul>
  55.             </div>
  56.         </div>
  57.         {% block body %}{% endblock %}
  58.         {% block footer %}
  59.             <div id="footer" class="row padding50">
  60.                 <div class="row">
  61.                     <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div>
  62.                     <div class="row col-lg-10 col-md-10 col-sm-10 col-10">
  63.                         <div class="col-lg-2 col-md-12 col-sm-12 col-12 no-padding">
  64.                             <img src="/assets/images/Logo-blanc.png" class="logo-footer"/>
  65.                         </div>
  66.                         <div class="col-lg-2 no-mobile"></div>
  67.                         <div class="col-lg-2 col-md-4 col-sm-12 col-12 no-padding">
  68.                             <p class="semi-bold blanc">Navigation</p>
  69.                             <a href="/">
  70.                                 <p class="lien-footer blanc tool">Accueil</p>
  71.                             </a>
  72.                             <a href="/sections">
  73.                                 <p class="lien-footer blanc tool">Sections</p>
  74.                             </a>
  75.                             <a href="/contact">
  76.                                 <p class="blanc tool" style="margin-bottom: 0;">Contact</p>
  77.                             </a>
  78.                             <br class="no-desktop"/><br class="no-desktop"/>
  79.                         </div>
  80.                         <div class="col-lg-4 col-md-4 col-sm-12 col-12 no-padding">
  81.                             <p class="semi-bold blanc">Contact</p>
  82.                             <p class="lien-footer blanc" style="margin-top: 1vw;">07 86 24 15 68</p>
  83.                             <a href="mailto:pennkaletchallenge@gmail.com">
  84.                                 <p class="lien-footer blanc tool">pennkaletchallenge@gmail.com</p>
  85.                             </a>
  86.                             <br class="no-desktop"/><br class="no-desktop"/>
  87.                         </div>
  88.                     </div>
  89.                     <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div>
  90.                 </div>
  91.                 <div class="row padding50 fond-marron">
  92.                     <hr class="separateur"/>
  93.                 </div>
  94.                 <div class="row">
  95.                     <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div>
  96.                     <div class="row col-lg-10 col-md-10 col-sm-10 col-10">
  97.                         <div class="col-lg-6 col-md-12 col-sm-12 col-12 no-padding">
  98.                             <p class="blanc">Copyright © 2023 Penn Kalet Challenge. Tous droits réservés</p>
  99.                             <p class="blanc">Site réalisé et propulsé par
  100.                                 <a class="blanc" style="text-decoration: underline;" href="https://serif.fr">serif</a>.</p>
  101.                         </div>
  102.                         <div class="col-lg-2 no-mobile"></div>
  103.                         <div class="col-lg-4 col-md-12 col-sm-12 col-12 no-padding">
  104.                             <div class="row">
  105.                                 <p class="blanc">Suivez-nous :</p>
  106.                                 <img src=""/>
  107.                                 <img src=""/>
  108.                                 <img src=""/>
  109.                             </div>
  110.                         </div>
  111.                     </div>
  112.                     <div class="col-lg-1 col-md-1 col-sm-1 col-1"></div>
  113.                 </div>
  114.             </div>
  115.         {% endblock %}
  116.         {% include "dispoPistes.html.twig" %}</body>
  117.     <script>
  118.         jQuery(document).ready(function ($) {
  119. $(document).scroll(function () {
  120. viewHeight = window.innerHeight * .2;
  121. posScroll = $(window).scrollTop();
  122. if (posScroll > viewHeight) {
  123. $('.logo').addClass("logo-gris");
  124. $('.nav').addClass("nav-blanche");
  125. $('.nav-mobile').addClass("nav-blanche");
  126. } else {
  127. $('.logo').removeClass("logo-gris");
  128. $('.nav').removeClass("nav-blanche");
  129. $('.nav-mobile').removeClass("nav-blanche");
  130. }
  131. });
  132. });
  133. var scroll = new SmoothScroll('a[href*="#"]', {speed: 1000});
  134. // const tableauDispoTronçons = document.querySelector('.tableau-dispo-tronçons');
  135. function showTableauDispoTronçons() {
  136. document.querySelector('.modal-blanche').classList.add('active');
  137. document.querySelector('.voile-body').classList.add('active');
  138. document.body.classList.add('no-scroll');
  139. }
  140. function hideTableauDispoTronçons() {
  141. document.querySelector('.modal-blanche').classList.remove('active');
  142. document.querySelector('.voile-body').classList.remove('active');
  143. document.body.classList.remove('no-scroll');
  144. }
  145.     </script>
  146.     <script>
  147.         let slideIndex = 0;
  148. function showSlides() {
  149. let slides = document.querySelector('.slides');
  150. let slideCount = document.querySelectorAll('.slide').length;
  151. let slideWidth = 100 / slideCount;
  152. slideIndex++;
  153. if (slideIndex > slideCount) {
  154. slides.style.transform = `translateX(0)`;
  155. slideIndex = 1;
  156. }
  157. slides.style.transform = `translateX(${
  158. -2 * slideWidth * (slideIndex - 1)
  159. }%)`;
  160. setTimeout(showSlides, 3000); // Change image every 3 seconds
  161. }showSlides();
  162.     </script>
  163. </html>