diff --git a/care/index.html b/care/index.html index 9d085eb..ebf8ef4 100644 --- a/care/index.html +++ b/care/index.html @@ -1075,6 +1075,73 @@

Find a Doctor near you

+ + + +
+
+ + doctopr + + +
+
+ +
diff --git a/care/src/js/gallery.js b/care/src/js/gallery.js new file mode 100644 index 0000000..bd169be --- /dev/null +++ b/care/src/js/gallery.js @@ -0,0 +1,44 @@ +const openModal = document.querySelector(".js-open-gallery"); +// const closeModal = document.querySelector(".js-close-gallery"); +const backdropJs = document.querySelector(".js-backdrop-gallery"); + +// Зробили клік на ссилку через деоегування подій +const link = document.querySelector(".gallery"); + +openModal.addEventListener("click", onOpenModal); +// closeModal.addEventListener("click", onCloseModal); +backdropJs.addEventListener("click", onBackdropClick); + +link.addEventListener("click", onCloseLinkClick); + +function onOpenModal() { + document.body.classList.add("is-hidden"); + // backdropJs.classList.toggle("is-open"); + document.body.classList.add("show-modal-2"); +} + +function onCloseModal() { + document.body.classList.remove("is-hidden"); + // backdropJs.classList.toggle("is-open"); + document.body.classList.remove("show-modal-2"); +} + +function onBackdropClick(event) { + if (event.currentTarget === event.target) { + onCloseModal(); + } +} + +function onCloseLinkClick(event) { + if (event.target.nodeName === "IMG") { + // console.log(event.target.nodeName); + // onCloseModal(); + onOpenModal(); + } +} + +function onEscKeyPress(event) { + if (event.code === "Escape") { + onCloseModal(); + } +} diff --git a/care/src/js/main.js b/care/src/js/main.js index 9081822..eec9fd2 100644 --- a/care/src/js/main.js +++ b/care/src/js/main.js @@ -22,3 +22,4 @@ import "./mouse"; import "./timer"; import "./accordion"; +import "./gallery"; diff --git a/care/src/js/mobileMenu.js b/care/src/js/mobileMenu.js index 67ce0a3..0e6c816 100644 --- a/care/src/js/mobileMenu.js +++ b/care/src/js/mobileMenu.js @@ -50,9 +50,16 @@ function onBackdropClick(event) { } } +// function onCloseLinkClick(event) { +// if (event.target.nodeName === "IMG") { +// onCloseModal(); +// } +// } + function onCloseLinkClick(event) { if (event.target.nodeName === "A") { onCloseModal(); + // onOpenModal(); } // Перевірити на який єлемент натиснули // console.log(event.target.nodeName); diff --git a/care/src/js/modal.js b/care/src/js/modal.js index 1b57cd5..869dc74 100644 --- a/care/src/js/modal.js +++ b/care/src/js/modal.js @@ -1,21 +1,3 @@ -// (() => { -// const refs = { -// openModalBtn: document.querySelector("[data-open-modal]"), -// closeModalBtn: document.querySelector("[data-close-modal]"), -// backdrop: document.querySelector("[data-backdrop]"), -// }; - -// refs.openModalBtn.addEventListener("click", toggleModal); -// refs.closeModalBtn.addEventListener("click", toggleModal); -// // refs.backdrop.addEventListener("click", logBackdropClick); -// // refs.backdrop.addEventListener("click", closeModalBth); - -// function toggleModal() { -// document.body.classList.toggle("modal-open"); -// // document.body.classList.toggle("modal-btn-close"); -// refs.backdrop.classList.toggle("is-hidden"); -// } -// })(); // Получаэмо доступ до елементів const refs = { diff --git a/care/src/sass/components/contacts.scss b/care/src/sass/components/contacts.scss index 8e58eb2..d5b59b8 100644 --- a/care/src/sass/components/contacts.scss +++ b/care/src/sass/components/contacts.scss @@ -180,3 +180,15 @@ legend { .form-btn:focus { background: $button-accent-color; } + +.gallery { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin-bottom: 120px; +} + +.gallery img { + height: 250px; +} diff --git a/care/src/sass/components/gallery/gallery.scss b/care/src/sass/components/gallery/gallery.scss new file mode 100644 index 0000000..d69e0d0 --- /dev/null +++ b/care/src/sass/components/gallery/gallery.scss @@ -0,0 +1,109 @@ +body.show-modal-2 .backdrop-3 { + opacity: 1; + visibility: visible; + pointer-events: initial; +} + +body.show-modal-2 .content-gallety { + transform: scale(1); +} + +.backdrop-3 { + // @media screen and (max-width: 767px) { + // position: fixed; + // top: 0; + // left: 0; + // width: 100%; + // height: 100%; + // z-index: 40; + // background-color: rgba(0, 0, 0, 0.3); + // visibility: hidden; + // transition: + // background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1), + // visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1); + // } + + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.3); + // z-index: 999; + + opacity: 0; + transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); + pointer-events: none; + visibility: hidden; + transition: + opacity 200ms ease-in-out, + visibility 200ms ease-in-out; +} + +// .js-backdrop-gallery.is-open { +// // opacity: 1; +// // background-color: rgba(0, 0, 0, 0.3); +// visibility: visible; + +// // pointer-events: none; +// } + +.content-gallety { + display: flex; + align-items: center; + // @media screen and (max-width: $tablet) { + // height: 100%; + // width: 60%; + + // background-color: $accent-color; + // transform: translateX(-100%); + // // transition: transform 0.45s linear; + // transition-property: all; + // transition-duration: 0.65s; + // transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + + // // transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); + // padding: 20px; + // // спрятать переполнение + // overflow: hidden; + // } + // padding: 30px; + max-width: 900px; + // min-height: 320px; + // width: 100%; + background-color: $white-color; + // border-radius: 10px; + // box-shadow: + // 0px 1px 3px 0px rgba(0, 0, 0, 0.2), + // 0px 1px 1px 0px rgba(0, 0, 0, 0.14), + // 0px 2px 1px -1px rgba(0, 0, 0, 0.12); + transform: scale(0.8); + transition: transform 200ms ease-in-out; + + // @media screen and (max-width: $tablet) { + // max-width: 235px; + // } + + // @media screen and (min-width: $tablet) and (max-width: $desktop) { + // max-width: 330px; + // } +} +.prev { + display: flex; +} + +.next { + display: flex; +} + +.content-gallery__btn { + display: flex; +} + +// .backdrop-3.is-open .content-gallery { +// // opacity: 1; +// transform: translateX(0); +// } diff --git a/care/src/sass/form/form.scss b/care/src/sass/form/form.scss index b61b6b0..a3f6e26 100644 --- a/care/src/sass/form/form.scss +++ b/care/src/sass/form/form.scss @@ -9,15 +9,9 @@ body.show-modal .modal-2 { } .backdrop-2 { - // padding: 20px; display: flex; justify-content: center; align-items: center; - // padding: 20px; - // padding-left: 20px; - // padding-right: 20px; - // padding-left: 20px; - // padding-right: 20px; position: fixed; top: 0; left: 0; @@ -35,23 +29,7 @@ body.show-modal .modal-2 { visibility 200ms ease-in-out; } -// .backdrop-2.is-hidden { -// opacity: 0; -// pointer-events: none; -// } - -// Чтили для спрятанной модалки -// .backdrop-2.is-hidden .modal-2 { -// transform: translate(-50%, -50%) scale(0.9); -// } - .modal-2 { - // box-sizing: border-box; - // position: absolute; - // top: 0; - // left: 0; - // width: 100vw; - // height: 100vw; padding: 30px; max-width: 400px; min-height: 320px; @@ -62,8 +40,6 @@ body.show-modal .modal-2 { 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); - // transform: translate(-50%, -50%) scale(1); - // transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); transform: scale(0.8); transition: transform 200ms ease-in-out; diff --git a/care/src/sass/style.scss b/care/src/sass/style.scss index e2f92ba..85d66ab 100644 --- a/care/src/sass/style.scss +++ b/care/src/sass/style.scss @@ -25,15 +25,11 @@ @import "normalize.css"; @import "./utils.scss"; - @import "base.scss"; @import "./variables.scss"; - @import "./animation/smooth-arrow.scss"; @import "./animation/lazy-images.scss"; - @import "./components/header.scss"; -// @import "./mobile-menu/burger-menu.scss"; @import "./mobile-menu/menu-button.scss"; @import "./components/hero.scss"; @import "./form/form.scss"; @@ -42,6 +38,7 @@ @import "./components/contacts.scss"; @import "./components/accordion/accordion.scss"; @import "./components/footer.scss"; +@import "./components/gallery/gallery.scss"; body { padding: 0; @@ -51,26 +48,3 @@ body { cursor: url("../image/cursor.png"), auto; } - -// .chat-button { -// position: fixed; -// right: 30px; -// bottom: 30px; - -// display: inline-block; -// width: 64px; -// height: 64px; - -// margin: 0; -// padding: 0; -// border: none; -// background-color: transparent; - -// // background-image: url("https://cdn-icons-png.flaticon.com/512/1653/1653630.png"); -// background-image: url("../image/arrow-up-64.png"); -// background-repeat: no-repeat; -// background-size: contain; - -// // cursor: pointer; -// cursor: url("../image/cursor-hand.png"), auto; -// }