<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="/assets/js/jquery.min.js"></script>
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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">
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/assets/css/style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600 &display=swap');
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Righteous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat">
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
</head>
<body>
<div class="row nav">
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 colLogo">
<a href="/" rel="dofollow"><img class="logo" src="/assets/images/Logo-blanc.png" alt="logo PK Challenge"/></a>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-5"></div>
<div class="row col-xl-7 col-lg-7 col-md-7 col-sm-5 navigation">
<ul>
<li>
<a class="tool link accueilLink" href="/" rel="dofollow">Accueil</a><br/></li>
<li>
<a class="tool link projetsLink" href="/sections" rel="dofollow">Sections</a><br/></li>
<li>
<a class="tool link btn-tableau-dispo-tronçons" onclick="showTableauDispoTronçons()">Disponibilité</a>
</li>
<li>
<a class="tool link projetsLink" href="/explication" rel="dofollow">Explication</a><br/></li>
<li>
{% if is_granted('ROLE_ADMIN') %}
<li>
<a class="tool link projetsLink" href="/admin" rel="dofollow">Dashboard</a>
<br/>
</li>
{% endif %}
{% if is_granted('ROLE_USER') %}
<li>
<a class="tool link projetsLink" href="/logout" rel="dofollow">Se déconnecter</a>
<br/>
</li>
{% else %}
<li>
<a class="tool link projetsLink" href="/login" rel="dofollow">Se connecter</a>
<br/>
</li>
{% endif %}
</li>
</ul>
</div>
</div>
{% block body %}{% endblock %}
{% block footer %}
<div id="footer" class="row padding50">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-1"></div>
<div class="row col-lg-10 col-md-10 col-sm-10 col-10">
<div class="col-lg-2 col-md-12 col-sm-12 col-12 no-padding">
<img src="/assets/images/Logo-blanc.png" class="logo-footer"/>
</div>
<div class="col-lg-2 no-mobile"></div>
<div class="col-lg-2 col-md-4 col-sm-12 col-12 no-padding">
<p class="semi-bold blanc">Navigation</p>
<a href="/">
<p class="lien-footer blanc tool">Accueil</p>
</a>
<a href="/sections">
<p class="lien-footer blanc tool">Sections</p>
</a>
<a href="/contact">
<p class="blanc tool" style="margin-bottom: 0;">Contact</p>
</a>
<br class="no-desktop"/><br class="no-desktop"/>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12 no-padding">
<p class="semi-bold blanc">Contact</p>
<p class="lien-footer blanc" style="margin-top: 1vw;">07 86 24 15 68</p>
<a href="mailto:pennkaletchallenge@gmail.com">
<p class="lien-footer blanc tool">pennkaletchallenge@gmail.com</p>
</a>
<br class="no-desktop"/><br class="no-desktop"/>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-1"></div>
</div>
<div class="row padding50 fond-marron">
<hr class="separateur"/>
</div>
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-1"></div>
<div class="row col-lg-10 col-md-10 col-sm-10 col-10">
<div class="col-lg-6 col-md-12 col-sm-12 col-12 no-padding">
<p class="blanc">Copyright © 2023 Penn Kalet Challenge. Tous droits réservés</p>
<p class="blanc">Site réalisé et propulsé par
<a class="blanc" style="text-decoration: underline;" href="https://serif.fr">serif</a>.</p>
</div>
<div class="col-lg-2 no-mobile"></div>
<div class="col-lg-4 col-md-12 col-sm-12 col-12 no-padding">
<div class="row">
<p class="blanc">Suivez-nous :</p>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-1"></div>
</div>
</div>
{% endblock %}
{% include "dispoPistes.html.twig" %}</body>
<script>
jQuery(document).ready(function ($) {
$(document).scroll(function () {
viewHeight = window.innerHeight * .2;
posScroll = $(window).scrollTop();
if (posScroll > viewHeight) {
$('.logo').addClass("logo-gris");
$('.nav').addClass("nav-blanche");
$('.nav-mobile').addClass("nav-blanche");
} else {
$('.logo').removeClass("logo-gris");
$('.nav').removeClass("nav-blanche");
$('.nav-mobile').removeClass("nav-blanche");
}
});
});
var scroll = new SmoothScroll('a[href*="#"]', {speed: 1000});
// const tableauDispoTronçons = document.querySelector('.tableau-dispo-tronçons');
function showTableauDispoTronçons() {
document.querySelector('.modal-blanche').classList.add('active');
document.querySelector('.voile-body').classList.add('active');
document.body.classList.add('no-scroll');
}
function hideTableauDispoTronçons() {
document.querySelector('.modal-blanche').classList.remove('active');
document.querySelector('.voile-body').classList.remove('active');
document.body.classList.remove('no-scroll');
}
</script>
<script>
let slideIndex = 0;
function showSlides() {
let slides = document.querySelector('.slides');
let slideCount = document.querySelectorAll('.slide').length;
let slideWidth = 100 / slideCount;
slideIndex++;
if (slideIndex > slideCount) {
slides.style.transform = `translateX(0)`;
slideIndex = 1;
}
slides.style.transform = `translateX(${
-2 * slideWidth * (slideIndex - 1)
}%)`;
setTimeout(showSlides, 3000); // Change image every 3 seconds
}showSlides();
</script>
</html>