diff --git a/src/css/layout/13-terms-of-service.css b/src/css/layout/13-terms-of-service.css new file mode 100644 index 0000000..7e659a3 --- /dev/null +++ b/src/css/layout/13-terms-of-service.css @@ -0,0 +1,124 @@ +.terms__backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow-y: auto; + z-index: 998; + padding: 15px; + background-color: rgba(0, 0, 0, 0.7); + visibility: visible; + opacity: 1; +} + +.is-hidden { + visibility: hidden; + pointer-events: none; + opacity: 0; +} + +.is-hidden .terms__wrapper { + visibility: hidden; + pointer-events: none; + opacity: 0.3; + transform: translate(-75%, -90%) scale(3); +} + +.terms__wrapper { + position: relative; + z-index: 999; + width: 320px; + margin-left: auto; + margin-right: auto; + padding: 25px 15px 20px; + visibility: visible; + opacity: 1; + background-color: var(--color-white); + border-radius: 10px; + box-shadow: 0 28px 42px rgba(0, 0, 0, 0.38), 0 20px 20px rgba(0, 0, 0, 0.33); + max-height: calc(100vh - 30px); + overflow-y: auto; +} + +@media screen and (min-width: 768px) { + .terms__wrapper { + width: 580px; + } +} + +@media screen and (min-width: 1280px) { + .terms__wrapper { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(1); + width: 1200px; + padding: 30px; + } +} + +.terms__modal-close-btn { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 10px; + right: 10px; + padding: 0px; + border: none; + background-color: transparent; + border-radius: 50%; + cursor: pointer; + stroke: var(--color-black); +} + +@media screen and (min-width: 768px) { + .terms__modal-close-btn { + top: 20px; + right: 20px; + } +} + +.terms__modal-close-btn:hover { + stroke: var(--color-green); +} + +.terms__modal-close-icon { + fill: currentColor; +} + +.terms__title { + margin-bottom: 16px; + text-align: center; + font-size: 32px; + line-height: 1.13; + letter-spacing: -0.02em; + color: var(--color-black); +} + +.terms__inner { + position: relative; +} + +.terms__inner::after { + position: absolute; + bottom: 4px; + left: 0; + content: ''; + z-index: -1; + width: 116px; + height: 12px; + border-radius: 8px; + background-color: var(--color-green-pseudo); +} + +.terms__subtitle { + font-weight: 600px; + margin-bottom: 12px; +} + +.terms__text { + color: rgba(18, 20, 23, 0.5); + margin-bottom: 12px; +} diff --git a/src/css/styles.css b/src/css/styles.css index 154151d..90b1175 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -19,3 +19,4 @@ @import url('./layout/10-modal-team.css'); @import url('./layout/11-scroll-top.css'); @import url('./layout/12-privacy-policy.css'); +@import url('./layout/13-terms-of-service.css'); diff --git a/src/index.html b/src/index.html index 59529aa..6c0a825 100644 --- a/src/index.html +++ b/src/index.html @@ -45,6 +45,7 @@ + diff --git a/src/js/terms-of-service.js b/src/js/terms-of-service.js new file mode 100644 index 0000000..7c40eca --- /dev/null +++ b/src/js/terms-of-service.js @@ -0,0 +1,53 @@ +const termsLink = document.querySelector('.footer__text--terms'); +const termsBackdrop = document.querySelector('.terms__backdrop'); +const termsCloseBtn = document.querySelector('.terms__modal-close-btn'); + +function onLinkClick(event) { + event.preventDefault(); + + termsBackdrop.classList.remove('is-hidden'); + document.body.classList.add('modal-open'); + + addAllEventListeners(); +} + +function onEscClick(event) { + event.preventDefault(); + + if (event.code !== 'Escape') { + return; + } + + closingModalStaff(); +} + +function onBackdropClick(event) { + if (event.target.closest('.terms__wrapper')) { + return; + } + + closingModalStaff(); +} + +function onCloseBtnClick(event) { + event.preventDefault(); + + closingModalStaff(); +} + +function addAllEventListeners() { + document.addEventListener('keydown', onEscClick); + termsBackdrop.addEventListener('click', onBackdropClick); + termsCloseBtn.addEventListener('click', onCloseBtnClick); +} + +function closingModalStaff() { + document.removeEventListener('keydown', onEscClick); + termsBackdrop.removeEventListener('click', onBackdropClick); + termsCloseBtn.removeEventListener('click', onCloseBtnClick); + + termsBackdrop.classList.add('is-hidden'); + document.body.classList.remove('modal-open'); +} + +termsLink.addEventListener('click', onLinkClick); diff --git a/src/main.js b/src/main.js index 794cec5..f414f91 100644 --- a/src/main.js +++ b/src/main.js @@ -5,3 +5,4 @@ import './js/modal-team'; import './js/smooth-scroll'; import './js/scroll-top'; import './js/privacy-policy'; +import './js/terms-of-service'; diff --git a/src/partials/13-terms-of-service.html b/src/partials/13-terms-of-service.html new file mode 100644 index 0000000..7c1c621 --- /dev/null +++ b/src/partials/13-terms-of-service.html @@ -0,0 +1,142 @@ +