vuminh224/hackathon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

merge + clean

Browse Source
This commit is contained in:
trochas
2026-01-11 20:39:36 +01:00
parent c8c98cadeb 40917f52d4
commit 6ed94c17b5
9 changed files with 309 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
front_end/src/App.css
View File

@@ -1,40 +1,52 @@
/* Variables de thème */ /* Variables de thème */
[data-theme='dark'] { [data-theme='dark'] {
--tint0: #000000; --tint0: #0a0e27;
--tint1: #0b0c0e; --tint1: #1a1f3a;
--tint2: #16181d; --tint2: #232d4a;
--tint3: #21252b; --tint3: #2e3a59;
--tint4: #2c313a; --tint4: #3d4a6f;
--tint5: #373d48; --tint5: #4a5a85;
--text: #FFFFFF; --text: #f0f4f8;
--text2: #000000; --text2: #000000;
--disable: #02291d; --disable: #02291d;
--green-primary: #10b981; --green-primary: #10b981;
--green-secondary: #059669; --green-secondary: #059669;
--green-dark: #047857; --green-dark: #047857;
--green-A-primary: #10b98120; --green-A-primary: #10b98130;
--green-A-secondary: #05966920; --green-A-secondary: #05966930;
--green-A-dark: #04785720; --green-A-dark: #04785730;
--themeButtonColor : #00AAFF; --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'] { [data-theme='light'] {
--tint0: #ffffff; --tint0: #f8fafc;
--tint1: #f4f1f1; --tint1: #f1f5f9;
--tint2: #e8e4e3; --tint2: #e2e8f0;
--tint3: #ddd6d5; --tint3: #cbd5e1;
--tint4: #d2c8c6; --tint4: #b0bac4;
--tint5: #c6bab8; --tint5: #94a3b8;
--text: #000000; --text: #0f172a;
--text2: #FFFFFF; --text2: #FFFFFF;
--disable: #02291d; --disable: #02291d;
--green-primary: #00ce89; --green-primary: #10b981;
--green-secondary: #00a571; --green-secondary: #059669;
--green-dark: #00825d; --green-dark: #047857;
--green-A-primary: #00ce8920; --green-A-primary: #10b98125;
--green-A-secondary: #00a57120; --green-A-secondary: #05966925;
--green-A-dark: #00825d20; --green-A-dark: #04785725;
--themeButtonColor : #FFAA00; --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 */ /* Reset et base */
@@ -46,17 +58,18 @@
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-color: var(--tint0); background: linear-gradient(135deg, var(--tint0) 0%, var(--tint1) 100%);
color: var(--text); 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 padding: 10px
} }
@@ -71,10 +84,23 @@ code {
color: var(--green-primary); color: var(--green-primary);
} }
.App{ .App {
display: grid; display: grid;
padding: 10px; padding: 20px;
gap:10px; 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 */ /* Container principal */
@@ -83,18 +109,20 @@ code {
background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%); background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%);
} }
.composant-padding{ .composant-padding {
padding: 10px; padding: 10px;
} }
.composant-container{ .composant-container {
background-color: var(--tint2); background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
border-radius: 30px; border-radius: 24px;
padding: 10px; padding: 24px;
border: 2px solid var(--tint4); border: 1px solid var(--tint4);
box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1); box-shadow: var(--shadow-lg);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
/* Header / Navigation */ /* Header / Navigation */
.app-header { .app-header {
background-color: var(--tint1); background-color: var(--tint1);
@@ -134,18 +162,18 @@ code {
/* Cards et containers */ /* Cards et containers */
.card { .card {
background-color: var(--tint1); background: linear-gradient(135deg, var(--tint1) 0%, var(--tint2) 100%);
border-radius: 20px; border-radius: 20px;
padding: 20px; padding: 24px;
border: 2px solid var(--green-A-secondary); border: 1px solid var(--tint4);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-md);
transition: all 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.card:hover { .card:hover {
border-color: var(--green-primary); border-color: var(--green-primary);
box-shadow: 0 6px 16px var(--green-A-primary); box-shadow: 0 8px 24px var(--green-A-primary);
transform: translateY(-2px); transform: translateY(-4px);
} }
.card-header { .card-header {
@@ -171,20 +199,21 @@ input[type="time"],
input[type="search"], input[type="search"],
input[type="datetime-local"], input[type="datetime-local"],
textarea { textarea {
background-color: var(--tint3); background-color: var(--tint2);
color: var(--text); color: var(--text);
border: 2px solid var(--tint5); border: 1px solid var(--tint4);
border-radius: 8px; border-radius: 12px;
padding: 10px 14px; padding: 12px 14px;
transition: all 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 15px; font-size: 15px;
font-family: inherit;
} }
input:focus, input:focus,
textarea:focus { textarea:focus {
outline: none; outline: none;
border-color: var(--green-primary); border-color: var(--green-primary);
background-color: var(--tint3); background-color: var(--tint1);
box-shadow: 0 0 0 3px var(--green-A-primary); box-shadow: 0 0 0 3px var(--green-A-primary);
} }
@@ -227,23 +256,29 @@ select option {
/* Buttons */ /* Buttons */
button { button {
color: var(--text); color: var(--text);
background-color: var(--tint3); background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
border: 2px solid var(--tint5); border: 1px solid var(--tint4);
border-radius: 8px; border-radius: 12px;
padding: 5px 10px; padding: 10px 16px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-weight: 500; font-weight: 600;
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
width: auto; width: auto;
box-shadow: var(--shadow-sm);
} }
button:hover { button:hover {
background-color: var(--tint4); background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
border-color: var(--green-primary); border-color: var(--green-primary);
color: white;
transform: translateY(-2px); 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 { button:active {
@@ -290,7 +325,7 @@ button.secondary:hover {
.deleteButton, .deleteButton,
button.delete, button.delete,
.btn-danger { .btn-danger {
background-color: #dc2626; background: #dc2626;
border: 2px solid #991b1b; border: 2px solid #991b1b;
border-radius: 10px; border-radius: 10px;
color: white; color: white;
@@ -299,7 +334,7 @@ button.delete,
.deleteButton:hover, .deleteButton:hover,
button.delete:hover, button.delete:hover,
.btn-danger:hover { .btn-danger:hover {
background-color: #b91c1c; background: #b91c1c;
border-color: #7f1d1d; border-color: #7f1d1d;
} }
@@ -307,7 +342,7 @@ button.delete:hover,
.addButton, .addButton,
button.add, button.add,
.btn-success { .btn-success {
background-color: var(--green-primary); background: var(--green-primary);
border: none; border: none;
border-radius: 10px; border-radius: 10px;
color: white; color: white;
@@ -430,7 +465,8 @@ td {
/* Lists */ /* Lists */
ul, ol { ul,
ol {
color: var(--text); color: var(--text);
padding-left: 20px; padding-left: 20px;
} }
@@ -547,6 +583,7 @@ input[type="radio"] {
from { from {
opacity: 0; opacity: 0;
} }
to { to {
opacity: 1; opacity: 1;
} }
@@ -557,6 +594,7 @@ input[type="radio"] {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);

2
front_end/src/components/edt.tsx
View File

@@ -170,7 +170,7 @@ export const EDT =() =>{
<div className="edt_colonnes"> <div className="edt_colonnes">
<div className="top_left_loading">{loading && <Loading/>}</div> <div className="top_left_loading">{loading && <Loading/>}</div>
{week_days_nums.map((num,index)=>( {week_days_nums.map((num,index)=>(
<div className={`edt_colonne`}> <div className={`edt_colonne ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}>
<div className={`edt_day_header ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}> <div className={`edt_day_header ${sameDay(getNextDay(week, index), new Date()) ? "today" : ""}`}>
<div> {week_days[index]} </div> <div> {week_days[index]} </div>
<div className="edt_date"> {dateToString(getNextDay(week,index))} </div> <div className="edt_date"> {dateToString(getNextDay(week,index))} </div>

19
front_end/src/components/login.tsx
View File

@@ -1,5 +1,5 @@
import { useKeycloak } from '@react-keycloak/web' import { useKeycloak } from '@react-keycloak/web'
import { useEffect, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { Admin, Athlete, Coach, User } from '../classes'; import { Admin, Athlete, Coach, User } from '../classes';
import { useLocalData } from '../context/useLocalData'; import { useLocalData } from '../context/useLocalData';
import { loginOrRegister, postAthlete } from '../requetes'; import { loginOrRegister, postAthlete } from '../requetes';
@@ -9,10 +9,25 @@ import { Modal } from './Modal';
import './style/topBar.css'; import './style/topBar.css';
export const Login =() =>{ export const Login =() =>{
const ref = useRef<HTMLDivElement | null>(null);
const {userLocal: user,setUserLocal: setUser} = useLocalData() const {userLocal: user,setUserLocal: setUser} = useLocalData()
const { keycloak } = useKeycloak(); const { keycloak } = useKeycloak();
const [open,setOpen] = useState<boolean>(false); const [open,setOpen] = useState<boolean>(false);
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
async function loginUser(){ async function loginUser(){
if(keycloak.authenticated){ if(keycloak.authenticated){
@@ -50,7 +65,7 @@ export const Login =() =>{
if(keycloak.authenticated){ if(keycloak.authenticated){
return( return(
<div className='loginContainer'> <div ref={ref} className='loginContainer'>
<button className="loginButton" onClick={()=>handleOpen()}>{user.prenom}</button> <button className="loginButton" onClick={()=>handleOpen()}>{user.prenom}</button>
{open && {open &&
<div className='login'> <div className='login'>

6
front_end/src/components/object/detailSession.tsx
View File

@@ -37,10 +37,6 @@ function DetailSession({session,open,setOpen}:Props){
} }
async function updateActivites(){ async function updateActivites(){
const coach = await getCoachOfSession(session);
if(coach!=null){
session.coach = coach;
}
const newActivites = await getSessionOfActivite(session); const newActivites = await getSessionOfActivite(session);
if(newActivites!=null){ if(newActivites!=null){
session.activites=newActivites; session.activites=newActivites;
@@ -97,7 +93,7 @@ function DetailSession({session,open,setOpen}:Props){
return( return(
<Modal isOpen={open} onClose={() => setOpen(false)}> <Modal isOpen={open} onClose={() => setOpen(false)}>
<div className="object_modal"> <div>
<h2>{session.name}</h2> <h2>{session.name}</h2>
<div>{hoursToString(sDate)}</div> <div>{hoursToString(sDate)}</div>

11
front_end/src/components/style/createSession.css
View File

@@ -1,5 +1,8 @@
.createActivite{ .createActivite {
background: var(--tint1); background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 15px; padding: 20px;
border-radius: 15px; 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);
} }

93
front_end/src/components/style/edt.css
View File

@@ -1,17 +1,24 @@
.edt{ .edt {
background-color: var(--tint2); background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
border-radius: 30px; border-radius: 24px;
padding: 10px; padding: 20px;
border: 2px solid var(--tint4); border: 1px solid var(--tint4);
box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1); 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; justify-content: center;
display: grid; display: grid;
grid-template-columns: repeat(3, 0.5fr); grid-template-columns: repeat(3, 0.5fr);
padding-bottom: 10px; padding-bottom: 16px;
gap: 5%; gap: 12px;
margin-bottom: 12px;
} }
.edt_colonnes { .edt_colonnes {
@@ -24,7 +31,7 @@
width: 100%; width: 100%;
} }
.edt_loading{ .edt_loading {
position: absolute; position: absolute;
inset: 0; inset: 0;
display: grid; display: grid;
@@ -32,31 +39,43 @@
} }
.edt_colonne { .edt_colonne {
background-color: var(--tint3); background: linear-gradient(135deg, var(--tint2) 0%, var(--tint4) 100%);
border-radius: 20px; border-radius: 16px;
transition: all 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%; height: 100%;
border: 1px solid var(--tint4);
padding: 12px;
}
.edt_colonne.today {
background: linear-gradient(135deg, var(--tint1) 25%, var(--tint2) 100%);
border: 1px solid var(--green-primary);
} }
.edt_day_header{ .edt_day_header {
font-size: clamp(5px, 1vw, 18px); font-size: clamp(5px, 1vw, 18px);
padding: 8px; padding: 12px;
border-radius: 20px; border-radius: 12px;
height: fit-content; height: fit-content;
text-align: center; text-align: center;
font-size: 1em; font-size: 1em;
background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-dark)); background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
font-weight: 600; font-weight: 700;
font-size: large; 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{ .edt_day_header.today {
background: linear-gradient(135deg, var(--green-primary), var(--green-dark)); background: linear-gradient(135deg, var(--green-dark) 0%, var(--cyan-accent) 100%);
color: #FFFFFF; color: #FFFFFF;
box-shadow: 0 6px 20px var(--green-A-primary);
transform: scale(1.02);
} }
.edt_day_content{ .edt_day_content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
@@ -68,39 +87,39 @@
.edt_session { .edt_session {
font-size: clamp(1px, 8cqi, 18px); font-size: clamp(1px, 8cqi, 18px);
gap: 8px; gap: 8px;
background-color: var(--tint4); background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%);
border-radius: 12px; border-radius: 12px;
padding: 5%; padding: 12px;
min-width: 0; min-width: 0;
border-left: 3px solid var(--green-primary); /* Accent vert à gauche */ border-left: 4px solid var(--green-primary);
transition: all 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer; cursor: pointer;
box-shadow: var(--shadow-sm);
} }
.edt_session:hover { .edt_session:hover {
background-color: var(--tint2); background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary));
border-left-width: 5px; border-left-width: 6px;
transform: translateX(3px); transform: translateX(4px);
box-shadow: -2px 2px 8px var(--green-A-primary); box-shadow: 0 8px 16px var(--green-A-primary);
} }
.edt_session:active { .edt_session:active {
background-color: var(--tint5);
transform: translateX(1px); transform: translateX(1px);
} }
.edt_session_header{ .edt_session_header {
display: flex; display: flex;
gap: 5px; gap: 5px;
} }
.edt_date{ .edt_date {
font-size: 0.75em; font-size: 0.75em;
font-weight: 500; font-weight: 500;
} }
.edt_button_week_select{ .edt_button_week_select {
background: linear-gradient(135deg, var(--green-primary), var( --green-secondary)); background: linear-gradient(135deg, var(--green-primary), var(--green-secondary));
color: white; color: white;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
@@ -123,7 +142,7 @@
box-shadow: 0 1px 2px var(--green-A-primary); box-shadow: 0 1px 2px var(--green-A-primary);
} }
.edt_session_modal{ .edt_session_modal {
background-color: var(--tint2); background-color: var(--tint2);
padding: 10px; padding: 10px;
border-radius: 20px; border-radius: 20px;
@@ -132,14 +151,14 @@
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--green-A-primary); 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; padding: 10px;
background-color: var(--tint3); background-color: var(--tint3);
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--green-A-primary); border: 1px solid var(--green-A-primary);
} }
.edt_activite_modal{ .edt_activite_modal {
background-color: var(--tint3); background-color: var(--tint3);
padding: 10px; padding: 10px;
border-radius: 20px; border-radius: 20px;

66
front_end/src/components/style/objectList.css
View File

@@ -1,65 +1,81 @@
.list_object{ .list_object{
display: grid; display: grid;
gap:10px; gap: 12px;
background-color: var(--tint1); background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 10px; padding: 16px;
border-radius: 20px; border-radius: 16px;
border: 1px solid var(--tint4);
box-shadow: var(--shadow-md);
} }
.list_object_modal{ .list_object_modal{
display: grid; display: grid;
gap:10px; gap: 12px;
background-color: var(--tint1); background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 10px; padding: 16px;
border-radius: 20px; border-radius: 16px;
max-height: 200px; max-height: 280px;
overflow-y: auto; overflow-y: auto;
border: 1px solid var(--tint4);
} }
.object { .object {
font-size: clamp(1px, 8cqi, 18px); font-size: clamp(1px, 8cqi, 18px);
gap: 8px; gap: 8px;
background-color: var(--tint3); background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
border-radius: 12px; border-radius: 12px;
padding: 10px; padding: 12px;
min-width: 0; min-width: 0;
border: 2px solid; border: 1px solid var(--tint4);
border-color: var(--tint3); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
} }
.object:hover { .object:hover {
background-color: var(--tint2); background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary));
border-color: var(--green-primary); border-color: var(--green-primary);
transform: translateY(-2px);
box-shadow: 0 8px 16px var(--green-A-primary);
} }
.object:active { .object:active {
background-color: var(--tint4); background: linear-gradient(135deg, var(--tint4) 0%, var(--tint5) 100%);
transform: translateY(0);
} }
.object_header{ .object_header{
display: flex; display: flex;
gap: 5px; gap: 8px;
align-items: center;
font-weight: 600;
} }
.object_small{ .object_small{
font-size: 0.75em; font-size: 0.75em;
opacity: 0.8;
} }
.object_modal{ .object_modal{
background-color: var(--tint2); background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 10px; padding: 14px;
border-radius: 20px; border-radius: 12px;
position: relative; position: relative;
border: 1px solid var(--tint4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.session_modal_activite_list{ .session_modal_activite_list{
display: grid; display: grid;
padding: 10px; padding: 12px;
background-color: var(--tint3); background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
border-radius: 10px; border-radius: 12px;
gap: 5px; gap: 8px;
border: 1px solid var(--tint4);
} }
.activiteList{ .activiteList{
display: flex; display: flex;
gap: 10px; gap: 12px;
flex-wrap: wrap;
} }

98
front_end/src/components/style/topBar.css
View File

@@ -1,18 +1,27 @@
.topBar{ .topBar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding:15px; padding: 16px 24px;
background: var(--tint2); background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
border-radius: 30px; border-radius: 20px;
height: 60px; height: auto;
border: 3px solid var(--tint5); 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);
}
.topBar:hover {
border-color: var(--green-primary);
box-shadow: 0 8px 32px var(--green-A-primary);
} }
.toBarLeft{ .toBarLeft{
flex: 1; flex: 1;
display: flex; display: flex;
gap: 10px; gap: 16px;
align-items: center; align-items: center;
} }
@@ -27,53 +36,86 @@
.topBarRight{ .topBarRight{
flex: 1; flex: 1;
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 {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 10px;
} }
.loginContainer{ .loginContainer {
position: relative; position: relative;
} }
.login{ .login {
position:absolute; position: absolute;
right: 0; right: 0;
top: 1; top: calc(100% + 8px);
display: grid; display: grid;
gap:15px; gap: 12px;
width: fit-content; width: fit-content;
white-space: nowrap; white-space: nowrap;
align-items: left; align-items: left;
background: var(--tint2) ; background: linear-gradient(135deg, var(--tint2) 0%, var(--tint3) 100%);
padding: 10px; padding: 16px;
border-radius: 15px; border-radius: 16px;
border: 3px solid var(--tint5); border: 1px solid var(--tint4);
box-shadow: var(--shadow-lg);
z-index: 1000;
backdrop-filter: blur(10px);
} }
.loginButton{ .loginButton {
display: flex;
align-items: center;
justify-content: center;
width: 120px; width: 120px;
height: 30px; height: 30px;
border-radius: 15px; border-radius: 15px;
} }
.ButtonTheme{ .ButtonTheme {
height: 40px; display: flex;
width: 40px; align-items: center;
justify-content: center;
height: 44px;
width: 44px;
color: var(--text); color: var(--text);
background-color: var(--tint3); background: linear-gradient(135deg, var(--tint3) 0%, var(--tint4) 100%);
border-radius: 15px; border: 1px solid var(--tint4);
font-size: 16px; border-radius: 12px;
border-color: var(--tint5); font-size: 18px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
} }
.ButtonTheme:hover{ .ButtonTheme:hover {
border-color: var(--themeButtonColor); border-color: var(--themeButtonColor);
color: var(--themeButtonColor); /* color: var(--themeButtonColor); */
box-shadow: 0 4px 12px rgba(0, 170, 255, 0.3);
transform: scale(1.05) rotateZ(-180deg);
} }
.logo{ .logo {
height: 30px; 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);
} }

30
front_end/src/requetes.tsx
View File

@@ -219,28 +219,11 @@ export async function postAthlete(athlete: Athlete):Promise<Athlete>{
export async function postSession(session: Session){ export async function postSession(session: Session){
try { try {
/* const data = {
name: session.name,
creneau: session.creneau, // string ISO OK
duree: session.duree,
isRecurrent: session.isRecurrent,
coachId: session.coach?.id,
groupe: session.groupe ? session.groupe : undefined,
}*/
const response = await sessionService.create(session.toDTO()); const response = await sessionService.create(session.toDTO());
session.id = response.data.id; //TODO ? session.id = response.data.id; //TODO ?
session.activites.forEach(activite => { session.activites.forEach(activite => {
const data2 = { activiteService.create(activite.toDTO());
name: activite.nom,
duree: activite.duree,
date: activite.data,
theme: activite.theme,
sessionId: session.id, //TODO
}
activiteService.create(data2);
// console.log("Session créée"); // console.log("Session créée");
}); });
} catch (error) { } catch (error) {
@@ -300,9 +283,14 @@ export async function getSessionsOfUserAPI(user:User): Promise<Session[]>{
sessionsDTO = response.data; sessionsDTO = response.data;
} }
const sessions:Session[] = []; const sessions:Session[] = [];
sessionsDTO.forEach(sessionDTO => { for (const sessionDTO of sessionsDTO) {
sessions.push(new Session(sessionDTO)); const session = new Session(sessionDTO);
}); const coach = await getCoachByIdAPI(sessionDTO.coachId);
if(coach!=null){
session.coach = coach;
}
sessions.push(session);
}
return sessions; return sessions;
}catch (error) { }catch (error) {