ebene/newdesigngestionnaire
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

qzer

Browse Source
This commit is contained in:
KONE SOREL 2026-04-08 17:52:45 +00:00
parent aa134817ea
commit 73c12585a7
5 changed files with 276 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
Bootstrap_new/css/style-portail.css
View File

@ -1,25 +1,26 @@
/* ============================================================ /* ============================================================
style-portail.css – INTER SANTE · Portail Gestionnaire style-portail.css – INTER SANTE · Portail Gestionnaire
v2 – Image1 (icônes FA, overlay gradient, badge carrousel, v3 – nouvelles variables brand, fit parfait à 100 % zoom,
bouton avec icône) + Image2 (logo grand, titre uppercase form-select Bootstrap, textes carrousel animés
imposant, aération, focus fond bleu, proportions 42/58)
============================================================ */ ============================================================ */
/* ---------- Variables ---------- */ /* ---------- Variables (mises à jour client) ---------- */
:root { :root {
--brand: #212E53; --brand: #212E53;
--brand-dark: #1a1d24; --brand-dark: #1a1d24;
--brand-light: #4c566a; --brand-light: #4c566a;
--brand-focus: #0c4b65; --brand-focus: #0c4b65;
--brand-btn-hover-txt: #212E53;
--white: #ffffff; --white: #ffffff;
--input-border: #c5d4e0;
--text-dark: #1a2e3b; --text-dark: #1a2e3b;
--text-muted: #6b8a9a; --text-muted: #6b8a9a;
--text-label: #3a5060; --text-label: #3a5060;
--danger: #dc3545; --danger: #dc3545;
--border-r: 10px; --border-r: 10px;
--input-h: 48px; --input-h: 44px;
--transition: 0.22s ease; --transition: 0.22s ease;
--shadow-btn: 0 4px 16px rgba(0,136,207,.38); --shadow-btn: 0 4px 16px rgba(33,46,83,.35);
} }
/* ---------- Reset / Base ---------- */ /* ---------- Reset / Base ---------- */
@ -35,7 +36,9 @@ html, body {
a { text-decoration: none; } a { text-decoration: none; }
/* ---------- Wrapper principal ---------- */ /* =============================================
LAYOUT PRINCIPAL
============================================= */
.portail-wrapper { .portail-wrapper {
display: flex; display: flex;
height: 100vh; height: 100vh;
@ -44,7 +47,7 @@ a { text-decoration: none; }
} }
/* ============================================= /* =============================================
PANNEAU GAUCHE — Carrousel 42 % (Image 2) PANNEAU GAUCHE — Carrousel 42 %
============================================= */ ============================================= */
.slide-container { .slide-container {
position: relative; position: relative;
@ -71,45 +74,63 @@ a { text-decoration: none; }
.slides .slide.active { left: 0; } .slides .slide.active { left: 0; }
/* Overlay dégradé bleu profond (Image 1) */ /* Overlay dégradé */
.slide-container::after { .slide-container::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient( background: linear-gradient(
160deg, 160deg,
rgba(0, 100, 180, .28) 0%, rgba(33, 46, 83, .30) 0%,
rgba(0, 28, 65, .58) 100% rgba(10, 15, 30, .65) 100%
); );
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }
/* Badge marque bas-gauche (Image 1) */ /* ---------- Badge marque + caption par slide ---------- */
.slide-brand { .slide-brand {
position: absolute; position: absolute;
bottom: 52px; bottom: 52px;
left: 36px; left: 36px;
z-index: 5; z-index: 5;
color: var(--white); color: var(--white);
max-width: calc(100% - 80px);
} }
.slide-brand h2 { .slide-brand h2 {
font-size: 1.5rem; font-size: 1.45rem;
font-weight: 700; font-weight: 700;
letter-spacing: .6px; letter-spacing: .6px;
line-height: 1.2; line-height: 1.2;
text-shadow: 0 2px 8px rgba(0,0,0,.4); text-shadow: 0 2px 8px rgba(0,0,0,.45);
} }
.slide-brand p { .slide-brand .slide-subtitle {
font-size: .80rem; font-size: .80rem;
opacity: .85; opacity: .85;
margin-top: 5px; margin-top: 3px;
text-shadow: 0 1px 4px rgba(0,0,0,.35); text-shadow: 0 1px 4px rgba(0,0,0,.35);
} }
/* Boutons prev / next (Image 1 style) */ /* Texte par slide — animation synchronisée */
.slide-caption {
margin-top: 10px;
font-size: .95rem;
font-weight: 600;
line-height: 1.4;
text-shadow: 0 2px 6px rgba(0,0,0,.5);
opacity: 1;
transform: translateY(0);
transition: opacity .35s ease, transform .35s ease;
}
.slide-caption.animating {
opacity: 0;
transform: translateY(10px);
}
/* Boutons prev / next */
.slide-btn { .slide-btn {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -118,10 +139,10 @@ a { text-decoration: none; }
background: rgba(255,255,255,.20); background: rgba(255,255,255,.20);
border: none; border: none;
color: var(--white); color: var(--white);
width: 38px; width: 36px;
height: 38px; height: 36px;
border-radius: 50%; border-radius: 50%;
font-size: .88rem; font-size: .85rem;
cursor: pointer; cursor: pointer;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
transition: background var(--transition); transition: background var(--transition);
@ -131,13 +152,13 @@ a { text-decoration: none; }
} }
.slide-btn:hover { background: rgba(255,255,255,.42); } .slide-btn:hover { background: rgba(255,255,255,.42); }
.slide-btn.prev { left: 16px; } .slide-btn.prev { left: 14px; }
.slide-btn.next { right: 16px; } .slide-btn.next { right: 14px; }
/* Indicateurs dots */ /* Dots indicateurs */
.dotsContainer { .dotsContainer {
position: absolute; position: absolute;
bottom: 18px; bottom: 16px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 5; z-index: 5;
@ -162,7 +183,8 @@ a { text-decoration: none; }
} }
/* ============================================= /* =============================================
PANNEAU DROIT — Formulaire 58 % (Image 2) PANNEAU DROIT — Formulaire 58 %
Fit parfait à 100 % zoom (≈ 900 px hauteur)
============================================= */ ============================================= */
.form-panel { .form-panel {
flex: 1; flex: 1;
@ -170,45 +192,46 @@ a { text-decoration: none; }
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 52px 56px; /* bottom padding = place pour le footer absolu */ /* padding bottom = espace pour le footer absolu */
padding: 10px 48px 50px;
background: var(--white); background: var(--white);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
/* Logo grand et centré (Image 2) */ /* Logo */
.form-logo { .form-logo {
width: 115px; width: 90px;
height: 115px; height: 90px;
object-fit: contain; object-fit: contain;
margin-bottom: 12px; margin-bottom: 8px;
} }
/* Titre imposant uppercase (Image 2) */ /* Titre */
.portail-title { .portail-title {
font-size: 1.5rem; font-size: 1.38rem;
font-weight: 800; font-weight: 800;
color: var(--brand); color: var(--brand);
letter-spacing: 1.8px; letter-spacing: 1.8px;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
margin-bottom: 8px; margin-bottom: 6px;
line-height: 1.2; line-height: 1.2;
} }
/* Séparateur */ /* Séparateur */
.portail-divider { .portail-divider {
width: 44px; width: 40px;
height: 3px; height: 3px;
background: var(--brand); background: var(--brand);
border-radius: 2px; border-radius: 2px;
margin: 0 auto 20px; margin: 0 auto 16px;
} }
/* Formulaire */ /* Formulaire */
.login100-form { .login100-form {
width: 100%; width: 100%;
max-width: 355px; max-width: 360px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -216,9 +239,9 @@ a { text-decoration: none; }
/* Alerte maintenance / erreur */ /* Alerte maintenance / erreur */
.alert-portail { .alert-portail {
border-radius: var(--border-r); border-radius: var(--border-r);
font-size: .83rem; font-size: .82rem;
padding: 10px 14px; padding: 9px 12px;
margin-bottom: 14px; margin-bottom: 12px;
text-align: center; text-align: center;
} }
@ -228,21 +251,21 @@ a { text-decoration: none; }
color: var(--danger); color: var(--danger);
} }
/* Groupe champ — aéré (Image 2) */ /* Groupe champ */
.field-group { .field-group {
margin-bottom: 13px; margin-bottom: 10px;
} }
.field-group label { .field-group label {
display: block; display: block;
font-size: .79rem; font-size: .77rem;
font-weight: 600; font-weight: 600;
color: var(--text-label); color: var(--text-label);
margin-bottom: 5px; margin-bottom: 4px;
letter-spacing: .2px; letter-spacing: .2px;
} }
/* Wrapper input + icône (Image 1) */ /* Wrapper input + icône */
.input-icon-wrap { .input-icon-wrap {
position: relative; position: relative;
display: flex; display: flex;
@ -251,9 +274,9 @@ a { text-decoration: none; }
.input-icon-wrap .field-icon { .input-icon-wrap .field-icon {
position: absolute; position: absolute;
left: 14px; left: 13px;
color: var(--brand); color: var(--brand);
font-size: .90rem; font-size: .88rem;
pointer-events: none; pointer-events: none;
z-index: 2; z-index: 2;
} }
@ -262,65 +285,49 @@ a { text-decoration: none; }
.input-icon-wrap .input100 { .input-icon-wrap .input100 {
width: 100%; width: 100%;
height: var(--input-h); height: var(--input-h);
padding: 0 14px 0 40px; padding: 0 12px 0 38px;
border: 2px solid #c5e1f3; border: 2px solid var(--input-border);
border-radius: var(--border-r); border-radius: var(--border-r);
font-size: .9rem; font-size: .88rem;
color: var(--brand); color: var(--brand);
background: var(--white); background: var(--white);
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
outline: none; outline: none;
} }
.input-icon-wrap .input100::placeholder { color: #a8cce0; } .input-icon-wrap .input100::placeholder { color: #a8bfcc; }
/* Focus : fond bleu clair + bordure pleine (Image 2) */
.input-icon-wrap .input100:focus { .input-icon-wrap .input100:focus {
border-color: var(--brand); border-color: var(--brand);
background: var(--brand-focus); background: #eef3f8;
box-shadow: 0 0 0 3px rgba(0,136,207,.10); box-shadow: 0 0 0 3px rgba(33,46,83,.10);
} }
/* Bootstrap-select langue */ /* ---------- form-select Bootstrap (remplace selectpicker) ---------- */
.bootstrap-select.field-select { .input-icon-wrap .form-select {
width: 100% !important; width: 100%;
}
.bootstrap-select.field-select > .dropdown-toggle {
height: var(--input-h); height: var(--input-h);
padding: 0 14px 0 40px; padding: 0 36px 0 38px;
border: 2px solid #c5e1f3 !important; border: 2px solid var(--input-border);
border-radius: var(--border-r) !important; border-radius: var(--border-r) !important;
background: var(--white) !important; font-size: .88rem;
color: var(--brand); color: var(--brand);
font-size: .9rem; background-color: var(--white);
box-shadow: none !important; background-image: none; /* on gère la flèche via FA */
display: flex; cursor: pointer;
align-items: center; outline: none;
transition: border-color var(--transition), background var(--transition); appearance: none;
-webkit-appearance: none;
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
} }
.bootstrap-select.field-select.show > .dropdown-toggle, .input-icon-wrap .form-select:focus {
.bootstrap-select.field-select > .dropdown-toggle:active { border-color: var(--brand);
border-color: var(--brand) !important; background-color: #eef3f8;
background: var(--brand-focus) !important; box-shadow: 0 0 0 3px rgba(33,46,83,.10);
box-shadow: 0 0 0 3px rgba(0,136,207,.10) !important;
outline: none !important;
} }
.bootstrap-select.field-select .filter-option-inner-inner { /* Flèche custom (remplace la caret native et celle de bootstrap-select) */
color: var(--brand) !important;
background: transparent !important;
text-align: left;
font-size: .9rem;
height: auto;
line-height: normal;
}
/* Masque la caret native Bootstrap-select, on utilise notre icône FA */
.bootstrap-select.field-select .caret { display: none !important; }
/* Flèche custom positionnée à droite du select */
.select-arrow { .select-arrow {
position: absolute; position: absolute;
right: 13px; right: 13px;
@ -330,15 +337,15 @@ a { text-decoration: none; }
z-index: 3; z-index: 3;
} }
/* Bouton connexion (Image 1 icône + Image 2 propreté) */ /* Bouton connexion */
.btn-login { .btn-login {
width: 100%; width: 100%;
height: 48px; height: 44px;
background: var(--brand); background: var(--brand);
color: var(--white); color: var(--white);
border: 2px solid var(--brand); border: 2px solid var(--brand);
border-radius: var(--border-r); border-radius: var(--border-r);
font-size: 1rem; font-size: .95rem;
font-weight: 700; font-weight: 700;
letter-spacing: .5px; letter-spacing: .5px;
cursor: pointer; cursor: pointer;
@ -348,23 +355,23 @@ a { text-decoration: none; }
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 9px; gap: 8px;
} }
.btn-login:hover { .btn-login:hover {
background: var(--white); background: var(--white);
color: var(--brand); color: var(--brand-btn-hover-txt);
box-shadow: none; box-shadow: none;
} }
/* Lien mot de passe oublié */ /* Lien mot de passe oublié */
.link-forgot { .link-forgot {
text-align: center; text-align: center;
margin-top: 15px; margin-top: 12px;
} }
.link-forgot a { .link-forgot a {
font-size: .82rem; font-size: .80rem;
color: var(--text-muted); color: var(--text-muted);
transition: color var(--transition); transition: color var(--transition);
display: inline-flex; display: inline-flex;
@ -374,21 +381,21 @@ a { text-decoration: none; }
.link-forgot a:hover { color: var(--brand); } .link-forgot a:hover { color: var(--brand); }
/* Footer ancré en bas du panneau (Image 2) */ /* Footer ancré en bas absolu */
.portail-footer { .portail-footer {
position: absolute; position: absolute;
bottom: 14px; bottom: 12px;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
font-size: .72rem; font-size: .70rem;
color: var(--text-muted); color: var(--text-muted);
line-height: 1.6; line-height: 1.6;
} }
.portail-footer a { .portail-footer a {
color: var(--brand); color: var(--brand);
font-weight: 600; font-weight: 700;
} }
.portail-footer a:hover { text-decoration: underline; } .portail-footer a:hover { text-decoration: underline; }
@ -406,15 +413,8 @@ a { text-decoration: none; }
============================================= */ ============================================= */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.slide-container { display: none; } .slide-container { display: none; }
.portail-wrapper { justify-content: center; }
.portail-wrapper { justify-content: center; } .form-panel { padding: 30px 20px 60px; justify-content: flex-start; }
.login100-form { max-width: 100%; }
.form-panel { .portail-footer { bottom: 10px; }
padding: 36px 24px 64px;
justify-content: flex-start;
}
.login100-form { max-width: 100%; }
.portail-footer { bottom: 10px; }
} }

14
Vue/Ajaxconnexioncookie/english.php
View File

@ -2,8 +2,7 @@
/* /*
* Ajaxconnexioncookie/english.php * Ajaxconnexioncookie/english.php
* Login form — English version. * Login form — English version.
* Image 1 : FA icons in fields, icon on submit button. * v3 : Bootstrap form-select (replaces selectpicker), no inline styles.
* Image 2 : uppercase bold title, airy layout, blue focus background.
*/ */
$maintenance = $societeusersaas['maintenance']; $maintenance = $societeusersaas['maintenance'];
@ -12,11 +11,9 @@ if ($maintenance === '1') {
} }
?> ?>
<!-- Uppercase bold title (Image 2) -->
<span class="portail-title">Manager Portal</span> <span class="portail-title">Manager Portal</span>
<div class="portail-divider"></div> <div class="portail-divider"></div>
<!-- Maintenance / error message -->
<?php if (!empty($msgErreur)): ?> <?php if (!empty($msgErreur)): ?>
<div class="alert-portail danger" role="alert"> <div class="alert-portail danger" role="alert">
<i class="fas fa-exclamation-triangle"></i>&nbsp;<?= htmlspecialchars($msgErreur) ?> <i class="fas fa-exclamation-triangle"></i>&nbsp;<?= htmlspecialchars($msgErreur) ?>
@ -32,8 +29,7 @@ if ($maintenance === '1') {
<label for="langue">Language</label> <label for="langue">Language</label>
<div class="input-icon-wrap"> <div class="input-icon-wrap">
<i class="fas fa-globe field-icon"></i> <i class="fas fa-globe field-icon"></i>
<select class="selectpicker field-select" <select class="form-select"
data-live-search="true"
id="langue" id="langue"
name="langue" name="langue"
required required
@ -92,7 +88,7 @@ if ($maintenance === '1') {
</div> </div>
</div> </div>
<!-- Submit with icon (Image 1) --> <!-- Submit button -->
<button type="submit" name="btn_connexion" id="btn_connexion" class="btn-login"> <button type="submit" name="btn_connexion" id="btn_connexion" class="btn-login">
<i class="fas fa-sign-in-alt"></i> <i class="fas fa-sign-in-alt"></i>
Login Login
@ -106,7 +102,7 @@ if ($maintenance === '1') {
</a> </a>
</div> </div>
<!-- Footer copyright anchored bottom (Image 2) --> <!-- Footer copyright -->
<div class="portail-footer"> <div class="portail-footer">
All rights reserved All rights reserved
<a href="https://www.ebene.info/" target="_blank" rel="noopener"> <a href="https://www.ebene.info/" target="_blank" rel="noopener">
@ -114,4 +110,4 @@ if ($maintenance === '1') {
</a> </a>
</div> </div>
<?php endif; ?> <?php endif; ?>

14
Vue/Ajaxconnexioncookie/french.php
View File

@ -2,8 +2,7 @@
/* /*
* Ajaxconnexioncookie/french.php * Ajaxconnexioncookie/french.php
* Formulaire de connexion — version française. * Formulaire de connexion — version française.
* Image 1 : icônes FA dans les champs, bouton avec icône. * v3 : form-select Bootstrap (remplace selectpicker), aucun style inline.
* Image 2 : titre uppercase imposant, aération, focus fond bleu.
*/ */
$maintenance = $societeusersaas['maintenance']; $maintenance = $societeusersaas['maintenance'];
@ -12,11 +11,9 @@ if ($maintenance === '1') {
} }
?> ?>
<!-- Titre uppercase imposant (Image 2) -->
<span class="portail-title">Portail Gestionnaire</span> <span class="portail-title">Portail Gestionnaire</span>
<div class="portail-divider"></div> <div class="portail-divider"></div>
<!-- Message maintenance / erreur -->
<?php if (!empty($msgErreur)): ?> <?php if (!empty($msgErreur)): ?>
<div class="alert-portail danger" role="alert"> <div class="alert-portail danger" role="alert">
<i class="fas fa-exclamation-triangle"></i>&nbsp;<?= htmlspecialchars($msgErreur) ?> <i class="fas fa-exclamation-triangle"></i>&nbsp;<?= htmlspecialchars($msgErreur) ?>
@ -32,8 +29,7 @@ if ($maintenance === '1') {
<label for="langue">Langue</label> <label for="langue">Langue</label>
<div class="input-icon-wrap"> <div class="input-icon-wrap">
<i class="fas fa-globe field-icon"></i> <i class="fas fa-globe field-icon"></i>
<select class="selectpicker field-select" <select class="form-select"
data-live-search="true"
id="langue" id="langue"
name="langue" name="langue"
required required
@ -92,7 +88,7 @@ if ($maintenance === '1') {
</div> </div>
</div> </div>
<!-- Bouton connexion avec icône (Image 1) --> <!-- Bouton connexion -->
<button type="submit" name="btn_connexion" id="btn_connexion" class="btn-login"> <button type="submit" name="btn_connexion" id="btn_connexion" class="btn-login">
<i class="fas fa-sign-in-alt"></i> <i class="fas fa-sign-in-alt"></i>
Connexion Connexion
@ -106,7 +102,7 @@ if ($maintenance === '1') {
</a> </a>
</div> </div>
<!-- Footer droits réservés ancré en bas (Image 2) --> <!-- Footer droits réservés -->
<div class="portail-footer"> <div class="portail-footer">
Tous droits réservés Tous droits réservés
<a href="https://www.ebene.info/" target="_blank" rel="noopener"> <a href="https://www.ebene.info/" target="_blank" rel="noopener">
@ -114,4 +110,4 @@ if ($maintenance === '1') {
</a> </a>
</div> </div>
<?php endif; ?> <?php endif; ?>

2
Vue/Ajaxconnexioncookie/index.php
View File

@ -1,7 +1,7 @@
<?php <?php
/* /*
* Ajaxconnexioncookie/index.php * Ajaxconnexioncookie/index.php
* Lecture des cookies de session, dispatch vers le formulaire selon la langue. * Lecture cookies, dispatch vers formulaire selon langue.
*/ */
if (isset($_COOKIE['codeUtilisateur']) && isset($_COOKIE['codeSociete'])) { if (isset($_COOKIE['codeUtilisateur']) && isset($_COOKIE['codeSociete'])) {

234
Vue/portail.php
View File

@ -1,6 +1,14 @@
<?php defined('APP_VERSION') || define('APP_VERSION', date('YmdHi')); ?> <?php
defined('APP_VERSION') || define('APP_VERSION', date('YmdHi'));
// Initialisation de la langue par défaut si non définie
$_SESSION['lang'] = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'fr_FR';
// Raccourci booléen réutilisable dans ce fichier
$isEn = ($_SESSION['lang'] === 'en_US');
?>
<!doctype html> <!doctype html>
<html lang="fr"> <html lang="<?= $isEn ? 'en' : 'fr' ?>">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -12,8 +20,6 @@
<link rel="stylesheet" href="Bootstrap_new/login/vendor/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="Bootstrap_new/login/vendor/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome 5 --> <!-- Font Awesome 5 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Bootstrap Select -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<!-- SweetAlert2 --> <!-- SweetAlert2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.min.css">
<!-- Portail — feuille de styles centralisée --> <!-- Portail — feuille de styles centralisée -->
@ -25,8 +31,11 @@
<div class="portail-wrapper"> <div class="portail-wrapper">
<!-- ======= Panneau gauche : Carrousel ======= --> <!-- ======================================================
PANNEAU GAUCHE — Carrousel
====================================================== -->
<div class="slide-container"> <div class="slide-container">
<div class="slides"> <div class="slides">
<img src="assets/img/slides/image01.jpg" alt="slide 1" class="slide active" /> <img src="assets/img/slides/image01.jpg" alt="slide 1" class="slide active" />
<img src="assets/img/slides/image02.jpg" alt="slide 2" class="slide" /> <img src="assets/img/slides/image02.jpg" alt="slide 2" class="slide" />
@ -39,116 +48,187 @@
<img src="assets/img/slides/image09.jpeg" alt="slide 9" class="slide" /> <img src="assets/img/slides/image09.jpeg" alt="slide 9" class="slide" />
</div> </div>
<button class="slide-btn prev" aria-label="Précédent"> <button class="slide-btn prev" aria-label="<?= $isEn ? 'Previous' : 'Précédent' ?>">
<i class="fas fa-chevron-left"></i> <i class="fas fa-chevron-left"></i>
</button> </button>
<button class="slide-btn next" aria-label="Suivant"> <button class="slide-btn next" aria-label="<?= $isEn ? 'Next' : 'Suivant' ?>">
<i class="fas fa-chevron-right"></i> <i class="fas fa-chevron-right"></i>
</button> </button>
<div class="dotsContainer"> <div class="dotsContainer">
<div class="dot active" attr="0" onclick="switchImage(this)"></div> <div class="dot active" attr="0" onclick="switchImage(this)"></div>
<div class="dot" attr="1" onclick="switchImage(this)"></div> <div class="dot" attr="1" onclick="switchImage(this)"></div>
<div class="dot" attr="2" onclick="switchImage(this)"></div> <div class="dot" attr="2" onclick="switchImage(this)"></div>
<div class="dot" attr="3" onclick="switchImage(this)"></div> <div class="dot" attr="3" onclick="switchImage(this)"></div>
<div class="dot" attr="4" onclick="switchImage(this)"></div> <div class="dot" attr="4" onclick="switchImage(this)"></div>
<div class="dot" attr="5" onclick="switchImage(this)"></div> <div class="dot" attr="5" onclick="switchImage(this)"></div>
<div class="dot" attr="6" onclick="switchImage(this)"></div> <div class="dot" attr="6" onclick="switchImage(this)"></div>
<div class="dot" attr="7" onclick="switchImage(this)"></div> <div class="dot" attr="7" onclick="switchImage(this)"></div>
<div class="dot" attr="8" onclick="switchImage(this)"></div> <div class="dot" attr="8" onclick="switchImage(this)"></div>
</div> </div>
<!-- Badge marque (Image 1) --> <!-- Badge marque + caption bilingue synchronisé avec le carrousel -->
<div class="slide-brand"> <div class="slide-brand">
<h2>INTER SANTE</h2> <h2>INTER SANTE</h2>
<p>ERP SaaS &mdash; Solution de gestion intégrée</p> <p class="slide-subtitle">
ERP SaaS &mdash;
<?= $isEn
? 'Integrated Health Management Solution'
: 'Solution de Gestion Santé Intégrée' ?>
</p>
<p class="slide-caption" id="slideCaption"></p>
</div> </div>
</div>
<!-- /Carrousel -->
<!-- ======= Panneau droit : Formulaire ======= --> </div><!-- /Carrousel -->
<!-- ======================================================
PANNEAU DROIT — Formulaire de connexion
====================================================== -->
<div class="form-panel"> <div class="form-panel">
<!-- Champ caché racineWeb -->
<!-- Champ technique racineWeb (lu par les scripts JS existants) -->
<input class="sr-only" type="text" id="racineWeb" name="racineWeb" value="<?= $racineWeb ?>"> <input class="sr-only" type="text" id="racineWeb" name="racineWeb" value="<?= $racineWeb ?>">
<!-- Logo grand centré (Image 2) --> <!-- Logo -->
<img src="assets/img/logo_portail_gestionnaire.png" <img src="assets/img/logo_portail_gestionnaire.png"
alt="Logo INTER SANTE" alt="Logo INTER SANTE"
class="form-logo"> class="form-logo">
<!-- Contenu dynamique injecté par index.php --> <!-- Contenu injecté par le contrôleur (index.php → french.php / english.php) -->
<?= $contenu ?> <?= $contenu ?>
</div>
<!-- /Formulaire --> </div><!-- /Formulaire -->
</div><!-- /portail-wrapper --> </div><!-- /portail-wrapper -->
<!-- ======= Scripts ======= -->
<!-- ======================================================
SCRIPTS
====================================================== -->
<script src="Bootstrap_new/login/vendor/jquery/jquery-3.2.1.min.js"></script> <script src="Bootstrap_new/login/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="Bootstrap_new/login/vendor/bootstrap/js/popper.js"></script> <script src="Bootstrap_new/login/vendor/bootstrap/js/popper.js"></script>
<script src="Bootstrap_new/login/vendor/bootstrap/js/bootstrap.min.js"></script> <script src="Bootstrap_new/login/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.all.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.all.min.js"></script>
<script> <script>
/* ---- Protection clic droit ---- */ /* ----------------------------------------------------------
document.addEventListener Langue — injectée par PHP, utilisée par tout le JS
? document.addEventListener('contextmenu', function(e){ e.preventDefault(); }, false) ---------------------------------------------------------- */
: document.attachEvent('oncontextmenu', function(){ window.event.returnValue = false; }); var LANG = '<?= $_SESSION['lang'] ?>';
/* ---- Carrousel ---- */ /* ----------------------------------------------------------
var slideImages = document.querySelectorAll('.slide'); Textes par slide (9 entrées, FR + EN)
var nextBtn = document.querySelector('.next'); Synchronisés avec le carrousel via updateCaption()
var prevBtn = document.querySelector('.prev'); ---------------------------------------------------------- */
var dots = document.querySelectorAll('.dot'); var SLIDE_TEXTS = [
var counter = 0; { fr: "Gérez vos structures de santé en toute simplicité",
var deletInterval; en: "Manage your healthcare facilities with ease" },
{ fr: "Des outils puissants pour vos équipes médicales",
en: "Powerful tools for your medical teams" },
{ fr: "Suivi en temps réel de vos indicateurs de performance",
en: "Real-time monitoring of your key performance indicators" },
{ fr: "La digitalisation au service de la santé",
en: "Digitalization at the service of healthcare" },
{ fr: "Collaborez efficacement entre établissements",
en: "Collaborate effectively across facilities" },
{ fr: "Pilotez votre activité depuis un tableau de bord unifié",
en: "Drive your activity from a unified dashboard" },
{ fr: "Sécurisez les données de vos patients",
en: "Keep your patients' data safe and secure" },
{ fr: "Optimisez la gestion de vos ressources humaines",
en: "Streamline your human resources management" },
{ fr: "L'ERP SaaS taillé pour la santé en Afrique",
en: "The SaaS ERP built for healthcare in Africa" }
];
nextBtn.addEventListener('click', slideNext); function getCaption(index) {
prevBtn.addEventListener('click', slidePrev); var entry = SLIDE_TEXTS[index] || {};
return (LANG === 'en_US') ? (entry.en || '') : (entry.fr || '');
}
function slideNext() { /* Fondu sortant → swap texte → fondu entrant */
function updateCaption(index) {
var el = document.getElementById('slideCaption');
if (!el) return;
el.classList.add('animating');
setTimeout(function () {
el.textContent = getCaption(index);
el.classList.remove('animating');
}, 200);
}
/* ----------------------------------------------------------
Protection clic droit
---------------------------------------------------------- */
if (document.addEventListener) {
document.addEventListener('contextmenu', function (e) { e.preventDefault(); }, false);
} else {
document.attachEvent('oncontextmenu', function () { window.event.returnValue = false; });
}
/* ----------------------------------------------------------
Carrousel
---------------------------------------------------------- */
var slideImages = document.querySelectorAll('.slide');
var nextBtn = document.querySelector('.next');
var prevBtn = document.querySelector('.prev');
var dots = document.querySelectorAll('.dot');
var counter = 0;
var deletInterval;
// Affiche le caption de la première slide au chargement
updateCaption(0);
nextBtn.addEventListener('click', slideNext);
prevBtn.addEventListener('click', slidePrev);
function slideNext() {
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
counter = (counter >= slideImages.length - 1) ? 0 : counter + 1;
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
indicators();
updateCaption(counter);
}
function slidePrev() {
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
counter = (counter === 0) ? slideImages.length - 1 : counter - 1;
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
indicators();
updateCaption(counter);
}
function autoSliding() {
deletInterval = setInterval(function () { slideNext(); }, 3000);
}
autoSliding();
var sliderEl = document.querySelector('.slide-container');
sliderEl.addEventListener('mouseover', function () { clearInterval(deletInterval); });
sliderEl.addEventListener('mouseout', autoSliding);
function indicators() {
dots.forEach(function (d) { d.classList.remove('active'); });
dots[counter].classList.add('active');
}
function switchImage(el) {
var id = parseInt(el.getAttribute('attr'));
if (id === counter) return;
if (id > counter) {
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards'; slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
counter = (counter >= slideImages.length - 1) ? 0 : counter + 1; counter = id;
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards'; slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
indicators(); } else {
}
function slidePrev() {
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards'; slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
counter = (counter === 0) ? slideImages.length - 1 : counter - 1; counter = id;
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards'; slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
indicators();
}
function autoSliding() {
deletInterval = setInterval(function(){ slideNext(); }, 3000);
}
autoSliding();
var sliderEl = document.querySelector('.slide-container');
sliderEl.addEventListener('mouseover', function(){ clearInterval(deletInterval); });
sliderEl.addEventListener('mouseout', autoSliding);
function indicators() {
dots.forEach(function(d){ d.classList.remove('active'); });
dots[counter].classList.add('active');
}
function switchImage(el) {
var id = parseInt(el.getAttribute('attr'));
if (id === counter) return;
if (id > counter) {
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
counter = id;
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
} else {
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
counter = id;
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
}
indicators();
} }
indicators();
updateCaption(counter);
}
</script> </script>
</body> </body>
</html> </html>