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{
width:100px;
width:80px;
}
/* Media queries spécifiques pour SweetAlert */

View File

@ -8,76 +8,78 @@
<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
<div class="d-md-none">
<!-- VERSION MOBILE COMPACTE SANS DÉBORDEMENT -->
<div style="width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; padding: 10px;">
<!-- VERSION MOBILE ULTRA-COMPACTE - PAS DE SCROLL -->
<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 -->
<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;">
<!-- Titre compact -->
<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é
</span>
<?php if (isset($msgErreur) and $msgErreur>" "): ?>
<div class="text-center" style="margin-bottom: 15px;">
<div style="background-color: #f8d7da; color: #721c24; padding: 10px; border-radius: 8px; font-size: 13px; border: 1px solid #f5c6cb;">
<div class="text-center" style="margin-bottom: 10px;">
<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 ?>
</div>
</div>
<?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 if($maintenance!='1'): ?>
<!-- Champs de formulaire compacts pour mobile -->
<div style="width: 100%; max-width: 100%;">
<!-- Langue -->
<div style="margin-bottom: 15px; text-align: center;">
<label for="langue_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Langue</label>
<!-- Conteneur compact pour tous les champs -->
<div style="width: 100%; max-width: 280px; margin: 0 auto;">
<!-- Langue - Version ultra compacte -->
<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"
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);">
<?php liste_options($langues, $_SESSION['lang'], true); ?>
</select>
</div>
<!-- Entité -->
<div style="margin-bottom: 15px; text-align: center;">
<label for="codeSociete_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Entité</label>
<div style="margin-bottom: 10px;">
<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 ?>"
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"
onchange="changerEntiteMobile(this.value);">
</div>
<!-- Identifiant -->
<div style="margin-bottom: 15px; text-align: center;">
<label for="login_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Identifiant</label>
<div style="margin-bottom: 10px;">
<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 ?>"
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">
</div>
<!-- Mot de passe -->
<div style="margin-bottom: 20px; text-align: center;">
<label for="mdp_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Mot de passe</label>
<div style="margin-bottom: 15px;">
<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"
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">
</div>
<!-- Bouton Connexion -->
<div style="margin-bottom: 15px; text-align: center;">
<div style="margin-bottom: 10px;">
<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
</button>
</div>
</div>
<!-- Footer mobile -->
<div style="font-size: 11px; text-align: center; padding: 10px 0; color: #666; width: 100%;">
<!-- Footer compact -->
<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>
</div>
@ -86,107 +88,187 @@
</div>
</div>
<!-- STYLES POUR ÉVITER TOUT DÉBORDEMENT -->
<!-- STYLES CRITIQUES POUR MOBILE SANS SCROLL -->
<style>
/* STYLES MOBILE CRITIQUES - À AJOUTER DANS PORTAL.PHP OU ICI */
/* 1. FORCER LE VIEWPORT MOBILE */
/* FORCE L'AFFICHAGE MOBILE SANS SCROLL */
@media screen and (max-width: 767px) {
html, body {
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
position: relative !important;
}
/* 2. CACHER LA VERSION DESKTOP */
/* 1. MASQUER DESKTOP */
.d-none.d-md-block {
display: none !important;
}
/* 3. AFFICHER LA VERSION MOBILE */
/* 2. AFFICHER MOBILE */
.d-md-none {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
z-index: 9999 !important;
background: white !important;
}
/* 4. CORRECTION DU CONTENEUR PRINCIPAL DANS PORTAL.PHP */
.container-fluid {
flex-direction: column !important;
/* 3. CORRECTION DU CONTENEUR DANS PORTAL.PHP */
body, html {
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
/* 5. CORRECTION DU LOGO DANS PORTAL.PHP */
.logo img {
width: 100px !important;
height: 100px !important;
position: relative !important;
left: 0 !important;
top: 0 !important;
margin: 10px auto !important;
.container-fluid {
width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !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 {
width: 100vw !important;
max-width: 100vw !important;
padding: 5px !important;
height: 100vh !important;
max-height: 100vh !important;
padding: 60px 0 0 0 !important; /* Espace pour le logo */
margin: 0 !important;
overflow: hidden !important;
}
.form-side {
padding-top: 10px !important;
padding-top: 0 !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 {
width: 100vw !important;
max-width: 100vw !important;
padding: 0 10px !important;
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !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 * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 9. ADAPTER LES INPUTS */
.d-md-none input,
.d-md-none select,
.d-md-none button {
/* 9. CONTENEUR DES CHAMPS */
.d-md-none > div > div:last-child {
width: 100% !important;
max-width: 280px !important;
margin-left: auto !important;
margin-right: auto !important;
margin: 0 auto !important;
padding: 0 10px !important;
}
/* 10. CORRECTION DU CARROUSEL */
.slide-container {
display: none !important;
/* 10. ESPACEMENT RÉDUIT */
.wrap-input100, .validate-input {
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 {
background: white !important;
color: #7D4FFE !important;
border: 2px solid #7D4FFE !important;
}
/* 12. PLACEHOLDER */
.d-md-none input::placeholder {
font-weight: bold !important;
color: #7D4FFE !important;
opacity: 0.7 !important;
/* 14. FOOTER TRÈS PETIT */
.footer {
font-size: 10px !important;
padding: 5px 0 !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;
}
}
/* 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>
<script>
// FONCTIONS MOBILE SIMPLIFIÉES
function changerLangueMobile(langue) {
// Synchroniser avec le desktop
const desktopLangue = document.getElementById('langue');
if (desktopLangue) {
desktopLangue.value = langue;
const event = new Event('change');
desktopLangue.dispatchEvent(event);
desktopLangue.dispatchEvent(new Event('change'));
}
}
function changerEntiteMobile(entite) {
// Synchroniser avec le desktop
const desktopEntite = document.getElementById('codeSociete');
if (desktopEntite) {
desktopEntite.value = entite;
const event = new Event('change');
desktopEntite.dispatchEvent(event);
desktopEntite.dispatchEvent(new Event('change'));
}
}
// GESTION DE LA CONNEXION MOBILE
// INITIALISATION MOBILE
document.addEventListener('DOMContentLoaded', function() {
// Gestionnaire du bouton mobile
const btnMobile = document.getElementById('btn_connexion_mobile');
if (btnMobile) {
btnMobile.addEventListener('click', function() {
// Récupérer les valeurs
const codeSociete = document.getElementById('codeSociete_mobile').value.trim();
const login = document.getElementById('login_mobile').value.trim();
const mdp = document.getElementById('mdp_mobile').value.trim();
const codeSociete = document.getElementById('codeSociete_mobile')?.value.trim() || '';
const login = document.getElementById('login_mobile')?.value.trim() || '';
const mdp = document.getElementById('mdp_mobile')?.value.trim() || '';
// Validation simple
// Validation
if (!codeSociete || !login || !mdp) {
alert('Veuillez remplir tous les champs');
return false;
}
// Option 1: Utiliser le formulaire desktop existant
// Utiliser le formulaire desktop s'il existe
const desktopForm = document.querySelector('form');
if (desktopForm) {
// Copier les valeurs dans les champs desktop
const fields = [
{id: 'codeSociete', value: codeSociete},
{id: 'login', value: login},
{id: 'mdp', value: mdp}
];
fields.forEach(field => {
const el = document.getElementById(field.id);
if (el) el.value = field.value;
// Mettre à jour les champs desktop
['codeSociete', 'login', 'mdp'].forEach(field => {
const desktopField = document.getElementById(field);
const mobileField = document.getElementById(field + '_mobile');
if (desktopField && mobileField) {
desktopField.value = mobileField.value;
}
});
// Soumettre
desktopForm.submit();
return true;
}
// Option 2: Redirection avec paramètres
const params = new URLSearchParams();
params.append('action', 'connexion');
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();
});
}
// 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';
// Fallback
console.log('Connexion mobile:', {codeSociete, login, mdp});
// Ici votre logique de connexion
}
}
// Initialisation
gererAffichageResponsive();
window.addEventListener('resize', gererAffichageResponsive);
// CORRECTION URGENTE POUR DÉBORDEMENT
setTimeout(function() {
const mobileElements = document.querySelectorAll('.d-md-none, .d-md-none *');
mobileElements.forEach(el => {
el.style.maxWidth = '100vw';
el.style.boxSizing = 'border-box';
el.style.overflowX = 'hidden';
});
}, 100);
}
// 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';
}
// Cacher desktop, montrer mobile
const desktop = document.querySelector('.d-none.d-md-block');
const mobile = document.querySelector('.d-md-none');
if (desktop) desktop.style.display = 'none';
if (mobile) mobile.style.display = 'block';
}
}
// Appliquer immédiatement
forcerSansScroll();
// Réappliquer sur resize
window.addEventListener('resize', forcerSansScroll);
window.addEventListener('orientationchange', function() {
setTimeout(forcerSansScroll, 100);
});
// Ajuster après le chargement des images
window.addEventListener('load', forcerSansScroll);
});
// FONCTION POUR FORCER L'AFFICHAGE CORRECT SUR MOBILE
function corrigerDebordementMobile() {
// CORRECTION URGENTE APRÈS CHARGEMENT
setTimeout(function() {
if (window.innerWidth <= 767) {
// Forcer les dimensions
document.querySelectorAll('input, select, button, div').forEach(el => {
el.style.maxWidth = '100%';
el.style.boxSizing = 'border-box';
});
// Bloquer tout scroll
document.body.style.overflow = 'hidden';
document.body.style.height = '100vh';
document.body.style.maxHeight = '100vh';
// Corriger le conteneur principal
const container = document.querySelector('.container-fluid');
if (container) {
container.style.width = '100vw';
container.style.maxWidth = '100vw';
container.style.overflowX = 'hidden';
// Ajuster le contenu
const formSide = document.querySelector('.form-side');
if (formSide) {
formSide.style.overflow = 'hidden';
formSide.style.maxHeight = 'calc(100vh - 70px)';
}
}
}
// Exécuter plusieurs fois pour être sûr
window.addEventListener('load', corrigerDebordementMobile);
window.addEventListener('resize', corrigerDebordementMobile);
setTimeout(corrigerDebordementMobile, 500);
}, 200);
</script>

View File

@ -94,7 +94,7 @@
<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 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 -->
</head>