This commit is contained in:
2026-04-20 15:32:19 +02:00
commit 0858b72e31
36 changed files with 6359 additions and 0 deletions

View File

@@ -0,0 +1,319 @@
// file: kb_app/frontend/sass/_app.scss
$app-header-height: 48px;
$app-footer-height: 48px;
$sidenav-base-width: 260px;
html,
body {
height: 100%;
overflow: hidden;
}
body {
min-height: 100vh;
}
#ibackground {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
object-fit: cover;
}
#vbackground {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 2;
object-fit: cover;
}
video#vbackground:not([playsinline]) {
display: none;
}
.app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: $app-header-height;
z-index: 1030;
& nav {
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: 3px $primary solid !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 15px 150px;
border-bottom-right-radius: 75px 25px;
}
}
.app-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: $app-footer-height;
z-index: 1020;
border-style: solid;
border-width: 2px 0 0;
border-top-left-radius: 255px 25px;
border-top-right-radius: 25px 225px;
}
.app-main {
position: relative;
height: calc(100vh - $app-header-height - $app-footer-height); // plein viewport
margin-top: $app-header-height;
margin-bottom: $app-footer-height;
box-sizing: border-box;
overflow: hidden; // pas de scroll ici
z-index: 500;
}
.app-main-error {
position: relative;
height: 100vh; // plein viewport
padding-top: $app-header-height;
padding-bottom: $app-footer-height;
box-sizing: border-box;
overflow: hidden; // pas de scroll ici
background: linear-gradient(135deg, #9945ff 0%, #764ba2 100%);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
z-index: 501;
}
.app-main-error-content {
width: 100%;
& h1 {
font-size: 4rem;
margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
& p {
font-size: 1.5rem;
margin: 1rem 0 2rem;
}
}
.app-logo {
height: 42px;
width: auto;
display: block;
}
#app-dashbord {
display: flex;
height: 100%; //height: calc(100vh - var(--app-header-height) - var(--app-footer-height));
}
#app-dashbord-sidenav {
flex-basis: $sidenav-base-width;
flex-shrink: 0;
transition: transform 0.15s ease-in-out;
&[dir="ltr"] {
transform: translateX(-$sidenav-base-width);
}
&[dir="rtl"] {
transform: translateX($sidenav-base-width);
}
}
#app-dashbord-main {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
flex-grow: 1;
min-height: 100%;
&[dir="ltr"] {
margin-left: -$sidenav-base-width;
}
&[dir="rtl"] {
margin-right: -$sidenav-base-width;
}
}
// quand body a la classe .sidenav-toggled
.sidenav-toggled {
#app-dashbord-sidenav {
transform: translateX(0);
}
#app-dashbord-main {
&:before {
content: "";
display: block;
position: absolute;
inset: 0;
background: #000;
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
}
}
// breakpoint desktop : sidebar visible par défaut
@include media-breakpoint-up(lg) {
#app-dashbord-sidenav {
transform: translateX(0);
}
#app-dashbord-main {
margin-left: 0;
margin-right: 0;
transition: margin 0.15s ease-in-out;
}
.sidenav-toggled {
#app-dashbord-sidenav {
&[dir="ltr"] {
transform: translateX(-$sidenav-base-width);
}
&[dir="rtl"] {
transform: translateX($sidenav-base-width);
}
}
#app-dashbord-main {
&[dir="ltr"] {
margin-left: -$sidenav-base-width;
}
&[dir="rtl"] {
margin-right: -$sidenav-base-width;
}
&:before {
display: none;
}
}
}
}
// ------------------------------------------------------------------
// Sidebar (style SBAdmin-ish)
// ------------------------------------------------------------------
.app-sidebar.sidenav {
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
background-color: rgb(97, 53, 131, 0.7);
color: #fff;
}
.sidenav-menu {
flex-grow: 1;
.nav {
flex-direction: column;
flex-wrap: nowrap;
}
.sidenav-menu-heading {
padding: 1.5rem 1rem 0.75rem;
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.nav-link {
display: flex;
align-items: center;
padding: 0.75rem 1.25rem;
color: rgba(255, 255, 255, 0.8);
position: relative;
&:hover,
&.active {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.nav-link-icon {
font-size: 0.9rem;
margin-right: 0.5rem;
}
.sidenav-collapse-arrow {
margin-left: auto;
transition: transform 0.15s ease;
}
&.collapsed {
.sidenav-collapse-arrow {
transform: rotate(-90deg);
}
}
}
.sidenav-menu-nested {
margin-left: 1.5rem;
flex-direction: column;
}
}
.osb-scrollable {
height: 100%; // occupe toute la hauteur de .app-main
max-height: 100%; // évite de dépasser
// Pour vérifier sans OverlayScrollbars :
//
}
.hero {
padding: 2rem;
background: white;
}
.modal {
z-index: 1080;
}
.modal-backdrop {
z-index: -1;
}
.voice-output-textarea {
min-height: 320px;
resize: vertical;
font-size: 1.05rem;
line-height: 1.5;
}
#logs-card {
transition: opacity 0.15s ease-in-out;
}

View File

@@ -0,0 +1,159 @@
// file: kb_app/frontend/sass/_bootswatch.scss
// Pulse 5.3.8
// Bootswatch
// Variables
// Buttons
.btn {
&:focus,
&:active,
&:active:focus,
&.active:focus {
outline: none;
}
&-secondary {
color: $gray-900;
background-color: $white;
border-color: #ccc;
&:hover {
color: $gray-900;
background-color: $gray-300;
border-color: $gray-500;
}
&.disabled {
color: tint-color($gray-900, 5%);
background-color: $white;
border-color: tint-color(#ccc, 5%);
}
}
&-warning {
color: $white;
}
&-primary:focus {
box-shadow: 0 0 5px tint-color($primary, 10%);
}
&-secondary:focus {
box-shadow: 0 0 5px $gray-400;
}
&-success:focus {
box-shadow: 0 0 5px tint-color($success, 10%);
}
&-info:focus {
box-shadow: 0 0 5px tint-color($info, 10%);
}
&-warning:focus {
box-shadow: 0 0 5px tint-color($warning, 10%);
}
&-danger:focus {
box-shadow: 0 0 5px tint-color($danger, 10%);
}
&.disabled:focus {
box-shadow: none;
}
}
// Tables
.table .thead-dark th {
background-color: $secondary;
border-color: $table-border-color;
}
.table-primary,
.table-secondary,
.table-success,
.table-warning,
.table-danger,
.table-info,
.table-light {
--#{$prefix}table-color: #{$body-color};
}
// Forms
.form-control:focus {
box-shadow: 0 0 5px rgba(100, 65, 164, .4);
}
// Navs
.nav-tabs {
.nav-link,
.nav-link.active {
border-width: 0 0 1px;
}
.nav-link:hover,
.nav-link.active,
.nav-link.active:hover,
.nav-link.active:focus {
border-bottom: 1px solid $primary;
}
.nav-item+.nav-item {
margin-left: 0;
}
}
.breadcrumb {
&-item.active {
color: $gray-700;
}
}
// Indicators
.badge {
&.bg-light {
color: $dark;
}
}
// Progress bars
.progress {
height: 8px;
}
// Containers
.list-group {
&-item {
color: rgba(255, 255, 255, .8);
&.active,
&:hover,
&:focus {
color: $white;
}
&.active {
font-weight: 700;
&:hover {
background-color: $list-group-hover-bg;
}
}
&.disabled:hover {
color: $list-group-disabled-color;
}
}
}

View File

@@ -0,0 +1,18 @@
// file: kb_app/frontend/sass/_fontawesome.scss
//@use '@fortawesome/fontawesome-free/scss/variables' with (
// // customizing $font-path - make sure it points to where your webfonts are stored in your project
// $font-path: '../webfonts',
//);
@use '@fortawesome/fontawesome-free/scss/variables' with (
// use fonts from @fortawesome/fontawesome-free
$font-path: '@fortawesome/fontawesome-free/webfonts',
);
// load Font Awesome core
@use '@fortawesome/fontawesome-free/scss/fontawesome';
// load and make available Font Awesome helpers (mixins, functions, and variables)
@use '@fortawesome/fontawesome-free/scss/fa' as fa;
@use '@fortawesome/fontawesome-free/scss/brands' as fa-brands;
@use '@fortawesome/fontawesome-free/scss/regular' as fa-regular;
@use '@fortawesome/fontawesome-free/scss/solid' as fa-solid;

View File

@@ -0,0 +1,247 @@
// file: kb_app/frontend/sass/_simplebar.scss
/* Rtl support */
[data-simplebar] {
position: relative;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.simplebar-wrapper {
overflow: hidden;
width: inherit;
height: inherit;
max-width: inherit;
max-height: inherit;
}
.simplebar-mask {
direction: inherit;
position: absolute;
overflow: hidden;
padding: 0;
margin: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: auto !important;
height: auto !important;
// z-index: 0;
inset: 0;
}
.simplebar-offset {
direction: inherit !important;
box-sizing: inherit !important;
resize: none !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
-webkit-overflow-scrolling: touch;
inset: 0;
}
.simplebar-content-wrapper {
direction: inherit;
box-sizing: border-box !important;
position: relative;
display: block;
height: 100%;
width: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}
.simplebar-hide-scrollbar {
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
position: fixed;
left: 0;
visibility: hidden;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.simplebar-content {
&:before {
content: ' ';
display: table;
}
&:after {
content: ' ';
display: table;
}
}
.simplebar-placeholder {
max-height: 100%;
max-width: 100%;
width: 100%;
pointer-events: none;
}
.simplebar-height-auto-observer-wrapper {
box-sizing: inherit !important;
height: 100%;
width: 100%;
max-width: 1px;
position: relative;
float: left;
max-height: 1px;
overflow: hidden;
// z-index: -1;
padding: 0;
margin: 0;
pointer-events: none;
flex-grow: inherit;
flex-shrink: 0;
flex-basis: 0;
}
.simplebar-height-auto-observer {
box-sizing: inherit;
display: block;
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 1000%;
width: 1000%;
min-height: 1px;
min-width: 1px;
overflow: hidden;
pointer-events: none;
// z-index: -1;
}
.simplebar-track {
// z-index: 1;
position: absolute;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
[data-simplebar].simplebar-dragging {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.simplebar-content {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.simplebar-track {
pointer-events: all;
}
}
.simplebar-scrollbar {
position: absolute;
left: 0;
right: 0;
min-height: 10px;
&:before {
position: absolute;
content: '';
background: black;
border-radius: 7px;
left: 2px;
right: 2px;
opacity: 0;
transition: opacity 0.2s 0.5s linear;
top: 2px;
bottom: 2px;
}
}
.simplebar-scrollbar.simplebar-visible {
&:before {
opacity: 0.5;
transition-delay: 0s;
transition-duration: 0s;
}
}
.simplebar-track.simplebar-vertical {
top: 0;
width: 11px;
}
.simplebar-track.simplebar-horizontal {
left: 0;
height: 11px;
.simplebar-scrollbar {
right: auto;
left: 0;
top: 0;
bottom: 0;
min-height: 0;
min-width: 10px;
width: auto;
}
}
[data-simplebar-direction='rtl'] {
.simplebar-track.simplebar-vertical {
right: auto;
left: 0;
}
}
.simplebar-dummy-scrollbar-size {
direction: rtl;
position: fixed;
opacity: 0;
visibility: hidden;
height: 500px;
width: 500px;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: scrollbar !important;
>div {
width: 200%;
height: 200%;
margin: 10px 0;
}
}
.simplebar-hover {
cursor: pointer;
}

View File

@@ -0,0 +1,94 @@
// file: kb_app/frontend/sass/_variables.scss
// Pulse 5.3.8
// Bootswatch
$theme: "pulse" !default;
//
// Color system
//
$white: #fff !default;
$gray-100: #fafafa !default;
$gray-200: #f9f8fc !default;
$gray-300: #ededed !default;
$gray-400: #cbc8d0 !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #444 !default;
$gray-800: #343a40 !default;
$gray-900: #17141f !default;
$black: #000 !default;
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #593196 !default;
$pink: #e83e8c !default;
$red: #fc3939 !default;
$orange: #fd7e14 !default;
$yellow: #efa31d !default;
$green: #13b955 !default;
$teal: #20c997 !default;
$cyan: #009cdc !default;
$primary: $purple !default;
$secondary: #a991d4 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-200 !default;
$dark: $gray-900 !default;
$min-contrast-ratio: 2.1 !default;
// Options
$enable-rounded: false !default;
// Body
$body-color: $gray-700 !default;
// Links
$link-hover-color: $primary !default;
// Tables
$table-color: initial !default;
$table-border-color: rgba(0, 0, 0, .05) !default;
// Forms
$input-focus-border-color: $primary !default;
// Dropdowns
$dropdown-link-hover-color: $white !default;
$dropdown-link-hover-bg: $primary !default;
// Navs
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-link-hover-border-color: $primary !default;
// Navbar
$navbar-padding-y: 1.2rem !default;
// Progress bars
$progress-bg: $gray-300 !default;
$progress-bar-bg: $primary !default;
// List group
$list-group-bg: $gray-900 !default;
$list-group-border-color: transparent !default;
$list-group-hover-bg: lighten($list-group-bg, 10%) !default;
$list-group-active-color: $white !default;
$list-group-active-bg: $list-group-bg !default;
$list-group-disabled-color: lighten($list-group-bg, 30%) !default;

View File

@@ -0,0 +1,9 @@
// file: kb_app/frontend/sass/main.scss
@import "bootstrap/scss/functions";
@import "variables";
@import "fontawesome";
@import "simplebar";
@import "bootstrap/scss/bootstrap";
@import "bootswatch";
@import "app";

View File

@@ -0,0 +1,111 @@
// file: kb_app/frontend/sass/splash.scss
@font-face {
font-family: 'Dos Amazigh';
src: url('../fonts/DOS_Amazigh.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap; /* Assure un bon rendu pendant le chargement de la police */
}
body {
margin: 0;
padding: 0;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: Arial, sans-serif;
}
#splash-container {
position: relative;
width: 960px; /* Largeur exacte de votre image */
height: 637px; /* Hauteur exacte de votre image */
opacity: 0; /* Sera animé par JavaScript */
}
#splash-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#app-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Dos Amazigh', sans-serif; /* Application de la police */
font-size: 96px;
font-weight: bold;
color: #fff; /* Blanc pour contraste */
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Ombre pour meilleure lisibilité */
z-index: 2;
text-align: center;
}
#debug-info {
position: absolute;
top: 0;
left: 0;
width: 50%;
max-height: 30%;
overflow-y: auto;
color: white;
font-family: monospace;
font-size: 12px;
background-color: rgba(0, 0, 0, 0.1);
padding: 8px;
z-index: 3;
box-sizing: border-box;
}
#messages-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
max-height: 30%;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1);
padding: 10px;
padding-bottom: 40px;
z-index: 2;
box-sizing: border-box;
}
.splash-message {
margin-bottom: 8px;
padding: 6px 10px;
border-radius: 4px;
animation: fadeIn 0.3s ease-in-out;
font-weight: bold;
color: #fff;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.splash-message.info {
background-color: rgba(33, 150, 243, 0.2);
}
.splash-message.warning {
background-color: rgba(255, 152, 0, 0.2);
}
.splash-message.error {
background-color: rgba(244, 67, 54, 0.2);
}
.splash-message.success {
background-color: rgba(76, 175, 80, 0.2);
}