This commit is contained in:
KONE SOREL 2026-04-06 14:07:24 +00:00
parent fc118dd1e4
commit 31d764e5bb
4 changed files with 117 additions and 102 deletions

View File

@ -2,41 +2,56 @@
INTER SANTÉ LOGIN UI (ONLY)
============================================================ */
/* --- CONFIGURATION GLOBALE --- */
html, body { height: 100%; margin: 0; overflow: hidden; font-family: 'Inter', sans-serif; background: #f4f7f6; }
/* RESET & FULLSCREEN */
html, body { height: 100%; margin: 0; overflow: hidden; font-family: 'Segoe UI', sans-serif; background: #000; }
.auth-wrapper { display: flex; height: 100vh; width: 100vw; }
.portal-main-wrapper { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
/* --- SLIDESHOW (GAUCHE) --- */
.auth-visual { flex: 1.4; position: relative; background: #212529; overflow: hidden; }
.slide-container { width: 100%; height: 100%; position: relative; }
.slides img { width: 100%; height: 100%; object-fit: cover; position: absolute; opacity: 0; transition: opacity 0.8s ease-in-out; }
/* SLIDESHOW SYSTEM */
.portal-bg-slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.slides img { width: 100%; height: 100%; object-fit: cover; position: absolute; opacity: 0; transition: opacity 1.2s ease-in-out; }
.slides img.active { opacity: 1; position: relative; }
.portal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 100%); }
.buttons span { position: absolute; top: 50%; transform: translateY(-50%); color: white; cursor: pointer; z-index: 10; padding: 20px; font-size: 24px; opacity: 0.5; transition: 0.3s; }
.buttons span:hover { opacity: 1; }
.next { right: 10px; } .prev { left: 10px; }
/* THE GLASS CARD (IMAGE 1 LOOK) */
.auth-glass-card {
width: 100%;
max-width: 420px;
padding: 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
}
.dotsContainer { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10; }
.dot { width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; cursor: pointer; }
.dot.active { background: white; }
.auth-portal-title { color: #e5e5e5; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 1.4rem; }
/* --- FORMULAIRE (DROITE) --- */
.auth-content { flex: 1; background: white; display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-logo { max-height: 70px; margin-bottom: 20px; }
.auth-title { font-size: 1.25rem; font-weight: 700; color: #333; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 1px; }
/* DARK INPUTS */
.lbl-saas { color: #aaa; font-size: 11px; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; display: block; }
/* --- COMPOSANTS ERP --- */
.lbl-erp { font-size: 11px; font-weight: 700; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; display: block; }
.group-erp { border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; transition: 0.2s; }
.group-erp:focus-within { border-color: #212529; box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.05); }
.group-erp .input-group-text { background: transparent; border: none; color: #adb5bd; padding-left: 15px; }
.group-erp .form-control { border: none; padding: 12px; font-size: 14px; font-weight: 500; }
.group-erp .form-control:focus { box-shadow: none; background: #fcfcfc; }
.input-group-dark { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; display: flex; align-items: center; }
.input-group-dark .input-group-text { background: transparent; border: none; color: #777; padding: 12px 15px; }
.input-group-dark .form-control { background: transparent !important; border: none; color: #fff !important; font-size: 14px; padding: 12px; }
.input-group-dark .form-control:focus { box-shadow: none; }
.forgot-link { font-size: 11px; font-weight: 600; color: #6c757d; text-decoration: none; }
.forgot-link:hover { color: #212529; }
.select-dark { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #fff !important; border-radius: 10px !important; font-size: 14px !important; padding: 12px !important; }
.select-dark option { background: #1a1a1a; }
.auth-footer { margin-top: 50px; font-size: 12px; color: #adb5bd; }
.auth-footer strong { color: #6c757d; }
.forgot-pwd-link { font-size: 11px; color: #777; text-decoration: none; transition: 0.3s; }
.forgot-pwd-link:hover { color: #fff; }
/* BUTTON */
.btn-login-saas { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: 0.4s; }
.btn-login-saas:hover { background: #fff; color: #000; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
/* FOOTER & DOTS */
.portal-footer-block { font-size: 11px; color: rgba(255, 255, 255, 0.3); }
.portal-footer-block strong { color: rgba(255, 255, 255, 0.6); }
.dotsContainer { position: absolute; bottom: 30px; display: flex; gap: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: 0.3s; }
.dot.active { background: #fff; transform: scale(1.3); }
/* ALERTS */
.alert-danger-glass { background: rgba(220, 53, 69, 0.15); color: #ea868f; }

View File

@ -1,14 +1,16 @@
<?php
$maintenance = $societeusersaas['maintenance'];
if($maintenance == '1') {
$msgErreur = 'Site en maintenance, veuillez vous reconnecter plus tard !';
}
// Récupération des cookies pour éviter la perte de données
$codeUtilisateur = (isset($_COOKIE['codeUtilisateur'])) ? $_COOKIE['codeUtilisateur'] : "";
$codeSociete = (isset($_COOKIE['codeSociete'])) ? $_COOKIE['codeSociete'] : "";
?>
<h2 class="auth-title text-center">Portail Gestionnaire</h2>
<div class="text-center mb-4">
<h2 class="auth-portal-title">Portail Gestionnaire</h2>
</div>
<?php if (isset($msgErreur) && $msgErreur > ""): ?>
<div class="alert alert-danger shadow-sm border-0 small text-center">
<div class="alert alert-danger-glass border-0 small text-center mb-3">
<i class="fas fa-exclamation-triangle me-2"></i><?= $msgErreur ?>
</div>
<?php endif; ?>
@ -16,43 +18,49 @@
<div id="div_msgErreur"></div>
<?php if($maintenance != '1'): ?>
<div class="mb-3">
<label class="lbl-erp">Langue</label>
<select class="form-select input-erp" id="langue" name="langue" onchange="changer_langue_connexion();">
<?php liste_options($langues, $_SESSION['lang'], true); ?>
</select>
</div>
<div class="mb-3">
<label class="lbl-erp">Entité</label>
<div class="input-group group-erp">
<span class="input-group-text"><i class="fas fa-building"></i></span>
<input class="form-control" type="text" name="codeSociete" id="codeSociete"
value="<?= $codeSociete ?>" required onchange="changer_entite_portail();">
<div class="auth-fields">
<div class="mb-3">
<label class="lbl-saas">Langue</label>
<select class="form-select select-dark" id="langue" name="langue" onchange="changer_langue_connexion();">
<?php liste_options($langues, $_SESSION['lang'], true); ?>
</select>
</div>
</div>
<div class="mb-3">
<label class="lbl-erp">Identifiant</label>
<div class="input-group group-erp">
<span class="input-group-text"><i class="fas fa-user"></i></span>
<input class="form-control" type="text" name="login" id="login"
value="<?= $codeUtilisateur ?>" required>
<div class="mb-3">
<label class="lbl-saas">Entité</label>
<div class="input-group-dark">
<span class="input-group-text"><i class="fas fa-building"></i></span>
<input class="form-control" type="text" name="codeSociete" id="codeSociete"
value="<?= $codeSociete ?>" required onchange="changer_entite_portail();">
</div>
</div>
</div>
<div class="mb-3">
<div class="d-flex justify-content-between">
<label class="lbl-erp">Mot de passe</label>
<a href="MotDePasseOublie" class="forgot-link">Oublié ?</a>
<div class="mb-3">
<label class="lbl-saas">Identifiant</label>
<div class="input-group-dark">
<span class="input-group-text"><i class="fas fa-user-circle"></i></span>
<input class="form-control" type="text" name="login" id="login"
value="<?= $codeUtilisateur ?>" required>
</div>
</div>
<div class="input-group group-erp">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input class="form-control" type="password" name="mdp" id="mdp" required>
</div>
</div>
<button name="btn_connexion" id="btn_connexion" class="btn btn-dark w-100 fw-bold text-uppercase py-2 mt-2">
Connexion
</button>
<?php endif; ?>
<div class="mb-4">
<div class="d-flex justify-content-between align-items-center">
<label class="lbl-saas">Mot de passe</label>
<a href="MotDePasseOublie" class="forgot-pwd-link">Oublié ?</a>
</div>
<div class="input-group-dark">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input class="form-control" type="password" name="mdp" id="mdp" required>
</div>
</div>
<button name="btn_connexion" id="btn_connexion" class="btn btn-login-saas w-100 fw-bold text-uppercase py-3">
Connexion
</button>
</div>
<?php endif; ?>
<footer class="portal-footer-block text-center mt-5">
<p>&copy; <?= date('Y') ?> <strong>INTER SANTE</strong>. Tous droits réservés.</p>
</footer>

View File

@ -111,7 +111,7 @@
<div class="container-fluid" style="margin:0;padding:0;">
<div class="slide-container">
<div class="slides">
<img src="assets/img/slides/image01.jpg" alt="image carousel" class="slide active" />
<img src="imageassets/img/slides/01.jpg" alt="image carousel" class="slide active" />
<img src="assets/img/slides/image02.jpg" alt="image carousel" class="slide" />
<img src="assets/img/slides/image03.jpg" alt="image carousel" class="slide" />
<img src="assets/img/slides/image04.jpg" alt="image carousel" class="slide" />

View File

@ -2,7 +2,7 @@
defined('APP_VERSION') || define('APP_VERSION', date('YmdHi'));
?>
<!doctype html>
<html lang="<?= ($_SESSION['lang'] == "en_US") ? 'en' : 'fr' ?>">
<html lang="<?= (isset($_SESSION['lang']) && $_SESSION['lang'] == "en_US") ? 'en' : 'fr' ?>">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -18,42 +18,34 @@ defined('APP_VERSION') || define('APP_VERSION', date('YmdHi'));
</head>
<body>
<div class="auth-wrapper">
<div class="auth-visual d-none d-lg-block">
<div class="slide-container">
<div class="slides">
<img src="Bootstrap_new/login/images/bg-01.jpg" class="active">
<img src="Bootstrap_new/login/images/bg-02.jpg">
<img src="Bootstrap_new/login/images/bg-03.jpg">
<img src="Bootstrap_new/login/images/bg-04.jpg">
</div>
<div class="buttons">
<span class="next"><i class="fas fa-chevron-right"></i></span>
<span class="prev"><i class="fas fa-chevron-left"></i></span>
</div>
<div class="dotsContainer">
<div class="dot active" attr='0'></div>
<div class="dot" attr='1'></div>
<div class="dot" attr='2'></div>
<div class="dot" attr='3'></div>
<div class="portal-main-wrapper">
<div class="portal-bg-slideshow">
<div class="slides">
<img src="assets/img/slides/image01.jpg" class="active">
<img src="assets/img/slides/image02.jpg">
<img src="assets/img/slides/image03.jpg">
<img src="assets/img/slides/image04.jpg">
<img src="assets/img/slides/image05.jpg">
<img src="assets/img/slides/image06.jpg">
<img src="assets/img/slides/image07.jpg">
<img src="assets/img/slides/image08.jpg">
<img src="assets/img/slides/image09.jpeg">
</div>
<div class="portal-overlay"></div>
</div>
<div class="portal-auth-container">
<div class="auth-glass-card shadow-lg">
<div id="div_contenu_portail">
<?= $contenu ?>
</div>
</div>
</div>
<div class="auth-content">
<div class="auth-card">
<div class="auth-header text-center">
<img src="Bootstrap_new/images/logo_inter_sante.png" alt="Logo" class="auth-logo">
</div>
<div id="div_contenu_portail">
<?= $contenu ?>
</div>
<footer class="auth-footer text-center">
<p>&copy; <?= date('Y') ?> <strong>INTER SANTE</strong>. <?= _("Tous droits réservés.") ?></p>
</footer>
</div>
<div class="dotsContainer">
<?php for($i=0; $i<9; $i++): ?>
<div class="dot <?= ($i==0)?'active':'' ?>" attr='<?= $i ?>'></div>
<?php endfor; ?>
</div>
</div>