home page finished
This commit is contained in:
Kakabay
parent
8d8ebf5917
commit
a3783049c5
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.33331 3.16669L10.6666 8.50002L5.33331 13.8334" stroke="black" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 198 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentcolor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 271 B |
|
|
@ -295,3 +295,37 @@ trigs.forEach((trig) => {
|
|||
trig.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Review popup start ============================
|
||||
|
||||
const popup = document.getElementById('review-popup');
|
||||
const openReviewPopupBtn = document.getElementById('openReviewPopupBtn');
|
||||
const closeReviewPopupBtn = document.getElementById('closeReviewPopupBtn');
|
||||
const closeReviewPopupBtn2 = document.getElementById('closeReviewPopupBtn2');
|
||||
const closeReviewPopupText = document.getElementById('closeReviewPopupText');
|
||||
|
||||
const openPopup = () => {
|
||||
popup.style.display = 'flex';
|
||||
document.body.classList.add('no-scroll');
|
||||
};
|
||||
|
||||
const closePopup = () => {
|
||||
popup.style.display = 'none';
|
||||
document.body.classList.remove('no-scroll');
|
||||
};
|
||||
|
||||
console.log('hello');
|
||||
|
||||
openReviewPopupBtn.addEventListener('click', openPopup);
|
||||
closeReviewPopupText.addEventListener('click', closePopup);
|
||||
closeReviewPopupBtn.addEventListener('click', closePopup);
|
||||
closeReviewPopupBtn2.addEventListener('click', closePopup);
|
||||
|
||||
window.addEventListener('click', (event) => {
|
||||
if (event.target === popup) {
|
||||
popup.style.display = 'none';
|
||||
document.body.classList.remove('no-scroll');
|
||||
}
|
||||
});
|
||||
|
||||
// Review popup end ============================
|
||||
|
|
|
|||
|
|
@ -1633,6 +1633,26 @@ button.nav-link {
|
|||
margin-left: 0.8rem;
|
||||
}
|
||||
|
||||
.empty-button {
|
||||
background-color: #929292;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 23px 0px;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
|
||||
font-size: 14px;
|
||||
color: #e0e0e0;
|
||||
letter-spacing: -2%;
|
||||
text-align: center;
|
||||
line-height: 100%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.item-gallery-block {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -1731,6 +1751,302 @@ button.nav-link {
|
|||
|
||||
/* PRE-FOOTER end ===================*/
|
||||
|
||||
/* Reviews secction start =================*/
|
||||
|
||||
.reviews-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 60px 0 240px 0;
|
||||
}
|
||||
|
||||
.reviews-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.reviews-title {
|
||||
font-weight: 700;
|
||||
font-size: 28px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.reviews-top-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.reviews-top-link span {
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.add-review-button,
|
||||
.review-popup-button {
|
||||
width: fit-content;
|
||||
background-color: #c3000e;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-out;
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.review-popup-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.review-popup-button:disabled {
|
||||
background-color: #929292;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.add-review-button:hover,
|
||||
.review-popup-button:hover:not(:disabled) {
|
||||
background: #a5000b;
|
||||
}
|
||||
|
||||
.review-popup {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.review-popup-content {
|
||||
background-color: #fefefe;
|
||||
padding: 40px 80px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.review-popup-title {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
line-height: 120%;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.review-popup-title--green {
|
||||
text-align: center;
|
||||
color: #3a8f3e;
|
||||
font-size: 28px;
|
||||
line-height: 120%;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.close-review-popup-button {
|
||||
color: #4e4e4e;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-review-popup {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
line-height: 100%;
|
||||
padding: 5px;
|
||||
color: #4e4e4e;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.close-review-popup:hover,
|
||||
.close-review-popup:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.review-popup-input-block {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.review-popup-input-block > label {
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
letter-spacing: -2%;
|
||||
}
|
||||
|
||||
.review-popup-start-block > h3 {
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
letter-spacing: -2%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.review-popup-input-block > input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #cdcdcd;
|
||||
font-size: 14px;
|
||||
letter-spacing: -2%;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
body.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loader {
|
||||
border: 4px solid rgba(255, 0, 0, 0.3);
|
||||
border-top: 4px solid red;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.reviews-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.review-card {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding: 40px 20px 23px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.review-popup-start-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.review-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.review-card-star {
|
||||
color: #c7c7c7;
|
||||
}
|
||||
|
||||
.review-card-star--active {
|
||||
color: #c3000e;
|
||||
}
|
||||
|
||||
.review-rating--popup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.review-rating--popup > .review-card-star {
|
||||
height: 24px;
|
||||
width: 32px;
|
||||
color: #c7c7c7;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-out;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.review-rating--popup > .review-card-star.hovered,
|
||||
.review-rating--popup > .review-card-star.clicked {
|
||||
color: #c3000e;
|
||||
}
|
||||
|
||||
.review-details {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.review-text {
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
text-align: center;
|
||||
letter-spacing: 2%;
|
||||
}
|
||||
|
||||
.review-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.reviewer-name {
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.review-date {
|
||||
font-size: 12px;
|
||||
color: #9d9d9d;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
/* Reviews secction end =======================*/
|
||||
|
||||
/* FOOTER ===========================*/
|
||||
.footer {
|
||||
background: #242424;
|
||||
|
|
|
|||
|
|
@ -1320,7 +1320,14 @@
|
|||
<h2>Лидеры Продаж</h2>
|
||||
</div>
|
||||
<div class="item-gallery-wrapper">
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/xiaomi.jpg" alt="xiaomiphone" />
|
||||
</div>
|
||||
|
|
@ -1346,9 +1353,19 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/washingmachine.png" alt="washingmachine" />
|
||||
</div>
|
||||
|
|
@ -1374,9 +1391,19 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/iron.png" alt="iron" />
|
||||
</div>
|
||||
|
|
@ -1403,9 +1430,19 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/samsungphone.png" alt="samsungphone" />
|
||||
</div>
|
||||
|
|
@ -1432,9 +1469,19 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block item-gallery-block-deleted">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/sharptv.png" alt="sharptv" />
|
||||
</div>
|
||||
|
|
@ -1460,8 +1507,12 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="banner-inner">
|
||||
|
|
@ -1475,6 +1526,7 @@
|
|||
<h2>Новинки</h2>
|
||||
</div>
|
||||
<div class="item-gallery-wrapper">
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
|
|
@ -1507,8 +1559,12 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
|
|
@ -1541,8 +1597,12 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
|
|
@ -1576,8 +1636,12 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
|
|
@ -1611,8 +1675,12 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block item-gallery-block-deleted">
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
|
|
@ -1645,8 +1713,12 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="banner-inner">
|
||||
|
|
@ -1660,13 +1732,14 @@
|
|||
<h2>Скидки</h2>
|
||||
</div>
|
||||
<div class="item-gallery-wrapper">
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<div class="item-gallery-discount">
|
||||
<div class="item-gallery-discount-img">
|
||||
<img src="../assets/icons/BG.svg" alt="" />
|
||||
</div>
|
||||
<p class="item-gallery-discount-text">8%</p>
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/xiaomi.jpg" alt="xiaomiphone" />
|
||||
</div>
|
||||
|
|
@ -1682,7 +1755,6 @@
|
|||
<p class="item-gallery-rating-feed">22 отзыва</p>
|
||||
</div>
|
||||
<div class="item-gallery-price">
|
||||
<p class="item-gallery-price-old">7 200 TMT</p>
|
||||
<p class="item-gallery-price-new">18 500 TMT</p>
|
||||
</div>
|
||||
<div class="item-gallery-cart">
|
||||
|
|
@ -1693,15 +1765,19 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<div class="item-gallery-discount">
|
||||
<div class="item-gallery-discount-img">
|
||||
<img src="../assets/icons/BG.svg" alt="" />
|
||||
</div>
|
||||
<p class="item-gallery-discount-text">4%</p>
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/washingmachine.png" alt="washingmachine" />
|
||||
</div>
|
||||
|
|
@ -1717,7 +1793,6 @@
|
|||
<p class="item-gallery-rating-feed">16 отзывов</p>
|
||||
</div>
|
||||
<div class="item-gallery-price">
|
||||
<h3 class="item-gallery-price-old">16 200 TMT</h3>
|
||||
<p class="item-gallery-price-new">15 575 TMT</p>
|
||||
</div>
|
||||
<div class="item-gallery-cart">
|
||||
|
|
@ -1728,15 +1803,19 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<div class="item-gallery-discount">
|
||||
<div class="item-gallery-discount-img">
|
||||
<img src="../assets/icons/BG.svg" alt="" />
|
||||
</div>
|
||||
<p class="item-gallery-discount-text">7%</p>
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/iron.png" alt="iron" />
|
||||
</div>
|
||||
|
|
@ -1753,7 +1832,6 @@
|
|||
<p class="item-gallery-rating-feed">16 отзывов</p>
|
||||
</div>
|
||||
<div class="item-gallery-price">
|
||||
<p class="item-gallery-price-old">14 200 TMT</p>
|
||||
<p class="item-gallery-price-new">8 575 TMT</p>
|
||||
</div>
|
||||
<div class="item-gallery-cart">
|
||||
|
|
@ -1764,15 +1842,19 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block">
|
||||
<div class="item-gallery-discount">
|
||||
<div class="item-gallery-discount-img">
|
||||
<img src="../assets/icons/BG.svg" alt="" />
|
||||
</div>
|
||||
<p class="item-gallery-discount-text">10%</p>
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/samsungphone.png" alt="samsungphone" />
|
||||
</div>
|
||||
|
|
@ -1789,7 +1871,6 @@
|
|||
<p class="item-gallery-rating-feed">12 отзывов</p>
|
||||
</div>
|
||||
<div class="item-gallery-price">
|
||||
<p class="item-gallery-price-old">34 200 TMT</p>
|
||||
<p class="item-gallery-price-new">36 200 TMT</p>
|
||||
</div>
|
||||
<div class="item-gallery-cart">
|
||||
|
|
@ -1800,15 +1881,19 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-gallery-block item-gallery-block-deleted">
|
||||
<div class="item-gallery-discount">
|
||||
<div class="item-gallery-discount-img">
|
||||
<img src="../assets/icons/BG.svg" alt="" />
|
||||
</div>
|
||||
<p class="item-gallery-discount-text">3%</p>
|
||||
<span class="item-gallery-head">Новый</span>
|
||||
<button type="button" class="item-gallery-fav">
|
||||
<div>
|
||||
<img src="../assets/icons/heart.svg" alt="fav">
|
||||
</div>
|
||||
</button>
|
||||
<div class="item-gallery-img">
|
||||
<img src="../assets/images/sharptv.png" alt="sharptv" />
|
||||
</div>
|
||||
|
|
@ -1824,7 +1909,6 @@
|
|||
<p class="item-gallery-rating-feed">8 отзывов</p>
|
||||
</div>
|
||||
<div class="item-gallery-price">
|
||||
<p class="item-gallery-price-old">3 800 TMT</p>
|
||||
<p class="item-gallery-price-new">4 620 TMT</p>
|
||||
</div>
|
||||
<div class="item-gallery-cart">
|
||||
|
|
@ -1835,8 +1919,12 @@
|
|||
<h3 class="item-gallery-cart-text">В корзину</h3>
|
||||
</button>
|
||||
</div>
|
||||
<button class="empty-button">
|
||||
Нет в наличии
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1844,20 +1932,177 @@
|
|||
</main>
|
||||
<!-- ITEM GALLERY / NEW ITEMS end ===========================================================-->
|
||||
|
||||
|
||||
<!-- PRE-FOOTER ============================================================================ -->
|
||||
<section class="pre-footer">
|
||||
<!-- REVIEWS ============================================================================ -->
|
||||
<section class="reviews-section">
|
||||
<div class="container">
|
||||
<div class="pre-footer-inner">
|
||||
<h2 class="pre-footer-title">Узнавайте о новых акциях и предложениях!</h2>
|
||||
<form class="pre-footer-email">
|
||||
<input type='email' placeholder="Введите ваш email">
|
||||
<button>Подписаться</button>
|
||||
</form>
|
||||
<div class="reviews-inner">
|
||||
<div class="reviews-top">
|
||||
<h2 class="reviews-title">Отзывы</h2>
|
||||
<a href="#" class="reviews-top-link"><span>все отзывы</span>
|
||||
<img src="../assets/icons/chevron-right.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="reviews-content">
|
||||
|
||||
<div class="review-card">
|
||||
<div class="review-rating">
|
||||
<svg class="review-card-star--active" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="review-details">
|
||||
<p class="review-text">Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.</p>
|
||||
<div class="review-data">
|
||||
<h3 class="reviewer-name">Марина Кравец</h3>
|
||||
<div class="review-date">12.06.2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="review-card">
|
||||
<div class="review-rating">
|
||||
<svg class="review-card-star--active" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="review-details">
|
||||
<p class="review-text">Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.</p>
|
||||
<div class="review-data">
|
||||
<h3 class="reviewer-name">Марина Кравец</h3>
|
||||
<div class="review-date">12.06.2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="review-card">
|
||||
<div class="review-rating">
|
||||
<svg class="review-card-star--active" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="review-details">
|
||||
<p class="review-text">Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.</p>
|
||||
<div class="review-data">
|
||||
<h3 class="reviewer-name">Марина Кравец</h3>
|
||||
<div class="review-date">12.06.2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="review-card">
|
||||
<div class="review-rating">
|
||||
<svg class="review-card-star--active" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star--active" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="review-details">
|
||||
<p class="review-text">Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.</p>
|
||||
<div class="review-data">
|
||||
<h3 class="reviewer-name">Марина Кравец</h3>
|
||||
<div class="review-date">12.06.2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button id="openReviewPopupBtn" class="add-review-button">Напиши свой отзыв!</button>
|
||||
|
||||
<div id="review-popup" class="review-popup">
|
||||
<div class="review-popup-content">
|
||||
<span id="closeReviewPopupBtn" class="close-review-popup">×</span>
|
||||
<h2 class="review-popup-title">Написать отзыв</h2>
|
||||
<div class="review-popup-input-block">
|
||||
<label for="name">Как вас зовут?</label>
|
||||
<input id="name" type="text" placeholder="Введите ваше имя">
|
||||
</div>
|
||||
<div class="review-popup-input-block">
|
||||
<label for="review">Ваш отзыв</label>
|
||||
<textarea name="review" id="review" rows="10" placeholder="Оставьте свой отзыв здесь"></textarea>
|
||||
</div>
|
||||
<div class="review-popup-start-block">
|
||||
<h3>Оцените нас</h3>
|
||||
<div class="review-rating--popup">
|
||||
<svg class="review-card-star" data-index="1" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="2" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="3" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="4" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="review-card-star" data-index="5" width="32" height="29" viewBox="0 0 32 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 0L19.5922 11.0557H31.2169L21.8123 17.8885L25.4046 28.9443L16 22.1115L6.59544 28.9443L10.1877 17.8885L0.783095 11.0557H12.4078L16 0Z" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<button class="review-popup-button" disabled>Отправить отзыв</button>
|
||||
</div>
|
||||
|
||||
<div class="review-popup-content hidden">
|
||||
<span id="closeReviewPopupBtn2" class="close-review-popup">×</span>
|
||||
<h2 class="review-popup-title review-popup-title--green">Отзыв добавлен успешно</h2>
|
||||
<h3 class="close-review-popup-button" id="closeReviewPopupText">Закрыть окно</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- PRE-FOOTER end ======================================================================== -->
|
||||
<!-- REVIEWS end ======================================================================== -->
|
||||
|
||||
<!-- FOOTER ================================================================================ -->
|
||||
<footer class="footer">
|
||||
|
|
@ -1987,8 +2232,171 @@
|
|||
<!-- FOOTER end ============================================================================ -->
|
||||
|
||||
<script src="../assets/scripts/swiper-bundle.js"></script>
|
||||
<script src='../assets//scripts/swiper-bundle.min.js'></script>
|
||||
<script src='../assets/scripts/swiper-bundle.min.js'></script>
|
||||
<script src="../assets/scripts/script.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// Review popup start
|
||||
const popup = document.getElementById('review-popup');
|
||||
const openReviewPopupBtn = document.getElementById('openReviewPopupBtn');
|
||||
const closeReviewPopupBtn = document.getElementById('closeReviewPopupBtn');
|
||||
const closeReviewPopupBtn2 = document.getElementById('closeReviewPopupBtn2');
|
||||
const closeReviewPopupText = document.getElementById('closeReviewPopupText');
|
||||
|
||||
const firstPopupContent = document.querySelector(".review-popup-content:nth-child(1)");
|
||||
const secondPopupContent = document.querySelector(".review-popup-content:nth-child(2)");
|
||||
|
||||
const sendReviewButton = document.querySelector(".review-popup-button");
|
||||
const nameInput = document.getElementById("name");
|
||||
const reviewInput = document.getElementById("review");
|
||||
|
||||
// Create the loader element
|
||||
const loader = document.createElement("div");
|
||||
loader.className = "loader";
|
||||
|
||||
const openPopup = () => {
|
||||
popup.style.display = 'flex';
|
||||
document.body.classList.add('no-scroll');
|
||||
|
||||
// Reset popup contents
|
||||
firstPopupContent.style.display = 'flex';
|
||||
secondPopupContent.style.display = 'none';
|
||||
loader.remove();
|
||||
resetStars();
|
||||
resetInputs();
|
||||
checkFormCompletion();
|
||||
};
|
||||
|
||||
const closePopup = () => {
|
||||
popup.style.display = 'none';
|
||||
document.body.classList.remove('no-scroll');
|
||||
resetStars();
|
||||
resetInputs();
|
||||
};
|
||||
|
||||
const resetStars = () => {
|
||||
const stars = document.querySelectorAll(".review-card-star");
|
||||
stars.forEach(star => {
|
||||
star.classList.remove("hovered", "clicked");
|
||||
});
|
||||
};
|
||||
|
||||
const resetInputs = () => {
|
||||
const inputs = document.querySelectorAll("#name, #review");
|
||||
inputs.forEach(input => {
|
||||
input.value = "";
|
||||
});
|
||||
};
|
||||
|
||||
const checkFormCompletion = () => {
|
||||
const isNameFilled = nameInput.value.trim() !== "";
|
||||
const isReviewFilled = reviewInput.value.trim() !== "";
|
||||
const isStarSelected = document.querySelectorAll(".review-card-star.clicked").length > 0;
|
||||
|
||||
if (isNameFilled && isReviewFilled && isStarSelected) {
|
||||
sendReviewButton.removeAttribute("disabled");
|
||||
} else {
|
||||
sendReviewButton.setAttribute("disabled", true);
|
||||
}
|
||||
};
|
||||
|
||||
nameInput.addEventListener("input", checkFormCompletion);
|
||||
reviewInput.addEventListener("input", checkFormCompletion);
|
||||
|
||||
openReviewPopupBtn.addEventListener('click', openPopup);
|
||||
closeReviewPopupText.addEventListener('click', closePopup);
|
||||
closeReviewPopupBtn.addEventListener('click', closePopup);
|
||||
closeReviewPopupBtn2.addEventListener('click', closePopup);
|
||||
|
||||
window.addEventListener('click', (event) => {
|
||||
if (event.target === popup) {
|
||||
closePopup();
|
||||
}
|
||||
});
|
||||
|
||||
// Review rating click effect start
|
||||
const ratingContainers = document.querySelectorAll(".review-rating--popup");
|
||||
|
||||
ratingContainers.forEach(container => {
|
||||
const stars = container.querySelectorAll(".review-card-star");
|
||||
|
||||
let clickedIndex = 0;
|
||||
|
||||
stars.forEach(star => {
|
||||
star.addEventListener("mouseover", function() {
|
||||
const index = parseInt(this.getAttribute("data-index"));
|
||||
for (let i = 0; i < index; i++) {
|
||||
stars[i].classList.add("hovered");
|
||||
}
|
||||
});
|
||||
|
||||
star.addEventListener("mouseout", function() {
|
||||
stars.forEach(star => star.classList.remove("hovered"));
|
||||
});
|
||||
|
||||
star.addEventListener("click", function() {
|
||||
const index = parseInt(this.getAttribute("data-index"));
|
||||
|
||||
if (index === clickedIndex) {
|
||||
clickedIndex = 0;
|
||||
stars.forEach(star => star.classList.remove("clicked", "hovered"));
|
||||
} else {
|
||||
clickedIndex = index;
|
||||
stars.forEach(star => {
|
||||
const starIndex = parseInt(star.getAttribute("data-index"));
|
||||
if (starIndex <= index) {
|
||||
star.classList.add("clicked");
|
||||
} else {
|
||||
star.classList.remove("clicked");
|
||||
}
|
||||
});
|
||||
}
|
||||
checkFormCompletion(); // Check form completion after selecting stars
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Send review
|
||||
sendReviewButton.addEventListener("click", function() {
|
||||
// Hide the first popup content
|
||||
firstPopupContent.style.display = 'none';
|
||||
|
||||
// Show the loader
|
||||
firstPopupContent.parentNode.insertBefore(loader, firstPopupContent.nextSibling);
|
||||
|
||||
// Wait for 3 seconds before showing the second popup content
|
||||
setTimeout(() => {
|
||||
// Remove the loader
|
||||
loader.remove();
|
||||
|
||||
// Show the second popup content
|
||||
secondPopupContent.style.display = "block";
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
// Optionally, add event listeners to close buttons to close the popup
|
||||
const closeButtons = document.querySelectorAll(".close-review-popup");
|
||||
closeButtons.forEach(button => {
|
||||
button.addEventListener("click", function() {
|
||||
// Hide the entire popup
|
||||
closePopup();
|
||||
});
|
||||
});
|
||||
|
||||
// Add an event listener to the "Закрыть окно" text to close the popup
|
||||
const closePopupTextElement = document.getElementById("closeReviewPopupText");
|
||||
closePopupTextElement.addEventListener("click", function() {
|
||||
// Hide the entire popup
|
||||
closePopup();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -222,6 +222,42 @@ $(document).ready(function () {
|
|||
|
||||
// ACCORDION SCRIPT end ==========================
|
||||
|
||||
// Review popup start ============================
|
||||
|
||||
const popup = document.getElementById('review-popup');
|
||||
const openReviewPopupBtn = document.getElementById('openReviewPopupBtn');
|
||||
const closeReviewPopupBtn = document.getElementById('closeReviewPopupBtn');
|
||||
const closeReviewPopupBtn2 = document.getElementById(
|
||||
'closeReviewPopupBtn2'
|
||||
);
|
||||
const closeReviewPopupText = document.getElementById(
|
||||
'closeReviewPopupText'
|
||||
);
|
||||
|
||||
const openPopup = () => {
|
||||
popup.style.display = 'flex';
|
||||
document.body.classList.add('no-scroll');
|
||||
};
|
||||
|
||||
const closePopup = () => {
|
||||
popup.style.display = 'none';
|
||||
document.body.classList.remove('no-scroll');
|
||||
};
|
||||
|
||||
openReviewPopupBtn.addEventListener('click', openPopup);
|
||||
closeReviewPopupText.addEventListener('click', closePopup);
|
||||
closeReviewPopupBtn.addEventListener('click', closePopup);
|
||||
closeReviewPopupBtn2.addEventListener('click', closePopup);
|
||||
|
||||
window.addEventListener('click', (event) => {
|
||||
if (event.target === popup) {
|
||||
popup.style.display = 'none';
|
||||
document.body.classList.remove('no-scroll');
|
||||
}
|
||||
});
|
||||
|
||||
// Review popup end ============================
|
||||
|
||||
// BURGER SCRIPT ===============================
|
||||
// let burgerTrigger = document.querySelector('.burger');
|
||||
// let burgerElement = document.querySelector('.nav-inner-burger-container');
|
||||
|
|
|
|||
|
|
@ -467,6 +467,7 @@
|
|||
// document.querySelector('.login-form.confirm').style.display = 'none';
|
||||
document.body.style.overflowY = 'hidden';
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue