V
This commit is contained in:
312
Vue/portail.php
312
Vue/portail.php
@@ -394,86 +394,7 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-card {
|
||||
max-width: 380px;
|
||||
margin: auto;
|
||||
padding: 35px 30px;
|
||||
border-radius: 14px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 35px rgba(0,0,0,0.10);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
font-size: 24px;
|
||||
color: #7D4FFE;
|
||||
font-weight: 700;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.custom-input {
|
||||
width: 100%;
|
||||
border: 2px solid #7D4FFE;
|
||||
border-radius: 8px;
|
||||
padding: 12px 36px 12px 12px;
|
||||
font-size: 14px;
|
||||
color: #7D4FFE;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-input:focus {
|
||||
border-color: #5e36e0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-icon i {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 20px;
|
||||
color: #7D4FFE;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: #7D4FFE;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background: #fff;
|
||||
color: #7D4FFE;
|
||||
border: 2px solid #7D4FFE;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
margin-top: 18px;
|
||||
font-size: 12px;
|
||||
color: #7D4FFE;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.login-card {
|
||||
width: 90%;
|
||||
padding: 25px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
@@ -527,138 +448,107 @@
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Slider Module - Sécurisé
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Attendre que le DOM soit complètement chargé
|
||||
function initSlider() {
|
||||
// Vérifier si déjà initialisé
|
||||
if (window.sliderInitialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Rechercher les éléments
|
||||
var slideImages = document.querySelectorAll('.slide-image');
|
||||
var next = document.querySelector('.next');
|
||||
var prev = document.querySelector('.prev');
|
||||
var dots = document.querySelectorAll('.dot');
|
||||
var container = document.querySelector('.slide-container');
|
||||
|
||||
// VÉRIFICATION CRITIQUE : Si aucun élément n'existe, on arrête
|
||||
if (slideImages.length === 0) {
|
||||
// Pas d'erreur en console pour ne pas polluer les logs
|
||||
return;
|
||||
}
|
||||
|
||||
// Marquer comme initialisé
|
||||
window.sliderInitialized = true;
|
||||
|
||||
// Variables du slider
|
||||
var counter = 0;
|
||||
var deletInterval;
|
||||
|
||||
// Fonctions du slider
|
||||
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();
|
||||
}
|
||||
|
||||
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(){
|
||||
clearInterval(deletInterval);
|
||||
deletInterval = setInterval(function() {
|
||||
slideNext();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function indicators(){
|
||||
for(var i = 0; i < dots.length; i++){
|
||||
dots[i].className = dots[i].className.replace(' active', '');
|
||||
}
|
||||
if (dots[counter]) {
|
||||
dots[counter].className += ' active';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialisation
|
||||
if (next) next.addEventListener('click', slideNext);
|
||||
if (prev) prev.addEventListener('click', slidePrev);
|
||||
|
||||
// Event listeners pour les dots
|
||||
for (var i = 0; i < dots.length; i++) {
|
||||
dots[i].addEventListener('click', function() {
|
||||
var imageId = parseInt(this.getAttribute('attr'));
|
||||
if (!isNaN(imageId)) {
|
||||
switchImage(imageId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fonction switchImage
|
||||
function switchImage(imageId){
|
||||
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){
|
||||
return;
|
||||
}
|
||||
else{
|
||||
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
|
||||
counter = imageId;
|
||||
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
|
||||
}
|
||||
indicators();
|
||||
}
|
||||
|
||||
// Démarrer
|
||||
autoSliding();
|
||||
indicators();
|
||||
|
||||
// Events mouseover/mouseout
|
||||
if (container) {
|
||||
container.addEventListener('mouseover', function(){
|
||||
clearInterval(deletInterval);
|
||||
});
|
||||
|
||||
container.addEventListener('mouseout', autoSliding);
|
||||
}
|
||||
}
|
||||
|
||||
// Démarrer au bon moment
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initSlider);
|
||||
} else {
|
||||
// Déjà chargé, mais attendre un peu pour les contenus AJAX
|
||||
setTimeout(initSlider, 100);
|
||||
}
|
||||
|
||||
// Réexécuter après les chargements AJAX
|
||||
$(document).ajaxComplete(function() {
|
||||
setTimeout(initSlider, 50);
|
||||
// Empeche inspecter dans le navigateur
|
||||
|
||||
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('contextmenu', function (e) {
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
} else {
|
||||
document.attachEvent('oncontextmenu', function () {
|
||||
window.event.returnValue = false;
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
|
||||
// Accéder aux images
|
||||
let slideImages = document.querySelectorAll('.slide');
|
||||
// Accéder aux boutons suivant et précédent
|
||||
let next = document.querySelector('.next');
|
||||
let prev = document.querySelector('.prev');
|
||||
// Accéder aux indicateurs
|
||||
let dots = document.querySelectorAll('.dot');
|
||||
|
||||
var counter = 0;
|
||||
|
||||
// Code pour le bouton suivant
|
||||
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();
|
||||
}
|
||||
|
||||
// Code pour le bouton précédent
|
||||
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();
|
||||
}
|
||||
|
||||
// Defilement automatique
|
||||
function autoSliding(){
|
||||
deletInterval = setInterval(timer, 3000);
|
||||
function timer(){
|
||||
slideNext();
|
||||
indicators();
|
||||
}
|
||||
}
|
||||
autoSliding();
|
||||
|
||||
// Arrêtez le defilement automatique lorsque la souris survole une image
|
||||
const container = document.querySelector('.slide-container');
|
||||
container.addEventListener('mouseover', function(){
|
||||
clearInterval(deletInterval);
|
||||
});
|
||||
|
||||
// Reprendre le defilement lorsque la souris ne survole plus une image
|
||||
container.addEventListener('mouseout', autoSliding);
|
||||
|
||||
// Ajouter et supprimer une classe active des indicateurs
|
||||
function indicators(){
|
||||
for(i = 0; i < dots.length; i++){
|
||||
dots[i].className = dots[i].className.replace(' active', '');
|
||||
}
|
||||
dots[counter].className += ' active';
|
||||
}
|
||||
|
||||
// Ajouter un événement de clic à l'indicateur
|
||||
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){
|
||||
return;
|
||||
}
|
||||
else{
|
||||
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>
|
||||
Reference in New Issue
Block a user