From 25b1c2c0351f62136acf361df03a7290c2dee528 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Tue, 24 Feb 2026 12:35:39 +0000 Subject: [PATCH] versioning --- Bootstrap_new/css/theme-modern.css | 676 ++++++++++++++++++++++++----- Vue/includes/barre-contexte.php | 143 ++++-- Vue/includes/head-meta.php | 45 +- Vue/includes/header.php | 93 ++-- Vue/includes/main-navigation.php | 71 ++- Vue/includes/modals.php | 125 +++++- Vue/includes/scripts-footer.php | 68 ++- Vue/includes/sidebar.php | 38 +- 8 files changed, 966 insertions(+), 293 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index 2c41cf8b..3ae28c30 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,198 +1,636 @@ -/* * THEME-MODERN.CSS - * Refonte UI/UX - Application Gestion Santé - */ +/* ------------------------------------------------------------------- + THEME MODERN - INTER SANTE + Style SaaS Premium, épuré, professionnel. + ------------------------------------------------------------------- */ +/* 1. Variables et réinitialisations */ :root { - --primary-color: #0d6efd; /* Bleu médical */ - --secondary-bg: #f8f9fa; - --sidebar-bg: #ffffff; + --primary: #0b5e7c; /* Bleu médical profond */ + --primary-light: #e6f0f5; + --secondary: #6c757d; + --success: #28a745; + --info: #17a2b8; + --warning: #ffc107; + --danger: #dc3545; + --light: #f8f9fa; + --dark: #343a40; + --body-bg: #f2f5f9; + --card-bg: #ffffff; + --border-color: rgba(0,0,0,0.08); --sidebar-width: 260px; - --sidebar-collapsed-width: 80px; - --border-radius: 12px; - --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); - --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); - --transition-speed: 0.3s; + --header-height: 70px; + --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --border-radius: 14px; + --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); } -/* --- Global Layout --- */ body { - font-family: 'Inter', 'Poppins', -apple-system, sans-serif; - background-color: var(--secondary-bg); - color: #444; + font-family: var(--font-family); + background-color: var(--body-bg); + color: #1e293b; + font-size: 0.95rem; } -.main { - margin-left: var(--sidebar-width); - padding: 20px 30px; - transition: all var(--transition-speed); +/* 2. Header */ +.header { + height: var(--header-height); + background-color: white; + border-bottom: 1px solid var(--border-color); + padding: 0 1.5rem; + box-shadow: 0 2px 10px rgba(0,0,0,0.02); } -.mode-test-active { - border-top: 5px solid orange; +.logo span { + font-weight: 600; + color: var(--primary); + letter-spacing: -0.3px; } -/* --- Header & Navigation --- */ -#header { - background: #fff; - box-shadow: 0 1px 10px rgba(0,0,0,0.05); - padding: 10px 20px; +.breadcrumb-nav { + margin-left: 2rem; } .breadcrumb { - border-radius: 8px; - background: transparent !important; + background: transparent; + padding: 0; + font-size: 0.9rem; } -.initials { - background-color: var(--primary-color); - color: white; - width: 35px; - height: 35px; +.breadcrumb-item a { + color: var(--secondary); +} + +.breadcrumb-item.active { + color: var(--primary); + font-weight: 500; +} + +/* Badge mode test */ +.test-badge { + background-color: #ffc107; + color: #1e1e1e; + font-size: 0.7rem; + font-weight: 600; + padding: 0.2rem 0.8rem; + border-radius: 30px; + letter-spacing: 0.3px; + text-transform: uppercase; +} + +/* Infos entité */ +.entity-info { display: flex; align-items: center; - justify-content: center; - border-radius: 50%; - font-weight: bold; + gap: 0.75rem; } -/* --- Sidebar (Navigation Latérale) --- */ +.entity-logo { + width: 80px; + max-height: 40px; + object-fit: contain; +} + +.entity-name { + font-weight: 500; + color: var(--dark); + max-width: 150px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Initiales utilisateur */ +.user-initials { + display: inline-flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + background: var(--primary); + color: white; + font-weight: 600; + font-size: 1rem; + border-radius: 10px; + text-transform: uppercase; + transition: var(--transition); +} + +.user-initials:hover { + transform: scale(1.05); + box-shadow: 0 4px 12px rgba(11, 94, 124, 0.3); +} + +/* 3. Sidebar */ .sidebar { width: var(--sidebar-width); - background: var(--sidebar-bg); - border-right: 1px solid #eee; - padding: 15px; + background: white; + border-right: 1px solid var(--border-color); + padding: 1.5rem 0.5rem; + transition: width 0.3s ease; } .sidebar-nav .nav-link { - border-radius: var(--border-radius); - padding: 12px 15px; + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.7rem 1rem; + color: #4b5563; + border-radius: 12px; + margin-bottom: 0.2rem; + transition: all 0.2s; font-weight: 500; - color: #555; - transition: 0.2s; } -.sidebar-nav .nav-link:hover, -.sidebar-nav .nav-link.active-main { - background: #f0f7ff; - color: var(--primary-color); +.sidebar-nav .nav-link i:first-child { + font-size: 1.3rem; + width: 1.75rem; + color: var(--primary); + transition: all 0.2s; } -.sidebar-nav .nav-link i { - font-size: 1.2rem; - margin-right: 10px; - color: #888; +.sidebar-nav .nav-link:hover { + background: var(--primary-light); + color: var(--primary); } -.sidebar-nav .nav-link.active-main i { - color: var(--primary-color); +.sidebar-nav .nav-link[aria-expanded="true"] { + background: var(--primary-light); + color: var(--primary); } -/* --- Barre de Contexte (Droite) --- */ -#barre_laterale_d { - position: fixed; - top: 0; - right: -350px; /* Caché par défaut */ - width: 320px; - height: 100vh; - background: #fff; - z-index: 1050; - transition: right 0.3s ease-in-out; - box-shadow: -5px 0 25px rgba(0,0,0,0.1); +/* Sous-menus */ +.nav-content { + padding-left: 2.5rem; + list-style: none; } -#barre_laterale_d.open { - right: 0; /* Apparaît au clic */ +.nav-content a { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 0; + color: #6b7280; + font-size: 0.9rem; + text-decoration: none; + transition: all 0.2s; + border-radius: 10px; } -.btn-info-context { - position: fixed; - right: 20px; - bottom: 20px; - background: var(--primary-color); - color: #fff; - border-radius: 50px; - padding: 12px 20px; - border: none; - box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3); - z-index: 1001; +.nav-content a i { + font-size: 0.5rem; + color: #9ca3af; } -/* --- Main Navigation (Scrollmenu) --- */ +.nav-content a:hover, +.nav-content a.active { + color: var(--primary); + background: transparent; +} + +.nav-content a.active i { + color: var(--primary); +} + +/* 4. Main content */ +.main { + margin-left: var(--sidebar-width); + padding: calc(var(--header-height) + 20px) 1.5rem 1.5rem 1.5rem; + transition: margin-left 0.3s ease; +} + +/* Quand la sidebar est réduite */ +.sidebar-collapsed .main { + margin-left: 80px; +} + +/* Scrollmenu (sous-navigation) */ .scrollmenu { - overflow: auto; - white-space: nowrap; - padding: 10px 0; - background: #fff; - border-radius: var(--border-radius); - margin-bottom: 20px; - box-shadow: var(--soft-shadow); + background: white; + border-radius: 50px; + padding: 0.3rem; + margin-bottom: 2rem; + display: inline-flex; + flex-wrap: wrap; + gap: 0.2rem; + box-shadow: 0 2px 8px rgba(0,0,0,0.02); + border: 1px solid var(--border-color); } .scrollmenu a { - display: inline-block; - padding: 10px 20px; + padding: 0.5rem 1.2rem; + border-radius: 40px; + font-size: 0.9rem; + font-weight: 500; + color: var(--secondary); text-decoration: none; - color: #666; - border-radius: 20px; - margin: 0 5px; + transition: all 0.2s; + white-space: nowrap; } .scrollmenu a:hover { - background-color: var(--secondary-bg); - color: var(--primary-color); + background: var(--primary-light); + color: var(--primary); } -/* --- Cards & UI Elements --- */ +/* 5. Cartes et conteneurs */ .card { + background: var(--card-bg); border: none; border-radius: var(--border-radius); - box-shadow: var(--soft-shadow); - transition: transform 0.2s; + box-shadow: var(--box-shadow); + transition: transform 0.2s, box-shadow 0.2s; } .card:hover { + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); +} + +/* 6. Barre de contexte (Drawer) */ +.btn-context-toggle { + position: fixed; + right: 20px; + top: 50%; + transform: translateY(-50%); + z-index: 1040; + background: var(--primary); + color: white; + border: none; + width: 48px; + height: 48px; + border-radius: 30px 0 0 30px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.2rem; + box-shadow: -4px 4px 15px rgba(0,0,0,0.1); + cursor: pointer; + transition: all 0.3s; + font-size: 1.1rem; + border-right: none; +} + +.btn-context-toggle:hover { + background: #094c66; + right: 15px; +} + +.context-drawer { + position: fixed; + top: 0; + right: -450px; /* Caché par défaut */ + width: 400px; + height: 100vh; + background: white; + box-shadow: -5px 0 30px rgba(0,0,0,0.1); + z-index: 1050; + transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); + border-left: 1px solid var(--border-color); +} + +.context-drawer.show { + right: 0; +} + +.context-drawer-content { + display: flex; + flex-direction: column; + height: 100%; +} + +.drawer-header { + padding: 1.2rem 1.5rem; + border-bottom: 1px solid var(--border-color); + display: flex; + align-items: center; + justify-content: space-between; +} + +.drawer-title { + font-weight: 600; + color: var(--primary); + margin: 0; + font-size: 1.1rem; +} + +.drawer-body { + flex: 1; + overflow-y: auto; + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1.5rem; +} + +.context-card { + background: var(--light); + border-radius: 16px; + overflow: hidden; + border: 1px solid var(--border-color); +} + +.context-card-header { + background: rgba(0,0,0,0.02); + padding: 0.6rem 1rem; + font-weight: 600; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.3px; + color: var(--secondary); + border-bottom: 1px solid var(--border-color); +} + +.context-card-header i { + margin-right: 0.5rem; + color: var(--primary); +} + +.context-card-body { + padding: 1rem; +} + +.context-link { + font-weight: 600; + color: var(--primary); + text-decoration: none; + font-size: 1rem; +} + +.context-link:hover { + text-decoration: underline; +} + +.family-stats { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + margin-top: 0.5rem; +} + +.family-stats .badge { + background: white !important; + color: var(--dark) !important; + border: 1px solid var(--border-color); + font-weight: 400; + padding: 0.4rem 0.6rem; +} + +.beneficiary-photo { + width: 60px; + height: 60px; + object-fit: cover; + border: 2px solid white; + box-shadow: 0 4px 8px rgba(0,0,0,0.05); + cursor: pointer; +} + +/* 7. Tableaux modernes */ +.table { + --bs-table-bg: transparent; + border-collapse: separate; + border-spacing: 0 8px; + margin-top: -8px; +} + +.table thead th { + background: transparent; + color: var(--secondary); + font-weight: 500; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.3px; + border: none; + padding: 0.75rem 1rem; +} + +.table tbody tr { + background: white; + border-radius: 16px; + box-shadow: 0 2px 8px rgba(0,0,0,0.02); + transition: all 0.2s; +} + +.table tbody tr:hover { + box-shadow: 0 8px 20px rgba(0,0,0,0.06); transform: translateY(-2px); } -.btn { - border-radius: 8px; - padding: 8px 16px; +.table tbody td { + padding: 1rem 1rem; + border: none; + vertical-align: middle; +} + +.table tbody td:first-child { + border-top-left-radius: 16px; + border-bottom-left-radius: 16px; +} + +.table tbody td:last-child { + border-top-right-radius: 16px; + border-bottom-right-radius: 16px; +} + +/* Badges de statut */ +.badge-statut { + padding: 0.35rem 1rem; + border-radius: 30px; font-weight: 500; + font-size: 0.75rem; + display: inline-block; } -.btn-info { - background-color: #08C5D1; - border: none; +.badge-statut.valide { + background: #d4edda; + color: #155724; +} + +.badge-statut.rejete { + background: #f8d7da; + color: #721c24; +} + +.badge-statut.attente { + background: #fff3cd; + color: #856404; +} + +/* 8. Boutons personnalisés */ +.btn { + border-radius: 12px; + padding: 0.5rem 1.2rem; + font-weight: 500; + transition: all 0.2s; +} + +.btn-primary { + background: var(--primary); + border-color: var(--primary); +} + +.btn-primary:hover { + background: #094c66; + border-color: #094c66; + transform: translateY(-2px); + box-shadow: 0 8px 16px rgba(11, 94, 124, 0.2); +} + +.btn-outline-primary { + border-color: var(--primary); + color: var(--primary); +} + +.btn-outline-primary:hover { + background: var(--primary); color: white; + transform: translateY(-2px); } -/* --- Modals Modernisation --- */ +/* 9. Formulaires */ +.form-control, .form-select { + border-radius: 12px; + border: 1.5px solid #e9ecef; + padding: 0.5rem 1rem; + transition: all 0.2s; +} + +.form-control:focus, .form-select:focus { + border-color: var(--primary); + box-shadow: 0 0 0 4px rgba(11, 94, 124, 0.1); +} + +/* 10. Modals */ .modal-content { - border-radius: var(--border-radius); border: none; - box-shadow: 0 20px 40px rgba(0,0,0,0.1); + border-radius: 24px; + box-shadow: 0 30px 60px rgba(0,0,0,0.2); } .modal-header { - border-bottom: 1px solid #f1f1f1; - background: #fafafa; + background: white; + color: var(--dark); + border-bottom: 1px solid var(--border-color); + padding: 1.2rem 1.5rem; } -/* --- Tables (DataTables Custom) --- */ -.table { - border-collapse: separate; - border-spacing: 0 8px; +.modal-header .close { + background: transparent; + color: var(--secondary); + border: none; + font-size: 1.5rem; } -.table tr { - background: #fff; - box-shadow: 0 2px 4px rgba(0,0,0,0.02); +/* ================================================= */ +/* AMÉLIORATIONS SPÉCIFIQUES POUR LES MODALS */ +/* ================================================= */ + +/* Animation d'entrée des modals */ +.modal.fade .modal-dialog { + transform: scale(0.95); + transition: transform 0.2s ease-out, opacity 0.2s ease-out; + opacity: 0; } -.table td, .table th { - padding: 15px; - border: none !important; +.modal.show .modal-dialog { + transform: scale(1); + opacity: 1; } -.table tr td:first-child { border-radius: 10px 0 0 10px; } -.table tr td:last-child { border-radius: 0 10px 10px 0; } \ No newline at end of file +/* Style des boutons dans les modals */ +.modal-footer .btn-light { + background: white; + border: 1px solid var(--border-color); + border-radius: 10px; + padding: 0.6rem 1.5rem; + font-weight: 500; +} + +.modal-footer .btn-light:hover { + background: var(--light); + border-color: var(--secondary); +} + +/* Zone de contenu des messages */ +.messagerie-container { + min-height: 200px; + max-height: 60vh; + overflow-y: auto; +} + +/* Style des messages individuels (si chargés dynamiquement) */ +.message-item { + padding: 1rem; + border-bottom: 1px solid var(--border-color); + transition: background 0.2s; +} + +.message-item:hover { + background: var(--primary-light); +} + +.message-item.unread { + background: #f0f7ff; + border-left: 3px solid var(--primary); +} + +.message-date { + font-size: 0.8rem; + color: var(--secondary); +} + +/* ================================================= */ +/* AMÉLIORATIONS POUR LE SCROLLMENU */ +/* ================================================= */ + +.scrollmenu-wrapper { + margin-bottom: 2rem; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + scrollbar-width: thin; + padding-bottom: 0.5rem; +} + +.scrollmenu { + display: inline-flex; + background: white; + border-radius: 50px; + padding: 0.3rem; + gap: 0.2rem; + border: 1px solid var(--border-color); + box-shadow: 0 2px 8px rgba(0,0,0,0.02); + min-width: min-content; +} + +.scrollmenu-item { + padding: 0.6rem 1.5rem; + border-radius: 40px; + font-size: 0.9rem; + font-weight: 500; + color: var(--secondary); + text-decoration: none; + transition: all 0.2s; + white-space: nowrap; +} + +.scrollmenu-item:hover { + background: var(--primary-light); + color: var(--primary); +} + +.scrollmenu-item.active { + background: var(--primary); + color: white; +} + +/* ================================================= */ +/* ZONE DES INPUTS CACHÉS (invisible mais présents) */ +/* ================================================= */ + +.hidden-inputs { + display: none; +} + +/* Alternative pour garder les inputs accessibles mais invisibles */ +.hidden-inputs input[type="hidden"] { + display: none; +} \ No newline at end of file diff --git a/Vue/includes/barre-contexte.php b/Vue/includes/barre-contexte.php index c3e4c333..223b0ddd 100644 --- a/Vue/includes/barre-contexte.php +++ b/Vue/includes/barre-contexte.php @@ -1,37 +1,116 @@ - - \ No newline at end of file + \ No newline at end of file diff --git a/Vue/includes/head-meta.php b/Vue/includes/head-meta.php index 80ddcb53..058b863b 100644 --- a/Vue/includes/head-meta.php +++ b/Vue/includes/head-meta.php @@ -1,38 +1,35 @@ - + - + + - - - - - + + + + - - - - + + - - - - + + -<?= $_SESSION['descriptionVue'] ?? 'INTER SANTE' ?> \ No newline at end of file + + + +<?= $_SESSION['descriptionVue'] ?? 'INTER SANTE' ?> + + + + \ No newline at end of file diff --git a/Vue/includes/header.php b/Vue/includes/header.php index 655dccc7..37b446e5 100644 --- a/Vue/includes/header.php +++ b/Vue/includes/header.php @@ -1,61 +1,76 @@