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 4f2e39a..253b736 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 @@ -38,10 +38,9 @@ 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'); + wp_enqueue_style('gp-front-page-style-2', get_template_directory_uri() . '/static/css/front-page.css'); wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/new-front-page.css'); wp_enqueue_script('gp-front-page-materialize', get_template_directory_uri() . '/static/js/libs/materialize.min.js', array(), null, true); - // wp_enqueue_script( 'gp-front-page-main', get_template_directory_uri() . '/static/js/front-page.js', array(), null, true ); wp_enqueue_script('gp-front-page-main', get_template_directory_uri() . '/static/js/new-front-page.js', array(), null, true); } add_action('wp_enqueue_scripts', 'theme_enqueue_scripts'); 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 9bf071a..a2219bf 100644 --- a/wp-content/themes/cosmopet/static/css/new-front-page.css +++ b/wp-content/themes/cosmopet/static/css/new-front-page.css @@ -1,6 +1,7 @@ main { padding-top: 0px; background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%); + overflow-x: hidden; } .new-container { max-width:1240px; @@ -1181,6 +1182,10 @@ font-size: 12px; padding: 100px 20px; margin-top: -5%; } +.main-bot .swiper-container { + width: 100%; + height: 100%; +} .main-bot_wrapper { border-radius: 60px; width: 100%; @@ -1226,13 +1231,13 @@ font-size: 12px; .main-bot_wrapper-link { border: 2px solid #121212; border-radius: 100px; - width: 174px; height: 56px; padding: 9px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 70px; + gap: 20px; } /* Main Cosmopet X */ @@ -1352,42 +1357,58 @@ font-size: 12px; } /* Main Gallery */ - +.main-gallery { + padding-top: 120px; + padding-bottom: 100px; + +} .main-gallery .mosaic-swiper { padding: 40px 20px; + width: 100%; + overflow: visible; +} +.main-gallery_title { + font-weight: 700; + font-size: 64px; + text-transform: uppercase; + color: #f4f1f0; } - .gallery-container { - display: grid; - grid-template-columns: repeat(2, 1fr); /* Две колонки */ - gap: 20px; /* Максимальный gap 20px */ - padding: 40px 20px; - max-height: 700px; /* Фиксированная высота контейнера (настройте под нужный размер) */ - overflow: hidden; + display: flex; + width: 100%; + height: 530px; + gap: 20px; } - -.item { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; +.gallery-block { + width: 250px; + display: flex; + flex-direction: column; + gap: 20px; +} +.gallery-block img { + border: 2px solid #fff; + height: 100%; + width: 100%; + object-fit: none; +} +.gallery-block { + width: 280px; } - .large { - grid-column: span 1; /* Занимает одну ячейку */ - grid-row: span 2; /* Занимает две строки */ + height: 70%; + border-radius: 40px; } - .small { - grid-column: span 1; /* Занимает одну ячейку */ - grid-row: span 1; /* Занимает одну строку */ + height: 30%; + border-radius: 40px; } - .full-height { - grid-column: span 2; /* Занимает обе колонки */ - grid-row: span 2; /* Занимает две строки */ + height: 100%; + border-radius: 40px; } + + /* Main quiz */ .truth { @@ -1794,6 +1815,141 @@ font-size: 12px; color: #fff; } +/* Main ingredients */ + +.about { + box-shadow: none; + background: #f2f2f2; + border-radius: 0px; + position: relative; + z-index: 2; + margin-top: 0px; + padding: 46px 0px 97px; +} +.about_slider{ + padding-top: 0px; +} +.about_slider_ae{ + padding-top: 0px; +} +.about_slider .slider-container { + position: relative; + /* max-width: 636px; */ + height: 300px; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; +} + +.about_slider .slide { + position: relative; + background: #FFF; + border-radius: 60px; + /* width: 429px; + height: 546px; */ + display: flex; + flex-direction: column; + align-items: center; + gap: 45px; + padding: 35px 50px 25px 50px; + opacity: 1; + z-index: 1; +} +.about_slider .carousel .carousel-item{ + width: 429px; + height: 546px; + padding: 35px 50px 25px 50px; + padding: 50px 53px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* background: var(--creme-white, #F4F1F0); */ + background: #ffffff30; + backdrop-filter: blur(6px); + z-index: 1; + box-shadow: -2px 5px 22.9px 0px rgba(0, 0, 0, 0.25); + gap: 45px; +} + +.about_slider .carousel .carousel-item.active { + backdrop-filter: blur(6px); + z-index: 3; +} +.about_slider .carousel .carousel-item::after { + content: ''; + background-image: url(../img/border.png); + background-size: cover; + /* background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); */ + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: -2; + transform: translateZ(-1px); +} +.about_slider .carousel .carousel-item img{ + width: auto; +} + +.about_slider .slide_info{ + display: flex; + flex-direction: column; + gap: 15px; +} +.about_slider .slide--prev, +.about_slider .slide--next{ + z-index: 2; + opacity: 0.75; +} + +.about_slider .prev, .about_slider .next { + position: absolute; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + z-index: 99; + background-color: unset; +} + +.about_slider .prev { + left: 29vw; +} + +.about_slider .next { + right: 29vw; +} + +.about_slider .slide_title{ + text-transform: uppercase; + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +.about_slider .slide_text{ + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(--grey-black, #121212); +} +.carousel { + overflow: hidden; + position: relative; + width: 100%; + min-height: 660px; + -webkit-perspective: 500px; + perspective: 500px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transform-origin: 0% 50%; + transform-origin: 0% 50%; +} + 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 741fb46..2ce80cf 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,14 @@ document.addEventListener('DOMContentLoaded', function() { } }); + // Bot slider + const botSwiper = new Swiper('.bot-slider', { + effect: 'fade', + fadeEffect: { crossFade: true }, + autoplay: { delay: 5000, disableOnInteraction: false }, + loop: true + }); + // cosmopet x slider let cosmopetSwiper = new Swiper(".cosmopet-x__swiper", { @@ -249,13 +257,29 @@ document.addEventListener('DOMContentLoaded', function() { // Gallery slider - new Swiper('.mosaic-swiper', { + const mosaicSwiper = new Swiper('.mosaic-swiper', { slidesPerView: 'auto', spaceBetween: 20, freeMode: true, - grabCursor: true + grabCursor: true, + loop: true // Включает бесконечную прокрутку }); + let scrollPosition = 0; + const speed = 0.2; // Очень медленная скорость в пикселях за кадр + + function animate() { + scrollPosition -= speed; + swiper.wrapperEl.style.transform = `translateX(${scrollPosition}px)`; + // Корректировка для бесконечной прокрутки (простая имитация) + if (Math.abs(scrollPosition) > swiper.wrapperEl.scrollWidth / 2) { + scrollPosition = 0; // Сброс позиции для имитации бесконечности + } + requestAnimationFrame(animate); + } + + animate(); + // Quiz const truthContents = document.querySelectorAll('.truth_content'); let currentIndex = 0; @@ -309,7 +333,67 @@ document.addEventListener('DOMContentLoaded', function() { } }); + var slider = carousel_init(); + + function carousel_init() { + var carousel = document.querySelectorAll('.carousel'); + var options = { + numVisible: window.innerWidth > 421 ? 5 : 3, + indicators: false // Removed dots + }; + var instances = M.Carousel.init(carousel, options); + document.querySelectorAll('.about_slider_nav').forEach(btn => { + btn.addEventListener('click', function (e) { + if (e.target.closest('button').classList.contains('next')) { + instances[0].next(); + } else { + instances[0].prev(); + } + }); + }); + return instances; + } }); +document.addEventListener('DOMContentLoaded', function () { + jQuery('.truth-form').on('submit', function(e){ + e.preventDefault(); + var form = new FormData(this); + var action = jQuery(this).attr('action') + jQuery.ajax({ + url: action, + data: form, + processData: false, + contentType: false, + type: 'POST', + success: function (response) { + response = JSON.parse(response) + if (response.status == 'Success'){ + jQuery('.truth_end-text--before').hide() + jQuery('.truth_end-text--sent').show() + } + } + }); + }) + + + + jQuery('body').on('click', '[data-copy]', async function(){ + + + try { + const textToCopy = jQuery(this).data('copy'); + await navigator.clipboard.writeText(textToCopy); + + jQuery(this).addClass('active') + setTimeout(function(){ + jQuery(this).removeClass('active') + }, 2000) + } catch (err) { + + } + }) +}); + 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 8121e3b..cd4afef 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page.twig @@ -16,5 +16,5 @@ {% 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' %} #} + {% 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-bot.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig index a5d8633..33d6f95 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig @@ -1,13 +1,26 @@
-
-
Первый в России
-

ветеринарный бот с бесплатными вет консультациями

- Перейтиarrow -
-
-
-
-
+
+
+
+
Первый в России
+

ветеринарный бот с бесплатными вет консультациями

+ Перейтиarrow +
+
+
+
+
+
+

Телеграм с инструкцией о том, как понимать своего пета

+

+ Перейти в Telegramarrow +
+
+
+
+
+
+
\ No newline at end of file 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 b91a99b..07f05e8 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 @@ -1,30 +1,91 @@
-

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

+

COSMOPETS

- - +
+ +
+ +
+ +
+
- - +
+ +
+ +
+ +
+
- - +
+ +
+ +
+ +
+
- +
+ +
+
-
+
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+
+
+ + {#
@@ -34,7 +95,7 @@
-
+
#}
diff --git a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients.twig b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients.twig index 4e2eba4..6caabc6 100644 --- a/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients.twig +++ b/wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients.twig @@ -1,23 +1,69 @@ -
-
-

{{ main_ingredients_title }}

-
-
- {% for slide in main_ingredients_slider %} -
-
- {{ slide.title }} -
{{ slide.title }}
-
- {{ slide.descr }} -
-
-
- {% endfor %} -
- -
-
-
-
-
\ No newline at end of file +
+
+
+ + +
+
+ +
+

+ {% if site_region == 'ru' %}МОС и ФОС пребиотики{% elseif site_region == 'ae' %}MOS and FOS prebiotics{% endif %} +

+

+ {% if site_region == 'ru' %}Поддерживают здоровый баланс микрофлоры кишечника и снижают риск заболеваний ЖКТ{% elseif site_region == 'ae' %}Maintain a healthy balance of intestinal microflora and reduces the risk of intestinal diseases{% endif %} +

+
+
+
+ +
+

+ {% if site_region == 'ru' %}Омега 3 и жирные кислоты{% elseif site_region == 'ae' %}Omega 3 and fatty acids{% endif %} +

+

+ {% if site_region == 'ru' %}Улучшают работу мозга и сохраняют его активность, обеспечивают здоровье кожи и блеск шерсти{% elseif site_region == 'ae' %}They improve the functioning of the brain and maintain its normal activity, preserve the health of the skin and the shine of the coat{% endif %} +

+
+
+
+ +
+

+ {% if site_region == 'ru' %}Юкка Шидигера{% elseif site_region == 'ae' %}Yucca schidigera{% endif %} +

+

+ {% if site_region == 'ru' %}Стимулирует пищеварение, связывает вещества, вызывающие неприятный запах фекалий. Результат — регулярный стул с меньшим запахом{% elseif site_region == 'ae' %}It stimulates digestion, even binding the substances responsible for the specific smell of dog and cat faeces. As a result bowel-emptying occurs like clockwork (and with less odour!){% endif %} +

+
+
+
+ +
+

+ {% if site_region == 'ru' %}Кальций, фосфор и витамин D{% elseif site_region == 'ae' %}Calcium, phosphorus and vitamin D{% endif %} +

+

+ {% if site_region == 'ru' %}В оптимальном соотношении поддерживают здоровье костей, способствуют восстановлению суставов и подвижности{% elseif site_region == 'ae' %}In their optimal ratio, they support bone health, promote joint restoration and help maintain mobility{% endif %} +

+
+
+
+ +
+

+ {% if site_region == 'ru' %}Энтопротеин{% elseif site_region == 'ae' %}E-protein{% endif %} +

+

+ {% if site_region == 'ru' %}Легкоперевариваемый энтопротеин, который к тому же превосходит по питательности традиционное мясо. Будучи новым источником белка, не вызывает аллергии у питомцев{% elseif site_region == 'ae' %}An easily digestible E-protein, nutritionally superior to traditional meat; being a novel source of protein, does not cause allergies in pets{% endif %} +

+
+
+
+
+
+
\ No newline at end of file