From a3783049c5d4c20742bacb4aba41b4fa096b2edf Mon Sep 17 00:00:00 2001 From: Kakabay <2kakabayashyrberdyew@gmail.com> Date: Fri, 5 Jul 2024 14:34:04 +0500 Subject: [PATCH] home page finished --- .../assets/icons/chevron-right.svg | 3 + .../publishable/assets/icons/review-star.svg | 3 + .../Shop/publishable/assets/scripts/script.js | 34 ++ .../Shop/publishable/assets/styles/style.css | 316 +++++++++++ .../TPS/Shop/publishable/pages/index.html | 490 ++++++++++++++++-- .../TPS/Shop/src/Resources/assets/js/app.js | 36 ++ .../shop/layouts/header/search-nav.blade.php | 1 + 7 files changed, 842 insertions(+), 41 deletions(-) create mode 100644 packages/TPS/Shop/publishable/assets/icons/chevron-right.svg create mode 100644 packages/TPS/Shop/publishable/assets/icons/review-star.svg diff --git a/packages/TPS/Shop/publishable/assets/icons/chevron-right.svg b/packages/TPS/Shop/publishable/assets/icons/chevron-right.svg new file mode 100644 index 000000000..fd057b91c --- /dev/null +++ b/packages/TPS/Shop/publishable/assets/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/TPS/Shop/publishable/assets/icons/review-star.svg b/packages/TPS/Shop/publishable/assets/icons/review-star.svg new file mode 100644 index 000000000..728f8c197 --- /dev/null +++ b/packages/TPS/Shop/publishable/assets/icons/review-star.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/TPS/Shop/publishable/assets/scripts/script.js b/packages/TPS/Shop/publishable/assets/scripts/script.js index c53f69ba2..73b4eed72 100644 --- a/packages/TPS/Shop/publishable/assets/scripts/script.js +++ b/packages/TPS/Shop/publishable/assets/scripts/script.js @@ -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 ============================ diff --git a/packages/TPS/Shop/publishable/assets/styles/style.css b/packages/TPS/Shop/publishable/assets/styles/style.css index 972ccccf4..9bf5a14cb 100644 --- a/packages/TPS/Shop/publishable/assets/styles/style.css +++ b/packages/TPS/Shop/publishable/assets/styles/style.css @@ -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; diff --git a/packages/TPS/Shop/publishable/pages/index.html b/packages/TPS/Shop/publishable/pages/index.html index fa7ff19c8..ecdf17f27 100644 --- a/packages/TPS/Shop/publishable/pages/index.html +++ b/packages/TPS/Shop/publishable/pages/index.html @@ -1320,7 +1320,14 @@

Лидеры Продаж

+
+ Новый +
xiaomiphone
@@ -1346,9 +1353,19 @@

В корзину

+
+
+ Новый +
washingmachine
@@ -1374,9 +1391,19 @@

В корзину

+ +
+ Новый +
iron
@@ -1403,9 +1430,19 @@

В корзину

+ +
+ Новый +
samsungphone
@@ -1432,9 +1469,19 @@

В корзину

+ +
+ Новый +
sharptv
@@ -1460,8 +1507,12 @@

В корзину

+ +
все отзывы + + +
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.

+
+

Марина Кравец

+
12.06.2024
+
+
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.

+
+

Марина Кравец

+
12.06.2024
+
+
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.

+
+

Марина Кравец

+
12.06.2024
+
+
+
+ +
+
+ + + + + + + + + + + + + + + +
+
+

Приобрела смартфон в данном интернет-магазине - доставка прошла быстро и без задержек. Упаковка была надежной, все комплектующие на месте. Впечатлена качеством обслуживания и работой магазина в целом.

+
+

Марина Кравец

+
12.06.2024
+
+
+
+ +
+ + +
+
+ × +

Написать отзыв

+
+ + +
+
+ + +
+
+

Оцените нас

+
+ + + + + + + + + + + + + + + +
+
+ +
+ + +
+ + +
- +