From 81845f1271673c9d1411c1ea00d405fdb776a911 Mon Sep 17 00:00:00 2001 From: maksim Date: Tue, 8 Jul 2025 20:16:17 +0300 Subject: [PATCH] =?UTF-8?q?Task:7199=20|=20=D0=92=D0=B5=D1=80=D1=81=D1=82?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=B3=D0=BB=D0=B0=D0=B2=D0=BD=D0=BE=D0=B9.=20?= =?UTF-8?q?=D0=93=D0=B0=D0=BB=D0=B5=D1=80=D0=B5=D1=8F,=20=D0=BA=D0=B2?= =?UTF-8?q?=D0=B8=D0=B7,=20cosmopetx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../template-new-front-page.php | 39 ++ .../cosmopet/static/css/new-front-page.css | 405 +++++++++++++++++- .../cosmopet/static/js/new-front-page.js | 92 ++++ .../templates/_pages/new-front-page.twig | 4 + .../_pages/new-front-page/main-cosmopetx | 0 .../_pages/new-front-page/main-cosmopetx.twig | 25 ++ .../_pages/new-front-page/main-gallery.twig | 42 ++ .../_pages/new-front-page/main-quiz.twig | 396 +++++++++++++++++ 8 files changed, 1002 insertions(+), 1 deletion(-) delete mode 100644 wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx create mode 100644 wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx.twig diff --git a/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php b/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php index 5bf83ac..4f2e39a 100644 --- a/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php +++ b/wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php @@ -9,6 +9,33 @@ if (!class_exists('Timber')) { return; } +function enqueue_custom_gallery_assets() { + // Fancybox 5 + wp_enqueue_style( + 'fancybox-css', + 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.css', + [], + null + ); + + wp_enqueue_script( + 'fancybox-js', + 'https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.js', + [], + null, + true + ); + + // Инициализация Fancybox + wp_add_inline_script('fancybox-js', " + document.addEventListener('DOMContentLoaded', function () { + Fancybox.bind('[data-fancybox=\"gallery\"]', {}); + }); + "); +} +add_action('wp_enqueue_scripts', 'enqueue_custom_gallery_assets'); + + function theme_enqueue_scripts() { wp_enqueue_style('gp-front-page-materialize-css', get_template_directory_uri() . '/static/css/libs/materialize.min.css'); // wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/front-page.css'); @@ -19,6 +46,8 @@ function theme_enqueue_scripts() { } add_action('wp_enqueue_scripts', 'theme_enqueue_scripts'); + + $context = Timber::context(); if (function_exists('get_field')) { @@ -42,6 +71,16 @@ if (function_exists('get_field')) { // specialists $context['main_specialists_title'] = get_field('main_specialists-title'); $context['main_specialists_items'] = get_field('main_specialists-items'); + // cosmopetx + $context['other_post'] = Timber::get_post(383); // Загружаем пост с ID 383 + //quiz + $context['q_title'] = get_field('q_title'); + $context['reviews_title'] = get_field('reviews_title'); + $context['q_1'] = get_field('q_1', 383); + $context['q_2'] = get_field('q_2', 383); + $context['q_3'] = get_field('q_3', 383); + $context['q_4'] = get_field('q_4', 383); + $context['q_5'] = get_field('q_5', 383); } try { diff --git a/wp-content/themes/cosmopet/static/css/new-front-page.css b/wp-content/themes/cosmopet/static/css/new-front-page.css index 91aab79..a3efd09 100644 --- a/wp-content/themes/cosmopet/static/css/new-front-page.css +++ b/wp-content/themes/cosmopet/static/css/new-front-page.css @@ -1035,10 +1035,10 @@ main { /* Main Smi */ .main-smi { - box-shadow: 6px 9px 20px 0 rgba(0, 0, 0, 0.15); background: #f4f1f0; padding: 100px 20px; border-radius: 0!important; + margin-top: -5%; } .smiSlider .slider-arrows { position: absolute; @@ -1235,7 +1235,410 @@ font-size: 12px; margin-bottom: 70px; } +/* Main Cosmopet X */ + +.cosmopet-x { + background: #f4f1f0; + padding: 100px 20px; + margin-top: -5%; + overflow: hidden; + border-radius: 0px 0px 60px 60px; +} +.cosmopet-x .main-reviews_title { + font-weight: 700; + font-size: 64px; + text-transform: uppercase; + color: #121212; +} +.cosmopet-x__swiper, +.cosmopet-x__swiper .swiper-wrapper { + height: auto; +} +.cosmopet-x__title { + color: var(--creme-white, #F4F1F0); + font-family: "Craftwork Grotesk"; + font-size: 82px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; +} +.cosmopet-x__swiper { + margin-top: 52px; + position: relative; +} +.cosmopet-x__item { + position: relative; + width: 100%; + height: 484px; +} +.cosmopet-x__item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + z-index: 1; + width: 100%; + border-radius: 60px; + border: 2px solid var(--creme-white, #F4F1F0); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.83) 0%, rgba(255, 255, 255, 0.00) 25.17%, rgba(255, 255, 255, 0.00) 65%, rgba(255, 255, 255, 0.83) 80%); +} +.cosmopet-x__bg { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + border-radius: 60px; +} +.cosmopet-x__body { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + width: 100%; + padding: 36px 35px; +} +.cosmopet-x__heading { + color: var(--grey-black, #121212); + font-family: "Craftwork Grotesk"; + font-size: 22px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; +} +.cosmopet-x__btn { + display: block; + max-width: max-content; + margin-top: 7px; + color: #000; + font-family: "Craftwork Grotesk"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding: 6px 15px 10px 15px; + border-radius: 28px; + border: 1px solid #000; + background: var(--wh, #FFF); +} +.cosmopet-x__top { + position: absolute; + height: auto; + width: 60%; + top: 43px; + left: 50%; + transform: translateX(-50%); + z-index: 2; +} +.cosmopet-x .slider-arrows { + top: 50%; + transform: translateY(-50%); + position: absolute; + width: 100%; +} +.cosmopet-x .slider-arrows .cosmopet-prev { + left: -30px; +} +.cosmopet-x .slider-arrows .cosmopet-next { + right: -30px; +} +.cosmopet-x .slider-arrow { + background-image: url('data:image/svg+xml,')!important; +} + +/* Main Gallery */ + +.main-gallery .mosaic-swiper { + padding: 40px 20px; +} + +.gallery-container { + display: grid; + grid-template-columns: repeat(2, 1fr); /* Две колонки */ + gap: 20px; /* Максимальный gap 20px */ + padding: 40px 20px; + max-height: 700px; /* Фиксированная высота контейнера (настройте под нужный размер) */ + overflow: hidden; +} + +.item { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.large { + grid-column: span 1; /* Занимает одну ячейку */ + grid-row: span 2; /* Занимает две строки */ +} + +.small { + grid-column: span 1; /* Занимает одну ячейку */ + grid-row: span 1; /* Занимает одну строку */ +} + +.full-height { + grid-column: span 2; /* Занимает обе колонки */ + grid-row: span 2; /* Занимает две строки */ +} + +/* Main quiz */ + +.truth { + border-radius: 60px 60px 0px 0px; + background: var(--creme-white, #F4F1F0); + padding-bottom: 119px; + margin-top: -1px; + padding-top: 60px; +} +.truth .truth_top{ + position: relative; + display: flex; + align-items: center; + justify-content: space-between; +} +.truth .truth_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + text-align: end; + text-transform: uppercase; + width: 723px; +} +.truth .truth_title span{ + color: #76CE75; + +} +.truth_top .gift_img{ + margin-left: -180px; +} +.truth_top .gift_line-img{ + position: absolute; + display: none; + bottom: 150px; + right: 0; + width: 245px; +} +.truth_content { + position: relative; + display: none; +} + +.truth_content::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: 0; +} +.truth_content.active { + display: block; +} +.truth .truth_block{ + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + width: 100%; + height: 480px; + overflow: hidden; + background: var(--creme-white, #F4F1F0); + border-radius: 60px; + box-shadow: 0px 3px 13.5px 0px #00000040; + padding: 25px 34px 0px 63px; +} +.truth .truth_success, +.truth .truth_error { + display: none; +} +.truth .truth_success.show, +.truth .truth_error.show { + display: flex; +} + +.truth_block .truth_line{ + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + margin-bottom: 24px; +} +.truth_block .truth_line span{ + border: 1px solid var(--grey-black, #121212); + opacity: .6; + width: 73px; + border-radius: 10px; +} +.truth_block .truth_line span.active{ + opacity: 1; +} +.truth_block .truth_block-title{ + font-weight: 700; + font-size: 48px; + text-transform: uppercase; + color: #121212; + margin-bottom: 40px; +} +.truth_content-end .truth_block-title, +.truth_success .truth_block-title{ + background: -webkit-radial-gradient(#0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.truth_error .truth_block-title{ + background: -webkit-radial-gradient(#F21E6A 0%, #FF6543 112.38%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.truth_block .truth_block-text{ + position: relative; + z-index: 1; + display: flex; + align-items: start; + gap: 26px; +} +.truth_block .truth_end-text{ + display: flex; + flex-direction: column; + gap: 21px; +} +.truth_block .truth_block-text p{ + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + max-width: 559px; +} +.truth_block .truth_block-text p span{ + font-weight: 500; +} +.truth_default .truth_block-text p{ + text-transform: uppercase; +} +.truth_error .truth_block-text p, +.truth_success .truth_block-text p { + max-width: 592px; + font-size: 20px; + line-height: 24px; + font-weight: 500; +} +.truth_block .truth_info{ + position: absolute; + width: 95%; + bottom: 0; + display: flex; + align-items: end; + justify-content: space-between; + margin-top: -100px; + z-index: 0; +} +.truth_content-end .truth_info{ + display: flex; + align-items: center; + justify-content: end; +} +.truth_block .truth_links{ + display: flex; + align-items: center; + gap: 15px; + padding-bottom: 56px; +} +.truth_error .truth_links, +.truth_success .truth_links{ + gap: 20px; +} +.truth_block .truth_result{ + display: flex; + align-items: center; + gap: 23px; +} +.truth_block .truth_result img{ + width: 100%; +} +.truth_block .truth_link{ + width: 141px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + text-align: center; + color: var(--grey-black, #121212); + border: 2px solid var(--grey-black, #121212); + border-radius: 48px; +} + +.truth_content-end .truth_info img{ + margin-right: -34px; +} +.truth_content-end .truth_block .truth_link{ + width: 221px; +} + +.truth_content-end .truth_xn{ + position: relative; + width: 270px; + height: 158px; + background-image: url(../img/xn-border.svg); + background-repeat: no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: center; +} +.truth_points { + font-size: 450%; + font-weight: 700; +} +.truth_content-wrap { + z-index: 5; + min-width: 800px; +} +.truth_pictures_brain { + display: block; + position: absolute; + top: -25%; + right: -3%; + z-index: 11; +} +.truth_pictures_sale { + display: block; + position: absolute; + bottom: 5%; + z-index: 0; + left: 10%; +} +.truth_pictures_arrow { + display: block; + position: absolute; + top: 5%; + left: 28%; +} +.main-truth_title { + font-weight: 700; + font-size: 64px; + text-transform: uppercase; + color: #121212; +} +.main-truth_title span { + font-weight: 700; + font-size: 48px; + text-transform: uppercase; + color: #121212; +} diff --git a/wp-content/themes/cosmopet/static/js/new-front-page.js b/wp-content/themes/cosmopet/static/js/new-front-page.js index bd80a90..741fb46 100644 --- a/wp-content/themes/cosmopet/static/js/new-front-page.js +++ b/wp-content/themes/cosmopet/static/js/new-front-page.js @@ -218,6 +218,98 @@ document.addEventListener('DOMContentLoaded', function() { } }); + // cosmopet x slider + + let cosmopetSwiper = new Swiper(".cosmopet-x__swiper", { + slidesPerView: 2.5, + spaceBetween: 43, + navigation: { + nextEl: '.cosmopet-next', + prevEl: '.cosmopet-prev' + }, + breakpoints: { + 300: { + slidesPerView: 1, + spaceBetween: 200, + }, + 776: { + slidesPerView: 2, + spaceBetween: 30, + }, + 991: { + slidesPerView: 2.4, + spaceBetween: '5%', + }, + 1400: { + slidesPerView: 3, + spaceBetween: 37, + }, + } + }); + + // Gallery slider + + new Swiper('.mosaic-swiper', { + slidesPerView: 'auto', + spaceBetween: 20, + freeMode: true, + grabCursor: true + }); + + // Quiz + const truthContents = document.querySelectorAll('.truth_content'); + let currentIndex = 0; + let correctAnswers = 0; + + truthContents.forEach(content => { + const successBtn = content.querySelector('.success_btn'); + const errorBtn = content.querySelector('.error_btn'); + const nextBtn = content.querySelectorAll(".next_btn"); + const truthSuccess = content.querySelector('.truth_success'); + const truthError = content.querySelector('.truth_error'); + const truthDefault = content.querySelector('.truth_default'); + + if (successBtn) { + successBtn.addEventListener('click', function () { + truthDefault.style.display = 'none'; + truthSuccess.classList.add('show'); + correctAnswers++; + }); + } + + if (errorBtn) { + errorBtn.addEventListener('click', function () { + truthDefault.style.display = 'none'; + truthError.classList.add('show'); + }); + } + + if (nextBtn) { + nextBtn.forEach(btn => { + btn.addEventListener('click', function () { + truthSuccess.classList.contains('show') ? truthSuccess.classList.remove('show') : truthError.classList.remove('show'); + content.classList.remove('active'); + + currentIndex++; + + if (currentIndex < truthContents.length) { + truthContents[currentIndex].classList.add('active'); + } + if (truthContents.length - currentIndex == 1) { + truthContents[currentIndex].querySelector(".truth_points-corrects").innerHTML = correctAnswers; + truthContents[currentIndex].querySelector(".truth_points-all").innerHTML = currentIndex ; + } + }) + }); + } + + // Initial visibility + if (truthDefault) { + truthDefault.style.display = 'block'; + } + }); + + }); diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig index cf720af..8121e3b 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig @@ -11,6 +11,10 @@ {% include '/templates/_pages/new-front-page/main-food.twig' %} {% include '/templates/_pages/new-front-page/main-reviews.twig' %} {% include '/templates/_pages/new-front-page/main-treats.twig' %} + {% include '/templates/_pages/new-front-page/main-blog.twig' %} + {% include '/templates/_pages/new-front-page/main-quiz.twig' %} {% include '/templates/_pages/new-front-page/main-media.twig' %} {% include '/templates/_pages/new-front-page/main-bot.twig' %} + {% include '/templates/_pages/new-front-page/main-cosmopetx.twig' %} + {# {% include '/templates/_pages/new-front-page/main-gallery.twig' %} #} {% endblock %} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx deleted file mode 100644 index e69de29..0000000 diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx.twig new file mode 100644 index 0000000..bd6fc41 --- /dev/null +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-cosmopetx.twig @@ -0,0 +1,25 @@ +
+
+

{{ other_post.meta('cosmopet_x_blocktitle') }}

+
+
+ {% for slide in other_post.meta('cosmopet_x_slider') %} +
+
+ + +
+
{{ slide.title }}
+ подробнее +
+
+
+ {% endfor %} +
+
+ + +
+
+
+
diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-gallery.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-gallery.twig index e69de29..b91a99b 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-gallery.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-gallery.twig @@ -0,0 +1,42 @@ +
+
+

{{ other_post.meta('cosmopet_x_blocktitle') }}

+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ +
+
+ + + + + + + +
+
+ +
+
+
+
diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-quiz.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-quiz.twig index e69de29..9782d0c 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-quiz.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-quiz.twig @@ -0,0 +1,396 @@ +
+
+

проверьте свои знания
и получите

+
+ +
+ + + + +
+ +
+
+
+
+ + + + + +
+
{{ q_1.title }}
+
+ +

{{ q_1.text }}

+
+
+
+ + +
+ {{ q_1.img.alt }} +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это миф!') }}
+
+

{{ q_1.text_true }}

+
+
+
+ +
+ +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это миф!') }}
+
+

{{ q_1.text_true }}

+
+
+
+ +
+ +
+
+
+ +
+
+
+ + + + + +
+ +

{{ q_2.title }}

+
+ +

{{ q_2.text }}

+
+
+
+ + +
+ {{ q_2.img.alt }} +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это миф!') }}
+
+

{{q_2.text_true}} +

+
+
+
+ +
+ +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это миф!') }}
+
+

{{q_2.text_true}} +

+
+
+
+ +
+ +
+
+
+ +
+
+
+ + + + + +
+
{{q_2.title}}
+
+ +

{{q_3.text}}

+
+
+
+ + +
+ +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это правда!') }}
+
+

{{q_3.text_true}}

+
+
+
+ + +
+ {% for img in q3.img_list %} + {{ item.img.alt }} + {% endfor %} + +
+
+ +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это правда!') }}
+
+

{{q_3.text_true}}

+
+
+
+ +
+ {% for img in q3.img_list_err %} + {{ item.img.alt }} + {% endfor %} +
+
+ +
+
+
+ +
+
+
+ + + + + +
+
{{q_4.text_title}}
+
+ +

{{q_4.text}}

+
+
+
+ + +
+ {{q_4.img.alt}} +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это правда!') }}
+
+

{{q_4.text_true}}

+
+
+
+ +
+ +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это правда!') }}
+
+

{{q_4.text_true}}

+
+
+
+ +
+ +
+
+
+ +
+
+
+ + + + + +
+
{{q_5.title}}
+
+ +

{{q_5.text}}

+
+
+
+ + +
+ {{q_5.img.alt}} +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это миф!') }}
+
+

{{q_5.text_true}}

+
+
+
+ +
+ +
+
+ +
+
+ + + + + +
+
{{ function('pll_e', 'Это миф!') }}
+
+ +
+
+
+ +
+ +
+
+
+ +
+
+
{{ function('pll_e', 'ваш результат') }}
+
+
+ + / + +
+
+

{{promo_text}} +

+
{{promo}}
+
+ + {{ function('pll_e', 'В магазин') }} +
+
+ +
+
+
+
+
+
\ No newline at end of file