Skip to content

Commit

Permalink
Feat(HTML, CSS, JS) Added modal terms
Browse files Browse the repository at this point in the history
  • Loading branch information
@ViktorSvertoka
ViktorSvertoka committed Jun 23, 2024
1 parent a44de37 commit bee3b1b
Show file tree
Hide file tree
Showing 6 changed files with 322 additions and 0 deletions.
124 changes: 124 additions & 0 deletions src/css/layout/13-terms-of-service.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
1 change: 1 addition & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
<load ="partials/10-modal-team.html" />
<load ="partials/11-scroll-top.html" />
<load ="partials/12-privacy-policy.html" />
<load ="partials/13-terms-of-service.html" />
</footer>

<script type="module" src="./main.js"></script>
Expand Down
53 changes: 53 additions & 0 deletions src/js/terms-of-service.js
View file
Original file line number Diff line number Diff line change
@@ -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);
1 change: 1 addition & 0 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
142 changes: 142 additions & 0 deletions src/partials/13-terms-of-service.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<div class="terms terms__backdrop is-hidden">
<div class="terms__wrapper">
<button class="terms__modal-close-btn" type="button">
<svg class="terms__modal-close-icon" width="20" height="20">
<use href="./sprite.svg#icon-cross-closed"></use>
</svg>
</button>

<h2 class="terms__title">
Terms of <span class="terms__inner">Service</span>
</h2>
<ol>
<li>
<h3 class="terms__subtitle">Acceptance of Terms</h3>
<p class="terms__text">
Welcome to English Excellence! These Terms of Service (”Terms”)
outline the terms and conditions for using our English language
courses and services (collectively referred to as the ”Services”).
By accessing or using our Services, you agree to comply with and be
bound by these Terms. If you do not agree with these Terms, please do
not use our Services.
</p>
</li>

<li>
<h3 class="terms__subtitle">Services Overview</h3>
<p class="terms__text">
English Excellence is dedicated to providing engaging and effective
English language courses in a supportive and stimulating learning
environment. Our aim is to help learners enhance their English
language skills through our courses.
</p>
</li>

<li>
<h3 class="terms__subtitle">Content and Intellectual Property</h3>
<ol>
<li class="services__sub-item list">
<p class="terms__text">
Course Materials: All course materials, including text, videos,
graphics, and other content, are the intellectual property of
English Excellence or its licensors. You are granted a limited,
non-exclusive, non-transferable license to access and use these
materials for educational purposes only.
</p>
</li>

<li class="services__sub-item list">
<p class="terms__text">
Prohibited Use: You may not reproduce, distribute, modify, create
derivative works of, publicly display, or perform any of our
course materials without prior written consent from
English Excellence.
</p>
</li>
</ol>
</li>

<li>
<h3 class="terms__subtitle">User Conduct</h3>
<ol>
<li">
<p class="terms__text">
Respectful Behavior: English Excellence maintains a respectful and
inclusive learning environment. You agree not to engage in any
behavior that is harmful, discriminatory, harassing, or disruptive
to other learners or instructors.
</p>
</li>

<li>
<p class="terms__text">
Prohibited Use: You may not reproduce, distribute, modify, create
derivative works of, publicly display, or perform any of our
course materials without prior written consent from
English Excellence.
</p>
</li>
</ol>
</li>

<li>
<h3 class="terms__subtitle">Privacy</h3>
<p class="terms__text">
Compliance with Laws: You agree to comply with all applicable laws and
regulations while using our Services.
</p>
</li>

<li>
<h3 class="terms__subtitle">Termination</h3>
<p class="terms__text">
English Excellence reserves the right to suspend or terminate your
access to our Services at its discretion, with or without cause.
</p>
</li>

<li>
<h3 class="terms__subtitle">Disclaimer of Warranties</h3>
<p class="terms__text">
Our Services are provided ”as is” and ”as available.“
English Excellence does not make any warranties, whether expressed or
implied, regarding the accuracy, reliability, or availability of the
Services.
</p>
</li>

<li>
<h3 class="terms__subtitle">Limitation of Liability</h3>
<p class="terms__text">
English Excellence shall not be liable for any indirect, incidental,
special, consequential, or punitive damages arising out of or in
connection with the use of our Services.
</p>
</li>

<li>
<h3 class="terms__subtitle">Modifications to Terms</h3>
<p class="terms__text">
English Excellence reserves the right to modify or update these Terms
at any time. We will provide notice of such changes, and your
continued use of our Services after the changes are posted will
signify your acceptance of the modified Terms.
</p>
</li>

<li>
<h3 class="terms__subtitle">Contact Us</h3>
<p class="terms__text">
If you have any questions or concerns about these Terms or our
Services, please contact us at
<a href="#">
[email protected]</a
>.
</p>
<p class="terms__text">
These Terms of Service were last updated on 23.06.24.
</p>
</li>
</ol>
</div>
</div>

0 comments on commit bee3b1b

Please sign in to comment.