Version DeepSeek corrigée v1.4

This commit is contained in:
KONE SOREL 2025-12-13 15:55:43 +00:00
parent 7f79933c45
commit fa6f1fee10
3 changed files with 224 additions and 182 deletions

View File

@ -417,7 +417,7 @@
} }
#lienLogo{ #lienLogo{
width:100px; width:80px;
} }
/* Media queries spécifiques pour SweetAlert */ /* Media queries spécifiques pour SweetAlert */

View File

@ -8,76 +8,78 @@
<!-- Tableau desktop (affiché sur les écrans moyens et grands) --> <!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
<div class="d-md-none"> <div class="d-md-none">
<!-- VERSION MOBILE COMPACTE SANS DÉBORDEMENT --> <!-- VERSION MOBILE ULTRA-COMPACTE - PAS DE SCROLL -->
<div style="width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; padding: 10px;"> <div style="width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; padding: 5px 10px; height: 100vh; display: flex; flex-direction: column; justify-content: center;">
<!-- Titre ajusté pour mobile --> <!-- Titre compact -->
<span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin: 5px 0 15px 0; display: block; font-size: 20px; text-align: center;"> <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin: 0 0 10px 0; display: block; font-size: 18px; text-align: center;">
Portail Assuré Portail Assuré
</span> </span>
<?php if (isset($msgErreur) and $msgErreur>" "): ?> <?php if (isset($msgErreur) and $msgErreur>" "): ?>
<div class="text-center" style="margin-bottom: 15px;"> <div class="text-center" style="margin-bottom: 10px;">
<div style="background-color: #f8d7da; color: #721c24; padding: 10px; border-radius: 8px; font-size: 13px; border: 1px solid #f5c6cb;"> <div style="background-color: #f8d7da; color: #721c24; padding: 8px; border-radius: 6px; font-size: 12px; border: 1px solid #f5c6cb; margin: 0 auto 10px; max-width: 280px;">
<?= $msgErreur ?> <?= $msgErreur ?>
</div> </div>
</div> </div>
<?php else: ?> <?php else: ?>
<div class="text-center" id="div_msgErreur_mobile" style="margin-bottom: 15px;"></div> <div class="text-center" id="div_msgErreur_mobile" style="margin-bottom: 10px;"></div>
<?php endif; ?> <?php endif; ?>
<?php if($maintenance!='1'): ?> <?php if($maintenance!='1'): ?>
<!-- Champs de formulaire compacts pour mobile --> <!-- Conteneur compact pour tous les champs -->
<div style="width: 100%; max-width: 100%;"> <div style="width: 100%; max-width: 280px; margin: 0 auto;">
<!-- Langue -->
<div style="margin-bottom: 15px; text-align: center;"> <!-- Langue - Version ultra compacte -->
<label for="langue_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Langue</label> <div style="margin-bottom: 10px;">
<label for="langue_mobile" style="font-size: 11pt; display: block; margin-bottom: 3px; text-align: center;">Langue</label>
<select id="langue_mobile" name="langue_mobile" <select id="langue_mobile" name="langue_mobile"
style="width: 100%; max-width: 280px; margin: 0 auto; height: 40px; padding: 0 12px; border: 2px solid #7D4FFE; border-radius: 9px; background: transparent; font-size: 14px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;" style="width: 100%; height: 35px; padding: 0 10px; border: 2px solid #7D4FFE; border-radius: 7px; background: transparent; font-size: 13px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
required onchange="changerLangueMobile(this.value);"> required onchange="changerLangueMobile(this.value);">
<?php liste_options($langues, $_SESSION['lang'], true); ?> <?php liste_options($langues, $_SESSION['lang'], true); ?>
</select> </select>
</div> </div>
<!-- Entité --> <!-- Entité -->
<div style="margin-bottom: 15px; text-align: center;"> <div style="margin-bottom: 10px;">
<label for="codeSociete_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Entité</label> <label for="codeSociete_mobile" style="font-size: 11pt; display: block; margin-bottom: 3px; text-align: center;">Entité</label>
<input type="text" id="codeSociete_mobile" name="codeSociete_mobile" value="<?= $codeSociete ?>" <input type="text" id="codeSociete_mobile" name="codeSociete_mobile" value="<?= $codeSociete ?>"
placeholder="Entité" placeholder="Entité"
style="width: 100%; max-width: 280px; margin: 0 auto; height: 40px; padding: 0 12px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;" style="width: 100%; height: 35px; padding: 0 10px; border: 2px solid #7D4FFE; border-radius: 7px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
required autocomplete="off" required autocomplete="off"
onchange="changerEntiteMobile(this.value);"> onchange="changerEntiteMobile(this.value);">
</div> </div>
<!-- Identifiant --> <!-- Identifiant -->
<div style="margin-bottom: 15px; text-align: center;"> <div style="margin-bottom: 10px;">
<label for="login_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Identifiant</label> <label for="login_mobile" style="font-size: 11pt; display: block; margin-bottom: 3px; text-align: center;">Identifiant</label>
<input type="text" id="login_mobile" name="login_mobile" value="<?= $codeUtilisateur ?>" <input type="text" id="login_mobile" name="login_mobile" value="<?= $codeUtilisateur ?>"
placeholder="Identifiant" placeholder="Identifiant"
style="width: 100%; max-width: 280px; margin: 0 auto; height: 40px; padding: 0 12px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;" style="width: 100%; height: 35px; padding: 0 10px; border: 2px solid #7D4FFE; border-radius: 7px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
required autocomplete="off"> required autocomplete="off">
</div> </div>
<!-- Mot de passe --> <!-- Mot de passe -->
<div style="margin-bottom: 20px; text-align: center;"> <div style="margin-bottom: 15px;">
<label for="mdp_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Mot de passe</label> <label for="mdp_mobile" style="font-size: 11pt; display: block; margin-bottom: 3px; text-align: center;">Mot de passe</label>
<input type="password" id="mdp_mobile" name="mdp_mobile" placeholder="Mot de passe" <input type="password" id="mdp_mobile" name="mdp_mobile" placeholder="Mot de passe"
style="width: 100%; max-width: 280px; margin: 0 auto; height: 40px; padding: 0 12px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;" style="width: 100%; height: 35px; padding: 0 10px; border: 2px solid #7D4FFE; border-radius: 7px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
required autocomplete="off"> required autocomplete="off">
</div> </div>
<!-- Bouton Connexion --> <!-- Bouton Connexion -->
<div style="margin-bottom: 15px; text-align: center;"> <div style="margin-bottom: 10px;">
<button type="button" id="btn_connexion_mobile" <button type="button" id="btn_connexion_mobile"
style="width: 100%; max-width: 280px; margin: 0 auto; height: 45px; background: #7D4FFE; color: white; font-size: 16px; font-weight: 700; border-radius: 9px; border: none; box-sizing: border-box; display: block;"> style="width: 100%; height: 40px; background: #7D4FFE; color: white; font-size: 15px; font-weight: 700; border-radius: 7px; border: none; box-sizing: border-box;">
Connexion Connexion
</button> </button>
</div> </div>
</div> </div>
<!-- Footer mobile --> <!-- Footer compact -->
<div style="font-size: 11px; text-align: center; padding: 10px 0; color: #666; width: 100%;"> <div style="font-size: 10px; text-align: center; padding: 5px 0; color: #666; width: 100%; margin-top: auto;">
Tous droits réservés <a href="https://www.ebene.info/" style="color: #7D4FFE; text-decoration: none;">&copy; EBENE SOLUTIONS INFORMATIQUES</a> Tous droits réservés <a href="https://www.ebene.info/" style="color: #7D4FFE; text-decoration: none;">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
</div> </div>
@ -86,107 +88,187 @@
</div> </div>
</div> </div>
<!-- STYLES POUR ÉVITER TOUT DÉBORDEMENT --> <!-- STYLES CRITIQUES POUR MOBILE SANS SCROLL -->
<style> <style>
/* STYLES MOBILE CRITIQUES - À AJOUTER DANS PORTAL.PHP OU ICI */ /* FORCE L'AFFICHAGE MOBILE SANS SCROLL */
/* 1. FORCER LE VIEWPORT MOBILE */
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
html, body { /* 1. MASQUER DESKTOP */
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
position: relative !important;
}
/* 2. CACHER LA VERSION DESKTOP */
.d-none.d-md-block { .d-none.d-md-block {
display: none !important; display: none !important;
} }
/* 3. AFFICHER LA VERSION MOBILE */ /* 2. AFFICHER MOBILE */
.d-md-none { .d-md-none {
display: block !important; display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important; width: 100vw !important;
max-width: 100vw !important; height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important; overflow: hidden !important;
z-index: 9999 !important;
background: white !important;
} }
/* 4. CORRECTION DU CONTENEUR PRINCIPAL DANS PORTAL.PHP */ /* 3. CORRECTION DU CONTENEUR DANS PORTAL.PHP */
.container-fluid { body, html {
flex-direction: column !important;
width: 100vw !important; width: 100vw !important;
max-width: 100vw !important; height: 100vh !important;
overflow: hidden !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
/* 5. CORRECTION DU LOGO DANS PORTAL.PHP */ .container-fluid {
.logo img { width: 100vw !important;
width: 100px !important; height: 100vh !important;
height: 100px !important; max-height: 100vh !important;
position: relative !important; overflow: hidden !important;
left: 0 !important; margin: 0 !important;
top: 0 !important; padding: 0 !important;
margin: 10px auto !important;
display: block !important; display: block !important;
} }
/* 6. CORRECTION DE LA ZONE DE CONTENU DANS PORTAL.PHP */ /* 4. CORRECTION DU LOGO - PLUS PETIT ET PLACÉ EN HAUT */
.logo img {
width: 80px !important;
height: 80px !important;
position: absolute !important;
top: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
z-index: 10000 !important;
}
/* 5. CORRECTION DE LA ZONE DE CONTENU */
.content { .content {
width: 100vw !important; width: 100vw !important;
max-width: 100vw !important; height: 100vh !important;
padding: 5px !important; max-height: 100vh !important;
padding: 60px 0 0 0 !important; /* Espace pour le logo */
margin: 0 !important; margin: 0 !important;
overflow: hidden !important;
} }
.form-side { .form-side {
padding-top: 10px !important; padding-top: 0 !important;
min-height: auto !important; min-height: auto !important;
height: auto !important; height: calc(100vh - 60px) !important;
overflow: hidden !important;
} }
/* 7. STYLES DES CHAMPS MOBILES */ /* 6. MASQUER LE CARROUSEL */
.slide-container {
display: none !important;
}
/* 7. STYLES DE LA VERSION MOBILE */
.d-md-none > div { .d-md-none > div {
width: 100vw !important; width: 100% !important;
max-width: 100vw !important; height: 100% !important;
padding: 0 10px !important; max-height: 100% !important;
box-sizing: border-box !important; overflow: hidden !important;
padding: 0 !important;
} }
/* 8. FORCER LE CONTENU À RESTER DANS LES LIMITES */ /* 8. FORCER TOUT À TENIR DANS L'ÉCRAN */
.d-md-none * { .d-md-none * {
max-width: 100% !important; max-width: 100% !important;
box-sizing: border-box !important; box-sizing: border-box !important;
} }
/* 9. ADAPTER LES INPUTS */ /* 9. CONTENEUR DES CHAMPS */
.d-md-none input, .d-md-none > div > div:last-child {
.d-md-none select,
.d-md-none button {
width: 100% !important; width: 100% !important;
max-width: 280px !important; max-width: 280px !important;
margin-left: auto !important; margin: 0 auto !important;
margin-right: auto !important; padding: 0 10px !important;
} }
/* 10. CORRECTION DU CARROUSEL */ /* 10. ESPACEMENT RÉDUIT */
.slide-container { .wrap-input100, .validate-input {
display: none !important; margin-bottom: 8px !important;
} }
/* 11. BOUTON HOVER */ /* 11. TAILLES RÉDUITES */
label {
font-size: 11pt !important;
margin-bottom: 2px !important;
}
input, select {
height: 35px !important;
font-size: 14px !important;
padding: 0 8px !important;
}
button {
height: 40px !important;
font-size: 15px !important;
}
/* 12. TITRE PLUS PETIT */
.login100-form-title {
font-size: 18px !important;
margin: 5px 0 15px 0 !important;
}
/* 13. BOUTON HOVER */
#btn_connexion_mobile:hover { #btn_connexion_mobile:hover {
background: white !important; background: white !important;
color: #7D4FFE !important; color: #7D4FFE !important;
border: 2px solid #7D4FFE !important; border: 2px solid #7D4FFE !important;
} }
/* 12. PLACEHOLDER */ /* 14. FOOTER TRÈS PETIT */
.d-md-none input::placeholder { .footer {
font-weight: bold !important; font-size: 10px !important;
color: #7D4FFE !important; padding: 5px 0 !important;
opacity: 0.7 !important; position: static !important;
margin-top: auto !important;
}
}
/* POUR TRÈS PETITS ÉCRANS (iPhone SE, etc.) */
@media screen and (max-width: 320px) and (max-height: 600px) {
.logo img {
width: 60px !important;
height: 60px !important;
top: 5px !important;
}
.content {
padding-top: 50px !important;
}
.form-side {
height: calc(100vh - 50px) !important;
}
.login100-form-title {
font-size: 16px !important;
margin: 0 0 10px 0 !important;
}
.d-md-none > div > div:last-child {
max-width: 260px !important;
padding: 0 5px !important;
}
input, select {
height: 32px !important;
font-size: 13px !important;
}
button {
height: 36px !important;
font-size: 14px !important;
}
label {
font-size: 10pt !important;
} }
} }
@ -196,154 +278,114 @@
display: none !important; display: none !important;
} }
} }
/* POUR TRÈS PETITS ÉCRANS */
@media screen and (max-width: 320px) {
.d-md-none > div {
padding: 0 5px !important;
}
.d-md-none input,
.d-md-none select,
.d-md-none button {
max-width: 260px !important;
font-size: 13px !important;
}
.login100-form-title {
font-size: 18px !important;
}
}
</style> </style>
<script> <script>
// FONCTIONS MOBILE SIMPLIFIÉES // FONCTIONS MOBILE SIMPLIFIÉES
function changerLangueMobile(langue) { function changerLangueMobile(langue) {
// Synchroniser avec le desktop
const desktopLangue = document.getElementById('langue'); const desktopLangue = document.getElementById('langue');
if (desktopLangue) { if (desktopLangue) {
desktopLangue.value = langue; desktopLangue.value = langue;
const event = new Event('change'); desktopLangue.dispatchEvent(new Event('change'));
desktopLangue.dispatchEvent(event);
} }
} }
function changerEntiteMobile(entite) { function changerEntiteMobile(entite) {
// Synchroniser avec le desktop
const desktopEntite = document.getElementById('codeSociete'); const desktopEntite = document.getElementById('codeSociete');
if (desktopEntite) { if (desktopEntite) {
desktopEntite.value = entite; desktopEntite.value = entite;
const event = new Event('change'); desktopEntite.dispatchEvent(new Event('change'));
desktopEntite.dispatchEvent(event);
} }
} }
// GESTION DE LA CONNEXION MOBILE // INITIALISATION MOBILE
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Gestionnaire du bouton mobile
const btnMobile = document.getElementById('btn_connexion_mobile'); const btnMobile = document.getElementById('btn_connexion_mobile');
if (btnMobile) { if (btnMobile) {
btnMobile.addEventListener('click', function() { btnMobile.addEventListener('click', function() {
// Récupérer les valeurs // Récupérer les valeurs
const codeSociete = document.getElementById('codeSociete_mobile').value.trim(); const codeSociete = document.getElementById('codeSociete_mobile')?.value.trim() || '';
const login = document.getElementById('login_mobile').value.trim(); const login = document.getElementById('login_mobile')?.value.trim() || '';
const mdp = document.getElementById('mdp_mobile').value.trim(); const mdp = document.getElementById('mdp_mobile')?.value.trim() || '';
// Validation simple // Validation
if (!codeSociete || !login || !mdp) { if (!codeSociete || !login || !mdp) {
alert('Veuillez remplir tous les champs'); alert('Veuillez remplir tous les champs');
return false; return false;
} }
// Option 1: Utiliser le formulaire desktop existant // Utiliser le formulaire desktop s'il existe
const desktopForm = document.querySelector('form'); const desktopForm = document.querySelector('form');
if (desktopForm) { if (desktopForm) {
// Copier les valeurs dans les champs desktop // Mettre à jour les champs desktop
const fields = [ ['codeSociete', 'login', 'mdp'].forEach(field => {
{id: 'codeSociete', value: codeSociete}, const desktopField = document.getElementById(field);
{id: 'login', value: login}, const mobileField = document.getElementById(field + '_mobile');
{id: 'mdp', value: mdp} if (desktopField && mobileField) {
]; desktopField.value = mobileField.value;
}
fields.forEach(field => {
const el = document.getElementById(field.id);
if (el) el.value = field.value;
}); });
// Soumettre // Soumettre
desktopForm.submit(); desktopForm.submit();
return true; } else {
// Fallback
console.log('Connexion mobile:', {codeSociete, login, mdp});
// Ici votre logique de connexion
}
});
}
// FORCER L'AFFICHAGE SANS SCROLL
function forcerSansScroll() {
if (window.innerWidth <= 767) {
// Désactiver tout scroll
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden';
// Ajuster la hauteur
const mobileContainer = document.querySelector('.d-md-none');
if (mobileContainer) {
mobileContainer.style.height = window.innerHeight + 'px';
} }
// Option 2: Redirection avec paramètres // Cacher desktop, montrer mobile
const params = new URLSearchParams(); const desktop = document.querySelector('.d-none.d-md-block');
params.append('action', 'connexion'); const mobile = document.querySelector('.d-md-none');
params.append('codeSociete', codeSociete);
params.append('login', login);
params.append('mdp', mdp);
params.append('langue', document.getElementById('langue_mobile').value);
window.location.href = '?' + params.toString(); if (desktop) desktop.style.display = 'none';
}); if (mobile) mobile.style.display = 'block';
}
// GESTION RESPONSIVE AUTOMATIQUE
function gererAffichageResponsive() {
const isMobile = window.innerWidth <= 767;
const mobileDiv = document.querySelector('.d-md-none');
const desktopDiv = document.querySelector('.d-none.d-md-block');
if (isMobile) {
// Mode mobile
if (mobileDiv) mobileDiv.style.display = 'block';
if (desktopDiv) desktopDiv.style.display = 'none';
// Forcer le viewport mobile
document.documentElement.style.overflowX = 'hidden';
document.body.style.overflowX = 'hidden';
} else {
// Mode desktop
if (mobileDiv) mobileDiv.style.display = 'none';
if (desktopDiv) desktopDiv.style.display = 'block';
} }
} }
// Initialisation // Appliquer immédiatement
gererAffichageResponsive(); forcerSansScroll();
window.addEventListener('resize', gererAffichageResponsive);
// CORRECTION URGENTE POUR DÉBORDEMENT // Réappliquer sur resize
setTimeout(function() { window.addEventListener('resize', forcerSansScroll);
const mobileElements = document.querySelectorAll('.d-md-none, .d-md-none *'); window.addEventListener('orientationchange', function() {
mobileElements.forEach(el => { setTimeout(forcerSansScroll, 100);
el.style.maxWidth = '100vw'; });
el.style.boxSizing = 'border-box';
el.style.overflowX = 'hidden'; // Ajuster après le chargement des images
}); window.addEventListener('load', forcerSansScroll);
}, 100);
}); });
// FONCTION POUR FORCER L'AFFICHAGE CORRECT SUR MOBILE // CORRECTION URGENTE APRÈS CHARGEMENT
function corrigerDebordementMobile() { setTimeout(function() {
if (window.innerWidth <= 767) { if (window.innerWidth <= 767) {
// Forcer les dimensions // Bloquer tout scroll
document.querySelectorAll('input, select, button, div').forEach(el => { document.body.style.overflow = 'hidden';
el.style.maxWidth = '100%'; document.body.style.height = '100vh';
el.style.boxSizing = 'border-box'; document.body.style.maxHeight = '100vh';
});
// Corriger le conteneur principal // Ajuster le contenu
const container = document.querySelector('.container-fluid'); const formSide = document.querySelector('.form-side');
if (container) { if (formSide) {
container.style.width = '100vw'; formSide.style.overflow = 'hidden';
container.style.maxWidth = '100vw'; formSide.style.maxHeight = 'calc(100vh - 70px)';
container.style.overflowX = 'hidden';
} }
} }
} }, 200);
// Exécuter plusieurs fois pour être sûr
window.addEventListener('load', corrigerDebordementMobile);
window.addEventListener('resize', corrigerDebordementMobile);
setTimeout(corrigerDebordementMobile, 500);
</script> </script>

View File

@ -94,7 +94,7 @@
<link href="Bootstrap_new/css/custom.css?ver=2024.08.26.02" rel="stylesheet"> <link href="Bootstrap_new/css/custom.css?ver=2024.08.26.02" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="Bootstrap_new/css/style_new.css?ver=2025.12.13.01" rel="stylesheet"> <link href="Bootstrap_new/css/style_new.css?ver=2025.12.13.02" rel="stylesheet">
<!-- END: webview fixes --> <!-- END: webview fixes -->
</head> </head>