From 9f4722285abd7ad358767fe0879ec66647fc23ce Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Mon, 2 Feb 2026 17:41:50 +0000 Subject: [PATCH] valider gabarit --- Bootstrap_new/css/style_moderne.css | 890 +++++++++++++++++++++++++--- Vue/contexte.php | 317 ++++++++-- Vue/gabarit.php | 340 ++++++++--- Vue/head.php | 93 ++- Vue/header.php | 217 ++++++- Vue/sidebar.php | 127 +++- 6 files changed, 1690 insertions(+), 294 deletions(-) diff --git a/Bootstrap_new/css/style_moderne.css b/Bootstrap_new/css/style_moderne.css index edf56daa..f1b7c748 100644 --- a/Bootstrap_new/css/style_moderne.css +++ b/Bootstrap_new/css/style_moderne.css @@ -1,102 +1,826 @@ -/* --- Structure Globale --- */ +/* ========================================================================== + STYLE MODERNE - PORTAL GESTIONNAIRE + Couleur thème: #0088cf + Couleur fond: #f6f9ff + ========================================================================== */ + :root { - --primary-color: #0088cf; - --sidebar-bg: #2c3e50; - --main-bg: #f6f9ff; + --primary-color: #0088cf; + --primary-dark: #0066a6; + --primary-light: #4da6e0; + --secondary-color: #6c757d; + --success-color: #28a745; + --danger-color: #dc3545; + --warning-color: #ffc107; + --info-color: #17a2b8; + --light-color: #f8f9fa; + --dark-color: #343a40; + --body-bg: #f6f9ff; + --sidebar-bg: #ffffff; + --header-bg: #ffffff; + --card-bg: #ffffff; + --border-color: #e0e6ef; + --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); + --border-radius: 0.375rem; + --border-radius-lg: 0.5rem; + --transition: all 0.3s ease; +} + +/* ========================================================================== + RESET & BASE + ========================================================================== */ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html, body { + height: 100%; } body { - background-color: var(--main-bg); - font-family: 'Open Sans', sans-serif; + font-family: 'Segoe UI', 'Open Sans', sans-serif; + background-color: var(--body-bg); + color: #333; + font-size: 0.875rem; + line-height: 1.5; + overflow-x: hidden; + display: flex; + flex-direction: column; + min-height: 100vh; } -#main { - transition: all 0.3s; - min-height: calc(100vh - 60px); +/* ========================================================================== + HEADER + ========================================================================== */ + +.header { + background: var(--header-bg) !important; + box-shadow: var(--shadow-sm); + border-bottom: 1px solid var(--border-color); + height: 60px; + padding: 0 1.5rem; + z-index: 1030; + position: fixed; + top: 0; + left: 0; + right: 0; } -/* --- Fil d'Ariane & Onglets --- */ -.breadcrumb-container .breadcrumb { - border: none; +.logo { + font-weight: 700; + font-size: 1.25rem; + color: var(--primary-color); + text-decoration: none; + display: flex; + align-items: center; } -.sub-nav-link { - text-decoration: none; - color: #6c757d; - font-size: 0.85rem; - font-weight: 600; - border-bottom: 3px solid transparent; - transition: all 0.2s; +.logo img { + height: 32px; + margin-right: 0.75rem; } -.sub-nav-link:hover, .active-tab { - color: var(--primary-color) !important; - border-bottom: 3px solid var(--primary-color) !important; - background: rgba(0, 136, 207, 0.05); +.logo span { + background: linear-gradient(90deg, var(--primary-color), var(--primary-light)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } -/* --- Chatbot & Contexte (Droite) --- */ -.chatbot-trigger { - position: fixed; - bottom: 30px; - right: 30px; - width: 60px; - height: 60px; - border-radius: 50%; - background: var(--primary-color); - color: white; - border: none; - z-index: 1060; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; +/* ========================================================================== + NOTIFICATIONS + ========================================================================== */ + +.badge-number { + position: absolute; + top: -5px; + right: -5px; + min-width: 18px; + height: 18px; + font-size: 0.65rem; + padding: 0.15rem 0.35rem; + border-radius: 50%; + background: var(--danger-color) !important; + border: 2px solid white; } -.pulse { - position: absolute; - width: 100%; height: 100%; - border-radius: 50%; - background: var(--primary-color); - opacity: 0.6; - animation: pulse-animation 2s infinite; - z-index: -1; -} +/* ========================================================================== + SIDEBAR + ========================================================================== */ -@keyframes pulse-animation { - 0% { transform: scale(1); opacity: 0.6; } - 100% { transform: scale(1.6); opacity: 0; } -} - -.context-sidebar { - position: fixed; - top: 60px; - right: -350px; - width: 320px; - height: calc(100vh - 60px); - background: #f8faff; - z-index: 1050; - transition: all 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99); - display: flex; - flex-direction: column; - border-left: 1px solid #e0e6ed; -} - -.context-sidebar.active { right: 0; } - -.section-label { - font-size: 10px; - font-weight: 800; - color: #8e9db5; - text-transform: uppercase; - margin-bottom: 5px; - display: block; -} - -/* --- Sidebar Gauche --- */ .sidebar { - width: 250px; - background-color: var(--sidebar-bg); - min-height: 100vh; + background: var(--sidebar-bg); + box-shadow: var(--shadow-md); + width: 260px; + transition: var(--transition); + z-index: 1020; + position: fixed; + top: 60px; + left: 0; + bottom: 0; + overflow-y: auto; } -.toggle-sidebar .sidebar { margin-left: -250px; } \ No newline at end of file + +.sidebar-nav { + padding: 1rem 0; +} + +.nav-item { + margin-bottom: 0.25rem; +} + +.nav-link { + color: #495057; + padding: 0.75rem 1.5rem; + border-radius: 0; + border-left: 3px solid transparent; + transition: var(--transition); + font-weight: 500; + display: block; + text-decoration: none; +} + +.nav-link:hover { + background-color: rgba(0, 136, 207, 0.05); + color: var(--primary-color); + border-left-color: var(--primary-color); +} + +.nav-link.active-main, +.nav-link.active-submenu { + background-color: rgba(0, 136, 207, 0.1); + color: var(--primary-color); + border-left-color: var(--primary-color); + font-weight: 600; +} + +.nav-link i { + width: 20px; + text-align: center; + margin-right: 0.75rem; + color: var(--primary-color); +} + +.nav-content { + background-color: rgba(0, 136, 207, 0.03); + padding: 0.5rem 0; + border-left: 2px solid var(--border-color); + display: none; +} + +.nav-content.show { + display: block; +} + +.nav-content a { + padding-left: 3.5rem !important; + font-size: 0.8125rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +/* ========================================================================== + MAIN CONTENT + ========================================================================== */ + +.main { + padding: 1.5rem; + margin-left: 260px; + margin-top: 60px; + transition: var(--transition); + min-height: calc(100vh - 60px); + flex: 1; +} + +/* ========================================================================== + BREADCRUMB + ========================================================================== */ + +.breadcrumb { + background: white; + border-radius: var(--border-radius); + padding: 0.75rem 1rem; + margin-bottom: 1.5rem; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); + display: flex; + flex-wrap: wrap; + list-style: none; +} + +.breadcrumb-item { + display: flex; + align-items: center; +} + +.breadcrumb-item + .breadcrumb-item::before { + content: ">"; + color: var(--secondary-color); + padding: 0 0.5rem; + font-weight: normal; +} + +.breadcrumb-item a { + color: var(--primary-color); + text-decoration: none; + transition: var(--transition); +} + +.breadcrumb-item a:hover { + color: var(--primary-dark); + text-decoration: underline; +} + +.breadcrumb-item.active { + color: var(--primary-color); + font-weight: 600; +} + +/* ========================================================================== + SECONDARY NAVIGATION (TABS) + ========================================================================== */ + +.nav-link-sub { + transition: all 0.3s ease; + border-right: 1px solid var(--border-color); + padding: 1rem 1.5rem; + display: block; + text-decoration: none; + color: #495057; + font-weight: 500; + min-width: 150px; + white-space: nowrap; + text-align: center; +} + +.nav-link-sub:hover { + background-color: rgba(0, 136, 207, 0.05); + transform: translateY(-2px); +} + +.nav-link-sub.active { + background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); + color: white !important; + font-weight: 600; + box-shadow: 0 4px 12px rgba(0, 136, 207, 0.2); +} + +.nav-link-sub:last-child { + border-right: none; +} + +/* ========================================================================== + TABLES + ========================================================================== */ + +.table-modern { + background: white; + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-color); + width: 100%; + margin-bottom: 1rem; + border-collapse: collapse; +} + +.table-modern thead th { + background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); + color: white; + border: none; + padding: 0.75rem 1rem; + font-weight: 600; + font-size: 0.8125rem; + text-transform: uppercase; + letter-spacing: 0.5px; + text-align: left; +} + +.table-modern tbody tr { + transition: var(--transition); + border-bottom: 1px solid var(--border-color); +} + +.table-modern tbody tr:last-child { + border-bottom: none; +} + +.table-modern tbody tr:hover { + background-color: rgba(0, 136, 207, 0.05); + transform: translateY(-1px); +} + +.table-modern tbody td { + padding: 0.75rem 1rem; + border-top: 1px solid var(--border-color); + vertical-align: middle; +} + +/* ========================================================================== + CARDS + ========================================================================== */ + +.card-modern { + border: none; + border-radius: var(--border-radius-lg); + box-shadow: var(--shadow-sm); + transition: var(--transition); + background: var(--card-bg); + overflow: hidden; + margin-bottom: 1.5rem; +} + +.card-modern:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.card-modern .card-header { + background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); + color: white; + border: none; + padding: 1rem 1.25rem; + font-weight: 600; +} + +.card-modern .card-body { + padding: 1.25rem; +} + +/* ========================================================================== + BUTTONS + ========================================================================== */ + +.btn-modern { + border-radius: var(--border-radius); + padding: 0.5rem 1.25rem; + font-weight: 500; + transition: var(--transition); + border: none; + cursor: pointer; + display: inline-block; + text-align: center; + text-decoration: none; +} + +.btn-primary-modern { + background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); + color: white; +} + +.btn-primary-modern:hover { + background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); + color: white; + transform: translateY(-1px); + box-shadow: var(--shadow-md); +} + +/* ========================================================================== + FORMS + ========================================================================== */ + +.form-control-modern { + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + padding: 0.5rem 0.75rem; + transition: var(--transition); + font-size: 0.875rem; + width: 100%; + background-color: white; +} + +.form-control-modern:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 0.2rem rgba(0, 136, 207, 0.25); + outline: none; +} + +/* ========================================================================== + CONTEXT BAR (BARRE LATERALE D) + ========================================================================== */ + +#barre_laterale_d { + background: white; + width: 300px; + border-left: 1px solid var(--border-color); + box-shadow: var(--shadow-md); + padding: 1.5rem; + overflow-y: auto; + position: fixed; + right: 0; + top: 60px; + height: calc(100vh - 60px); + z-index: 1010; + transition: transform 0.3s ease; + transform: translateX(100%); /* Ajouté pour l'animation */ +} + +#barre_laterale_d.active { + transform: translateX(0); /* Ajouté pour l'animation */ +} + +#barre_laterale_d .card { + border: none; + box-shadow: var(--shadow-sm); + border-radius: var(--border-radius); + margin-bottom: 1rem; +} + +/* Bouton toggle pour la barre de contexte */ +.btn-context-toggle { + position: fixed; + right: 0; + top: 50%; + transform: translateY(-50%); + z-index: 1000; + border-radius: 20px 0 0 20px; + padding: 12px 8px; + transition: right 0.3s ease; + background: var(--primary-color); + color: white; + border: none; + cursor: pointer; +} + +.btn-context-toggle:hover { + right: 5px; + background: var(--primary-dark); +} + +/* Quand la barre est active, cacher le bouton toggle */ +#barre_laterale_d.active ~ .btn-context-toggle { + display: none; +} + +/* ========================================================================== + MODALS + ========================================================================== */ + +.modal.fade .modal-dialog { + transition: transform 0.3s ease-out; +} + +/* ========================================================================== + ANIMATIONS + ========================================================================== */ + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + +.fade-in { + animation: fadeIn 0.3s ease-out; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes pulse { + 0% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); + } + 70% { + transform: scale(1.05); + box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); + } + 100% { + transform: scale(1); + box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); + } +} + +/* ========================================================================== + SCROLLBAR + ========================================================================== */ + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: #a8a8a8; +} + +/* ========================================================================== + STATUS INDICATORS + ========================================================================== */ + +.status-active { + color: var(--success-color); + background-color: rgba(40, 167, 69, 0.1); + padding: 0.25rem 0.5rem; + border-radius: 50px; + font-size: 0.75rem; + font-weight: 500; + display: inline-block; +} + +.status-inactive { + color: var(--secondary-color); + background-color: rgba(108, 117, 125, 0.1); + padding: 0.25rem 0.5rem; + border-radius: 50px; + font-size: 0.75rem; + font-weight: 500; + display: inline-block; +} + +.status-warning { + color: var(--warning-color); + background-color: rgba(255, 193, 7, 0.1); + padding: 0.25rem 0.5rem; + border-radius: 50px; + font-size: 0.75rem; + font-weight: 500; + display: inline-block; +} + +/* ========================================================================== + LOADERS & OVERLAYS + ========================================================================== */ + +.loading-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.85); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + backdrop-filter: blur(3px); +} + +.loader-modern { + display: inline-block; + width: 20px; + height: 20px; + border: 3px solid #f3f3f3; + border-top: 3px solid var(--primary-color); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +.is-loading { + position: relative; + pointer-events: none; + opacity: 0.7; +} + +.is-loading::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 20px; + height: 20px; + margin: -10px 0 0 -10px; + border: 2px solid var(--primary-color); + border-top-color: transparent; + border-radius: 50%; + animation: spin 0.6s linear infinite; +} + +.badge-notification { + animation: pulse 2s infinite; +} + +/* ========================================================================== + ICONS + ========================================================================== */ + +.icon-circle { + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); + color: white; + margin-right: 1rem; +} + +/* ========================================================================== + RESPONSIVE DESIGN + ========================================================================== */ + +@media (max-width: 1199px) { + .main { + margin-left: 0; + padding: 1rem; + } + + .sidebar { + transform: translateX(-100%); + } + + .sidebar.show { + transform: translateX(0); + } + + .toggle-sidebar .sidebar { + transform: translateX(0); + } + + .toggle-sidebar .main { + margin-left: 260px; + } +} + +@media (max-width: 768px) { + .header { + padding: 0 1rem; + } + + .main { + padding: 1rem; + } + + .breadcrumb { + font-size: 0.8rem; + padding: 0.5rem; + } + + .table-modern { + font-size: 0.8rem; + } + + #barre_laterale_d { + width: 280px; + } + + .nav-link-sub { + min-width: 120px; + padding: 0.75rem 1rem; + font-size: 0.8rem; + } +} + +@media (max-width: 576px) { + .logo span { + display: none; + } + + .nav-link-sub { + min-width: 100px; + padding: 0.5rem 0.75rem; + font-size: 0.75rem; + } + + #barre_laterale_d { + width: 100%; + } +} + +/* ========================================================================== + UTILITY CLASSES + ========================================================================== */ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.d-none { + display: none !important; +} + +.d-flex { + display: flex !important; +} + +.flex-column { + flex-direction: column !important; +} + +.flex-grow-1 { + flex-grow: 1 !important; +} + +.min-vh-100 { + min-height: 100vh !important; +} + +.mt-4 { + margin-top: 1.5rem !important; +} + +.mb-4 { + margin-bottom: 1.5rem !important; +} + +.p-0 { + padding: 0 !important; +} + +.p-3 { + padding: 1rem !important; +} + +.px-2 { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; +} + +.shadow-sm { + box-shadow: var(--shadow-sm) !important; +} + +.rounded-pill { + border-radius: 50rem !important; +} + +.bg-white { + background-color: white !important; +} + +.bg-light { + background-color: var(--light-color) !important; +} + +.text-primary { + color: var(--primary-color) !important; +} + +.text-muted { + color: var(--secondary-color) !important; +} + +.fw-bold { + font-weight: 700 !important; +} + +.fw-medium { + font-weight: 500 !important; +} + +.small { + font-size: 0.875rem !important; +} + +.text-uppercase { + text-transform: uppercase !important; +} + +.text-decoration-none { + text-decoration: none !important; +} + +.align-items-center { + align-items: center !important; +} + +.justify-content-between { + justify-content: space-between !important; +} + +.overflow-auto { + overflow: auto !important; +} + +.animate__animated { + animation-duration: 1s; + animation-fill-mode: both; +} + +.animate__fadeIn { + animation-name: fadeIn; +} + +.animate__fadeInDown { + animation-name: fadeInDown; +} + +.animate__bounceIn { + animation-name: bounceIn; +} \ No newline at end of file diff --git a/Vue/contexte.php b/Vue/contexte.php index 43470231..8ccd38bc 100755 --- a/Vue/contexte.php +++ b/Vue/contexte.php @@ -1,49 +1,278 @@ - -
-
- CONTEXTE - -
- -
- -
- - + +
+
+
+ +
- - - - - -
- "0"): ?> - - -
nettoyer($_SESSION['beneficiaire_C']) ?>
-
ID: nettoyer($_SESSION['numeroBeneficiaire_C']) ?>
- -
- - -
- -
- Sécurité - -
-
\ No newline at end of file + +
+ + +
+
+
+ + +
+
+
+
+
+ nettoyer($_SESSION['codeGcAssureur_C']) ?> +
+ + + +
+ +
+
+ + +
+
+
+ + +
+
+
+
+
+ nettoyer($_SESSION['numeroClient_C']) ?> +
+ + + +
+ +
+
+ + +
+
+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + +
+
+ + + "0"): ?> +
+
+
+ <?= _(" + title=""> +
+
+
+
+ + + +
+
+
+ + +
+
+
+
+ $contextPolice): ?> + + +
+
+ +
+
+
+
+
+ +
+ + + +
+
+
+ + +
+
+
+
+ +
+
+ +
+
+
+
+ + + +
+
+
+ + +
+
+
+ + +
+ nettoyer($_SESSION['nomClient_d_C']), 0, 30) ?> +
+ + + +
+
+ +
+ +
+
+ © INTER SANTÉ +
+ + 0 +
+
+ +
+
+ \ No newline at end of file diff --git a/Vue/gabarit.php b/Vue/gabarit.php index e8a75d0f..27e72870 100755 --- a/Vue/gabarit.php +++ b/Vue/gabarit.php @@ -1,136 +1,187 @@ get_full_path($activeLink); - $fullPath = explode("\ ", $fullPath); - - $activeLevel1 = $activeLink; - $activeLevel2 = sizeof($fullPath)>1?$fullPath[1]:''; - $activeLevel3 =sizeof($fullPath)>2?$fullPath[2]:''; - $activeLevel4 = sizeof($fullPath)>3?$fullPath[3]:''; - $activeLevel5 = sizeof($fullPath)>4?$fullPath[4]:''; - - $_SESSION['firstLevelMenu']=$activeLink; - - const MAX_COMPANY_NAME_LENGTH = 20; +require_once 'gabarit_queries.php'; +$gabary = new Gabary(); - $companyDisplayName = htmlspecialchars($_SESSION['nomSociete'], ENT_QUOTES); - $modeDev = $_SESSION['modeDev_C']; - - $imgData = $_SESSION['photoAssureCrypte']; - +// Active menu tracking +$_SESSION['firstLevelMenu'] = ''; +$current_url = $_SERVER['REQUEST_URI']; +$elements = explode("/", $current_url); +$activeLink = $elements[1]; +$fullPath = $gabary->get_full_path($activeLink); +$fullPath = explode("\ ", $fullPath); + +$activeLevel1 = $activeLink; +$activeLevel2 = sizeof($fullPath) > 1 ? $fullPath[1] : ''; +$activeLevel3 = sizeof($fullPath) > 2 ? $fullPath[2] : ''; +$activeLevel4 = sizeof($fullPath) > 3 ? $fullPath[3] : ''; +$activeLevel5 = sizeof($fullPath) > 4 ? $fullPath[4] : ''; + +$_SESSION['firstLevelMenu'] = $activeLink; + +const MAX_COMPANY_NAME_LENGTH = 20; + +$companyDisplayName = htmlspecialchars($_SESSION['nomSociete'], ENT_QUOTES); +$modeDev = $_SESSION['modeDev_C']; +$imgData = $_SESSION['photoAssureCrypte']; + +// Get breadcrumb info +$infovue = $gabary->getInfosVue($_SESSION['vue']); +$descriptionVue = est_anglophone() ? $infovue['DescriptionEng'] : $infovue['Description']; +$titreRetour = est_anglophone() ? $infovue['titreRetourEng'] : $infovue['titreRetour']; +$retourVue = $infovue['lienRetour']; ?> - - - + + + - - + + + - + +
+ + - + +
- "> - - -
- getInfosVue($_SESSION['vue']); - $descriptionVue = est_anglophone() ? $infovue['DescriptionEng'] : $infovue['Description']; - $titreRetour = est_anglophone() ? $infovue['titreRetourEng'] : $infovue['titreRetour']; - $retourVue = $infovue['lienRetour']; - ?> + + + + + + + +
+ + - - 0): ?> + + + 0): ?>
-
-
+
+
- + + + + + + + + +
- + +
-
+
- + +
- + + + +