commit

2026-01-11 19:23:49 +01:00
parent ecbddd3a58
commit 40917f52d4
6 changed files with 309 additions and 177 deletions
--- a/front_end/src/App.css
+++ b/front_end/src/App.css
@@ -1,40 +1,52 @@
 /* Variables de thème */
 [data-theme='dark'] {
-  --tint0: #000000;
-  --tint1: #0b0c0e;
-  --tint2: #16181d;
-  --tint3: #21252b;
-  --tint4: #2c313a;
-  --tint5: #373d48;
-  --text: #FFFFFF;
+  --tint0: #0a0e27;
+  --tint1: #1a1f3a;
+  --tint2: #232d4a;
+  --tint3: #2e3a59;
+  --tint4: #3d4a6f;
+  --tint5: #4a5a85;
+  --text: #f0f4f8;
  --text2: #000000;
  --disable: #02291d;
  --green-primary: #10b981;
  --green-secondary: #059669;
  --green-dark: #047857;
-  --green-A-primary: #10b98120;
-  --green-A-secondary: #05966920;
-  --green-A-dark: #04785720;
-  --themeButtonColor : #00AAFF;
+  --green-A-primary: #10b98130;
+  --green-A-secondary: #05966930;
+  --green-A-dark: #04785730;
+  --themeButtonColor: #00AAFF;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
+  --blue-accent: #3b82f6;
+  --purple-accent: #a78bfa;
+  --cyan-accent: #06b6d4;
 }

 [data-theme='light'] {
-  --tint0: #ffffff;
-  --tint1: #f4f1f1;
-  --tint2: #e8e4e3;
-  --tint3: #ddd6d5;
-  --tint4: #d2c8c6;
-  --tint5: #c6bab8;
-  --text: #000000;
+  --tint0: #f8fafc;
+  --tint1: #f1f5f9;
+  --tint2: #e2e8f0;
+  --tint3: #cbd5e1;
+  --tint4: #b0bac4;
+  --tint5: #94a3b8;
+  --text: #0f172a;
  --text2: #FFFFFF;
  --disable: #02291d;
-  --green-primary: #00ce89;
-  --green-secondary: #00a571;
-  --green-dark: #00825d;
-  --green-A-primary: #00ce8920;
-  --green-A-secondary: #00a57120;
-  --green-A-dark: #00825d20;
-  --themeButtonColor : #FFAA00;
+  --green-primary: #10b981;
+  --green-secondary: #059669;
+  --green-dark: #047857;
+  --green-A-primary: #10b98125;
+  --green-A-secondary: #05966925;
+  --green-A-dark: #04785725;
+  --themeButtonColor: #f59e0b;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
+  --blue-accent: #3b82f6;
+  --purple-accent: #a855f7;
+  --cyan-accent: #06b6d4;
 }

 /* Reset et base */
@@ -46,17 +58,18 @@

 body {
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  background-color: var(--tint0);
+  background: linear-gradient(135deg, var(--tint0) 0%, var(--tint1) 100%);
  color: var(--text);
-  transition: background-color 0.3s ease, color 0.3s ease;
+  transition: background 0.4s ease, color 0.4s ease;
+  font-weight: 400;
+  line-height: 1.6;
 }

-.padding{
+.padding {
  padding: 10px
 }

@@ -71,10 +84,23 @@ code {
  color: var(--green-primary);
 }

-.App{
+.App {
  display: grid;
-  padding: 10px;
-  gap:10px;
+  padding: 20px;
+  gap: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.App h1 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 8px;
+  letter-spacing: -0.5px;
 }

 /* Container principal */
@@ -83,16 +109,23 @@ code {
  background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%);
 }

-.composant-padding{
- padding: 10px;
+.composant-padding {
+  padding: 10px;
 }

-.composant-container{
-  background-color: var(--tint2);
-  border-radius: 30px;
-  padding: 10px;
-  border: 2px solid var(--tint4);
-  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1);
+.composant-container {
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  border-radius: 24px;
+  padding: 24px;
+  border: 1px solid var(--tint4);
+  box-shadow: var(--shadow-lg);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.composant-container:hover {
+  border-color: var(--green-primary);
+  box-shadow: 0 12px 40px var(--green-A-primary);
+  transform: translateY(-2px);
 }

 /* Header / Navigation */
@@ -134,18 +167,18 @@ code {

 /* Cards et containers */
 .card {
-  background-color: var(--tint1);
+  background: linear-gradient(135deg, var(--tint1) 0%, var(--tint2) 100%);
  border-radius: 20px;
-  padding: 20px;
-  border: 2px solid var(--green-A-secondary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
+  padding: 24px;
+  border: 1px solid var(--tint4);
+  box-shadow: var(--shadow-md);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .card:hover {
  border-color: var(--green-primary);
-  box-shadow: 0 6px 16px var(--green-A-primary);
-  transform: translateY(-2px);
+  box-shadow: 0 8px 24px var(--green-A-primary);
+  transform: translateY(-4px);
 }

 .card-header {
@@ -171,20 +204,21 @@ input[type="time"],
 input[type="search"],
 input[type="datetime-local"],
 textarea {
-  background-color: var(--tint3);
+  background-color: var(--tint2);
  color: var(--text);
-  border: 2px solid var(--tint5);
-  border-radius: 8px;
-  padding: 10px 14px;
-  transition: all 0.3s ease;
+  border: 1px solid var(--tint4);
+  border-radius: 12px;
+  padding: 12px 14px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 15px;
+  font-family: inherit;
 }

 input:focus,
 textarea:focus {
  outline: none;
  border-color: var(--green-primary);
-  background-color: var(--tint3);
+  background-color: var(--tint1);
  box-shadow: 0 0 0 3px var(--green-A-primary);
 }

@@ -227,23 +261,29 @@ select option {
 /* Buttons */
 button {
  color: var(--text);
-  background-color: var(--tint3);
-  border: 2px solid var(--tint5);
-  border-radius: 8px;
-  padding: 5px 10px;
+  background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
+  border: 1px solid var(--tint4);
+  border-radius: 12px;
+  padding: 10px 16px;
  cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: 500;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 600;
  font-size: 14px;
  display: inline-block;
  width: auto;
+  box-shadow: var(--shadow-sm);
 }

 button:hover {
-  background-color: var(--tint4);
+  background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
  border-color: var(--green-primary);
+  color: white;
  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 6px 20px var(--green-A-primary);
+}
+
+button:active {
+  transform: translateY(0);
 }

 button:active {
@@ -430,7 +470,8 @@ td {


 /* Lists */
-ul, ol {
+ul,
+ol {
  color: var(--text);
  padding-left: 20px;
 }
@@ -547,6 +588,7 @@ input[type="radio"] {
  from {
    opacity: 0;
  }
+
  to {
    opacity: 1;
  }
@@ -557,6 +599,7 @@ input[type="radio"] {
    opacity: 0;
    transform: translateY(20px);
  }
+
  to {
    opacity: 1;
    transform: translateY(0);
--- a/front_end/src/components/style/createSession.css
+++ b/front_end/src/components/style/createSession.css
@@ -1,5 +1,13 @@
-.createActivite{
-    background: var(--tint1);
-    padding: 15px;
-    border-radius: 15px;
+.createActivite {
+    background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+    padding: 20px;
+    border-radius: 16px;
+    border: 1px solid var(--tint4);
+    box-shadow: var(--shadow-md);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.createActivite:hover {
+    border-color: var(--green-primary);
+    box-shadow: 0 8px 24px var(--green-A-primary);
 }
--- a/front_end/src/components/style/edt.css
+++ b/front_end/src/components/style/edt.css
@@ -1,17 +1,24 @@
-.edt{
-  background-color: var(--tint2);
-  border-radius: 30px;
-  padding: 10px;
-  border: 2px solid var(--tint4);
-  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1);
+.edt {
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  border-radius: 24px;
+  padding: 20px;
+  border: 1px solid var(--tint4);
+  box-shadow: var(--shadow-lg);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

-.edt_header{
+.edt:hover {
+  border-color: var(--green-primary);
+  box-shadow: 0 12px 40px var(--green-A-primary);
+}
+
+.edt_header {
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(3, 0.5fr);
-  padding-bottom: 10px;
-  gap: 5%;
+  padding-bottom: 16px;
+  gap: 12px;
+  margin-bottom: 12px;
 }

 .edt_colonnes {
@@ -24,7 +31,7 @@
  width: 100%;
 }

-.edt_loading{
+.edt_loading {
  position: absolute;
  inset: 0;
  display: grid;
@@ -32,31 +39,38 @@
 }

 .edt_colonne {
-  background-color: var(--tint3);
-  border-radius: 20px;
-  transition: all 0.3s ease;
+  background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
+  border-radius: 16px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
+  border: 1px solid var(--tint4);
+  padding: 12px;
 }


-.edt_day_header{
+.edt_day_header {
  font-size: clamp(5px, 1vw, 18px);
-  padding: 8px;
-  border-radius: 20px;
+  padding: 12px;
+  border-radius: 12px;
  height: fit-content;
  text-align: center;
  font-size: 1em;
-  background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-dark)); 
-  font-weight: 600;
+  background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
+  font-weight: 700;
  font-size: large;
+  color: white;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

-.today{
-  background: linear-gradient(135deg, var(--green-primary), var(--green-dark)); 
+.today {
+  background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%);
  color: #FFFFFF;
+  box-shadow: 0 6px 20px var(--green-A-primary);
+  transform: scale(1.02);
 }

-.edt_day_content{
+.edt_day_content {
  display: flex;
  flex-direction: column;
  gap: 8px;
@@ -68,39 +82,39 @@
 .edt_session {
  font-size: clamp(1px, 8cqi, 18px);
  gap: 8px;
-  background-color: var(--tint4);
+  background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%);
  border-radius: 12px;
-  padding: 5%;
+  padding: 12px;
  min-width: 0;
-  border-left: 3px solid var(--green-primary); /* Accent vert à gauche */
-  transition: all 0.3s ease;
+  border-left: 4px solid var(--green-primary);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
+  box-shadow: var(--shadow-sm);
 }

 .edt_session:hover {
-  background-color: var(--tint2);
-  border-left-width: 5px;
-  transform: translateX(3px);
-  box-shadow: -2px 2px 8px var(--green-A-primary);
+  background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary));
+  border-left-width: 6px;
+  transform: translateX(4px);
+  box-shadow: 0 8px 16px var(--green-A-primary);
 }

 .edt_session:active {
-  background-color: var(--tint5);
  transform: translateX(1px);
 }

-.edt_session_header{
+.edt_session_header {
  display: flex;
  gap: 5px;
 }

-.edt_date{
+.edt_date {
  font-size: 0.75em;
  font-weight: 500;
 }

-.edt_button_week_select{
-  background: linear-gradient(135deg, var(--green-primary), var( --green-secondary));
+.edt_button_week_select {
+  background: linear-gradient(135deg, var(--green-primary), var(--green-secondary));
  color: white;
  height: 40px;
  border-radius: 20px;
@@ -123,7 +137,7 @@
  box-shadow: 0 1px 2px var(--green-A-primary);
 }

-.edt_session_modal{
+.edt_session_modal {
  background-color: var(--tint2);
  padding: 10px;
  border-radius: 20px;
@@ -132,14 +146,14 @@
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--green-A-primary);
 }

-.ent_activite_list{
+.ent_activite_list {
  padding: 10px;
  background-color: var(--tint3);
  border-radius: 10px;
  border: 1px solid var(--green-A-primary);
 }

-.edt_activite_modal{
+.edt_activite_modal {
  background-color: var(--tint3);
  padding: 10px;
  border-radius: 20px;
--- a/front_end/src/components/style/objectList.css
+++ b/front_end/src/components/style/objectList.css
@@ -1,65 +1,85 @@
 .list_object{
  display: grid;
-  gap:10px;
-  background-color: var(--tint1);
-  padding: 10px;
-  border-radius: 20px;
+  gap: 12px;
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid var(--tint4);
+  box-shadow: var(--shadow-md);
 }

 .list_object_modal{
  display: grid;
-  gap:10px;
-  background-color: var(--tint1);
-  padding: 10px;
-  border-radius: 20px;
-  max-height: 200px;
+  gap: 12px;
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  padding: 16px;
+  border-radius: 16px;
+  max-height: 280px;
  overflow-y: auto;
+  border: 1px solid var(--tint4);
 }

 .object {
-  
  font-size: clamp(1px, 8cqi, 18px);
  gap: 8px;
-  background-color: var(--tint3);
+  background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
  border-radius: 12px;
-  padding: 10px;
+  padding: 12px;
  min-width: 0;
-  border: 2px solid;
-  border-color: var(--tint3);
+  border: 1px solid var(--tint4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-sm);
 }
+
 .object:hover {
-  background-color: var(--tint2);
+  background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary));
  border-color: var(--green-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px var(--green-A-primary);
 }

 .object:active {
-  background-color: var(--tint4);
+  background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%);
+  transform: translateY(0);
 }
+
 .object_header{
  display: flex;
-  gap: 5px;
+  gap: 8px;
+  align-items: center;
+  font-weight: 600;
 }

 .object_small{
  font-size: 0.75em;
+  opacity: 0.8;
 }

 .object_modal{
-  background-color: var(--tint2);
-  padding: 10px;
-  border-radius: 20px;
+  background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+  padding: 14px;
+  border-radius: 12px;
  position: relative;
+  border: 1px solid var(--tint4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.object_modal:hover {
+  border-color: var(--green-primary);
+  box-shadow: 0 4px 12px var(--green-A-primary);
 }

 .session_modal_activite_list{
  display: grid;
-  padding: 10px;
-  background-color: var(--tint3);
-  border-radius: 10px;
-  gap: 5px;
+  padding: 12px;
+  background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
+  border-radius: 12px;
+  gap: 8px;
+  border: 1px solid var(--tint4);
 }

 .activiteList{
  display: flex;
-  gap: 10px;
-}
+  gap: 12px;
+  flex-wrap: wrap;
+}
--- a/front_end/src/components/style/topBar.css
+++ b/front_end/src/components/style/topBar.css
@@ -1,69 +1,104 @@
-.topBar{
+.topBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    padding:15px;
-    background: var(--tint2);
-    border-radius: 30px;
-    height: 60px;
-    border: 3px solid var(--tint5);
+    padding: 16px 24px;
+    background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+    border-radius: 20px;
+    height: auto;
+    min-height: 70px;
+    border: 1px solid var(--tint4);
+    box-shadow: var(--shadow-md);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

-.toBarLeft{
+.topBar:hover {
+    border-color: var(--green-primary);
+    box-shadow: 0 8px 32px var(--green-A-primary);
+}
+
+.toBarLeft {
    display: flex;
-    gap: 10px;
+    gap: 16px;
    align-items: center;
+    font-weight: 600;
+}
+
+.toBarLeft h2 {
+    background: linear-gradient(135deg, var(--green-primary) 0%, var(--cyan-accent) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0;
+    font-size: 1.5rem;
 }


-.topBarRight{
+.topBarRight {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
 }

-.loginContainer{
+.loginContainer {
    position: relative;
 }

-.login{
-    position:absolute;
+.login {
+    position: absolute;
    right: 0;
-    top: 1;
+    top: calc(100% + 8px);
    display: grid;
-    gap:15px;
+    gap: 12px;
    width: fit-content;
    white-space: nowrap;
    align-items: left;
-    background: var(--tint2) ;
-    padding: 10px;
-    border-radius: 15px;
-    border: 3px solid var(--tint5);
+    background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
+    padding: 16px;
+    border-radius: 16px;
+    border: 1px solid var(--tint4);
+    box-shadow: var(--shadow-lg);
+    z-index: 1000;
+    backdrop-filter: blur(10px);
 }

-.loginButton{
+.loginButton {
    width: 120px;
    height: 30px;
    border-radius: 15px;
 }


-.ButtonTheme{
-    height: 40px;
-    width: 40px;
+.ButtonTheme {
+    height: 44px;
+    width: 44px;
    color: var(--text);
-    background-color: var(--tint3);
-    border-radius: 15px;
-    font-size: 16px;
-    border-color: var(--tint5);
+    background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
+    border: 1px solid var(--tint4);
+    border-radius: 12px;
+    font-size: 18px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

-.ButtonTheme:hover{
+.ButtonTheme:hover {
    border-color: var(--themeButtonColor);
    color: var(--themeButtonColor);
+    box-shadow: 0 4px 12px rgba(0, 170, 255, 0.3);
+    transform: scale(1.05) rotateZ(-180deg);
 }

-.logo{
-    height: 30px;
+.logo {
+    height: 40px;
+    filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.3));
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.logo:hover {
+    transform: scale(1.1) rotateY(10deg);
 }