/home/bdqbpbxa/demo-subdomains/ecosphere.goodface.com.ua/wp-content/themes/ecosphere/header.php
<?php $current_lang = pll_current_language(); ?>
<!DOCTYPE html>
<html lang="<?php echo $current_lang; ?>" class="<?php if (is_front_page()) echo '-home-page'; ?>">
<head>
<title><?php echo wp_get_document_title(); ?></title>
<!-- TODO: Set page description -->
<meta charset="utf-8" />
<link rel="canonical" href="<?php the_permalink(); ?>" />
<!-- Mobile -->
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
overflow-y: scroll;
}
.preloader.-loaded {
overflow: hidden;
}
.sk-chase {
width: 60px;
height: 60px;
position: relative;
animation: sk-chase 2.5s infinite linear both;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
@keyframes sk-chase {
100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}
</style>
<script>
const isFrontPage = <?php echo is_front_page() ? 'true' : 'false'; ?>;
</script>
<?php wp_head(); ?>
</head>
<body>
<script>
document.querySelector('body').classList.add('-allow-animations');
</script>
<?php
$brand = get_field('brand-container');
$brand_color = isset($brand['color']) ? $brand['color'] : false;
$preloader_color = $brand_color ? $brand_color : '#A0CC4F';
?>
<div class="preloader" style="display: none;background-color: <?php echo $preloader_color; ?>;">
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</div>
<script>
function lockScroll() {
const html = document.documentElement;
const body = document.body;
const scrollTop = window.scrollY;
let scrollBeforeLock = html.getAttribute('data-scroll');
html.classList.add('-scroll-lock');
body.classList.add('-scroll-lock');
document.body.scrollTo(0, scrollTop);
html.setAttribute('data-scroll', scrollTop);
// $('.--modal-scrollable-element').on('touchmove pointermove', preventDefault);
}
function unlockScroll() {
const html = document.documentElement;
const body = document.body;
const scrollPositionBeforeLock = html.getAttribute('data-scroll');
html.classList.remove('-scroll-lock');
body.classList.remove('-scroll-lock');
window.scrollTo(0, scrollPositionBeforeLock);
document.body.scrollTo(0, 0);
// $('.--modal-scrollable-element').off('touchmove pointermove', preventDefault);
}
</script>
<script>
let fullPageUrl = window.location.href;
let visitedPages = window.localStorage.getItem('visited-pages');
let visitedPagesArr = visitedPages ? visitedPages.split(' ') : '';
let isPreloaderLoaded = visitedPagesArr.includes(fullPageUrl);
let preloader = document.querySelector('.preloader');
if (isPreloaderLoaded) {
preloader.remove();
} else {
const body = document.querySelector('body');
if (!isFrontPage) {
lockScroll();
}
preloader.style.display = 'flex';
window.addEventListener('load', function() {
window.localStorage.setItem('visited-pages', visitedPages + ' ' + fullPageUrl);
});
}
</script>
<div class="page">
<header class="header">
<div class="container">
<a href="<?php echo get_home_url(); ?>" class="header__logo">
<?php
$logo = get_field("main-logo-{$current_lang}", 'option');
?>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt']; ?>" />
</a>
<div class="header__menu-container" body-scroll-lock-ignore>
<ul class="header__menu">
<?php
$header_menu = get_field("header-menu-{$current_lang}", "option");
foreach($header_menu as $item) :
$link_obj = getLink($item);
if ($link_obj['displayed']) :
?>
<li
class="header__menu-item default-link-container <?php echo $link_obj['class']; ?>"
>
<?php
if ($link_obj['url'] == '#') :
?>
<span
class="
header__menu-item-title
default-link
text-3
mob-text-1 mob-text-1
--bold
"
>
<?php echo $link_obj['title']; ?>
</span>
<?php
$dropdown = $link_obj['child'];
if ($dropdown) :
?>
<div class="header__menu-dropdown">
<div class="header__menu-dropdown-inner --custom-scrollbar">
<?php
foreach($dropdown as $dropdown_category) :
$category_title = $dropdown_category['category-title'];
if ($category_title) :
?>
<p class="text-6 mob-text-3 --uppercase --extrabold">
<?php echo $category_title; ?>
</p>
<?php
endif;
$dropdown_child_list = $dropdown_category['child-list'];
if ($dropdown_child_list) :
?>
<ul class="default-links">
<?php
foreach($dropdown_child_list as $child_item) :
$child_link_obj = getLink($child_item);
if ($child_link_obj['displayed']) :
?>
<li>
<a href="<?php echo $child_link_obj['url']; ?>" class="text-4 mob-text-2"><?php echo $child_link_obj['title']; ?></a>
</li>
<?php
endif;
endforeach;
?>
</ul>
<?php
endif;
endforeach;
?>
</div>
</div>
<?php
endif;
?>
<?php
else :
?>
<a
href="<?php echo $link_obj['url']; ?>"
class="
header__menu-item-title
default-link
text-3
mob-text-1
--bold
"
>
<?php echo $link_obj['title']; ?>
</a>
<?php
endif;
?>
</li>
<?php
endif;
endforeach;
?>
</ul>
<?php
$langs = pll_the_languages([
'hide_current' => 1,
'raw' => 1
]);
foreach($langs as $lang) :
?>
<a href="<?php echo $lang['url']?>" class="header__mob-lang mob-text-2 --bold">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<path
fill="#fff"
d="M16.6 4.2 15.7 3C14 1.2 11.7 0 9 0S4 1.2 2.3 3l-.9 1.2C.5 5.6 0 7.2 0 9s.5 3.4 1.4 4.8l.9 1.2c1.7 1.8 4 3 6.7 3s5-1.2 6.7-3l.9-1.2c.9-1.4 1.4-3 1.4-4.8s-.5-3.4-1.4-4.8zm-2.2-.4c-.4.2-.9.3-1.4.5-.3-.8-.6-1.5-1-2.1.9.3 1.7.9 2.4 1.6zM9.8 2c.7.4 1.3 1.3 1.8 2.6-.6.1-1.2.1-1.8.1V2zm0 4.2c.8 0 1.5-.1 2.2-.2.1.7.2 1.4.3 2.2H9.8v-2zM8.3 2v2.8c-.7-.1-1.3-.1-1.8-.2.4-1.3 1.1-2.2 1.8-2.6zm0 4.2v2H5.8c0-.7.1-1.5.2-2.2.7.1 1.5.2 2.3.2zM6 2.1c-.4.6-.7 1.3-1 2.2-.5-.2-1-.3-1.4-.5.7-.7 1.5-1.3 2.4-1.7zM2.7 5c.6.3 1.2.5 1.9.7-.2.8-.3 1.6-.3 2.6H1.5C1.7 7.1 2 6 2.7 5zm0 8c-.6-1-1-2.1-1.1-3.3h2.7c0 .9.1 1.8.3 2.5-.7.3-1.4.5-1.9.8zm.9 1.2c.4-.2.9-.3 1.4-.4.3.8.6 1.5 1 2.1-.9-.4-1.7-1-2.4-1.7zm2.2-4.4h2.5v2c-.8 0-1.5.1-2.2.2-.2-.7-.3-1.5-.3-2.2zm.7 3.6c.6-.1 1.2-.2 1.8-.2V16c-.7-.4-1.4-1.3-1.8-2.6zM9.8 16v-2.8c.6 0 1.2.1 1.8.2-.5 1.3-1.2 2.2-1.8 2.6zm0-4.2v-2h2.5c0 .8-.1 1.5-.3 2.2-.7-.1-1.5-.2-2.2-.2zm2.2 4.1c.4-.6.8-1.3 1-2.1.5.1 1 .3 1.4.5-.7.6-1.5 1.2-2.4 1.6zm3.3-2.9c-.6-.3-1.2-.5-1.9-.7.2-.8.3-1.6.3-2.5h2.7c-.1 1.1-.4 2.2-1.1 3.2zm-1.6-4.7c0-.9-.1-1.8-.3-2.5.7-.2 1.4-.4 1.9-.7.6 1 1 2.1 1.1 3.3h-2.7z"
/>
</svg>
<?php echo $lang['name']; ?>
</a>
<?php endforeach; ?>
</div>
<?php
$langs = pll_the_languages([
'hide_current' => 1,
'raw' => 1
]);
foreach($langs as $lang) :
?>
<a href="<?php echo $lang['url']; ?>" class="header__lang default-link text-3 --bold">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<path
fill="#0B4129"
d="M16.6 4.2 15.7 3C14 1.2 11.7 0 9 0S4 1.2 2.3 3l-.9 1.2C.5 5.6 0 7.2 0 9s.5 3.4 1.4 4.8l.9 1.2c1.7 1.8 4 3 6.7 3s5-1.2 6.7-3l.9-1.2c.9-1.4 1.4-3 1.4-4.8s-.5-3.4-1.4-4.8zm-2.2-.4c-.4.2-.9.3-1.4.5-.3-.8-.6-1.5-1-2.1.9.3 1.7.9 2.4 1.6zM9.8 2c.7.4 1.3 1.3 1.8 2.6-.6.1-1.2.1-1.8.1V2zm0 4.2c.8 0 1.5-.1 2.2-.2.1.7.2 1.4.3 2.2H9.8v-2zM8.3 2v2.8c-.7-.1-1.3-.1-1.8-.2.4-1.3 1.1-2.2 1.8-2.6zm0 4.2v2H5.8c0-.7.1-1.5.2-2.2.7.1 1.5.2 2.3.2zM6 2.1c-.4.6-.7 1.3-1 2.2-.5-.2-1-.3-1.4-.5.7-.7 1.5-1.3 2.4-1.7zM2.7 5c.6.3 1.2.5 1.9.7-.2.8-.3 1.6-.3 2.6H1.5C1.7 7.1 2 6 2.7 5zm0 8c-.6-1-1-2.1-1.1-3.3h2.7c0 .9.1 1.8.3 2.5-.7.3-1.4.5-1.9.8zm.9 1.2c.4-.2.9-.3 1.4-.4.3.8.6 1.5 1 2.1-.9-.4-1.7-1-2.4-1.7zm2.2-4.4h2.5v2c-.8 0-1.5.1-2.2.2-.2-.7-.3-1.5-.3-2.2zm.7 3.6c.6-.1 1.2-.2 1.8-.2V16c-.7-.4-1.4-1.3-1.8-2.6zM9.8 16v-2.8c.6 0 1.2.1 1.8.2-.5 1.3-1.2 2.2-1.8 2.6zm0-4.2v-2h2.5c0 .8-.1 1.5-.3 2.2-.7-.1-1.5-.2-2.2-.2zm2.2 4.1c.4-.6.8-1.3 1-2.1.5.1 1 .3 1.4.5-.7.6-1.5 1.2-2.4 1.6zm3.3-2.9c-.6-.3-1.2-.5-1.9-.7.2-.8.3-1.6.3-2.5h2.7c-.1 1.1-.4 2.2-1.1 3.2zm-1.6-4.7c0-.9-.1-1.8-.3-2.5.7-.2 1.4-.4 1.9-.7.6 1 1 2.1 1.1 3.3h-2.7z"
/>
</svg>
<?php echo $lang['name']; ?>
</a>
<?php endforeach; ?>
<div class="header__open-menu default-button">
<div></div>
<div></div>
</div>
</div>
</header>