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

sert

Browse Source
This commit is contained in:
KONE SOREL 2026-04-07 07:42:05 +00:00
parent fa326dfe66
commit b225c49e2d
5 changed files with 299 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,27 +1,25 @@
/* ============================================================ /* ============================================================
style-portail.css – INTER SANTE · Portail Gestionnaire style-portail.css – INTER SANTE · Portail Gestionnaire
v2 – Image1 (icônes FA, overlay gradient, badge carrousel,
bouton avec icône) + Image2 (logo grand, titre uppercase
imposant, aération, focus fond bleu, proportions 42/58)
============================================================ */ ============================================================ */
/* ---------- Variables ---------- */ /* ---------- Variables ---------- */
:root { :root {
/* Brand Colors — Charcoal / Gris neutre (zéro vert) */ --brand: #212E53;
--color-primary: #212E53; /*#2e3440;*/ /* charcoal foncé */ --brand-dark: #1a1d24;
--color-primary-light: #4c566a; /* slate moyen */
--color-primary-dark: #1a1d24; /* quasi-noir */
--color-primary-ghost: rgba(33, 46, 83, 0.05); /* Ajusté sur le Charcoal */
--brand: #0088cf;
--brand-dark: #006ba3;
--brand-light: #4c566a; --brand-light: #4c566a;
--brand-focus: #0c4b65;
--white: #ffffff; --white: #ffffff;
--text-dark: #1a2e3b; --text-dark: #1a2e3b;
--text-muted: #6b8a9a; --text-muted: #6b8a9a;
--text-label: #3a5060;
--danger: #dc3545; --danger: #dc3545;
--border-r: 10px; --border-r: 10px;
--input-h: 46px; --input-h: 48px;
--transition: 0.25s ease; --transition: 0.22s ease;
--shadow-card: 0 8px 32px rgba(0,136,207,.13); --shadow-btn: 0 4px 16px rgba(0,136,207,.38);
--shadow-btn: 0 2px 4px rgba(0,0,0,0.05);
} }
/* ---------- Reset / Base ---------- */ /* ---------- Reset / Base ---------- */
@ -31,13 +29,13 @@ html, body {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: 'Poppins', 'Segoe UI', sans-serif; font-family: 'Poppins', 'Segoe UI', sans-serif;
background: var(--brand-light); background: var(--white);
color: var(--text-dark); color: var(--text-dark);
} }
a { text-decoration: none; } a { text-decoration: none; }
/* ---------- Layout principal ---------- */ /* ---------- Wrapper principal ---------- */
.portail-wrapper { .portail-wrapper {
display: flex; display: flex;
height: 100vh; height: 100vh;
@ -45,11 +43,13 @@ a { text-decoration: none; }
overflow: hidden; overflow: hidden;
} }
/* ---------- Panneau carrousel (gauche) ---------- */ /* =============================================
PANNEAU GAUCHE — Carrousel 42 % (Image 2)
============================================= */
.slide-container { .slide-container {
position: relative; position: relative;
width: 55%; width: 42%;
flex: 0 0 55%; flex: 0 0 42%;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
@ -67,60 +67,61 @@ a { text-decoration: none; }
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
left: -100%; left: -100%;
transition: none;
} }
.slides .slide.active { left: 0; } .slides .slide.active { left: 0; }
/* overlay gradient pour lisibilité */ /* Overlay dégradé bleu profond (Image 1) */
.slide-container::after { .slide-container::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient( background: linear-gradient(
135deg, 160deg,
rgba(0,136,207,.35) 0%, rgba(0, 100, 180, .28) 0%,
rgba(0,40,80,.55) 100% rgba(0, 28, 65, .58) 100%
); );
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }
/* badge marque sur le carrousel */ /* Badge marque bas-gauche (Image 1) */
.slide-brand { .slide-brand {
position: absolute; position: absolute;
bottom: 48px; bottom: 52px;
left: 40px; left: 36px;
z-index: 5; z-index: 5;
color: var(--white); color: var(--white);
} }
.slide-brand h2 { .slide-brand h2 {
font-size: 1.6rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
letter-spacing: .5px; letter-spacing: .6px;
line-height: 1.2; line-height: 1.2;
text-shadow: 0 2px 8px rgba(0,0,0,.4);
} }
.slide-brand p { .slide-brand p {
font-size: .85rem; font-size: .80rem;
opacity: .8; opacity: .85;
margin-top: 4px; margin-top: 5px;
text-shadow: 0 1px 4px rgba(0,0,0,.35);
} }
/* boutons prev / next */ /* Boutons prev / next (Image 1 style) */
.slide-btn { .slide-btn {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 5; z-index: 5;
background: rgba(255,255,255,.18); background: rgba(255,255,255,.20);
border: none; border: none;
color: var(--white); color: var(--white);
width: 40px; width: 38px;
height: 40px; height: 38px;
border-radius: 50%; border-radius: 50%;
font-size: 1rem; font-size: .88rem;
cursor: pointer; cursor: pointer;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
transition: background var(--transition); transition: background var(--transition);
@ -129,11 +130,11 @@ a { text-decoration: none; }
justify-content: center; justify-content: center;
} }
.slide-btn:hover { background: rgba(255,255,255,.38); } .slide-btn:hover { background: rgba(255,255,255,.42); }
.slide-btn.prev { left: 18px; } .slide-btn.prev { left: 16px; }
.slide-btn.next { right: 18px; } .slide-btn.next { right: 16px; }
/* points indicateurs */ /* Indicateurs dots */
.dotsContainer { .dotsContainer {
position: absolute; position: absolute;
bottom: 18px; bottom: 18px;
@ -145,74 +146,79 @@ a { text-decoration: none; }
} }
.dotsContainer .dot { .dotsContainer .dot {
width: 8px; width: 9px;
height: 8px; height: 9px;
border-radius: 50%; border-radius: 50%;
background: rgba(255,255,255,.45); background: rgba(255,255,255,.40);
cursor: pointer; cursor: pointer;
transition: background var(--transition), transform var(--transition); transition: background var(--transition), transform var(--transition);
border: none;
padding: 0;
} }
.dotsContainer .dot.active { .dotsContainer .dot.active {
background: var(--white); background: var(--white);
transform: scale(1.3); transform: scale(1.35);
} }
/* ---------- Panneau formulaire (droite) ---------- */ /* =============================================
PANNEAU DROIT — Formulaire 58 % (Image 2)
============================================= */
.form-panel { .form-panel {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 28px 36px; padding: 0 52px 56px; /* bottom padding = place pour le footer absolu */
background: var(--white); background: var(--white);
overflow-y: auto; overflow: hidden;
position: relative; position: relative;
} }
/* Logo */ /* Logo grand et centré (Image 2) */
.form-logo { .form-logo {
width: 90px; width: 115px;
height: 90px; height: 115px;
object-fit: contain; object-fit: contain;
margin-bottom: 10px; margin-bottom: 12px;
} }
/* Titre portail */ /* Titre imposant uppercase (Image 2) */
.portail-title { .portail-title {
font-size: 1.35rem; font-size: 1.5rem;
font-weight: 700; font-weight: 800;
color: var(--color-primary); color: var(--brand);
letter-spacing: .4px; letter-spacing: 1.8px;
margin-bottom: 6px; text-transform: uppercase;
text-align: center; text-align: center;
margin-bottom: 8px;
line-height: 1.2;
} }
/* Séparateur */ /* Séparateur */
.portail-divider { .portail-divider {
width: 48px; width: 44px;
height: 3px; height: 3px;
background: var(--color-primary); background: var(--brand);
border-radius: 2px; border-radius: 2px;
margin: 0 auto 18px; margin: 0 auto 20px;
} }
/* Formulaire */ /* Formulaire */
.login100-form { .login100-form {
width: 100%; width: 100%;
max-width: 340px; max-width: 355px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0;
} }
/* Alerte erreur / maintenance */ /* Alerte maintenance / erreur */
.alert-portail { .alert-portail {
border-radius: var(--border-r); border-radius: var(--border-r);
font-size: .85rem; font-size: .83rem;
padding: 10px 14px; padding: 10px 14px;
margin-bottom: 12px; margin-bottom: 14px;
text-align: center; text-align: center;
} }
@ -222,21 +228,21 @@ a { text-decoration: none; }
color: var(--danger); color: var(--danger);
} }
/* Groupe champ */ /* Groupe champ — aéré (Image 2) */
.field-group { .field-group {
margin-bottom: 12px; margin-bottom: 13px;
} }
.field-group label { .field-group label {
display: block; display: block;
font-size: .78rem; font-size: .79rem;
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-label);
margin-bottom: 4px; margin-bottom: 5px;
letter-spacing: .3px; letter-spacing: .2px;
} }
/* Input wrapper avec icône */ /* Wrapper input + icône (Image 1) */
.input-icon-wrap { .input-icon-wrap {
position: relative; position: relative;
display: flex; display: flex;
@ -245,141 +251,170 @@ a { text-decoration: none; }
.input-icon-wrap .field-icon { .input-icon-wrap .field-icon {
position: absolute; position: absolute;
left: 13px; left: 14px;
color: var(--color-primary); color: var(--brand);
font-size: .95rem; font-size: .90rem;
pointer-events: none; pointer-events: none;
z-index: 2; z-index: 2;
} }
.input-icon-wrap .input100, /* Inputs text / password */
.input-icon-wrap select { .input-icon-wrap .input100 {
width: 100%; width: 100%;
height: var(--input-h); height: var(--input-h);
padding: 0 14px 0 38px; padding: 0 14px 0 40px;
border: 2px solid var(--color-primary); border: 2px solid #c5e1f3;
border-radius: var(--border-r); border-radius: var(--border-r);
font-size: .9rem; font-size: .9rem;
color: var(--text-dark); color: var(--brand);
background: var(--white); background: var(--white);
transition: border-color var(--transition), box-shadow var(--transition); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
outline: none; outline: none;
appearance: none;
} }
.input-icon-wrap .input100::placeholder { color: #b0c8d8; } .input-icon-wrap .input100::placeholder { color: #a8cce0; }
.input-icon-wrap .input100:focus, /* Focus : fond bleu clair + bordure pleine (Image 2) */
.input-icon-wrap select:focus { .input-icon-wrap .input100:focus {
border-color: var(--color-primary); border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(0,136,207,.12); background: var(--brand-focus);
box-shadow: 0 0 0 3px rgba(0,136,207,.10);
} }
/* Sélecteur langue / bootstrap-select */ /* Bootstrap-select langue */
.bootstrap-select.field-select { .bootstrap-select.field-select {
width: 100% !important; width: 100% !important;
} }
.bootstrap-select.field-select > .dropdown-toggle { .bootstrap-select.field-select > .dropdown-toggle {
height: var(--input-h); height: var(--input-h);
padding: 0 14px 0 38px; padding: 0 14px 0 40px;
border: 2px solid #d0e8f5 !important; border: 2px solid #c5e1f3 !important;
border-radius: var(--border-r) !important; border-radius: var(--border-r) !important;
background: var(--white) !important; background: var(--white) !important;
color: var(--text-dark); color: var(--brand);
font-size: .9rem; font-size: .9rem;
box-shadow: none !important; box-shadow: none !important;
display: flex; display: flex;
align-items: center; align-items: center;
transition: border-color var(--transition), background var(--transition);
} }
.bootstrap-select.field-select > .dropdown-toggle:focus, .bootstrap-select.field-select.show > .dropdown-toggle,
.bootstrap-select.field-select.show > .dropdown-toggle { .bootstrap-select.field-select > .dropdown-toggle:active {
border-color: var(--brand) !important; border-color: var(--brand) !important;
box-shadow: 0 0 0 3px rgba(0,136,207,.12) !important; background: var(--brand-focus) !important;
box-shadow: 0 0 0 3px rgba(0,136,207,.10) !important;
outline: none !important; outline: none !important;
} }
.bootstrap-select.field-select .filter-option-inner-inner { .bootstrap-select.field-select .filter-option-inner-inner {
color: var(--text-dark) !important; color: var(--brand) !important;
background: transparent !important; background: transparent !important;
text-align: left; text-align: left;
font-size: .9rem; font-size: .9rem;
height: auto; 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; } .bootstrap-select.field-select .caret { display: none !important; }
/* Bouton connexion */ /* Flèche custom positionnée à droite du select */
.select-arrow {
position: absolute;
right: 13px;
color: var(--brand);
font-size: .78rem;
pointer-events: none;
z-index: 3;
}
/* Bouton connexion (Image 1 icône + Image 2 propreté) */
.btn-login { .btn-login {
width: 100%; width: 100%;
height: 46px; height: 48px;
background: var(--color-primary); background: var(--brand);
color: var(--white); color: var(--white);
border: 2px solid var(--color-primary); border: 2px solid var(--brand);
border-radius: var(--border-r); border-radius: var(--border-r);
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
letter-spacing: .4px; letter-spacing: .5px;
cursor: pointer; cursor: pointer;
transition: background var(--transition), color var(--transition), box-shadow var(--transition); transition: background var(--transition), color var(--transition), box-shadow var(--transition);
box-shadow: var(--shadow-btn); box-shadow: var(--shadow-btn);
margin-top: 6px; margin-top: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 9px;
} }
.btn-login:hover { .btn-login:hover {
background: var(--white); background: var(--white);
color: var(--color-primary); color: var(--brand);
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: 14px; margin-top: 15px;
} }
.link-forgot a { .link-forgot a {
font-size: .82rem; font-size: .82rem;
color: var(--text-muted); color: var(--text-muted);
transition: color var(--transition); transition: color var(--transition);
display: inline-flex;
align-items: center;
gap: 5px;
} }
.link-forgot a:hover { color: var(--brand); } .link-forgot a:hover { color: var(--brand); }
/* Footer droits réservés */ /* Footer ancré en bas du panneau (Image 2) */
.portail-footer { .portail-footer {
position: absolute; position: absolute;
bottom: 12px; bottom: 14px;
left: 0; left: 0;
right: 0; right: 0;
text-align: center; text-align: center;
font-size: .72rem; font-size: .72rem;
color: var(--text-muted); color: var(--text-muted);
line-height: 1.6;
}
.portail-footer a {
color: var(--brand);
font-weight: 600;
} }
.portail-footer a { color: var(--brand); }
.portail-footer a:hover { text-decoration: underline; } .portail-footer a:hover { text-decoration: underline; }
/* ---------- Animations carrousel ---------- */ /* =============================================
ANIMATIONS CARROUSEL
============================================= */
@keyframes next1 { from { left: 0% } to { left: -100%; } } @keyframes next1 { from { left: 0% } to { left: -100%; } }
@keyframes next2 { from { left: 100% } to { left: 0%; } } @keyframes next2 { from { left: 100% } to { left: 0%; } }
@keyframes prev1 { from { left: 0% } to { left: 100%; } } @keyframes prev1 { from { left: 0% } to { left: 100%; } }
@keyframes prev2 { from { left: -100% } to { left: 0%; } } @keyframes prev2 { from { left: -100% } to { left: 0%; } }
/* ---------- Responsive (mobile) ---------- */ /* =============================================
RESPONSIVE MOBILE
============================================= */
@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: 24px 20px; } .form-panel {
padding: 36px 24px 64px;
justify-content: flex-start;
}
.login100-form { max-width: 100%; } .login100-form { max-width: 100%; }
.portail-footer { position: static; margin-top: 16px; } .portail-footer { bottom: 10px; }
} }

16
Vue/Ajaxconnexioncookie/english.php
View File

@ -1,7 +1,9 @@
<?php <?php
/* /*
* Ajaxconnexioncookie/english.php * Ajaxconnexioncookie/english.php
* Login form – English version. * Login form — English version.
* Image 1 : FA icons in fields, icon on submit button.
* Image 2 : uppercase bold title, airy layout, blue focus background.
*/ */
$maintenance = $societeusersaas['maintenance']; $maintenance = $societeusersaas['maintenance'];
@ -10,15 +12,14 @@ if ($maintenance === '1') {
} }
?> ?>
<!-- Title --> <!-- 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>
<!-- Error / maintenance message --> <!-- 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> <i class="fas fa-exclamation-triangle"></i>&nbsp;<?= htmlspecialchars($msgErreur) ?>
<?= htmlspecialchars($msgErreur) ?>
</div> </div>
<?php else: ?> <?php else: ?>
<div id="div_msgErreur"></div> <div id="div_msgErreur"></div>
@ -39,6 +40,7 @@ if ($maintenance === '1') {
onchange="javascript:changer_langue_connexion();"> onchange="javascript:changer_langue_connexion();">
<?php liste_options($langues, $_SESSION['lang'], true); ?> <?php liste_options($langues, $_SESSION['lang'], true); ?>
</select> </select>
<i class="fas fa-chevron-down select-arrow"></i>
</div> </div>
</div> </div>
@ -90,7 +92,7 @@ if ($maintenance === '1') {
</div> </div>
</div> </div>
<!-- Submit button --> <!-- Submit with icon (Image 1) -->
<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
@ -104,7 +106,7 @@ if ($maintenance === '1') {
</a> </a>
</div> </div>
<!-- Footer copyright --> <!-- Footer copyright anchored bottom (Image 2) -->
<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">

18
Vue/Ajaxconnexioncookie/french.php
View File

@ -1,7 +1,9 @@
<?php <?php
/* /*
* 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.
* Image 2 : titre uppercase imposant, aération, focus fond bleu.
*/ */
$maintenance = $societeusersaas['maintenance']; $maintenance = $societeusersaas['maintenance'];
@ -10,15 +12,14 @@ if ($maintenance === '1') {
} }
?> ?>
<!-- Titre --> <!-- 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 d'erreur / maintenance --> <!-- 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> <i class="fas fa-exclamation-triangle"></i>&nbsp;<?= htmlspecialchars($msgErreur) ?>
<?= htmlspecialchars($msgErreur) ?>
</div> </div>
<?php else: ?> <?php else: ?>
<div id="div_msgErreur"></div> <div id="div_msgErreur"></div>
@ -31,7 +32,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="form-select" <select class="selectpicker field-select"
data-live-search="true" data-live-search="true"
id="langue" id="langue"
name="langue" name="langue"
@ -39,6 +40,7 @@ if ($maintenance === '1') {
onchange="javascript:changer_langue_connexion();"> onchange="javascript:changer_langue_connexion();">
<?php liste_options($langues, $_SESSION['lang'], true); ?> <?php liste_options($langues, $_SESSION['lang'], true); ?>
</select> </select>
<i class="fas fa-chevron-down select-arrow"></i>
</div> </div>
</div> </div>
@ -90,7 +92,7 @@ if ($maintenance === '1') {
</div> </div>
</div> </div>
<!-- Bouton connexion --> <!-- Bouton connexion avec icône (Image 1) -->
<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
@ -104,7 +106,7 @@ if ($maintenance === '1') {
</a> </a>
</div> </div>
<!-- Footer droits réservés --> <!-- Footer droits réservés ancré en bas (Image 2) -->
<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">

5
Vue/Ajaxconnexioncookie/index.php
View File

@ -1,10 +1,9 @@
<?php <?php
/* /*
* Ajaxconnexioncookie/index.php * Ajaxconnexioncookie/index.php
* Lecture des cookies, détection de la langue, inclusion du formulaire approprié. * Lecture des cookies de session, dispatch vers le formulaire selon la langue.
*/ */
/* ---- Lecture des cookies ---- */
if (isset($_COOKIE['codeUtilisateur']) && isset($_COOKIE['codeSociete'])) { if (isset($_COOKIE['codeUtilisateur']) && isset($_COOKIE['codeSociete'])) {
$codeUtilisateur = $_COOKIE['codeUtilisateur']; $codeUtilisateur = $_COOKIE['codeUtilisateur'];
$codeSociete = $_COOKIE['codeSociete']; $codeSociete = $_COOKIE['codeSociete'];
@ -18,7 +17,6 @@ $societeExiste = true;
<div id="div_detail_connexion"> <div id="div_detail_connexion">
<form class="login100-form" action="Connexion/connecter" method="post"> <form class="login100-form" action="Connexion/connecter" method="post">
<?php <?php
if ($_SESSION['lang'] === 'en_US') { if ($_SESSION['lang'] === 'en_US') {
require 'english.php'; require 'english.php';
@ -26,6 +24,5 @@ $societeExiste = true;
require 'french.php'; require 'french.php';
} }
?> ?>
</form> </form>
</div> </div>

61
Vue/portail.php
View File

@ -1,7 +1,6 @@
<?php defined('APP_VERSION') || define('APP_VERSION', date('YmdHi')); ?> <?php defined('APP_VERSION') || define('APP_VERSION', date('YmdHi')); ?>
<!doctype html> <!doctype html>
<html lang="fr"> <html lang="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">
@ -17,16 +16,15 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> <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">
<!-- Animate.css --> <!-- Portail — feuille de styles centralisée -->
<link rel="stylesheet" href="Bootstrap_new/login/vendor/animate/animate.css">
<!-- Portail styles (centralisé) -->
<link rel="stylesheet" href="Bootstrap_new/css/style-portail.css?ver=<?= APP_VERSION ?>"> <link rel="stylesheet" href="Bootstrap_new/css/style-portail.css?ver=<?= APP_VERSION ?>">
<title><?= $titre ?></title> <title><?= $titre ?></title>
</head> </head>
<body> <body>
<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">
@ -60,30 +58,31 @@
<div class="dot" attr="8" onclick="switchImage(this)"></div> <div class="dot" attr="8" onclick="switchImage(this)"></div>
</div> </div>
<!-- Badge marque (Image 1) -->
<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>ERP SaaS &mdash; Solution de gestion intégrée</p>
</div> </div>
</div> </div>
<!-- /Panneau carrousel --> <!-- /Carrousel -->
<!-- ======= Panneau droit : Formulaire ======= --> <!-- ======= Panneau droit : Formulaire ======= -->
<div class="form-panel"> <div class="form-panel">
<!-- Champ caché racineWeb --> <!-- Champ caché racineWeb -->
<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 --> <!-- Logo grand centré (Image 2) -->
<img src="assets/img/logo_portail_gestionnaire.png" alt="Logo INTER SANTE" class="form-logo"> <img src="assets/img/logo_portail_gestionnaire.png"
alt="Logo INTER SANTE"
class="form-logo">
<!-- Contenu dynamique (formulaire de connexion) --> <!-- Contenu dynamique injecté par index.php -->
<?= $contenu ?> <?= $contenu ?>
</div> </div>
<!-- /Panneau formulaire --> <!-- /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>
@ -92,18 +91,16 @@
<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 : désactive le clic droit ---- */ /* ---- Protection clic droit ---- */
if (document.addEventListener) { document.addEventListener
document.addEventListener('contextmenu', function (e) { e.preventDefault(); }, false); ? document.addEventListener('contextmenu', function(e){ e.preventDefault(); }, false)
} else { : document.attachEvent('oncontextmenu', function(){ window.event.returnValue = false; });
document.attachEvent('oncontextmenu', function () { window.event.returnValue = false; });
}
/* ---- Carrousel ---- */ /* ---- Carrousel ---- */
let slideImages = document.querySelectorAll('.slide'); var slideImages = document.querySelectorAll('.slide');
let nextBtn = document.querySelector('.next'); var nextBtn = document.querySelector('.next');
let prevBtn = document.querySelector('.prev'); var prevBtn = document.querySelector('.prev');
let dots = document.querySelectorAll('.dot'); var dots = document.querySelectorAll('.dot');
var counter = 0; var counter = 0;
var deletInterval; var deletInterval;
@ -125,29 +122,29 @@
} }
function autoSliding() { function autoSliding() {
deletInterval = setInterval(function () { slideNext(); indicators(); }, 3000); deletInterval = setInterval(function(){ slideNext(); }, 3000);
} }
autoSliding(); autoSliding();
var container = document.querySelector('.slide-container'); var sliderEl = document.querySelector('.slide-container');
container.addEventListener('mouseover', function () { clearInterval(deletInterval); }); sliderEl.addEventListener('mouseover', function(){ clearInterval(deletInterval); });
container.addEventListener('mouseout', autoSliding); sliderEl.addEventListener('mouseout', autoSliding);
function indicators() { function indicators() {
dots.forEach(function(d){ d.classList.remove('active'); }); dots.forEach(function(d){ d.classList.remove('active'); });
dots[counter].classList.add('active'); dots[counter].classList.add('active');
} }
function switchImage(currentImage) { function switchImage(el) {
var imageId = parseInt(currentImage.getAttribute('attr')); var id = parseInt(el.getAttribute('attr'));
if (imageId === counter) return; if (id === counter) return;
if (imageId > counter) { if (id > counter) {
slideImages[counter].style.animation = 'next1 0.5s ease-in forwards'; slideImages[counter].style.animation = 'next1 0.5s ease-in forwards';
counter = imageId; counter = id;
slideImages[counter].style.animation = 'next2 0.5s ease-in forwards'; slideImages[counter].style.animation = 'next2 0.5s ease-in forwards';
} else { } else {
slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards'; slideImages[counter].style.animation = 'prev1 0.5s ease-in forwards';
counter = imageId; counter = id;
slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards'; slideImages[counter].style.animation = 'prev2 0.5s ease-in forwards';
} }
indicators(); indicators();