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

+
+

+
+ + + + + +
+ Mot de passe oublié +
+ +
+ + + + + + \ 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; + } + } + } +}