Good-Production/Fakel-Gym
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

final

Browse Source
This commit is contained in:
GP_DEV
2025-08-01 10:07:08 +03:00
parent 21562852ca
commit 7d7a28e789
54 changed files with 4554 additions and 6928 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
template-parts/la-components/blocks/hero-block/hero-block.css
View File

@@ -6,6 +6,7 @@
.pagination-item[data-active="false"] .pagination-line {
background: #e0e0e0;
}
.pagination-item[data-active="true"] .pagination-line {
background: #222;
}
@@ -13,6 +14,7 @@
.dark .pagination-item[data-active="false"] .pagination-line {
background: rgba(248, 248, 248, 0.15);
}
.dark .pagination-item[data-active="true"] .pagination-line {
background: linear-gradient(90deg, rgba(250, 248, 245, 0.7) 0%, rgba(250, 248, 245, 0.7) 100%);
}
@@ -21,7 +23,7 @@
opacity: 1;
}
.inverted-radius{
.inverted-radius {
-webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20648%20575%22%3E%3Cpath%20d%3D%22M0%2C0H648A0%2C0%200%2C0%2C1%20648%2C0V575A0%2C0%200%2C0%2C1%20648%2C575H130A20%2C20%200%2C0%2C1%20110%2C555L110%2C535A20%2C20%200%2C0%2C0%2090%2C515L20%2C515A20%2C20%200%2C0%2C1%200%2C495V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20648%20575%22%3E%3Cpath%20d%3D%22M0%2C0H648A0%2C0%200%2C0%2C1%20648%2C0V575A0%2C0%200%2C0%2C1%20648%2C575H130A20%2C20%200%2C0%2C1%20110%2C555L110%2C535A20%2C20%200%2C0%2C0%2090%2C515L20%2C515A20%2C20%200%2C0%2C1%200%2C495V0A0%2C0%200%2C0%2C1%200%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
width: 648px;
@@ -29,6 +31,15 @@
aspect-ratio: 648 / 575;
}
@media (max-width: 767px) {
.inverted-radius {
mask: none;
-webkit-mask: none;
aspect-ratio: auto;
width: auto;
}
}
.radient-bg {
background: linear-gradient(180deg, #f9f9f9 69.59%, #ededed 100%);
}

88
template-parts/la-components/blocks/hero-block/hero-block.js
View File

@@ -3,43 +3,115 @@ document.addEventListener('DOMContentLoaded', function() {
heroBlocks.forEach(function(block) {
const swiperContainer = block.querySelector('.swiper');
if (!swiperContainer) return;
let progressAnimation = null;
const autoplayDelay = 4000;
const swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
grabCursor: true,
loop: true,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: autoplayDelay,
disableOnInteraction: false
},
on: {
slideChange: function () {
updatePagination(block, this.realIndex);
startProgressAnimation(block, this.realIndex);
},
autoplayStart: function() {
startProgressAnimation(block, this.realIndex);
},
autoplayStop: function() {
stopProgressAnimation();
}
}
});
// Функция обновления пагинации
function updatePagination(block, activeIndex) {
const paginationItems = block.querySelectorAll('.pagination-item');
paginationItems.forEach((item, index) => {
item.setAttribute('data-active', index === activeIndex ? 'true' : 'false');
const isActive = index === activeIndex;
item.setAttribute('data-active', isActive ? 'true' : 'false');
const line = item.querySelector('.pagination-line');
if (line && !isActive) {
line.style.background = '';
line.style.backgroundImage = '';
}
});
}
// Навигация
function startProgressAnimation(block, activeIndex) {
stopProgressAnimation();
const paginationItems = block.querySelectorAll('.pagination-item');
const activeItem = paginationItems[activeIndex];
if (!activeItem) return;
const line = activeItem.querySelector('.pagination-line');
if (!line) return;
line.style.backgroundImage = 'linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, transparent 0%)';
let progress = 0;
const startTime = Date.now();
function animate() {
const elapsed = Date.now() - startTime;
progress = Math.min(elapsed / autoplayDelay, 1);
const percentage = progress * 100;
line.style.backgroundImage = `linear-gradient(to right, rgba(255, 255, 255, 0.8) ${percentage}%, transparent ${percentage}%)`;
if (progress < 1) {
progressAnimation = requestAnimationFrame(animate);
}
}
progressAnimation = requestAnimationFrame(animate);
}
function stopProgressAnimation() {
if (progressAnimation) {
cancelAnimationFrame(progressAnimation);
progressAnimation = null;
}
}
const prevBtn = block.querySelector('.custom-prev');
const nextBtn = block.querySelector('.custom-next');
if (prevBtn) {
prevBtn.addEventListener('click', () => swiper.slidePrev());
prevBtn.addEventListener('click', () => {
swiper.slidePrev();
stopProgressAnimation();
});
}
if (nextBtn) {
nextBtn.addEventListener('click', () => swiper.slideNext());
nextBtn.addEventListener('click', () => {
swiper.slideNext();
stopProgressAnimation();
});
}
// Пагинация
block.querySelectorAll('.pagination-item').forEach((item, index) => {
item.addEventListener('click', () => swiper.slideToLoop(index));
item.addEventListener('click', () => {
swiper.slideToLoop(index);
stopProgressAnimation();
});
});
updatePagination(block, 0);
startProgressAnimation(block, 0);
});
});

190
template-parts/la-components/blocks/hero-block/hero-block.php
View File

@@ -55,74 +55,82 @@ if ($room === 'fitness') {
?>
<section class="pt-[161px] dark:text-[#f8f8f8] hero-block pb-[30px] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>
<section
class="pt-[161px] max-[768px]:pt-[141px] dark:text-[#f8f8f8] hero-block pb-[30px] <?php echo esc_attr($section_classes); ?>" <?php echo $style_attr; ?>>
<div class="container mx-auto">
<div class="flex justify-between gap-[24px] ">
<div class="flex flex-col w-full mt-[26px]">
<?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name' : 'light_logo_name'); ?>
<div class="container mx-auto mt-[14px]">
<div class="max-[1200px]:flex-col max-[1200px]:items-center flex justify-between gap-[24px] ">
<div class="max-[768px]:mt-[14px] flex flex-col w-full mt-[26px]">
<?php display_icon(get_current_room() === 'gym' ? 'dark_logo_name' : 'light_logo_name'); ?>
<h1 class=" font-[500] leading-[110%] text-[48px] mt-[20px]">
<?php if (!empty($heading)): ?>
<?php echo wp_kses_post($heading); ?>
<?php endif; ?>
</h1>
<h1 class=" font-[500] leading-[110%] max-[1330px]:text-[36px] max-[768px]:text-[24px] text-[48px] mt-[20px]">
<?php if (!empty($heading)): ?>
<?php echo wp_kses_post($heading); ?>
<?php endif; ?>
</h1>
<p class="text-[24px] font-[500] mt-[20px]">
<?php echo !empty($heading_text) ? esc_html($heading_text) : 'Зал для тех, кто ценит комфорт и сервис'; ?>
</p>
<p class="max-[768px]:text-[16px] max-[768px]:mt-[16px] text-[24px] font-[500] mt-[20px]">
<?php echo !empty($heading_text) ? esc_html($heading_text) : 'Зал для тех, кто ценит комфорт и сервис'; ?>
</p>
<div class="flex gap-[12px] mt-[40px]">
<a class="!no-underline text-[#f8f8f8] text-[18px] font-[600] justify-center h-[75px] w-full max-w-[281px] rounded-[90px] flex items-center gap-[12px] red-gradient-hover"
href="#">
Пробная тренировка
<?php display_icon('button_arrow_up') ?>
</a>
<a class="!no-underline text-[#f8f8f8] text-[18px] font-[600] justify-center h-[75px] w-full max-w-[210px] rounded-[90px] flex items-center gap-[12px] grey-gradient-hover"
href="/цены">Смотреть цены</a>
<div class="max-[768px]:mt-[24px] max-[768px]:flex-col flex gap-[12px] mt-[40px]">
<button class="group transition [&>_img]:transition [&>_img]:group-hover:rotate-[45deg] max-[768px]:h-[61px] max-[768px]:max-w-[327px] !no-underline text-[#f8f8f8] text-[18px] font-[600] justify-center h-[75px] w-full max-w-[281px] rounded-[90px] flex items-center gap-[12px] red-gradient-hover cursor-pointer border-none outline-none"
type="button"
data-scroll-to="trial-training">
Пробная тренировка
<?php display_icon('button_arrow_up') ?>
</button>
<button class="max-[768px]:h-[61px] max-[768px]:max-w-[327px] !no-underline text-[#f8f8f8] text-[18px] font-[600] justify-center h-[75px] w-full max-w-[210px] rounded-[90px] flex items-center gap-[12px] grey-gradient-hover cursor-pointer border-none outline-none"
type="button"
data-scroll-to="prices">
Смотреть цены
</button>
</div>
<div class="max-[768px]:[&>_img]:w-[20px] max-[768px]:[&>_img]:h-[20px] max-[768px]:mt-[24px] flex items-center gap-[12px] mt-[50px]">
<?php display_icon('location') ?>
<div class="max-[768px]:text-[14px]">
<p>
<b><?php echo !empty($address) ? esc_html($address) : 'Красноармейская, 120 — 2ой этаж'; ?></b>
</p>
<p class="dark:text-[#6c6b6b]">
<?php echo !empty($address_extra) ? esc_html($address_extra) : 'Главный вход со стороны ул. Косарева'; ?>
</p>
</div>
</div>
</div>
<div class="flex items-center gap-[12px] mt-[50px]">
<?php display_icon('location') ?>
<div>
<p>
<b><?php echo !empty($address) ? esc_html($address) : 'Красноармейская, 120 — 2ой этаж'; ?></b>
</p>
<p class="dark:text-[#6c6b6b]">
<?php echo !empty($address_extra) ? esc_html($address_extra) : 'Главный вход со стороны ул. Косарева'; ?>
</p>
<div class="max-[768px]:h-[290px] max-[768px]:max-w-full w-full max-w-[648px] h-[575px] relative">
<div class="max-[768px]:rounded-[16px] max-[768px]:w-auto swiper inverted-radius rounded-[25px] w-full h-full">
<div class="swiper-wrapper">
<?php foreach ($slides as $index => $slide): ?>
<div class="swiper-slide [&>_img]:max-w-none">
<?php if (!empty($slide['img'])): ?>
<img class="max-[768px]:w-full max-[768px]:h-full" loading="lazy"
src="<?php echo esc_url($slide['img']); ?>"
alt="<?php echo esc_attr($slide['title']); ?>">
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="max-[768px]:bottom-[8px] max-[768px]:left-[8px] absolute z-[1] rounded-[25px] rounded-bl-none rounded-br-none rounded-tl-none flex items-center gap-[4px] left-0 bottom-0">
<button class="group custom-prev cursor-pointer">
<?php display_icon('slider-prev') ?>
</button>
<button class="group custom-next cursor-pointer">
<?php display_icon('slider-next') ?>
</button>
</div>
</div>
</div>
<div class="w-full max-w-[648px] h-[575px] relative">
<div class="swiper inverted-radius rounded-[25px] w-full h-full">
<div class="swiper-wrapper">
<?php foreach ($slides as $index => $slide): ?>
<div class="swiper-slide [&>_img]:max-w-none">
<?php if (!empty($slide['img'])): ?>
<img loading="lazy" src="<?php echo esc_url($slide['img']); ?>" alt="<?php echo esc_attr($slide['title']); ?>">
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="absolute z-[1] rounded-[25px] rounded-bl-none rounded-br-none rounded-tl-none flex items-center gap-[4px] left-0 bottom-0">
<button class="group custom-prev cursor-pointer">
<?php display_icon('slider-prev') ?>
</button>
<button class="group custom-next cursor-pointer">
<?php display_icon('slider-next') ?>
</button>
</div>
</div>
</div>
<div class="flex gap-[24px] mt-[44px]">
<div class="max-[768px]:hidden flex gap-[24px] mt-[44px]">
<?php foreach ($slides as $index => $slide): ?>
<div class="pagination-item flex-1 cursor-pointer transition-all"
<div class="!max-h-[21px] pagination-item flex-1 cursor-pointer transition-all"
data-active="<?php echo $index === 0 ? 'true' : 'false' ?>"
data-slide="<?php echo $index ?>">
<div class="pagination-line h-[2px] rounded-[30px] transition-colors"></div>
@@ -139,48 +147,48 @@ if ($room === 'fitness') {
</section>
<?php if (is_admin()): ?>
<script>
<script>
function initAdminSwiper() {
const selectors = [
'#hero-<?php echo $block['id']; ?> .swiper',
'[data-block="<?php echo $block['id']; ?>"] .swiper',
'.hero-block[data-slides] .swiper',
'.swiper'
];
function initAdminSwiper() {
const selectors = [
'#hero-<?php echo $block['id']; ?> .swiper',
'[data-block="<?php echo $block['id']; ?>"] .swiper',
'.hero-block[data-slides] .swiper',
'.swiper'
];
let swiperContainer = null;
let swiperContainer = null;
for (let selector of selectors) {
swiperContainer = document.querySelector(selector);
if (swiperContainer) break;
for (let selector of selectors) {
swiperContainer = document.querySelector(selector);
if (swiperContainer) break;
}
try {
const swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.custom-next',
prevEl: '.custom-prev',
}
});
} catch (error) {
}
}
try {
const swiper = new Swiper(swiperContainer, {
slidesPerView: 1,
loop: true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.custom-next',
prevEl: '.custom-prev',
}
if (typeof wp !== 'undefined' && wp.domReady) {
wp.domReady(function () {
setTimeout(initAdminSwiper, 300);
});
} catch (error) {
}
}
if (typeof wp !== 'undefined' && wp.domReady) {
wp.domReady(function() {
setTimeout(initAdminSwiper, 300);
});
}
</script>
</script>
<?php endif; ?>