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

commit

Browse Source
This commit is contained in:
tuanvu
2026-01-11 19:23:49 +01:00
parent ecbddd3a58
commit 40917f52d4
6 changed files with 309 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);
}

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

@@ -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;

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

@@ -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;
}

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

@@ -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);
}