feat: dev-web - begin front

S2/DevWeb/Projet/src/main/webapp/static/css/global.css

@@ -0,0 +1,39 @@
+:root {
+    --color-red-800: #991B1B;
+    --color-rose-700: #BE123C;
+    --sizes-button-input-nav-larger-padding-v: 12px;
+    --sizes-button-input-nav-larger-padding-h: 32px;
+    --sizes-button-input-nav-larger-gap: 12px;
+    --Button-Border-radius: 8px;
+    --Button-Light-Default-Border: rgba(255, 255, 255, 0.00);
+    --Button-Light-Default-Background: rgba(255, 255, 255, 0.30);
+}
+
+html{
+    height: 100%;
+    width: 100%;
+}
+
+
+body {
+    width: 100%;
+    height: 832px;
+    flex-shrink: 0;
+    background: url("../img/Home.svg") lightgray 50% / cover no-repeat;
+    opacity: 0.6;
+    color: #FFF;
+}
+
+a.button, input.button button.button{
+    display: flex;
+    padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
+    justify-content: center;
+    align-items: center;
+    gap: var(--sizes-button-input-nav-larger-gap);
+    border-radius: var(--Button-Border-radius);
+    border: 1px solid var(--Button-Light-Default-Border);
+    background: var(--Button-Light-Default-Background);
+    color: #FFF;
+    text-decoration: none;
+    height: fit-content;
+}

S2/DevWeb/Projet/src/main/webapp/static/css/index.css

@@ -0,0 +1,56 @@
+html{
+    height: 100%;
+}
+
+.content {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 30px;
+    padding: 10%
+}
+
+h1 {
+    width: 656px;
+    height: 122px;
+    color: #FFF;
+
+    font-family: Poppins;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 63px; /* 131.25% */
+    letter-spacing: 0.48px;
+}
+
+p {
+    width: 389px;
+
+    color: #FFF;
+
+    /* Text/Medium */
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+}
+
+.buttons {
+    display: flex;
+    align-items: flex-start;
+    gap: 30px;
+}
+
+a.button{
+    display: flex;
+    padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
+    justify-content: center;
+    align-items: center;
+    gap: var(--sizes-button-input-nav-larger-gap);
+    border-radius: var(--Button-Border-radius);
+    border: 1px solid var(--Button-Light-Default-Border);
+    background: var(--Button-Light-Default-Background);
+    color: #FFF;
+    text-decoration: none;
+}

S2/DevWeb/Projet/src/main/webapp/static/css/login.css

@@ -1,19 +1,13 @@
-html {
-    height: 100%;
-    display: flex;
-    align-items: center;
+:root {
+    --spacing-615-rem-24-px: 12px;
 }
-
-body {
-    width: 100%;
-}
-
 main {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: center;
 }
 
 /*Common */
@@ -42,39 +36,35 @@ hr {
 }
 
 h1 {
-    justify-self: center;
-}
 
-.flex-column {
-    display: flex;
-    flex-direction: column;
-    justify-content: left;
+    font-family: Poppins;
+    font-size: 48px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 63px; /* 131.25% */
+    letter-spacing: 0.48px;
 }
 
-.login-gap {
-    gap: 20px;
-}
-
-.register-gap {
-    gap: 75px;
-}
-
-
 #login-form, #register-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 8% 2%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-615-rem-24-px);
 }
 
-#login-submit {
-    grid-column: 2/2;
-    grid-row: 3/3;
-    justify-self: right;
+label {
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
 }
 
-#register-submit {
-    grid-column: 2/2;
-    grid-row: 7/7;
-    justify-self: right;
-
+input {
+    width: 100%;
+}
+
+a {
+    color: #ffffff;
+    bold: true;
 }

S2/DevWeb/Projet/src/main/webapp/static/css/main-menu.css

@@ -0,0 +1,41 @@
+#main {
+    width: 100%;
+    display: inline-flex;
+    height: 392px;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+#title {
+    color: #FFF;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 80px;
+    font-style: normal;
+    font-weight: 900;
+    line-height: 63px; /* 78.75% */
+    letter-spacing: 0.8px;
+}
+
+.main-button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+button {
+    display: flex;
+    padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
+    justify-content: center;
+    align-items: center;
+    gap: var(--sizes-button-input-nav-larger-gap);
+    border-radius: var(--Button-Border-radius);
+    border: 1px solid var(--Button-Light-Default-Border);
+    background: var(--Button-Light-Default-Background);
+    color: #FFF;
+    text-decoration: none;
+    height: fit-content;
+}

S2/DevWeb/Projet/src/main/webapp/static/css/modal.css

@@ -1,17 +1,5 @@
-body {
-    font-family: sans-serif;
-    padding: 30px;
-}
-
-.demo-description {
-    max-width: 460px;
-    margin: 0 auto;
-    line-height: 1.5;
-}
-
 .modal-toggle {
     cursor: pointer;
-    color: #268bd2;
 }
 
 .modal-wrapper {

S2/DevWeb/Projet/src/main/webapp/static/css/navbar.css

@@ -1,5 +1,15 @@
 nav {
     display: flex;
-    justify-content: right;
+    flex-direction: row;
+    justify-content: space-between;
     padding: 10px;
 }
+.content {
+    display: flex;
+    flex-direction: row;
+    gap: 40px;
+}
+
+p.user{
+    padding:10px;
+}