391 lines
14 KiB
PHP
Executable File
391 lines
14 KiB
PHP
Executable File
<?php
|
|
$maintenance = $societeusersaas['maintenance'];
|
|
if($maintenance=='1')
|
|
{
|
|
$msgErreur = 'Site en maintenance, veuillez vous reconnecter plus tard!';
|
|
}
|
|
?>
|
|
|
|
<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
|
|
<div class="d-md-none">
|
|
<!-- 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 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: 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: 10px;"></div>
|
|
<?php endif; ?>
|
|
|
|
<?php if($maintenance!='1'): ?>
|
|
|
|
<!-- 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%; 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: 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%; 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: 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%; 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: 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%; 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: 10px;">
|
|
<button type="button" id="btn_connexion_mobile"
|
|
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 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;">© EBENE SOLUTIONS INFORMATIQUES</a>
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STYLES CRITIQUES POUR MOBILE SANS SCROLL -->
|
|
<style>
|
|
/* FORCE L'AFFICHAGE MOBILE SANS SCROLL */
|
|
@media screen and (max-width: 767px) {
|
|
/* 1. MASQUER DESKTOP */
|
|
.d-none.d-md-block {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 2. AFFICHER MOBILE */
|
|
.d-md-none {
|
|
display: block !important;
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
max-height: 100vh !important;
|
|
overflow: hidden !important;
|
|
z-index: 9999 !important;
|
|
background: white !important;
|
|
}
|
|
|
|
/* 3. CORRECTION DU CONTENEUR DANS PORTAL.PHP */
|
|
body, html {
|
|
width: 100vw !important;
|
|
height: 100vh !important;
|
|
overflow: hidden !important;
|
|
margin: 0 !important;
|
|
padding: 0 !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;
|
|
}
|
|
|
|
/* 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;
|
|
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: 0 !important;
|
|
min-height: auto !important;
|
|
height: calc(100vh - 60px) !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* 6. MASQUER LE CARROUSEL */
|
|
.slide-container {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 7. STYLES DE LA VERSION MOBILE */
|
|
.d-md-none > div {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-height: 100% !important;
|
|
overflow: hidden !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* 8. FORCER TOUT À TENIR DANS L'ÉCRAN */
|
|
.d-md-none * {
|
|
max-width: 100% !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* 9. CONTENEUR DES CHAMPS */
|
|
.d-md-none > div > div:last-child {
|
|
width: 100% !important;
|
|
max-width: 280px !important;
|
|
margin: 0 auto !important;
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
/* 10. ESPACEMENT RÉDUIT */
|
|
.wrap-input100, .validate-input {
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/* CACHER MOBILE SUR DESKTOP */
|
|
@media screen and (min-width: 768px) {
|
|
.d-md-none {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// FONCTIONS MOBILE SIMPLIFIÉES
|
|
function changerLangueMobile(langue) {
|
|
const desktopLangue = document.getElementById('langue');
|
|
if (desktopLangue) {
|
|
desktopLangue.value = langue;
|
|
desktopLangue.dispatchEvent(new Event('change'));
|
|
}
|
|
}
|
|
|
|
function changerEntiteMobile(entite) {
|
|
const desktopEntite = document.getElementById('codeSociete');
|
|
if (desktopEntite) {
|
|
desktopEntite.value = entite;
|
|
desktopEntite.dispatchEvent(new Event('change'));
|
|
}
|
|
}
|
|
|
|
// 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() || '';
|
|
|
|
// Validation
|
|
if (!codeSociete || !login || !mdp) {
|
|
alert('Veuillez remplir tous les champs');
|
|
return false;
|
|
}
|
|
|
|
// Utiliser le formulaire desktop s'il existe
|
|
const desktopForm = document.querySelector('form');
|
|
if (desktopForm) {
|
|
// 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();
|
|
} 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';
|
|
}
|
|
|
|
// 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);
|
|
});
|
|
|
|
// CORRECTION URGENTE APRÈS CHARGEMENT
|
|
setTimeout(function() {
|
|
if (window.innerWidth <= 767) {
|
|
// Bloquer tout scroll
|
|
document.body.style.overflow = 'hidden';
|
|
document.body.style.height = '100vh';
|
|
document.body.style.maxHeight = '100vh';
|
|
|
|
// Ajuster le contenu
|
|
const formSide = document.querySelector('.form-side');
|
|
if (formSide) {
|
|
formSide.style.overflow = 'hidden';
|
|
formSide.style.maxHeight = 'calc(100vh - 70px)';
|
|
}
|
|
}
|
|
}, 200);
|
|
</script>
|