107 lines
4.7 KiB
PHP
Executable File
107 lines
4.7 KiB
PHP
Executable File
<?php defined('APP_VERSION') || define('APP_VERSION', date('YmdHi')); ?>
|
|
<!doctype html>
|
|
<html lang="<?= ($_SESSION['lang'] == "en_US") ? 'en' : 'fr' ?>">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<base href="<?= $racineWeb ?>">
|
|
<title><?= $titre ?></title>
|
|
|
|
<link rel="icon" href="Bootstrap_new/images/favicon.ico"/>
|
|
<link href="Bootstrap_new/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
<link href="Bootstrap_new/css/style-portail.css?ver=<?= APP_VERSION ?>" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid portal-wrapper p-0">
|
|
<div class="slide-container">
|
|
<div class="slides">
|
|
<img src="assets/img/slides/image01.jpg" class="active" attr="0">
|
|
<img src="assets/img/slides/image02.jpg" attr="1">
|
|
<img src="assets/img/slides/image03.jpg" attr="2">
|
|
<img src="assets/img/slides/image04.jpg" attr="3">
|
|
<img src="assets/img/slides/image05.jpg" attr="4">
|
|
<img src="assets/img/slides/image06.jpg" attr="5">
|
|
<img src="assets/img/slides/image07.jpg" attr="6">
|
|
<img src="assets/img/slides/image08.jpg" attr="7">
|
|
<img src="assets/img/slides/image09.jpeg" attr="8">
|
|
</div>
|
|
<div class="buttons">
|
|
<span class="next">❯</span>
|
|
<span class="prev">❮</span>
|
|
</div>
|
|
<div class="dotsContainer">
|
|
<?php for($i=0; $i<9; $i++): ?>
|
|
<div class="dot <?= ($i==0)?'active':'' ?>" attr='<?= $i ?>' onclick="switchImage(this)"></div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-side">
|
|
<div class="login-box animate-in">
|
|
<div class="logo-area mb-4">
|
|
<img src="assets/img/logo_portail_gestionnaire.png" alt="logo intersante">
|
|
</div>
|
|
<div id="div_contenu_portail">
|
|
<?= $contenu ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="Bootstrap_new/js/jquery.min.js"></script>
|
|
<script type="text/javascript">
|
|
let slideImages = document.querySelectorAll('.slides img');
|
|
let next = document.querySelector('.next');
|
|
let prev = document.querySelector('.prev');
|
|
let dots = document.querySelectorAll('.dot');
|
|
var counter = 0;
|
|
|
|
next.addEventListener('click', slideNext);
|
|
function slideNext(){
|
|
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
|
|
if(counter >= slideImages.length-1){ counter = 0; } else { counter++; }
|
|
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
|
|
indicators();
|
|
}
|
|
|
|
prev.addEventListener('click', slidePrev);
|
|
function slidePrev(){
|
|
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
|
|
if(counter <= 0){ counter = slideImages.length-1; } else { counter--; }
|
|
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
|
|
indicators();
|
|
}
|
|
|
|
function autoSliding(){
|
|
deletInterval = setInterval(timer, 3000);
|
|
function timer(){ slideNext(); indicators(); }
|
|
}
|
|
autoSliding();
|
|
|
|
const container = document.querySelector('.slide-container');
|
|
container.addEventListener('mouseover', () => { clearInterval(deletInterval); });
|
|
container.addEventListener('mouseout', autoSliding);
|
|
|
|
function indicators(){
|
|
for(i = 0; i < dots.length; i++){ dots[i].className = dots[i].className.replace(' active', ''); }
|
|
dots[counter].className += ' active';
|
|
}
|
|
|
|
function switchImage(currentImage){
|
|
currentImage.classList.add('active');
|
|
var imageId = currentImage.getAttribute('attr');
|
|
if(imageId > counter){
|
|
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
|
|
counter = imageId;
|
|
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
|
|
} else if(imageId < counter){
|
|
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
|
|
counter = imageId;
|
|
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
|
|
}
|
|
indicators();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|