diff --git a/FrontEnd/assets/_settings.scss b/FrontEnd/assets/_settings.scss
new file mode 100644
index 0000000..66bfe5a
--- /dev/null
+++ b/FrontEnd/assets/_settings.scss
@@ -0,0 +1,25 @@
+// Variables Globale pour le Site
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+*:focus {
+ box-shadow: 0 0 10px #FFF;
+}
\ No newline at end of file
diff --git a/FrontEnd/assets/icons/instagram.png b/FrontEnd/assets/icons/instagram.png
new file mode 100644
index 0000000..feef84a
Binary files /dev/null and b/FrontEnd/assets/icons/instagram.png differ
diff --git a/FrontEnd/assets/images/abajour-tahina.png b/FrontEnd/assets/images/abajour-tahina.png
new file mode 100644
index 0000000..b5b314e
Binary files /dev/null and b/FrontEnd/assets/images/abajour-tahina.png differ
diff --git a/FrontEnd/assets/images/appartement-paris-v.png b/FrontEnd/assets/images/appartement-paris-v.png
new file mode 100644
index 0000000..d5784d4
Binary files /dev/null and b/FrontEnd/assets/images/appartement-paris-v.png differ
diff --git a/FrontEnd/assets/images/appartement-paris-x.png b/FrontEnd/assets/images/appartement-paris-x.png
new file mode 100644
index 0000000..9d5f5cb
Binary files /dev/null and b/FrontEnd/assets/images/appartement-paris-x.png differ
diff --git a/FrontEnd/assets/images/appartement-paris-xviii.png b/FrontEnd/assets/images/appartement-paris-xviii.png
new file mode 100644
index 0000000..9d0e54c
Binary files /dev/null and b/FrontEnd/assets/images/appartement-paris-xviii.png differ
diff --git a/FrontEnd/assets/images/bar-lullaby-paris.png b/FrontEnd/assets/images/bar-lullaby-paris.png
new file mode 100644
index 0000000..953b074
Binary files /dev/null and b/FrontEnd/assets/images/bar-lullaby-paris.png differ
diff --git a/FrontEnd/assets/images/hotel-first-arte-new-delhi.png b/FrontEnd/assets/images/hotel-first-arte-new-delhi.png
new file mode 100644
index 0000000..9040b65
Binary files /dev/null and b/FrontEnd/assets/images/hotel-first-arte-new-delhi.png differ
diff --git a/FrontEnd/assets/images/la-balisiere.png b/FrontEnd/assets/images/la-balisiere.png
new file mode 100644
index 0000000..8848c50
Binary files /dev/null and b/FrontEnd/assets/images/la-balisiere.png differ
diff --git a/FrontEnd/assets/images/le-coteau-cassis.png b/FrontEnd/assets/images/le-coteau-cassis.png
new file mode 100644
index 0000000..4b42109
Binary files /dev/null and b/FrontEnd/assets/images/le-coteau-cassis.png differ
diff --git a/FrontEnd/assets/images/restaurant-sushisen-londres.png b/FrontEnd/assets/images/restaurant-sushisen-londres.png
new file mode 100644
index 0000000..9ef5fae
Binary files /dev/null and b/FrontEnd/assets/images/restaurant-sushisen-londres.png differ
diff --git a/FrontEnd/assets/images/sophie-bluel.png b/FrontEnd/assets/images/sophie-bluel.png
new file mode 100644
index 0000000..4904381
Binary files /dev/null and b/FrontEnd/assets/images/sophie-bluel.png differ
diff --git a/FrontEnd/assets/images/structures-thermopolis.png b/FrontEnd/assets/images/structures-thermopolis.png
new file mode 100644
index 0000000..16510c0
Binary files /dev/null and b/FrontEnd/assets/images/structures-thermopolis.png differ
diff --git a/FrontEnd/assets/images/villa-ferneze.png b/FrontEnd/assets/images/villa-ferneze.png
new file mode 100644
index 0000000..afb1d38
Binary files /dev/null and b/FrontEnd/assets/images/villa-ferneze.png differ
diff --git a/FrontEnd/assets/index.css b/FrontEnd/assets/index.css
new file mode 100644
index 0000000..175c29d
--- /dev/null
+++ b/FrontEnd/assets/index.css
@@ -0,0 +1,1070 @@
+@import "../assets/style.css";
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+*:focus {
+ box-shadow: 0 0 10px #FFF;
+}
+
+.modal[aria-hidden=true] {
+ animation-name: fadeOut;
+ animation-direction: reverse;
+}
+
+.modal[aria-hidden=true] .modal-wrapper {
+ animation-name: slideToBottom;
+ animation-direction: reverse;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+@keyframes slideFromTop {
+ from {
+ transform: translateY(-50px);
+ }
+ to {
+ transform: translateY(0px);
+ }
+}
+@keyframes slideToBottom {
+ from {
+ transform: translateY(0px);
+ }
+ to {
+ transform: translateY(0px);
+ }
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+body {
+ line-height: 1;
+}
+
+html {
+ margin: 0;
+ padding: 0;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+blockquote, q {
+ quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: "";
+ content: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+header {
+ width: auto;
+ height: 42px;
+ display: flex;
+ justify-content: space-between;
+ margin: 50px 30px;
+ display: flex;
+}
+header h1 {
+ text-align: center;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 22px;
+ font-weight: 800;
+}
+header span {
+ text-align: center;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 10px;
+ font-weight: 400;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+}
+header nav {
+ display: flex;
+ width: 320px;
+}
+header nav ul {
+ display: flex;
+ width: 320px;
+ justify-content: space-between;
+ align-items: center;
+ list-style-type: none;
+}
+header nav li {
+ display: flex;
+ padding: 0 10px;
+ font-size: 14px;
+ font-family: Syne;
+}
+header nav li a {
+ color: black;
+ text-align: center;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 16px;
+ font-weight: 400;
+ text-decoration: none;
+}
+header nav li a:hover {
+ color: #B1663C;
+}
+header nav li img {
+ width: 22px;
+ height: 22px;
+ flex-shrink: 0;
+}
+header nav .logoutVisible {
+ visibility: hidden;
+ display: none;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 16px;
+ font-weight: bold;
+}
+header nav .logoutVisible:hover {
+ cursor: pointer;
+ color: #B1663C;
+}
+
+section {
+ margin: 50px 0;
+}
+
+h1 {
+ display: flex;
+ flex-direction: column;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 22px;
+ font-weight: 800;
+ color: #B1663C;
+}
+h1 span {
+ display: flex;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 10px;
+ letter-spacing: 0.1em;
+}
+
+h2 {
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-weight: 700;
+ font-size: 30px;
+ color: #1D6154;
+}
+
+.ihmvisuel {
+ justify-content: center;
+ display: flex;
+}
+
+.jsPage {
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ height: auto;
+}
+
+.bannerEdit {
+ height: 59px;
+ gap: 50px;
+ visibility: hidden;
+ justify-content: center;
+ display: none;
+ font-size: 16px;
+ background-color: black;
+ margin: 0;
+}
+.bannerEdit p {
+ color: #FFF;
+ text-align: center;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 16px;
+ font-weight: 400;
+ margin: 6px 0 0 10px;
+}
+.bannerEdit i {
+ font-size: 19px;
+ color: #FFF;
+}
+
+.editBanner {
+ display: flex;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ color: #FFF;
+ text-decoration: none;
+}
+
+.buttonEdition {
+ color: black;
+ background: #FFF;
+ border-radius: 25px;
+ width: 190px;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 16px;
+ height: 45px;
+}
+
+footer {
+ display: flex;
+ height: 60px;
+ flex-shrink: 0;
+ justify-content: flex-end;
+ align-items: center;
+}
+footer nav ul {
+ display: flex;
+ justify-content: flex-end;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ font-weight: 300;
+ margin: 21px;
+}
+
+#contact {
+ width: 50%;
+ margin: auto;
+ margin-top: 40px;
+}
+#contact p {
+ color: #3D3D3D;
+ text-align: center;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 16px;
+ font-weight: 400;
+}
+#contact input {
+ height: 50px;
+ font-size: 14px;
+ border: none;
+ box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
+}
+#contact .error {
+ visibility: hidden;
+}
+#contact > * {
+ text-align: center;
+}
+#contact h2 {
+ margin-bottom: 9px;
+ color: #1D6154;
+ text-align: center;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 30px;
+ font-weight: 700;
+}
+#contact form {
+ text-align: left;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+#contact label {
+ transform: translate(-170px);
+ display: flex;
+ margin: 38px 0 7px 0;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ font-weight: 500;
+}
+#contact .message {
+ transform: translate(-163px);
+}
+#contact input {
+ width: 379px;
+ height: 51px;
+ flex-shrink: 0;
+ background: #FFF;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+}
+#contact textarea {
+ width: 379px;
+ height: 174px;
+ flex-shrink: 0;
+ border: none;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+}
+#contact input[type=submit] {
+ width: 179px;
+ height: 36px;
+ flex-shrink: 0;
+ background: #1D6154;
+ border-radius: 60px;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-family: Syne;
+ font-size: 14px;
+ font-weight: 700;
+ color: #FFF;
+ margin: 40px auto;
+ text-align: center;
+}
+
+#introduction {
+ display: flex;
+ align-items: center;
+ gap: 100px;
+}
+#introduction figure {
+ flex: 1;
+}
+#introduction figure .imgLogin {
+ display: block;
+ margin: auto;
+ width: 474px;
+ height: 355px;
+}
+#introduction p {
+ margin-bottom: 0, 5em;
+}
+
+.js-document {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.artGallery {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 404px;
+ height: 192px;
+ gap: 20px;
+}
+.artGallery h2 {
+ display: flex;
+ text-align: center;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 30px;
+ font-weight: 700;
+}
+.artGallery p {
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.js-ShowButton {
+ display: flex;
+ margin: 30px 0;
+}
+.js-ShowButton #filterButton {
+ display: flex;
+}
+.js-ShowButton #filterButton .btnChoice {
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-weight: 700;
+ color: #1D6154;
+ background-color: #FFF;
+ margin: 1em;
+ width: 130px;
+ text-align: center;
+ border-radius: 60px;
+ height: 35px;
+ font-size: 14px;
+ border: 2px solid #1D6154;
+ box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
+}
+.js-ShowButton #filterButton .btnChoice:nth-child(4) {
+ width: 190px;
+}
+.js-ShowButton #filterButton .btnChoice:hover {
+ cursor: pointer;
+}
+.js-ShowButton #filterButton .filter_active {
+ background-color: #1D6154;
+ color: #FFF;
+}
+
+#portfolio {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+#portfolio h2 {
+ color: #1D6154;
+ text-align: center;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 30px;
+ font-weight: 700;
+}
+#portfolio .gallery {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ justify-content: center;
+ align-items: center;
+ grid-row-gap: 35px;
+ grid-column-gap: 20px;
+}
+#portfolio .gallery .card {
+ width: 310px;
+ height: 413px;
+ flex-shrink: 0;
+}
+#portfolio .gallery .card img {
+ height: 100%;
+ width: 100%;
+}
+#portfolio .gallery .card figcaption {
+ color: #3D3D3D;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 13px;
+ font-weight: 400;
+ margin: 5px 0;
+}
+
+#showDialog {
+ background-color: #FFF;
+ width: 100px;
+ border: none;
+ display: none;
+ flex-direction: column;
+ align-items: stretch;
+}
+#showDialog .js-modal {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-around;
+ color: black;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ text-decoration: none;
+ font-size: 14px;
+ visibility: hidden;
+ gap: 7px;
+}
+#showDialog .js-modal i {
+ display: flex;
+ font-size: 19px;
+ gap: 10px;
+ color: black;
+}
+
+.flexModal {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+ gap: 20px;
+}
+.flexModal h2 {
+ padding: 0px;
+ margin: 0px;
+}
+
+#contactLogin {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 380px;
+ margin-top: 37px;
+}
+#contactLogin .error {
+ display: none;
+ margin: 0 0 40px 0;
+ color: red;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-weight: 900;
+ font-style: italic;
+}
+
+.loginPage {
+ text-decoration: none;
+ color: #000;
+}
+
+.pagelogin {
+ text-decoration: none;
+ color: #000;
+ font-weight: 600;
+}
+
+.titleLogIn {
+ text-align: center;
+ margin-top: 150px;
+}
+
+#loginForm {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 auto;
+}
+#loginForm .email {
+ transform: translateX(-165px);
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ color: #3D3D3D;
+ font-weight: 500;
+}
+#loginForm .password {
+ transform: translateX(-138px);
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ color: #3D3D3D;
+ font-weight: 500;
+}
+#loginForm input {
+ width: 380px;
+ height: 50px;
+ margin-top: 7px;
+ margin-bottom: 30px;
+ border: none;
+ box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
+}
+#loginForm .submit {
+ width: 180px;
+ height: 35px;
+ background: #1D6154;
+ color: #FFF;
+ border-radius: 60px;
+ border: none;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-weight: 700;
+ margin-top: 7px;
+ margin-bottom: 28px;
+ cursor: pointer;
+ margin-left: auto;
+ margin-right: auto;
+}
+#loginForm .buttonsubmit {
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-weight: 700;
+ width: 179px;
+ height: 36px;
+ color: #FFF;
+ background-color: #1D6154;
+ text-align: center;
+ flex-shrink: 0;
+ font-size: 14px;
+ border-radius: 60px;
+}
+#loginForm .buttonsubmit:hover {
+ cursor: pointer;
+}
+
+.passwordLogin {
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ font-weight: 500;
+ text-decoration: underline;
+ color: #3D3D3D;
+ text-align: center;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+#modal1 {
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ animation: fadeIn 2s both;
+}
+#modal1 .modalGallery {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ justify-items: center;
+ justify-content: space-between;
+ margin: 20px;
+ grid-row-gap: 25px;
+ grid-column-gap: 20px;
+}
+#modal1 .modalGallery figure {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100px;
+ height: 135px;
+}
+#modal1 .modalGallery figure .imgModal {
+ position: relative;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-shrink: 0;
+}
+#modal1 .modalGallery figure .buttonDelete {
+ width: 20px;
+ height: 20px;
+ left: 20px;
+ transform: translate3d(74px, -128px, 10px);
+ background: transparent;
+ border: none;
+}
+#modal1 .modalGallery figure .buttonDelete i.fa-solid {
+ width: 22px;
+ height: 26px;
+}
+#modal1 .modalGallery figure .buttonDelete .faTrashCan {
+ content: "\f2ed";
+ display: flex;
+ position: absolute;
+ font-family: "Font Awesome 5 Free";
+ transform: translateX(-8px);
+ top: -2px;
+ z-index: 0;
+ color: #FFF;
+ background: black;
+ height: 17px;
+ width: 17px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 5px;
+}
+#modal1 .modalGallery figure .buttonDelete .faTrashCan:hover {
+ cursor: pointer;
+}
+#modal1 .errorDelete {
+ display: flex;
+ position: absolute;
+ justify-content: center;
+ font-weight: bold;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ top: 24px;
+ left: 203px;
+ visibility: hidden;
+ color: red;
+}
+#modal1 .successDelete {
+ display: flex;
+ position: absolute;
+ justify-content: center;
+ font-weight: bold;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ top: 24px;
+ left: 203px;
+ visibility: hidden;
+ color: green;
+}
+#modal1 .line {
+ margin: 25px;
+ height: 1px;
+ background: #B3B3B3;
+}
+#modal1 .addImg {
+ justify-content: center;
+ height: 36px;
+ background: #1D6154;
+ font-size: 14px;
+ border: none;
+ cursor: pointer;
+}
+#modal1 .modal-1 {
+ display: flex;
+ overflow: auto;
+ width: 630px;
+ height: 688px;
+ top: 660px;
+ left: 405px;
+ background-color: #FFF;
+ animation: slideFromTop 0.5s both;
+ gap: 20px;
+ border-radius: 10px;
+ align-items: flex-start;
+ flex-direction: column;
+ overflow: hidden;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+#modal1 .modal-1 input[type=submit] {
+ display: flex;
+ position: fixed;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-weight: 700;
+ color: #FFF;
+ background-color: #1D6154;
+ margin: auto;
+ width: 180px;
+ left: 220px;
+ text-align: center;
+ border-radius: 60px;
+}
+#modal1 .modal-1 .js-modal-close1 {
+ display: flex;
+ background-color: #FFF;
+ border: none;
+}
+#modal1 .modal-1 .js-modal-close1 .jsModalClose1 {
+ margin-top: 15px;
+ margin-left: 470px;
+ cursor: pointer;
+ position: absolute;
+ width: 17px;
+ height: 20px;
+ background: transparent;
+ margin: 0;
+ border-radius: 0px;
+ top: 15px;
+ right: 30px;
+ z-index: 5;
+ border: none;
+}
+#modal1 .modal-1 .js-modal-close1 .jsModalClose1:hover {
+ cursor: pointer;
+}
+#modal1 .modal-1 h3 {
+ display: flex;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 26px;
+ font-weight: 400;
+ justify-content: center;
+ margin-top: 45px;
+}
+
+#modal1 {
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ animation: fadeIn 2s both;
+}
+#modal1 .modal-2 {
+ overflow: hidden;
+ width: 630px;
+ height: 670px;
+ padding: 20px;
+ background-color: #FFF;
+ animation: slideFromTop 0.5s both;
+ gap: 20px;
+ border-radius: 10px;
+}
+#modal1 .modal-2 input[type=submit] {
+ display: flex;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-weight: 700;
+ height: 36px;
+ color: #FFF;
+ justify-content: center;
+ background: #A7A7A7;
+ border: none;
+ margin: 5px auto;
+ width: 180px;
+ text-align: center;
+ border-radius: 60px;
+}
+#modal1 .modal-2 input[type=submit]:hover {
+ cursor: pointer;
+}
+#modal1 .modal-2 .prev {
+ background-color: #FFF;
+ border: none;
+}
+#modal1 .modal-2 .prev:hover {
+ cursor: pointer;
+}
+#modal1 .modal-2 p {
+ position: fixed;
+ top: 280px;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ font-size: 12px;
+ font-weight: 400;
+}
+#modal1 .modal-2 .js-modal-close2 {
+ position: absolute;
+ right: 20px;
+ background-color: #FFF;
+ border: none;
+}
+#modal1 .modal-2 .js-modal-close2:hover {
+ cursor: pointer;
+}
+#modal1 .modal-2 h3 {
+ display: flex;
+ font-family: Work Sans;
+ font-size: 26px;
+ font-weight: 400;
+ line-height: 30.5px;
+ justify-content: center;
+ margin-top: 15px;
+}
+#modal1 #WorkFormAdd {
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ flex-wrap: wrap;
+ margin-top: 20px;
+ gap: 29px;
+}
+#modal1 #WorkFormAdd .AddPhoto {
+ display: flex;
+ gap: 5px;
+ width: 460px;
+ height: 200px;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: center;
+ align-content: center;
+ background-color: #E8F1F6;
+}
+#modal1 #WorkFormAdd .AddPhoto i {
+ display: flex;
+ height: 60px;
+ width: 63px;
+ margin-top: 10px;
+ color: #B9C5CC;
+}
+#modal1 #WorkFormAdd label.importImage {
+ display: flex;
+ border-radius: 50px;
+ color: #306685;
+ background: #CBD6DC;
+ font-size: 14px;
+ font-weight: 500;
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+ width: 173px;
+ height: 36px;
+ text-align: center;
+ vertical-align: baseline;
+ justify-content: center;
+ align-items: center;
+ transform: translateY(30px);
+}
+#modal1 #WorkFormAdd #imgGallery {
+ display: none;
+ visibility: hidden;
+}
+#modal1 #WorkFormAdd #preview-file {
+ display: none;
+ width: 55%;
+ height: 100%;
+ margin-top: -73px;
+}
+#modal1 #WorkFormAdd #preview-file .imgPreview {
+ height: 53%;
+ width: 100%;
+}
+#modal1 #WorkFormAdd #preview-file alt {
+ justify-content: center;
+}
+#modal1 #WorkFormAdd .errorMessage {
+ visibility: hidden;
+ display: flex;
+ position: fixed;
+ color: red;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ font-weight: bold;
+ justify-content: center;
+ display: none;
+ top: 320px;
+}
+#modal1 #WorkFormAdd .validMessage {
+ visibility: hidden;
+ display: flex;
+ position: fixed;
+ color: green;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ font-weight: bold;
+ justify-content: center;
+ display: none;
+ top: 320px;
+ left: 203px;
+}
+#modal1 #WorkFormAdd .errorValMessage {
+ visibility: hidden;
+ display: flex;
+ position: absolute;
+ color: red;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-size: 14px;
+ font-weight: bold;
+ justify-content: center;
+ display: none;
+ top: 320px;
+ left: 203px;
+}
+#modal1 #WorkFormAdd #formAddImg {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+#modal1 #WorkFormAdd #formAddImg label {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ height: 16px;
+ width: 32px;
+ color: #3D3D3D;
+ font-size: 12px;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+ font-weight: 500;
+ border: none;
+ background: #FFF;
+}
+#modal1 #WorkFormAdd #formAddImg #titleAdd {
+ font-family: Syne, Sans;
+ height: 35px;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+ border: none;
+}
+#modal1 #WorkFormAdd #formAddImg #select {
+ width: 460px;
+ height: 35px;
+ background: #FFF;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+ border: none;
+}
+#modal1 #WorkFormAdd #formAddImg #select #category {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ border: none;
+ font-size: 12px;
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+}
+#modal1 #WorkFormAdd #formAddImg #select #category:focus-visible {
+ outline: 1px solid #FFF;
+}
+#modal1 #WorkFormAdd #formAddImg .line {
+ margin: 20px;
+ height: 1px;
+ background: #B3B3B3;
+}
+#modal1 #WorkFormAdd #formAddImg #submitWork {
+ height: 36px;
+ width: 237px;
+ border-radius: 60px;
+ background: #A7A7A7;
+ border: none;
+ font-size: 14px;
+ font-family: Syne;
+}/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/FrontEnd/assets/index.css.map b/FrontEnd/assets/index.css.map
new file mode 100644
index 0000000..e58fee3
--- /dev/null
+++ b/FrontEnd/assets/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","_settings.scss","index.css","styles/Animations/_animations.scss","styles/layouts/_index.scss","styles/Variables/_mixins.scss","styles/Variables/_variables.scss","styles/layouts/_login.scss","styles/layouts/_modal1.scss","styles/layouts/_modal2.scss"],"names":[],"mappings":"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","file":"index.css"}
\ No newline at end of file
diff --git a/FrontEnd/assets/index.scss b/FrontEnd/assets/index.scss
new file mode 100644
index 0000000..31df9eb
--- /dev/null
+++ b/FrontEnd/assets/index.scss
@@ -0,0 +1,17 @@
+@import "../assets/settings";
+
+// Variables
+@import "../assets/styles/Variables/variables";
+
+//Mixins
+@import "../assets/styles/Variables/mixins";
+
+//Animations
+@import "../assets/styles/Animations/animations";
+
+//Layouts
+@import "../assets/styles/layouts/index";
+@import "../assets/styles/layouts/login";
+@import "../assets/styles/layouts/modal1";
+@import "../assets/styles/layouts/modal2";
+@import "../assets/style.css";
\ No newline at end of file
diff --git a/FrontEnd/assets/pages/login.html b/FrontEnd/assets/pages/login.html
new file mode 100644
index 0000000..cd5cf41
--- /dev/null
+++ b/FrontEnd/assets/pages/login.html
@@ -0,0 +1,59 @@
+
+
+
+
+
+ Sophie Bluel - Architecte d'intérieur
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sophie Bluel Architecte d'intérieur
+
+
+
+ Log in
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/FrontEnd/assets/scripts/addWork.js b/FrontEnd/assets/scripts/addWork.js
new file mode 100644
index 0000000..5257877
--- /dev/null
+++ b/FrontEnd/assets/scripts/addWork.js
@@ -0,0 +1,178 @@
+import { apiUrl, apiWorks, token, categoryStorage } from "./parametres.js";
+import { createGallery, createModalWork } from "./worksConnect.js";
+
+
+const formAddWorks = document.querySelector("#WorkFormAdd");
+const inputFile = document.querySelector("input[type='file']");
+const previewImage = document.getElementById("preview-file");
+const labelFile = document.querySelector(".importImage");
+const titleElement = formAddWorks.querySelector("input[type='text']");
+const categoryElement = formAddWorks.querySelector("#select");
+const disabled = document.querySelector(".disabledColor");
+const paragraphFile = document.querySelector("#WorkFormAdd p");
+
+export const validMessage = document.querySelector(".validMessage");
+const errorMessage = document.querySelector(".errorMessage");
+const errorValMessage = document.querySelector(".errorValMessage");
+const successMessage = document.querySelector(".successMessage");
+
+// fontion pour vérifier la taille du fichier image
+function checkFileSize(file) {
+ const fileSize = file.size;
+ const maxSize = 4 * 1024 * 1024; // 4 Mo
+
+ if ( fileSize > maxSize ) {
+ return false;
+ }
+ return true
+}
+
+// Fonction d'ajout d'un nouveu projet
+function addWorks() {
+ formAddWorks.addEventListener("submit", (e) => {
+ e.preventDefault();
+
+ // Récupération des Valeurs du formulaire
+ const formData = new FormData();
+ formData.append("image", inputFile.files[0]);
+ formData.append("title", titleElement.value);
+ formData.append("category", category.value);
+
+ fetch(apiUrl + apiWorks, {
+ method: "POST",
+ headers: {
+ "Authorization": "Bearer " + token
+ },
+ body: formData
+ },
+ )
+ .then((res) => {
+ if ( !res.ok ) {
+ errorValMessage.style.visibility = "visible";
+ errorValMessage.style.display = "flex";
+ errorValMessage.textContent = "Erreur lors de l'envoi du fichier";
+ validMessage.style.display = "none";
+ validMessage.style.visibility = "hidden"
+
+ setTimeout(() => {
+ errorValMessage.style.visibility = "hidden";
+ errorValMessage.style.display = "none";
+ errorValMessage.textContent = "";
+ }, 2000);
+
+ } else {
+ validMessage.style.visibility = "visible";
+ validMessage.style.display = "flex";
+ validMessage.textContent = "Fichier envoyé avec succès.";
+ errorValMessage.style.display = "none";
+
+ setTimeout(() => {
+ validMessage.style.visibility = "hidden";
+ validMessage.style.display = "none";
+ validMessage.textContent = "";
+ disabled.style.background = "#A7A7A7";
+ }, 2000);
+ }
+ return res.json();
+ })
+ .then((data) => {
+ // Mise à jour du DOM et de la Modal avce le nouveau work
+ createGallery(data);
+ createModalWork(data);
+
+ //Réinitialisation des champs après l'ajout
+ resetFields();
+ })
+ .catch((error) => {
+ // Gestiondes erreurs de la reqête fetch
+ console.error(error);
+ });
+ });
+};
+
+//eventlistener sur les 3 éléments afin de véfifier chaque élement si vide ou rempli
+inputFile.addEventListener("input", buttonValid)
+titleElement.addEventListener("input", buttonValid);
+categoryElement.addEventListener("input", buttonValid);
+
+// Fonction pour si condition vrai pour changer la couleur du bouton valider
+function buttonValid() {
+ if ( titleElement.value !== "" &&
+ category.value !== "" &&
+ inputFile.files.length > 0
+ ) {
+ // Vérification de la taille de l'image avant le click sur le bouton Valider
+ const imageFile = inputFile.files[0];
+ if (!checkFileSize(imageFile)) {
+ disabled.style.background = "#A7A7A7";
+ errorMessage.style.visibility = "visible";
+ errorMessage.style.display = "flex";
+ errorMessage.textContent = "La taille de l'image ne doit pas dépasser 4 Mo";
+ setTimeout(() => {
+ resetFields();
+ }, 3000);
+ return;
+ }
+ disabled.style.background = "#1D6154";
+ successMessage.style.visibility = "visible";
+ successMessage.style.display = "flex";
+ }
+}
+
+
+//Fonction de prévisualisation de l'image
+function prevImg() {
+ inputFile.addEventListener("change", () => {
+ const file = inputFile.files[0];
+ // Crér un objet FileReader
+ const reader = new FileReader();
+ // Lire le contenu du fichier sélectionné
+ reader.readAsDataURL(file);
+
+ // convertir l'URL de données en chaine Binaire
+ reader.onload = function () {
+ previewImage.src = reader.result;
+ previewImage.style.display = "flex";
+ labelFile.style.display = "none";
+ paragraphFile.style.display = "none";
+ };
+ });
+}
+
+// Fonction pour réinitialiser les champs de saisie, la sélection et l'image
+function resetFields() {
+ titleElement.value = "";
+ category.value = "";
+ inputFile.value = "";
+ previewImage.style.display = "none";
+ labelFile.style.display = "flex";
+ paragraphFile.style.display = "flex";
+ errorMessage.textContent = "";
+}
+
+if ( categoryStorage ) {
+//Création d'un Select avec une valeur par défault à ""
+const selectMenu = document.createElement("select");
+selectMenu.name = "category";
+selectMenu.id = "category";
+const defaultMenu = document.createElement("option");
+defaultMenu.value = "";
+selectMenu.appendChild(defaultMenu);
+
+//Récupération du localstorage pour liste les categories dans le Select
+let recupNameCategory = JSON.parse(localStorage.getItem("category"));
+recupNameCategory.forEach((category) => {
+ const option = document.createElement("option");
+ option.value = category.id;
+ option.textContent = category.name;
+ selectMenu.appendChild(option);
+})
+// Affichage des options dans le container html
+const selectContainer = document.getElementById("select");
+selectContainer.appendChild(selectMenu);
+}
+
+
+export {
+ prevImg, addWorks,resetFields
+}
\ No newline at end of file
diff --git a/FrontEnd/assets/scripts/deconnect.js b/FrontEnd/assets/scripts/deconnect.js
new file mode 100644
index 0000000..8ecdc41
--- /dev/null
+++ b/FrontEnd/assets/scripts/deconnect.js
@@ -0,0 +1,32 @@
+// création de la fonction de déconnexion
+
+function redirectionHomePage() {
+ document.location.href = "../../../index.html";
+ }
+
+
+function deconnect() {
+ const loginLink = document.querySelector(".logoutVisible");
+
+ if ( loginLink ) {
+ // Vérification si le bouton est déjà stocké dans le local Storage
+ if ( localStorage.getItem("token")) {
+
+ // Changement du texte du lien 'login" en "logout"
+ loginLink.textContent = "logout";
+
+ // Déconnexion lord du clique sur "logout"
+ loginLink.addEventListener("click", function (event) {
+ event.preventDefault();
+
+ // Suppression du token du local storage
+ localStorage.removeItem("token");
+
+ // Redirection vers la page d'identification
+ document.location.href = "/FrontEnd/assets/pages/login.html";
+ });
+ }
+ }
+}
+
+export default deconnect;
\ No newline at end of file
diff --git a/FrontEnd/assets/scripts/deleteWork.js b/FrontEnd/assets/scripts/deleteWork.js
new file mode 100644
index 0000000..497ccbf
--- /dev/null
+++ b/FrontEnd/assets/scripts/deleteWork.js
@@ -0,0 +1,69 @@
+import { apiUrl, apiWorks, token } from "./parametres.js";
+import openModal, { resetForm } from "./modal.js";
+
+// Variables
+const modalDiv = document.querySelector(".modalGallery");
+export const errorDelete = document.querySelector(".errorDelete");
+export const successDelete = document.querySelector(".successDelete");
+
+// Ajouter un gestionnaire d'évènement délégué pour la galerie modale
+modalDiv.addEventListener("click", deleteWorksId);
+
+// Suppression des works avec un event Délégation
+export function deleteWorksId(e) {
+ if (e.target.nodeName.toLowerCase() !== "i") {
+ return;
+ }
+
+ // Variable
+ const workItemId = e.target.parentNode.id;
+
+ //************** connection à la Base de donnée pour la suppression */
+ fetch(apiUrl + apiWorks + workItemId, {
+ method: "DELETE",
+ headers: {
+ accept: "*/*",
+ Authorization: `Bearer ${token}`,
+ },
+ }).then((res) => {
+ if ( res.status === 204 ) {
+ successDelete.style.visibility = "visible";
+ successDelete.textContent = "Projet Supprimé avec succès";
+ successDelete.style.display = "flex";
+
+ //Cacher le texte après 10 secondes
+ setTimeout(() => {
+ successDelete.style.visibility = "hidden";
+ successDelete.textContent = "";
+ successDelete.style.display = "none";
+ }, 2000);
+
+ // Suppression de l'image du DOM
+ const deletedItem = document.getElementById(workItemId);
+ deletedItem.parentNode.removeChild(deletedItem);
+
+ // suppresion de l'image dans la Modal
+ const modalItem = document.querySelector(`.modalGallery [id="${workItemId}"]`);
+ modalItem.parentNode.removeChild(modalItem);
+
+ //suppression de l'icone corbeille de la Modal
+ const modalIcon = document.querySelector(`.buttonDelete[id="${workItemId}"]`);
+ modalIcon.parentNode.removeChild(modalIcon);
+ } else {
+ errorDelete.style.visibility = "visible";
+ errorDelete.textContent = "Erreur dans la suppression du projet";
+ errorDelete.style.display = "flex";
+
+ //Cacher le Message d'erreur après 10 secondes
+ setTimeout(() => {
+ errorDelete.style.visibility = "hidden";
+ errorDelete.textContent = "";
+ errorDelete.style.display = "none";
+ }, 2000);
+ }
+ }).catch((error) => {
+ alert(error)
+ });
+ }
+
+export default deleteWorksId;
\ No newline at end of file
diff --git a/FrontEnd/assets/scripts/index.js b/FrontEnd/assets/scripts/index.js
new file mode 100644
index 0000000..5f1686f
--- /dev/null
+++ b/FrontEnd/assets/scripts/index.js
@@ -0,0 +1,36 @@
+// Les Variables d'Environnements
+import { loginVisible, logoutVisible, token, modalEdit, showButton, jsModal } from "./parametres.js";
+import { deleteWorksId } from "./deleteWork.js";
+import { addWorks, prevImg } from "./addWork.js";
+import { displayConnect, createAllButton, galleryFilter, createGallery } from "./worksConnect.js";
+import deconnect from "./deconnect.js";
+import openModal from "./modal.js";
+
+displayConnect();
+createAllButton();
+createGallery;
+galleryFilter();
+
+const bannerEdition = document.querySelector(".bannerEdit");
+const flexModal = document.querySelector(".flexModal");
+
+const init = async () => {
+ if ( token ) {
+ showButton.style.display = "none"; // Effacer l'affichage des boutons
+ flexModal.style.margin = "40px";
+ modalEdit.style.display = "flex";
+ loginVisible.style.display = "none"; // Texte Login en Flex
+ logoutVisible.style.display = "block"; // Texte Logout en Block
+ logoutVisible.style.visibility = "visible"; // Afficher le Texye Logout si Token à Oui
+ jsModal.style.visibility = "visible";
+ bannerEdition.style.visibility = "visible";
+ bannerEdition.style.display = "block";
+ prevImg();
+ addWorks();
+ deleteWorksId;
+ openModal();
+ deconnect();
+ }
+ }
+
+ init();
\ No newline at end of file
diff --git a/FrontEnd/assets/scripts/login.js b/FrontEnd/assets/scripts/login.js
new file mode 100644
index 0000000..b10903c
--- /dev/null
+++ b/FrontEnd/assets/scripts/login.js
@@ -0,0 +1,46 @@
+
+const loginForm = document.querySelector("form");
+const loginError = document.querySelector(".error");
+
+function redirectionHomePage() {
+ document.location.href = "../../../index.html";
+}
+
+ loginForm.addEventListener("submit", async (e) => {
+ e.preventDefault();
+ const emailValue = document.getElementById("email").value;
+ console.log(emailValue);
+ const passwordValue = document.getElementById("password").value;
+ console.log(passwordValue);
+
+ if (emailValue && passwordValue) {
+ const response = await login(emailValue, passwordValue)
+ if (response.token){
+ localStorage.setItem("token", response.token);
+ window.sessionStorage.setItem("token", response.token);
+ redirectionHomePage()
+ } else{
+ email.style.border = "2px solid #FF0000";
+ password.style.border = "2px solid #FF0000";
+ loginError.style.display = "flex";
+ loginError.style.visibility = "visible";
+ loginError.style.fontSize = "14px";
+ loginError.style.color = "red";
+ loginError.style.fontWeight = "bold";
+ loginError.classList.add('errorLog');
+ loginError.textContent = "Le Mot de Passe ou l'identifiant que vous avez fourni est incorrect.";
+ }
+ }
+});
+
+const login = async (email, password) => {
+ const response = await fetch("http://localhost:5678/api/users/login", {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({ email, password })
+ })
+ return response.json()
+}
diff --git a/FrontEnd/assets/scripts/modal.js b/FrontEnd/assets/scripts/modal.js
new file mode 100644
index 0000000..963c870
--- /dev/null
+++ b/FrontEnd/assets/scripts/modal.js
@@ -0,0 +1,162 @@
+import { errorDelete } from "./deleteWork.js";
+import { validMessage } from "./addWork.js";
+
+// Enregistrement des Variables nécessaire pour la modale
+
+// Variable pour les deux Modales
+export const section1 = document.querySelector(".modal-1");
+const section2 = document.querySelector(".modal-2");
+// Variables pour les deux boutons Fermeture des Modales
+const modalClose1 = document.querySelector(".jsModalClose1");
+const modalClose2 = document.querySelector(".jsModalClose2");
+// Variable pour le bouton retour en arrière de la Modale
+const prevModal = document.querySelector(".prev");
+// Variable pour le bouton Modifier pour ouvrir la première Modale
+const showModal = document.querySelector("#showDialog");
+// Variable pour le bouton qui permet d'ouvrir la Modale 2
+const addImage = document.querySelector(".addImg");
+
+
+const viewModalFile = document.getElementById("preview-file");
+const imgGallery = document.getElementById("imgGallery");
+const AddPhotoI = document.querySelector(".AddPhoto i");
+const importImgage = document.querySelector(".importImage");
+const UploadFile = document.querySelector(".AddPhoto p");
+const bannerEdition = document.querySelector(".editBanner")
+const galleryModal = document.querySelector(".modalGallery");
+const errorMessage = document.querySelector(".errorMessage");
+
+
+let modal = null;
+const focusableSelector = "button, a, input, textarea, i";
+let focusables = [];
+let previouslyFocusedElement = null;
+
+// Fonction qui permet d'ouvrir la Section 1 de la Modale suite click sur le bouton Modifier
+function openModal() {
+ showModal.addEventListener('click', (e) => {
+ e.preventDefault();
+ modal = document.querySelector(e.target.getAttribute('href'));
+ focusables = Array.from(modal.querySelectorAll(focusableSelector));
+ previouslyFocusedElement = document.querySelector(':focus');
+ modal.style.display = null;
+ focusables[0].focus();
+ modal.removeAttribute('aria-hidden');
+ modal.setAttribute('aria-modal', 'true');
+ modal.addEventListener('click', closeModal);
+ modal.querySelector('.jsModalClose1').addEventListener('click', closeModal);
+ modal.querySelector('.jsModalStop1').addEventListener('click', stopPropagation);
+ section1.style.display = 'block';
+ section2.style.display = 'none';
+ bannerEdition.style.display = 'flex';
+ })
+}
+
+ // Fonction pour fermer la Modal de la Section 1
+ export const closeModal = function (e) {
+ if ( modal === null ) return
+ if ( previouslyFocusedElement !== null ) previouslyFocusedElement.focus();
+ e.preventDefault();
+ modal.style.display = "none";
+ modal.setAttribute('aria-hidden', 'true');
+ modal.removeAttribute('aria-modal');
+ modal.removeEventListener('click', closeModal)
+ modal.querySelector('.jsModalStop1').removeEventListener('click', stopPropagation);
+ modal.querySelector('.jsModalClose1').removeEventListener('click', closeModal);
+ modal = null;
+ section1.style.display = "none";
+ bannerEdition.style.display = 'flex';
+ resetForm();
+ //location.reload(closeModal);
+ }
+
+ const stopPropagation = function (e) {
+ e.stopPropagation();
+ }
+
+
+ // Fonction qui permet d'ouvrir la Section 2 de la Modale suite click sur le bouton ajouter Photo
+ addImage.addEventListener('click', (e) => {
+ focusables = Array.from(modal.querySelectorAll(focusableSelector));
+ previouslyFocusedElement = document.querySelector(':focus');
+ modal.style.display = null;
+ focusables[0].focus()
+ modal.removeAttribute('aria-hidden')
+ modal.setAttribute('aria-modal', 'true')
+ modal.addEventListener("click", closeModal)
+ modal.querySelector('.jsModalStop2').addEventListener('click', stopPropagation);
+ modal.querySelector('.jsModalClose2').addEventListener('click', closeModal);
+ section1.style.display = 'none';
+ section2.style.display = 'block';
+ resetForm();
+ //location.reload(closeModal)
+
+ })
+
+ // Function de retour sur la Section 1 en cliquant sur le bouton arrow-right
+ prevModal.addEventListener('click', () => {
+ section1.style.display = 'block';
+ section2.style.display = 'none';
+ AddPhotoI.style.display = "block"
+ importImgage.style.display = "flex"
+ UploadFile.style.display = "block"
+ viewModalFile.style.display = 'none';
+ errorMessage.textContent = "";
+ resetForm();
+ })
+
+
+ // Fonction pour fermer la Modal de la Section 2
+ modalClose2.addEventListener('click', () => {
+ modal.setAttribute("aria-hidden", true);
+ modal.removeAttribute("aria-modal");
+ modal.style.display = "none";
+ viewModalFile.style.display = 'none';
+ modal = null;
+ errorMessage.textContent = "";
+ resetForm();
+ //location.reload(closeModal);
+ })
+
+
+ export function resetForm() {
+ document.getElementById("preview-file").value = "";
+ document.getElementById("imgGallery").value = "";
+ document.getElementById("preview-file").value = "";
+ document.getElementById("formAddImg").value = "";
+ document.querySelectorAll(".imgPreview").value = "";
+ document.querySelectorAll("AddPhoto").value = "";
+ document.querySelector("input[type='text']").value = "";
+ errorDelete.style.visibility = "hidden";
+ validMessage.textContent = "";
+ }
+
+ const focusInModal = function (e) {
+ e.preventDefault()
+ let index = focusables.findIndex(f => f === modal.querySelector(':focus'))
+ if ( e.shiftKey === true) {
+ index--
+ } else {
+ index++
+ }
+
+ if ( index >= focusables.length) {
+ index = 0
+ }
+ if ( index < 0) {
+ index = focusables.length - 1
+ }
+ focusables[index].focus()
+ }
+
+ // fonction pour quitter le modal Modal avec escape et Esc
+ window.addEventListener("keydown", function (e) {
+ if ( e.key === "Escape" || e.key === "Esc" ) {
+ closeModal(e)
+ }
+ if ( e.key === "Tab" && modal !== null ) {
+ focusInModal
+ }
+ })
+
+ export default openModal;
\ No newline at end of file
diff --git a/FrontEnd/assets/scripts/parametres.js b/FrontEnd/assets/scripts/parametres.js
new file mode 100644
index 0000000..5498aaf
--- /dev/null
+++ b/FrontEnd/assets/scripts/parametres.js
@@ -0,0 +1,35 @@
+// Paramètres
+
+const apiUrl = "http://localhost:5678/api/";
+const apiWorks = "works/";
+const apiCategories = "categories/";
+const apiLogin = "users/login";
+
+// Recupération de de la gallereiesContainer
+const galleriesContainer = document.querySelector(".gallery");
+const filterBtn = document.querySelector(".Filter_button");
+const showButton = document.querySelector(".js-ShowButton");
+const btnCategory = document.createElement("button");
+const loginVisible = document.querySelector(".loginVisible");
+const logoutVisible = document.querySelector(".logoutVisible");
+const modalEdit = document.querySelector(".modalEdit");
+const token = localStorage.getItem("token");
+const showDialog = document.getElementById("showDialog");
+const containGallery = document.getElementById("gallery");
+const jsModal = document.querySelector(".js-modal");
+const modal_1 = document.querySelector(".modal-1");
+const modal_2 = document.querySelector(".modal-2");
+const categoryStorage = localStorage.getItem("category");
+
+
+export {
+ apiUrl, modalEdit,
+ apiWorks, showDialog,
+ apiCategories,
+ galleriesContainer,
+ btnCategory, containGallery,
+ apiLogin, filterBtn, jsModal,
+ token, showButton, modal_1, modal_2,
+ loginVisible, categoryStorage,
+ logoutVisible,
+}
\ No newline at end of file
diff --git a/FrontEnd/assets/scripts/worksConnect.js b/FrontEnd/assets/scripts/worksConnect.js
new file mode 100644
index 0000000..5fd157b
--- /dev/null
+++ b/FrontEnd/assets/scripts/worksConnect.js
@@ -0,0 +1,138 @@
+import { apiUrl, apiWorks, galleriesContainer, filterBtn, apiCategories, token } from "./parametres.js";
+
+const galleryModal = document.querySelector(".modalGallery");
+
+//connexion à la base de Données Works
+async function worksConnect() {
+ const connect = await fetch(apiUrl + apiWorks);
+ return connect.json();
+}
+
+//connexion à la base de Données Category
+async function connectCategory() {
+ const requete = await fetch( apiUrl + apiCategories);
+ return requete.json();
+}
+
+//Fonction pour balayer les works
+export async function displayConnect() {
+ galleriesContainer.innerHTML = "";
+ worksConnect().then((dataW) => {
+ dataW.forEach((work) => {
+ createGallery(work);
+ createModalWork(work);
+
+ //Enregistrement dans le Local storage
+ localStorage.setItem("works", JSON.stringify(dataW));
+ });
+ });
+}
+
+// function pour balayer les catégories
+export async function createAllButton() {
+ filterBtn.innerHTML = "";
+ connectCategory().then((dataC) => {
+ dataC.forEach((category) => {
+ createButton(category);
+ galleryFilter(category);
+
+ //Enregistrement dans le Local storage
+ localStorage.setItem('category', JSON.stringify(dataC));
+ window.sessionStorage.setItem("category", JSON.stringify(dataC));
+ });
+ });
+ }
+
+// Fonction pour afficher la Gallerie sur le DOM
+export function createGallery(work) {
+ const figure = document.createElement("figure");
+ const img = document.createElement("img");
+ const figcaption = document.createElement("figcaption");
+ // Configuration de la Balise figure
+ figure.id = work.id;
+ figure.classList.add("card");
+ // Configuration de la Balise img
+ img.src = work.imageUrl;
+ img.alt = work.title;
+ img.setAttribute("data-id", work.id);
+ // Configuration de la Balise figcaption
+ figcaption.textContent = work.title;
+ // Classement du Parent => l'Enfant
+ figure.appendChild(img);
+ figure.appendChild(figcaption);
+ // Insertion dans l'elément Parent
+ galleriesContainer.appendChild(figure);
+}
+
+
+// Variable pour vérifier si le bouton "tous existe déjà
+let tousbuttonExists = false;
+
+// Fonction pour afficher les boutons sur le DOM la Gallerie
+function createButton(category) {
+ const button = document.createElement("button");
+ // Configuration de la Balise button
+ button.id = category.id;
+ button.classList.add("btnChoice");
+ button.textContent = category.name;
+
+ // Vérifié si le bouton "Tous" n'existe pas déjà
+ if (!tousbuttonExists && category.name !== "Tous") {
+ const buttonTous = document.createElement("button");
+ buttonTous.innerText = "Tous";
+ buttonTous.id = "Tous";
+ buttonTous.classList.add("btnChoice");
+ buttonTous.classList.add("filter_active");
+ filterBtn.appendChild(buttonTous);
+ tousbuttonExists = true;
+ }
+ // Insertion dans l'elément Parent
+ filterBtn.appendChild(button);
+}
+
+// Function pour aficher la Galerie dans la Modale
+export function createModalWork(workModal) {
+ const figure = document.createElement("figure");
+ const img = document.createElement("img");
+ const button = document.createElement("button");
+ const trash = document.createElement("i");
+
+ trash.classList.add("fa-solid", "fa-trash-can", "faTrashCan", "fa-ms");
+ button.classList.add("buttonDelete");
+ button.id = workModal.id;
+ img.src = workModal.imageUrl;
+ img.alt = workModal.title;
+ img.id = workModal.id;
+ img.classList.add("imgModal");
+
+ button.appendChild(trash);
+ figure.appendChild(img);
+ figure.appendChild(button);
+ galleryModal.appendChild(figure)
+ }
+
+//fonction pour filtrer la Galleries par Catégories
+export async function galleryFilter() {
+ let works = JSON.parse(localStorage.getItem("works"));
+ const Btns = document.querySelectorAll(".Filter_button button");
+ Btns.forEach((button) => {
+ button.addEventListener("click", (e) => {
+ Btns.forEach((btn) => {
+ btn.classList.remove("filter_active");
+ });
+ button.classList.add("filter_active");
+ const btnId = e.target.id;
+ galleriesContainer.innerHTML = "";
+ works.forEach((work) => {
+ if (btnId == work.categoryId) {
+ createGallery(work);
+ }
+ if ( btnId == "Tous" ) {
+ createGallery(work);
+ }
+ });
+ });
+ });
+}
+
+export default worksConnect;
\ No newline at end of file
diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css
new file mode 100644
index 0000000..c44e8ed
--- /dev/null
+++ b/FrontEnd/assets/style.css
@@ -0,0 +1,57 @@
+
+
+a {
+ color: #3d3d3d;
+ font-weight: 500;
+ display: block;
+ text-decoration: underline;
+}
+a i {
+ margin-left: 10px;
+ color: #1d6154;
+}
+i:hover {
+ color: #93532f;
+ }
+
+h2 {
+ padding-top: 100px;
+}
+label {
+ color: #3d3d3d;
+ margin-top: 0px;
+}
+
+
+
+
+/* #titlePicture {
+ width: 420px;
+ height: 51px;
+ background: #FFF;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+ border: none;
+} */
+
+/* .buttonValidate {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: #FFF;
+ width: 237px;
+ height: 36px;
+ border-radius: 60px;
+ background: #1D6154;
+ font-size: 14px;
+ font-family: Syne;
+ border: none;
+ margin-left: 90px;
+ cursor: pointer;
+} */
+
+/* .modal-1 .deleteAllImg {
+ visibility: visible;
+} */
+
+
+
diff --git a/FrontEnd/assets/styles/Animations/_animations.scss b/FrontEnd/assets/styles/Animations/_animations.scss
new file mode 100644
index 0000000..bc76116
--- /dev/null
+++ b/FrontEnd/assets/styles/Animations/_animations.scss
@@ -0,0 +1,24 @@
+.modal[aria-hidden="true"] {
+ animation-name: fadeOut;
+ animation-direction: reverse;
+}
+.modal[aria-hidden="true"] .modal-wrapper {
+ animation-name: slideToBottom;
+ animation-direction: reverse;
+}
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+@keyframes fadeOut {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+@keyframes slideFromTop {
+ from { transform : translateY(-50px); }
+ to { transform: translateY(0px); }
+}
+@keyframes slideToBottom {
+ from { transform : translateY(0px); }
+ to { transform: translateY(0px); }
+}
\ No newline at end of file
diff --git a/FrontEnd/assets/styles/Variables/_mixins.scss b/FrontEnd/assets/styles/Variables/_mixins.scss
new file mode 100644
index 0000000..a4dba5b
--- /dev/null
+++ b/FrontEnd/assets/styles/Variables/_mixins.scss
@@ -0,0 +1,15 @@
+@use "./variables";
+
+//Les Mixins
+
+@mixin Work_Sans {
+ font-family: Work Sans;
+ font-style: normal;
+ line-height: normal;
+}
+
+@mixin Syne {
+ font-family: Syne;
+ font-style: normal;
+ line-height: normal;
+}
\ No newline at end of file
diff --git a/FrontEnd/assets/styles/Variables/_variables.scss b/FrontEnd/assets/styles/Variables/_variables.scss
new file mode 100644
index 0000000..3371e67
--- /dev/null
+++ b/FrontEnd/assets/styles/Variables/_variables.scss
@@ -0,0 +1,15 @@
+$fontWork: Work_Sans, sans-serif;
+$fontSyne: Syne, sans-serif;
+
+$color: #FFF;
+$color1: #1D6154;
+$color2: #93532F;
+$color3: #3D3D3D;
+$color4: #B1663C;
+$color5: #B3B3B3;
+$color6: #E8F1F6;
+$color7: #B9C5CC;
+$color8: #CBD6DC;
+$color9: #306685;
+$color10: #A7A7A7;
+
diff --git a/FrontEnd/assets/styles/layouts/_index.scss b/FrontEnd/assets/styles/layouts/_index.scss
new file mode 100644
index 0000000..2ec28a0
--- /dev/null
+++ b/FrontEnd/assets/styles/layouts/_index.scss
@@ -0,0 +1,452 @@
+@use "../Variables/mixins";
+@use "../Variables/variables";
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+
+html {
+ margin: 0;
+ padding: 0;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+header {
+ width: auto;
+ height: 42px;
+ display: flex;
+ justify-content: space-between;
+ margin: 50px 30px;
+
+ h1 {
+ text-align: center;
+ @include Work_Sans;
+ font-size: 22px;
+ font-weight: 800;
+ }
+
+ span {
+ text-align: center;
+ @include Work_Sans;
+ font-size: 10px;
+ font-weight: 400;
+ letter-spacing: 0.5px;
+ text-transform: uppercase;
+ }
+
+ nav {
+ display: flex;
+ width: 320px;
+
+ ul {
+ display: flex;
+ width: 320px;
+ justify-content: space-between;
+ align-items: center;
+ list-style-type: none;
+
+ }
+ li {
+ display: flex;
+ padding: 0 10px;
+ font-size: 14px;
+ font-family: Syne;
+
+ a {
+ color: black;
+ text-align: center;
+ @include Work_Sans;
+ font-size: 16px;
+ font-weight: 400;
+ text-decoration: none;
+
+ &:hover {
+ color: $color4;
+ }
+ }
+
+ img {
+ width: 22px;
+ height: 22px;
+ flex-shrink: 0;
+ }
+ }
+ .logoutVisible {
+ visibility: hidden;
+ display: none;
+ @include Work_Sans;
+ font-size: 16px;
+ font-weight: bold;
+
+ &:hover {
+ cursor: pointer;
+ color: $color4;
+ }
+ }
+ }
+ display: flex;
+ }
+
+section {
+ margin: 50px 0;
+}
+
+h1 {
+ display: flex;
+ flex-direction: column;
+ @include Syne;
+ font-size: 22px;
+ font-weight: 800;
+ color: $color4;
+
+ span {
+ display: flex;
+ @include Syne;
+ font-size:10px;
+ letter-spacing: 0.1em;
+ }
+}
+h2 {
+ @include Syne;
+ font-weight: 700;
+ font-size: 30px;
+ color: $color1;
+}
+
+.ihmvisuel {
+ justify-content: center;
+ display: flex;
+}
+.jsPage {
+ overflow-x: hidden;
+ display: flex;
+ flex-direction: column;
+ height: auto;
+}
+.bannerEdit {
+ height:59px;
+ gap: 50px;
+ visibility: hidden;
+ justify-content: center;
+ display: none;
+ font-size: 16px;
+ background-color: black;
+ margin: 0;
+
+ p {
+ color : $color;
+ text-align: center;
+ @include Work_Sans;
+ font-size: 16px;
+ font-weight: 400;
+ margin: 6px 0 0 10px;
+ }
+ i {
+ font-size: 19px;
+ color: $color;
+ }
+}
+.editBanner {
+ display: flex;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ color: $color;
+ text-decoration: none;
+}
+.buttonEdition {
+ color: black;
+ background: $color;
+ border-radius: 25px;
+ width: 190px;
+ @include Syne;
+ font-size: 16px;
+ height:45px;
+}
+
+footer {
+ display: flex;
+ height: 60px;
+ flex-shrink: 0;
+ justify-content: flex-end;
+ align-items: center;
+
+ nav {
+ ul {
+ display: flex;
+ justify-content: flex-end;
+ @include Work_Sans;
+ font-size: 14px;
+ font-weight: 300;
+ margin: 21px;
+ }
+ }
+}
+#contact {
+ width: 50%;
+ margin: auto;
+ margin-top: 40px;
+
+ p {
+ color: $color3;
+ text-align: center;
+ @include Work_Sans;
+ font-size: 16px;
+ font-weight: 400;
+ }
+
+ input {
+ height: 50px;
+ font-size: 14px;
+ border: none;
+ box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
+ }
+ .error {
+ visibility: hidden;
+ }
+
+ > * {
+ text-align: center;
+ }
+ h2 {
+ margin-bottom: 9px;
+ color: $color1;
+ text-align: center;
+ @include Syne;
+ font-size: 30px;
+ font-weight: 700;
+ }
+ form {
+ text-align: left;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ }
+ label {
+ transform: translate(-170px);
+ display: flex;
+ margin: 38px 0 7px 0;
+ @include Work_Sans;
+ font-size: 14px;
+ font-weight: 500;
+ }
+ .message {
+ transform: translate(-163px);
+ }
+ input {
+ width: 379px;
+ height: 51px;
+ flex-shrink: 0;
+ background: $color;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+ }
+ textarea {
+ width: 379px;
+ height: 174px;
+ flex-shrink: 0;
+ border: none;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+ }
+ input[type=submit] {
+ width: 179px;
+ height: 36px;
+ flex-shrink: 0;
+ background: $color1;
+ border-radius: 60px;
+ @include Syne;
+ font-family: Syne;
+ font-size: 14px;
+ font-weight: 700;
+ color: $color;
+ margin: 40px auto;
+ text-align: center;
+ }
+}
+#introduction {
+ display: flex;
+ align-items: center;
+ gap: 100px;
+
+ figure {
+ flex: 1;
+
+ .imgLogin {
+ display: block;
+ margin: auto;
+ width: 474px;
+ height: 355px;
+ }
+ }
+ p {
+ margin-bottom: 0,5em;
+ }
+
+}
+.js-document {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.artGallery {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 404px;
+ height: 192px;
+ gap: 20px;
+
+ h2 {
+ display: flex;
+ text-align: center;
+ @include Syne;
+ font-size: 30px;
+ font-weight: 700;
+ }
+ p {
+ @include Work_Sans;
+ font-size: 14px;
+ font-weight: 400;
+ }
+}
+.js-ShowButton {
+ display: flex;
+ margin: 30px 0;
+
+ #filterButton {
+ display: flex;
+
+ .btnChoice {
+ @include Syne;
+ font-weight: 700;
+ color: $color1;
+ background-color: $color;
+ margin : 1em ;
+ width: 130px;
+ text-align: center;
+ border-radius: 60px ;
+ height: 35px;
+ font-size: 14px;
+ border: 2px solid $color1;
+ box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
+
+ &:nth-child(4) {
+ width: 190px;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ .filter_active {
+ background-color: $color1;
+ color: $color;
+ }
+
+ }
+}
+#portfolio {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ h2 {
+ color: $color1;
+ text-align: center;
+ @include Syne;
+ font-size: 30px;
+ font-weight: 700;
+ }
+ .gallery {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ justify-content: center;
+ align-items: center;
+ grid-row-gap: 35px;
+ grid-column-gap: 20px;
+
+ .card {
+ width: 310px;
+ height: 413px;
+ flex-shrink: 0;
+
+ img {
+ height: 100%;
+ width: 100%;
+ }
+ figcaption {
+ color: $color3;
+ @include Work_Sans;
+ font-size: 13px;
+ font-weight: 400;
+ margin: 5px 0;
+ }
+ }
+ }
+}
+
+
+
+#showDialog {
+ background-color: $color;
+ width: 100px;
+ border: none;
+ display: none;
+ flex-direction: column;
+ align-items: stretch;
+
+
+ .js-modal {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-around;
+ color: black;
+ @include Syne;
+ text-decoration: none;
+ font-size: 14px;
+ visibility: hidden;
+ gap: 7px;
+
+ i {
+ display: flex;
+ font-size: 19px;
+ gap: 10px;
+ color: black;
+ }
+ }
+}
+.flexModal {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: nowrap;
+ gap: 20px;
+
+ h2 {
+ padding: 0px;
+ margin: 0px;
+ }
+}
+
+
+
diff --git a/FrontEnd/assets/styles/layouts/_login.scss b/FrontEnd/assets/styles/layouts/_login.scss
new file mode 100644
index 0000000..6484c76
--- /dev/null
+++ b/FrontEnd/assets/styles/layouts/_login.scss
@@ -0,0 +1,111 @@
+@use "../Variables/mixins";
+@use "../Variables/variables";
+
+
+#contactLogin {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 380px;
+ margin-top: 37px;
+
+ .error {
+ display: none;
+ margin: 0 0 40px 0;
+ color: red;
+ @include Work_Sans;
+ font-weight: 900;
+ font-style: italic;
+ }
+ }
+
+ .loginPage {
+ text-decoration: none;
+ color: #000;
+ }
+
+ .pagelogin {
+ text-decoration: none;
+ color: #000;
+ font-weight: 600;
+ }
+
+ .titleLogIn {
+ text-align: center;
+ margin-top: 150px;
+ }
+
+#loginForm {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 auto;
+
+ .email {
+ transform: translateX(-165px);
+ @include Syne;
+ font-size: 14px;
+ color: $color3;
+ font-weight: 500;
+ }
+ .password {
+ transform: translateX(-138px);
+ @include Syne;
+ font-size: 14px;
+ color: $color3;
+ font-weight: 500;
+ }
+
+ input {
+ width: 380px;
+ height: 50px;
+ margin-top: 7px;
+ margin-bottom: 30px;
+ border: none;
+ box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09);
+ }
+
+ .submit {
+ width: 180px;
+ height: 35px;
+ background: $color1;
+ color: $color;
+ border-radius: 60px;
+ border: none;
+ @include Syne;
+ font-weight: 700;
+ margin-top: 7px;
+ margin-bottom: 28px;
+ cursor: pointer;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .buttonsubmit {
+ @include Syne;
+ font-weight: 700;
+ width: 179px;
+ height: 36px;
+ color: $color;
+ background-color: $color1;
+ text-align: center;
+ flex-shrink: 0;
+ font-size: 14px;
+ border-radius: 60px;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+}
+.passwordLogin {
+ @include Work_Sans;
+ font-size: 14px;
+ font-weight: 500;
+ text-decoration: underline;
+ color: $color3;
+ text-align: center;
+}
+
+
diff --git a/FrontEnd/assets/styles/layouts/_modal1.scss b/FrontEnd/assets/styles/layouts/_modal1.scss
new file mode 100644
index 0000000..0c24e2f
--- /dev/null
+++ b/FrontEnd/assets/styles/layouts/_modal1.scss
@@ -0,0 +1,184 @@
+@use "../Variables/mixins";
+@use "../Variables/variables";
+
+// La Modale
+*{ box-sizing: border-box; }
+
+#modal1 {
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ animation: fadeIn 2s both;
+
+ .modalGallery {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ justify-items: center;
+ justify-content: space-between;
+ margin: 20px;
+ grid-row-gap: 25px;
+ grid-column-gap: 20px;
+
+
+ figure {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100px;
+ height: 135px;
+
+ .imgModal {
+ position: relative;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-shrink: 0;
+ }
+
+ .buttonDelete {
+ width: 20px;
+ height: 20px;
+ left: 20px;
+ transform: translate3d(74px, -128px, 10px);
+ background: transparent;
+ border: none;
+
+ i.fa-solid {
+ width: 22px;
+ height: 26px;
+ }
+
+ .faTrashCan {
+ content: "\f2ed";
+ display: flex;
+ position: absolute;
+ font-family: "Font Awesome 5 Free";
+ transform: translateX(-8px);
+ top: -2px;
+ z-index: 0;
+ color: $color;
+ background: black;
+ height: 17px;
+ width: 17px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 5px;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ }
+ .errorDelete {
+ display: flex;
+ position: absolute;
+ justify-content: center;
+ font-weight: bold;
+ @include Syne;
+ font-size: 14px;
+ top: 24px;
+ left: 203px;
+ visibility: hidden;
+ color: red;
+ }
+ .successDelete {
+ display: flex;
+ position: absolute;
+ justify-content: center;
+ font-weight: bold;
+ @include Syne;
+ font-size: 14px;
+ top: 24px;
+ left: 203px;
+ visibility: hidden;
+ color: green;
+ }
+ .line {
+ margin: 25px;
+ height: 1px;
+ background: $color5;
+ }
+ .addImg {
+ justify-content: center;
+ height: 36px;
+ background: $color1;
+ font-size: 14px;
+ border: none;
+ cursor: pointer;
+ }
+
+ .modal-1 {
+ display: flex;
+ overflow: auto;
+ width: 630px;
+ height: 688px;
+ top: 660px;
+ left: 405px;
+ background-color: #FFF;
+ animation: slideFromTop .5s both;
+ gap: 20px;
+ border-radius: 10px;
+ align-items: flex-start;
+ flex-direction: column;
+ overflow: hidden;
+ overflow-x: hidden;
+ overflow-y: hidden;
+
+ input[type="submit"] {
+ display: flex;
+ position: fixed;
+ @include Syne;
+ font-weight: 700;
+ color: $color;
+ background-color: $color1;
+ margin : auto ;
+ width: 180px;
+ left:220px;
+ text-align: center;
+ border-radius: 60px ;
+ }
+
+ .js-modal-close1 {
+ display: flex;
+ background-color: #FFF;
+ border: none;
+
+ .jsModalClose1 {
+ margin-top: 15px;
+ margin-left: 470px;
+ cursor: pointer;
+ position : absolute;
+ width: 17px;
+ height: 20px;
+ background: transparent;
+ margin: 0;
+ border-radius: 0px;
+ top: 15px;
+ right: 30px;
+ z-index: 5;
+ border: none;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+ h3 {
+ display: flex;
+ @include Syne;
+ font-size: 26px;
+ font-weight: 400;
+ justify-content: center;
+ margin-top: 45px;
+ }
+ }
+}
diff --git a/FrontEnd/assets/styles/layouts/_modal2.scss b/FrontEnd/assets/styles/layouts/_modal2.scss
new file mode 100644
index 0000000..2dd8d80
--- /dev/null
+++ b/FrontEnd/assets/styles/layouts/_modal2.scss
@@ -0,0 +1,248 @@
+@use "../Variables/mixins";
+@use "../Variables/variables";
+
+#modal1 {
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ animation: fadeIn 2s both;
+
+ .modal-2 {
+ overflow: hidden;
+ width: 630px;
+ height: 670px;
+ padding: 20px;
+ background-color: $color;
+ animation: slideFromTop .5s both;
+ gap: 20px;
+ border-radius: 10px;
+
+ input[type="submit"] {
+ display: flex;
+ @include Syne;
+ font-weight: 700;
+ height: 36px;
+ color: $color;
+ justify-content: center;
+ background: $color10;
+ border: none;
+ margin : 5px auto ;
+ width: 180px;
+ text-align: center;
+ border-radius: 60px ;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .prev {
+ background-color: $color;
+ border: none;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ p {
+ position: fixed;
+ top: 280px;
+ @include Work_Sans;
+ font-size: 12px;
+ font-weight: 400;
+ }
+ .js-modal-close2 {
+ position: absolute;
+ right: 20px;
+ background-color: $color;
+ border: none;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ h3 {
+ display: flex;
+ font-family: Work Sans;
+ font-size: 26px;
+ font-weight: 400;
+ line-height: 30.5px;
+ justify-content: center;
+ margin-top: 15px;
+ }
+ }
+ #WorkFormAdd {
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ flex-wrap: wrap;
+ margin-top: 20px;
+ gap: 29px;
+
+ .AddPhoto {
+ display: flex;
+ gap: 5px;
+ width: 460px;
+ height: 200px;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ align-items: center;
+ align-content: center;
+ background-color: $color6;
+
+ i {
+ display: flex;
+ height: 60px;
+ width: 63px;
+ margin-top: 10px;
+ color: $color7;
+ }
+ }
+ label.importImage {
+ display: flex;
+ border-radius: 50px;
+ color: $color9;
+ background: $color8;
+ font-size: 14px;
+ font-weight: 500;
+ @include Work_Sans;
+ width: 173px;
+ height: 36px;
+ text-align: center;
+ vertical-align: baseline;
+ justify-content: center;
+ align-items: center;
+ transform: translateY(30px);
+ }
+
+ #imgGallery {
+ display: none;
+ visibility: hidden;
+ }
+ #preview-file {
+
+ display: none;
+ width: 55%;
+ height: 100%;
+ margin-top: -73px;
+
+ .imgPreview {
+ height: 53%;
+ width: 100%;
+ }
+ alt {
+ justify-content: center;
+ }
+ }
+ .errorMessage {
+ visibility: hidden;
+ display: flex;
+ position: fixed;
+ color: red;
+ @include Syne;
+ font-size: 14px;
+ font-weight: bold;
+ justify-content: center;
+ display: none;
+ top: 320px;
+ }
+ .validMessage {
+ visibility: hidden;
+ display: flex;
+ position: fixed;
+ color: green;
+ @include Syne;
+ font-size: 14px;
+ font-weight: bold;
+ justify-content: center;
+ display: none;
+ top: 320px;
+ left: 203px;
+ }
+ .errorValMessage {
+ visibility: hidden;
+ display: flex;
+ position: absolute;
+ color: red;
+ @include Syne;
+ font-size: 14px;
+ font-weight: bold;
+ justify-content: center;
+ display: none;
+ top: 320px;
+ left: 203px;
+ }
+
+
+ #formAddImg {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+
+ label {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ height:16px;
+ width: 32px;
+ color: #3D3D3D;
+ font-size: 12px;
+ @include Syne;
+ font-weight: 500;
+ border: none;
+ background: #FFF;
+ }
+ #titleAdd {
+ font-family: Syne, Sans;
+ height: 35px;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 500;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+ border: none;
+ }
+
+ #select {
+ width: 460px;
+ height: 35px;
+ background: $color;
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.09);
+ border: none;
+
+ #category {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ border: none;
+ font-size: 12px;
+ @include Syne;
+
+ &:focus-visible {
+ outline: 1px solid $color;
+ }
+ }
+ }
+ .line {
+ margin: 20px;
+ height: 1px;
+ background: $color5;
+ }
+ #submitWork {
+ height: 36px;
+ width: 237px;
+ border-radius: 60px;
+ background: #A7A7A7;
+ border: none;
+ font-size: 14px;
+ font-family: Syne;
+ }
+ }
+ }
+}