full
This commit is contained in:
@@ -1,110 +1,74 @@
|
||||
ymaps.ready(function () {
|
||||
ymaps.ready(function () {
|
||||
|
||||
var buildingCoordinates = [55.832659, 37.576118];
|
||||
var buildingCoordinates = [56.462317, 84.969289];
|
||||
|
||||
//Смещение карты, чтобы иконка была визуально по центру
|
||||
// Смещение карты, чтобы иконка была визуально по центру
|
||||
var offsetCoefficient = 0.001;
|
||||
|
||||
var mapCenter = [
|
||||
buildingCoordinates[0],
|
||||
buildingCoordinates[1] - offsetCoefficient
|
||||
buildingCoordinates[0],
|
||||
buildingCoordinates[1] - offsetCoefficient
|
||||
];
|
||||
|
||||
var myMap = new ymaps.Map('map', {
|
||||
center: mapCenter,
|
||||
zoom: 17,
|
||||
controls: []
|
||||
});
|
||||
center: mapCenter,
|
||||
zoom: 17,
|
||||
controls: []
|
||||
});
|
||||
|
||||
// Отключаем все взаимодействия с картой
|
||||
myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
|
||||
|
||||
var svgIcon = '<svg width="146" height="175" viewBox="0 0 146 175" fill="none" xmlns="http://www.w3.org/2000/svg">' +
|
||||
'<path d="M73 174.328L48.4669 131.836H97.5331L73 174.328Z" fill="#FA4241" />' +
|
||||
'<circle cx="71.9104" cy="73" r="73" fill="url(#paint0_linear_150_2453)" />' +
|
||||
'<path d="M58.0581 42.549C50.1523 47.1076 43.6824 50.8665 43.6985 50.9305C43.7469 51.0424 52.3304 56.0169 52.4756 56.0169C52.524 56.0169 57.0094 53.4577 62.4628 50.3386C67.9162 47.2196 72.4339 44.6444 72.5145 44.6284C72.5952 44.5964 77.1612 47.1556 82.6631 50.3067L92.6825 56.0429L96.942 53.6117C99.2656 52.2841 101.266 51.1004 101.379 51.0044C101.525 50.8765 98.0553 48.8131 87.2614 42.639C79.3878 38.1444 72.8372 34.4175 72.7081 34.3855C72.5791 34.3375 65.9801 38.0164 58.0581 42.549Z" fill="white" />' +
|
||||
'<path d="M38.5032 73.2768V92.7908L42.0043 90.7755C43.9405 89.6718 45.9734 88.5201 46.5381 88.2002L47.5384 87.6244V78.2993C47.5384 73.1648 47.5707 68.9741 47.603 68.9741C47.6352 68.9741 53.2661 72.1891 60.1232 76.1079C66.9642 80.0267 72.6597 83.1938 72.7565 83.1458C72.8694 83.0978 78.5003 79.8828 85.2929 75.98L97.6357 68.8941L97.7164 78.3153L97.7971 87.7204L102.234 90.2636L106.67 92.8068L106.719 73.2408C106.735 62.54 106.719 53.7587 106.687 53.7267C106.655 53.6947 98.9746 58.0614 89.6008 63.4358L72.5629 73.2088L55.896 63.6757C46.7317 58.4133 39.0679 54.0306 38.8743 53.9027L38.5032 53.6787V73.2768Z" fill="white" />' +
|
||||
'<path d="M47.9893 93.0937C45.6014 94.4692 43.6653 95.6209 43.6653 95.6849C43.6653 95.8288 72.449 112.24 72.6588 112.224C72.9008 112.192 101.587 95.7968 101.587 95.6849C101.587 95.6369 99.5867 94.4692 97.1508 93.0777L92.6977 90.5344L82.6782 96.2767C77.1603 99.4277 72.5781 101.987 72.5136 101.955C72.4329 101.939 67.8991 99.3637 62.4618 96.2447C57.0084 93.1256 52.4908 90.5664 52.4262 90.5824C52.3456 90.5984 50.361 91.7181 47.9893 93.0937Z" fill="white" />' +
|
||||
'<defs>' +
|
||||
'<linearGradient id="paint0_linear_150_2453" x1="2.4683" y1="6.137" x2="115.196" y2="71.48" gradientUnits="userSpaceOnUse">' +
|
||||
'<stop stop-color="#F41C1B" />' +
|
||||
'<stop offset="0.435" stop-color="#F72D2C" />' +
|
||||
'<stop offset="1" stop-color="#FA4242" />' +
|
||||
'</linearGradient>' +
|
||||
'</defs>' +
|
||||
'</svg>';
|
||||
|
||||
|
||||
var iconSize;
|
||||
var iconOffset;
|
||||
|
||||
if (window.innerWidth <= 768) {
|
||||
|
||||
iconSize = [73, 88];
|
||||
iconOffset = [-36, -87];
|
||||
} else {
|
||||
|
||||
iconSize = [146, 175];
|
||||
iconOffset = [-73, -174];
|
||||
}
|
||||
|
||||
|
||||
// Создаем метку с серой дефолтной иконкой
|
||||
var myPlacemark = new ymaps.Placemark(
|
||||
buildingCoordinates,
|
||||
{hintContent: '', balloonContent: ''},
|
||||
{
|
||||
|
||||
iconLayout: 'default#imageWithContent',
|
||||
iconImageHref: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svgIcon),
|
||||
iconImageSize: iconSize,
|
||||
iconImageOffset: iconOffset,
|
||||
hideIconOnBalloonOpen: false
|
||||
}
|
||||
buildingCoordinates,
|
||||
{hintContent: '', balloonContent: ''},
|
||||
{
|
||||
preset: 'islands#greyIcon'
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// Делаем карту черно-белой
|
||||
myMap.panes.get('ground').getElement().style.filter = 'grayscale(100%)';
|
||||
|
||||
|
||||
// Добавляем метку на карту
|
||||
myMap.geoObjects.add(myPlacemark);
|
||||
|
||||
|
||||
// Логика интерактивности карты остается без изменений
|
||||
var isMapInteractive = false;
|
||||
var mapElement = document.getElementById('map');
|
||||
|
||||
function activateMap(e) {
|
||||
if (!isMapInteractive) {
|
||||
myMap.behaviors.enable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
|
||||
isMapInteractive = true;
|
||||
if (!isMapInteractive) {
|
||||
myMap.behaviors.enable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
|
||||
isMapInteractive = true;
|
||||
|
||||
setTimeout(function () {
|
||||
document.addEventListener('click', deactivateMap);
|
||||
document.addEventListener('touchend', deactivateMap);
|
||||
}, 100);
|
||||
setTimeout(function () {
|
||||
document.addEventListener('click', deactivateMap);
|
||||
document.addEventListener('touchend', deactivateMap);
|
||||
}, 100);
|
||||
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
function deactivateMap(e) {
|
||||
var target = e.target;
|
||||
var target = e.target;
|
||||
|
||||
if (e.type === 'touchend' || e.changedTouches || e.changedTouches[0]) {
|
||||
var touch = e.changedTouches[0];
|
||||
target = document.elementFromPoint(touch.clientX, touch.clientY);
|
||||
}
|
||||
if (e.type === 'touchend' || e.changedTouches || e.changedTouches[0]) {
|
||||
var touch = e.changedTouches[0];
|
||||
target = document.elementFromPoint(touch.clientX, touch.clientY);
|
||||
}
|
||||
|
||||
if (!mapElement.contains(target)) {
|
||||
if (!mapElement.contains(target)) {
|
||||
myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
|
||||
isMapInteractive = false;
|
||||
|
||||
myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
|
||||
isMapInteractive = false;
|
||||
|
||||
|
||||
document.removeEventListener('click', deactivateMap);
|
||||
document.removeEventListener('touchend', deactivateMap);
|
||||
}
|
||||
}
|
||||
document.removeEventListener('click', deactivateMap);
|
||||
document.removeEventListener('touchend', deactivateMap);
|
||||
}
|
||||
}
|
||||
|
||||
mapElement.addEventListener('click', activateMap);
|
||||
mapElement.addEventListener('touchstart', activateMap);
|
||||
});
|
||||
});
|
||||
@@ -25,7 +25,7 @@ if (!empty($blocks) && isset($blocks[0]['blockName']) && $blocks[0]['blockName']
|
||||
$is_first_block = true;
|
||||
}
|
||||
|
||||
$section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80px] max-[768px]:pt-[64px]";
|
||||
$section_padding = $is_first_block ? "!pt-[0]" : "!pt-[0px]";
|
||||
|
||||
?>
|
||||
|
||||
@@ -49,35 +49,54 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
|
||||
|
||||
<section id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $classes ); ?> <?php echo $section_padding ?>">
|
||||
<div class="w-full relative">
|
||||
<div id="map" class="w-full h-[500px] min-[1024px]:h-[700px] bg-[#f3f4f6]"></div>
|
||||
<div id="map" class="w-full h-[608px] <?php if ($is_first_block): ?>h-[828px]<?php endif; ?>"></div>
|
||||
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<div class="container mx-auto px-[16px] h-full flex items-start pt-[40px]">
|
||||
<div class="bg-[#ffffff] border-[1px] border-[#e5e7eb] rounded-[12px] p-[30px] w-full max-w-[380px] shadow-lg pointer-events-auto">
|
||||
<div class="container mx-auto h-full flex items-center">
|
||||
<div class="bg-[#ffffff] rounded-[24px] px-[32px] py-[30px] w-full max-w-[424px] pointer-events-auto">
|
||||
|
||||
<?php if ($heading) : ?>
|
||||
<h2 class="text-[36px] max-[768px]:text-[28px] font-bold mb-[30px] text-[#1f2937]">
|
||||
<h2 class="text-[32px] font-bold leading-[115%]">
|
||||
<?php echo esc_html($heading); ?>
|
||||
</h2>
|
||||
<?php else : ?>
|
||||
<h2 class="text-[36px] max-[768px]:text-[28px] font-bold mb-[30px] text-[#1f2937]">Контакты</h2>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
endif; ?>
|
||||
|
||||
<div class="flex flex-col gap-[20px]">
|
||||
<div class=" mt-[24px]">
|
||||
|
||||
<?php if ($work_time) : ?>
|
||||
<div>
|
||||
<?php if (!empty($work_time['heading'])) : ?>
|
||||
<p class="text-[14px] text-[#6b7280] mb-[8px]"><?php echo esc_html($work_time['heading']); ?></p>
|
||||
|
||||
|
||||
<?php if ($address) : ?>
|
||||
<div class="flex flex-col gap-[12px]">
|
||||
<?php if (!empty($address['heading'])) : ?>
|
||||
<div class="flex gap-[12px] items-center">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2190_3176)">
|
||||
<path d="M10.001 0.445312C5.68804 0.445312 2.17879 3.95456 2.17879 8.26265C2.15044 14.5644 9.70377 19.7897 10.001 20.0009C10.001 20.0009 17.8516 14.5644 17.8232 8.26754C17.8232 3.95456 14.314 0.445312 10.001 0.445312ZM10.001 12.1786C7.84012 12.1786 6.0899 10.4284 6.0899 8.26754C6.0899 6.10665 7.84012 4.35642 10.001 4.35642C12.1619 4.35642 13.9121 6.10665 13.9121 8.26754C13.9121 10.4284 12.1619 12.1786 10.001 12.1786Z"
|
||||
fill="#E21E24"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2190_3176">
|
||||
<rect width="19.5556" height="19.5556" fill="white"
|
||||
transform="translate(0 0.222656)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<p class="text-[24px] font-[600] leading-[125%]"><?php echo esc_html($address['heading']); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($work_time['work_time_repeater'])) : ?>
|
||||
<div class="flex flex-col gap-[4px] mb-[12px]">
|
||||
<?php foreach ($work_time['work_time_repeater'] as $time_item) : ?>
|
||||
<div class="flex text-[16px] text-[#1f2937]">
|
||||
<span><?php echo esc_html($time_item['title']); ?></span>
|
||||
|
||||
<span><?php echo esc_html($time_item['time']); ?></span>
|
||||
<?php if (!empty($address['address_repeater'])) : ?>
|
||||
<div class="flex flex-col gap-[4px]">
|
||||
<?php foreach ($address['address_repeater'] as $addr_item) : ?>
|
||||
<div class="text-[16px] leading-[145%]">
|
||||
<?php if (!empty($addr_item['address_title'])) : ?>
|
||||
<div class="font-[600]"><?php echo esc_html($addr_item['address_title']); ?></div>
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($addr_item['address_extra'])) : ?>
|
||||
<div class="text-[16px] leading-[145%] text-[#6c6b6b]"><?php echo esc_html($addr_item['address_extra']); ?></div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
@@ -85,22 +104,32 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($address) : ?>
|
||||
<div>
|
||||
<?php if (!empty($address['heading'])) : ?>
|
||||
<p class="text-[14px] text-[#6b7280] mb-[8px]"><?php echo esc_html($address['heading']); ?></p>
|
||||
<?php if ($work_time) : ?>
|
||||
<div class="flex mt-[28px] flex-col gap-[12px]">
|
||||
<?php if (!empty($work_time['heading'])) : ?>
|
||||
<div class="flex gap-[12px] items-center">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2190_3183)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4796 19.63C10.9266 19.7273 10.3581 19.7782 9.77778 19.7782C4.38135 19.7782 0 15.3969 0 10.0004C0 4.60401 4.38135 0.222656 9.77778 0.222656C15.1742 0.222656 19.5556 4.60401 19.5556 10.0004C19.5556 10.5807 19.5046 11.1492 19.4073 11.7022C18.882 10.9647 18.1879 10.3636 17.3831 9.94888C16.5782 9.53418 15.6858 9.31796 14.7804 9.31826C13.273 9.31923 11.8276 9.91847 10.7617 10.9844C9.69581 12.0502 9.09657 13.4956 9.09561 15.003C9.0953 15.9085 9.31152 16.8008 9.72622 17.6057C10.1409 18.4106 10.7421 19.1046 11.4796 19.63ZM10.9147 4.99785V9.54565C10.9147 9.72666 10.8429 9.90038 10.7146 10.0277L7.07638 13.666C7.01308 13.7293 6.93792 13.7795 6.85521 13.8137C6.7725 13.848 6.68384 13.8656 6.59432 13.8656C6.50479 13.8656 6.41614 13.848 6.33342 13.8137C6.25071 13.7795 6.17555 13.7293 6.11225 13.666C6.04894 13.6027 5.99873 13.5275 5.96446 13.4448C5.9302 13.3621 5.91257 13.2734 5.91257 13.1839C5.91257 13.0944 5.9302 13.0057 5.96446 12.923C5.99873 12.8403 6.04894 12.7651 6.11225 12.7018L9.55039 9.26278V4.99785C9.55039 4.81693 9.62226 4.64341 9.75019 4.51548C9.87812 4.38755 10.0516 4.31568 10.2326 4.31568C10.4135 4.31568 10.587 4.38755 10.7149 4.51548C10.8429 4.64341 10.9147 4.81693 10.9147 4.99785Z" fill="#E21E24" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7801 10.2266C12.1442 10.2266 10.0049 12.3658 10.0049 15.0018C10.0049 17.6377 12.1442 19.777 14.7801 19.777C17.416 19.777 19.5553 17.6377 19.5553 15.0018C19.5553 12.3658 17.416 10.2266 14.7801 10.2266ZM12.4789 15.2564L13.8432 16.6208C13.9065 16.6841 13.9816 16.7344 14.0644 16.7687C14.1471 16.803 14.2358 16.8207 14.3253 16.8207C14.4148 16.8207 14.5035 16.803 14.5862 16.7687C14.6689 16.7344 14.7441 16.6841 14.8074 16.6208L17.0813 14.3469C17.1446 14.2836 17.1948 14.2084 17.2291 14.1257C17.2633 14.043 17.2809 13.9543 17.2809 13.8648C17.2809 13.7753 17.2633 13.6866 17.2291 13.6039C17.1948 13.5212 17.1446 13.446 17.0813 13.3827C17.018 13.3194 16.9428 13.2692 16.8601 13.235C16.7774 13.2007 16.6887 13.1831 16.5992 13.1831C16.5097 13.1831 16.421 13.2007 16.3383 13.235C16.2556 13.2692 16.1804 13.3194 16.1171 13.3827L14.3253 15.1737L13.443 14.2923C13.3797 14.229 13.3046 14.1788 13.2218 14.1445C13.1391 14.1103 13.0505 14.0926 12.961 14.0926C12.8714 14.0926 12.7828 14.1103 12.7001 14.1445C12.6173 14.1788 12.5422 14.229 12.4789 14.2923C12.4156 14.3556 12.3654 14.4308 12.3311 14.5135C12.2968 14.5962 12.2792 14.6848 12.2792 14.7744C12.2792 14.8639 12.2968 14.9525 12.3311 15.0353C12.3654 15.118 12.4156 15.1931 12.4789 15.2564Z" fill="#E21E24" />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2190_3183">
|
||||
<rect width="19.5556" height="19.5556" fill="white" transform="translate(0 0.222656)" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<p class="text-[24px] font-[600] leading-[125%]"><?php echo esc_html($work_time['heading']); ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($address['address_repeater'])) : ?>
|
||||
<div class="flex flex-col gap-[8px] mb-[12px]">
|
||||
<?php foreach ($address['address_repeater'] as $addr_item) : ?>
|
||||
<div class="text-[16px] text-[#1f2937] leading-[140%]">
|
||||
<?php if (!empty($addr_item['address_title'])) : ?>
|
||||
<div class="font-semibold"><?php echo esc_html($addr_item['address_title']); ?></div>
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($addr_item['address_extra'])) : ?>
|
||||
<div><?php echo esc_html($addr_item['address_extra']); ?></div>
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($work_time['work_time_repeater'])) : ?>
|
||||
<div class="flex flex-col gap-[4px]">
|
||||
<?php foreach ($work_time['work_time_repeater'] as $time_item) : ?>
|
||||
<div class="flex text-[16px] leading-[145%] font-[600]">
|
||||
<span><?php echo esc_html($time_item['title']); ?></span>
|
||||
|
||||
<span class="font-[500]"><?php echo esc_html($time_item['time']); ?></span>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
@@ -109,18 +138,18 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($contacts) : ?>
|
||||
<div>
|
||||
<div class="mt-[16px]">
|
||||
<?php if (!empty($contacts['phone'])) : ?>
|
||||
<div class="mb-[16px]">
|
||||
<div>
|
||||
<a href="tel:<?php echo esc_attr($contacts['phone']); ?>"
|
||||
class="!decoration-transparent hover:!decoration-inherit text-[20px] max-[768px]:text-[18px] font-semibold transition-colors">
|
||||
class="!decoration-transparent hover:!decoration-inherit text-[32px] font-[700]">
|
||||
<?php echo esc_html($contacts['phone']); ?>
|
||||
</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($contacts['social_repeater'])) : ?>
|
||||
<div>
|
||||
<div class="mt-[14px]">
|
||||
<div class="flex gap-[12px]">
|
||||
<?php foreach ($contacts['social_repeater'] as $social_item) : ?>
|
||||
<?php if (!empty($social_item['url'])) : ?>
|
||||
@@ -130,7 +159,7 @@ $section_padding = $is_first_block ? "pt-[64px] max-[768px]:pt-[40px]" : "pt-[80
|
||||
<?php if (!empty($social_item['icon'])) : ?>
|
||||
<img src="<?php echo esc_url($social_item['icon']['url']); ?>"
|
||||
alt="<?php echo esc_attr($social_item['icon']['alt']); ?>"
|
||||
class="object-contain" />
|
||||
class="object-contain w-[42px]" />
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
Reference in New Issue
Block a user