Task:7199 | Верстка главной. Слайдеры, галерея

pull/36/head
parent 17e478c24b
commit 3d7dbe3012
  1. 3
      wp-content/themes/cosmopet/modules/static-pages/new-front-page/template-new-front-page.php
  2. 204
      wp-content/themes/cosmopet/static/css/new-front-page.css
  3. 88
      wp-content/themes/cosmopet/static/js/new-front-page.js
  4. 2
      wp-content/themes/cosmopet/templates/_pages/new-front-page.twig
  5. 31
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-bot.twig
  6. 81
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-gallery.twig
  7. 92
      wp-content/themes/cosmopet/templates/_pages/new-front-page/main-ingredients.twig

@ -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');

@ -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%;
}

@ -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) {
}
})
});

@ -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 %}

@ -1,13 +1,26 @@
<section class="main-bot">
<div class="new-container">
<div class="main-bot_wrapper" style="background:url('/wp-content/uploads/2025/07/frame-1321316173.png');background-position: center;">
<div class="main-bot_wrapper-tag">Первый в России</div>
<h2 class="main-bot_wrapper-title">ветеринарный бот с бесплатными вет консультациями</h2>
<a href="#" target="_blank" class="main-bot_wrapper-link">Перейти<img src="/wp-content/uploads/2025/07/group-1000001373-1.png" alt="arrow"></a>
<div class="main-bot_wrapper-bottom">
<div class="main-bot_wrapper-bottom-divider"></div>
<div class="main-bot_wrapper-bottom-divider"></div>
</div>
</div>
<div class="bot-slider swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide main-bot_wrapper" style="background:url('/wp-content/uploads/2025/07/frame-1321316173.png');background-position: center;background-size:cover;">
<div class="main-bot_wrapper-tag">Первый в России</div>
<h2 class="main-bot_wrapper-title">ветеринарный бот с бесплатными вет консультациями</h2>
<a href="#" target="_blank" class="main-bot_wrapper-link">Перейти<img src="/wp-content/uploads/2025/07/group-1000001373-1.png" alt="arrow"></a>
<div class="main-bot_wrapper-bottom">
<div class="main-bot_wrapper-bottom-divider"></div>
<div class="main-bot_wrapper-bottom-divider"></div>
</div>
</div>
<div class="swiper-slide main-bot_wrapper" style="background:url('/wp-content/uploads/2025/07/frame-1321316173-1.png');background-position: center;background-size:cover;">
<h2 class="main-bot_wrapper-title">Телеграм с инструкцией о том, как понимать своего пета</h2>
<p></p>
<a href="#" target="_blank" class="main-bot_wrapper-link">Перейти в Telegram<img src="/wp-content/uploads/2025/07/group-1000001373-1.png" alt="arrow"></a>
<div class="main-bot_wrapper-bottom">
<div class="main-bot_wrapper-bottom-divider"></div>
<div class="main-bot_wrapper-bottom-divider"></div>
</div>
</div>
</div>
</div>
</div>
</section>

@ -1,30 +1,91 @@
<section class="main-gallery">
<div class="new-container">
<h2 class="main-reviews_title">{{ other_post.meta('cosmopet_x_blocktitle') }}</h2>
<h2 class="main-gallery_title">COSMOPETS</h2>
<div class="swiper mosaic-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="gallery-container">
<div class="gallery-block block-1">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/1.png" alt="" class="large">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/2.png" alt="" class="small">
<div class="large">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/1.png" alt="" class="large">
</div>
<div class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/4.png" alt="" class="small">
</div>
</div>
<div class="gallery-block block-2">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/3.png" alt="" class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/4.png" alt="" class="small">
<div class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/3.png" alt="" class="small">
</div>
<div class="large">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/06/nz6_1558.jpg" alt="" class="large">
</div>
</div>
<div class="gallery-block block-1">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/5.png" alt="" class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/6.png" alt="" class="large">
<div class="large">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/5.png" alt="" class="large">
</div>
<div class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/6.png" alt="" class="small">
</div>
</div>
<div class="gallery-block block-3">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/9.png" alt="" class="full-height">
<div class="full-height">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/9.png" alt="" class="full-height">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="gallery-container">
<div class="gallery-block block-1">
<div class="large">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/1.png" alt="" class="large">
</div>
<div class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/4.png" alt="" class="small">
</div>
</div>
<div class="gallery-block block-2">
<div class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/3.png" alt="" class="small">
</div>
<div class="large">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/2.png" alt="" class="large">
</div>
</div>
<div class="gallery-block block-1">
<div class="large">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/5.png" alt="" class="large">
</div>
<div class="small">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/6.png" alt="" class="small">
</div>
</div>
<div class="gallery-block block-3">
<div class="full-height">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/9.png" alt="" class="full-height">
</div>
</div>
</div>
</div>
{# <div class="swiper-slide">
<div class="gallery-grid">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/10.png" alt="">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/7.png" alt="">
@ -34,7 +95,7 @@
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/11.png" alt="">
<img src="https://cosmopet-test-dumb.cp.good-production.xyz/wp-content/uploads/2025/07/dscf6363-copy-2-inst-1.png" alt="">
</div>
</div>
</div> #}
</div>
</div>

@ -1,23 +1,69 @@
<div class="main-ingredients">
<div class="new-container">
<h2 class="main-ingredients_title">{{ main_ingredients_title }}</h2>
<div class="swiper ingredients-swiper">
<div class="swiper-wrapper">
{% for slide in main_ingredients_slider %}
<div class="swiper-slide">
<div class="ingredient-card protein">
<img src="{{ slide.image }}" class="ingredient-icon" alt="{{ slide.title }}">
<div class="ingredient-title">{{ slide.title }}</div>
<div class="ingredient-description">
{{ slide.descr }}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
<section id="about" class="about">
<div class="container-fluid">
<div class="about_slider">
<button class="about_slider_nav next">
<img src="/wp-content/themes/cosmopet/static/img/slider-next.svg" alt="Next">
</button>
<button class="about_slider_nav prev">
<img src="/wp-content/themes/cosmopet/static/img/slider-prev.svg" alt="Previous">
</button>
<div class="carousel">
<div class="carousel-item">
<img src="/wp-content/themes/cosmopet/static/img/about_slider-img1.png" alt="">
<div class="slide_info">
<h3 class="slide_title">
{% if site_region == 'ru' %}МОС и ФОС пребиотики{% elseif site_region == 'ae' %}MOS and FOS prebiotics{% endif %}
</h3>
<p class="slide_text">
{% if site_region == 'ru' %}Поддерживают здоровый баланс микрофлоры кишечника и снижают риск заболеваний ЖКТ{% elseif site_region == 'ae' %}Maintain a healthy balance of intestinal microflora and reduces the risk of intestinal diseases{% endif %}
</p>
</div>
</div>
<div class="carousel-item">
<img src="/wp-content/themes/cosmopet/static/img/about_slider-img2.png" alt="">
<div class="slide_info">
<h3 class="slide_title">
{% if site_region == 'ru' %}Омега 3 и жирные кислоты{% elseif site_region == 'ae' %}Omega 3 and fatty acids{% endif %}
</h3>
<p class="slide_text">
{% 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 %}
</p>
</div>
</div>
<div class="carousel-item active">
<img src="/wp-content/themes/cosmopet/static/img/about_slider-img3.png" alt="">
<div class="slide_info">
<h3 class="slide_title">
{% if site_region == 'ru' %}Юкка Шидигера{% elseif site_region == 'ae' %}Yucca schidigera{% endif %}
</h3>
<p class="slide_text">
{% 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 %}
</p>
</div>
</div>
<div class="carousel-item">
<img src="/wp-content/themes/cosmopet/static/img/about_slider-img4.png" alt="">
<div class="slide_info">
<h3 class="slide_title">
{% if site_region == 'ru' %}Кальций, фосфор и витамин D{% elseif site_region == 'ae' %}Calcium, phosphorus and vitamin D{% endif %}
</h3>
<p class="slide_text">
{% if site_region == 'ru' %}В оптимальном соотношении поддерживают здоровье костей, способствуют восстановлению суставов и подвижности{% elseif site_region == 'ae' %}In their optimal ratio, they support bone health, promote joint restoration and help maintain mobility{% endif %}
</p>
</div>
</div>
<div class="carousel-item">
<img src="/wp-content/themes/cosmopet/static/img/about_slider-img5.png" alt="">
<div class="slide_info">
<h3 class="slide_title">
{% if site_region == 'ru' %}Энтопротеин{% elseif site_region == 'ae' %}E-protein{% endif %}
</h3>
<p class="slide_text">
{% 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 %}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Loading…
Cancel
Save