/home/bdqbpbxa/demo-subdomains/admin-example.goodface.com.ua/wp-content/themes/example/header.php
<!DOCTYPE html>
<?php
$running_line = get_field('running_line', 'option');
$link = get_link_group_field($running_line['line_settings']);
$curr_page = get_the_permalink();
if ($link && $link['url'] == $curr_page) {
$link = false;
}
$conveyor_closed = false;
if (isset($_COOKIE['conveyor_closed'])) {
$conveyor_closed = true;
}
?>
<html lang="en">
<head>
<title>
<?php echo wp_get_document_title(); ?>
</title>
<meta charset="utf-8">
<link rel="canonical" href="<?php echo $curr_page; ?>">
<!-- Mobile -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<?php wp_head(); ?>
</head>
<body class="<?php if ($link) echo '-has-conveyor'; ?>">
<style>
.preloader {
position: fixed;
z-index: 500;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: none;
padding-right: 17px;
background: var(--light);
}
body.-allow-animations .preloader {
display: block;
}
.preloader-img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
max-width: 90%;
max-height: 90%;
}
.preloader-img svg {
display: block;
max-width: 100%;
max-height: 100%;
overflow: visible;
}
body.-allow-animations .preloader-img .animated-cube {
position: absolute;
/* transform: translate(67px, -41px); */
transform: translate(33.1%, -18%);
animation: 1.5s infinite alternate cubeMoveRight ease-in-out;
}
@keyframes cubeMoveRight {
from {
transform: translate(33.1%, -18%);
}
to {
transform: translate(0, 0);
}
}
</style>
<div class="preloader">
<div class="preloader-img">
<svg width="199" height="229" viewBox="0 0 199 229" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M99.4371 228V171.146L148.656 142.718V199.573L99.4371 228Z" fill="#F1F1F1" />
<path d="M197.874 114.291V171.146L148.656 199.573V142.718L197.874 114.291Z" fill="#F1F1F1" />
<path d="M148.656 142.718V85.8643L197.874 114.291L148.656 142.718Z" fill="#F1F1F1" />
<path d="M99.4371 228L50.2186 199.573V142.718L99.4371 171.146V228Z" fill="#F1F1F1" />
<path d="M50.2186 199.573L1.00012 171.146V114.291L50.2186 142.718V199.573Z" fill="#F1F1F1" />
<path
d="M50.2186 199.573L1.00012 171.146V114.291L50.2186 142.718M50.2186 199.573L99.4371 228M50.2186 199.573V142.718M99.4371 228V171.146M99.4371 228L148.656 199.573M50.2186 142.718L99.4371 171.146M99.4371 171.146L148.656 142.718M197.874 114.291V171.146L148.656 199.573M197.874 114.291L148.656 142.718M197.874 114.291L148.656 85.8643V142.718M148.656 199.573V142.718"
stroke="#BBBBBB" />
<path d="M148.656 29.0072L99.4373 57.4342L50.2188 29.0072L99.4373 0.580078L148.656 29.0072Z" fill="#F1F1F1" />
<path d="M50.2188 29.0072L99.4373 57.4342V114.288L50.2188 85.8613V29.0072Z" fill="#F1F1F1" />
<path d="M99.4373 57.4342L148.656 29.0072V85.8613L99.4373 114.288V57.4342Z" fill="#F1F1F1" />
<path
d="M148.656 29.0072L99.4373 57.4342M148.656 29.0072L99.4373 0.580078L50.2188 29.0072M148.656 29.0072V85.8613L99.4373 114.288M99.4373 57.4342L50.2188 29.0072M99.4373 57.4342V114.288M50.2188 29.0072V85.8613L99.4373 114.288"
stroke="#BBBBBB" />
<path d="M99.4399 57.4369L50.2215 85.8639L1.00299 57.4369L50.2215 29.0098L99.4399 57.4369Z" fill="#F1F1F1" />
<path d="M1.00299 57.4369L50.2215 85.8639V142.718L1.00299 114.291V57.4369Z" fill="#F1F1F1" />
<path d="M50.2215 85.8639L99.4399 57.4369V114.291L50.2215 142.718V85.8639Z" fill="#F1F1F1" />
<path
d="M99.4399 57.4369L50.2215 85.8639M99.4399 57.4369L50.2215 29.0098L1.00299 57.4369M99.4399 57.4369V114.291L50.2215 142.718M50.2215 85.8639L1.00299 57.4369M50.2215 85.8639V142.718M1.00299 57.4369V114.291L50.2215 142.718"
stroke="#BBBBBB" />
<g class="animated-cube">
<path d="M197.87 57.4369L148.652 85.8639L99.4332 57.4369L148.652 29.0098L197.87 57.4369Z" fill="#F1F1F1" />
<path d="M99.4332 57.4369L148.652 85.8639V142.718L99.4332 114.291V57.4369Z" fill="#F1F1F1" />
<path d="M148.652 85.8639L197.87 57.4369V114.291L148.652 142.718V85.8639Z" fill="#F1F1F1" />
<path
d="M197.87 57.4369L148.652 85.8639M197.87 57.4369L148.652 29.0098L99.4332 57.4369M197.87 57.4369V114.291L148.652 142.718M148.652 85.8639L99.4332 57.4369M148.652 85.8639V142.718M99.4332 57.4369V114.291L148.652 142.718"
stroke="#ED3B44" />
</g>
<path d="M148.656 85.8641L99.4373 114.291L50.2188 85.8641L99.4373 57.437L148.656 85.8641Z" fill="#F1F1F1" />
<path d="M50.2188 85.8641L99.4373 114.291V171.145L50.2188 142.718V85.8641Z" fill="#F1F1F1" />
<path d="M99.4373 114.291L148.656 85.8641V142.718L99.4373 171.145V114.291Z" fill="#F1F1F1" />
<path
d="M148.656 85.8641L99.4373 114.291M148.656 85.8641L99.4373 57.437L50.2188 85.8641M148.656 85.8641V142.718L99.4373 171.145M99.4373 114.291L50.2188 85.8641M99.4373 114.291V171.145M50.2188 85.8641V142.718L99.4373 171.145"
stroke="#BBBBBB" />
</svg>
</div>
</div>
<script>
// Scroll lock
function lockScroll(isFirstScreenHack = false) {
const html = document.documentElement;
const body = document.body;
let scrollTop = window.scrollY;
if (isFirstScreenHack) {
scrollTop = scrollTop + $('.-delete-after-animate').innerhHeight();
}
// console.log(scrollTop);
html.classList.add('-scroll-lock');
body.classList.add('-scroll-lock');
document.body.scrollTo(0, scrollTop);
html.setAttribute('data-scroll', scrollTop);
}
// // Allow animations if JS support is enabled
document.body.classList.add('-allow-animations');
// // Don't show preloader again if the page was visited
let preloader = document.querySelector('.preloader');
let fullPageUrl = window.location.href;
let visitedPages = window.localStorage.getItem('visited-pages');
let visitedPagesArr = visitedPages ? visitedPages.split(' ') : '';
let isPreloaderLoaded = visitedPagesArr.includes(fullPageUrl);
if (preloader && isPreloaderLoaded) {
preloader.remove();
} else if (preloader) {
lockScroll();
preloader.classList.add('-visible');
}
</script>
<?php
if ($link) :
?>
<div class="conveyor-container text-3 mob-text-3">
<div class="conveyor-belt__belt" data-check-in-viewport>
<a href="<?php echo $link['url'] ?>" <?php echo $link['target']; ?> class="conveyor-belt__belt-part">
<?php echo $link['title']; ?>
</a>
</div>
<div class="close-conveyor">
<?php echo $running_line['close_text']; ?>
</div>
</div>
<?php
endif;
?>
<?php
$template_directory = get_template_directory_uri();
$header = get_field('header', 'option');
?>
<main>
<header class="header">
<div class="container">
<div class="header__wrapper">
<a href="<?php echo get_home_url();?>" class="logo p-action-click" style="opacity: 0; pointer-events: none;">
</a>
<?php
if (!is_singular(['case-study'])) :
$button = get_link_group_field($header['button_in_header']);
if ($button && !is_page_template('careers.php') && !is_page_template('software-development-teams.php')) :
?>
<a href="<?php echo $button['url']; ?>" <?php echo $button['target']; ?> class="default-button -bordered p-action-click">
<?php echo $button['title']; ?>
</a>
<?php
endif;
endif;
?>
<div class="header__burger p-action-click">
<span></span>
<span></span>
</div>
</div>
</div>
<div class="header__menu --black-section">
<div class="menu-bg"></div>
<div class="header__menu-wrapper" data-animate-group="list" data-on-click="true">
<div class="scrollable-section">
<div class="container">
<div class="header__menu-menu title-1 mob-title-1">
<?php
$navigation_group = $header['navigation_group'];
$count_nav = count($navigation_group);
foreach($navigation_group as $key=>$item) :
$ready_link = get_link_group_field($item['link']);
if ($ready_link) :
$ready_link_title = $ready_link['title'];
if (!strripos($ready_link_title, '<sup')) :
?>
<a
class="p-action-click"
href="<?php echo $ready_link['url']; ?>"
<?php echo $ready_link['target']; ?>
data-animate="word" data-index="<?php echo $key; ?>" data-do-not-clear-animate
>
<?php echo $ready_link['title']; ?>
</a>
<?php
else:
?>
<div class="relative-div" data-animate="word" data-index="<?php echo $key; ?>" data-do-not-clear-animate>
<a
class="p-action-click"
href="<?php echo $ready_link['url']; ?>"
<?php echo $ready_link['target']; ?>
>
<?php echo stristr($ready_link['title'], '<sup', true); ?>
</a>
<?php echo stristr($ready_link['title'], '<sup'); ?>
</div>
<?php
endif;
endif;
endforeach;
?>
</div>
<div data-animate="fade" data-index="<?php echo $count_nav + 1; ?>" data-do-not-clear-animate>
<?php
$button_after_nav = get_link_group_field($header['button_after_navigation']);
if ($button_after_nav) :
?>
<a href="<?php echo $button_after_nav['url']; ?> <?php echo $button_after_nav['target']; ?>" class="default-button p-action-click">
<?php echo $button_after_nav['title']; ?>
</a>
<?php
endif;
?>
<div class="img animated-small-cube -flip p-action-click">
<svg width="199" height="229" viewBox="0 0 199 229" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M99.4369 228.42V171.565L50.2185 143.138V199.993L99.4369 228.42Z" fill="#1F1F1F"/>
<path d="M1 114.711V171.565L50.2185 199.993V143.138L1 114.711Z" fill="#1F1F1F"/>
<path d="M50.2185 143.138V86.2842L1 114.711L50.2185 143.138Z" fill="#1F1F1F"/>
<path d="M99.4369 228.42L148.655 199.993V143.138L99.4369 171.565V228.42Z" fill="#1F1F1F"/>
<path d="M148.655 199.993L197.874 171.565V114.711L148.655 143.138V199.993Z" fill="#1F1F1F"/>
<path d="M148.655 199.993L197.874 171.565V114.711L148.655 143.138M148.655 199.993L99.4369 228.42M148.655 199.993V143.138M99.4369 228.42V171.565M99.4369 228.42L50.2185 199.993M148.655 143.138L99.4369 171.565M99.4369 171.565L50.2185 143.138M1 114.711V171.565L50.2185 199.993M1 114.711L50.2185 143.138M1 114.711L50.2185 86.2842V143.138M50.2185 199.993V143.138" stroke="#555555"/>
<path d="M50.2183 29.4271L99.4367 57.8542L148.655 29.4271L99.4367 1L50.2183 29.4271Z" fill="#1F1F1F"/>
<path d="M148.655 29.4271L99.4367 57.8542V114.708L148.655 86.2813V29.4271Z" fill="#1F1F1F"/>
<path d="M99.4367 57.8542L50.2183 29.4271V86.2813L99.4367 114.708V57.8542Z" fill="#1F1F1F"/>
<path d="M50.2183 29.4271L99.4367 57.8542M50.2183 29.4271L99.4367 1L148.655 29.4271M50.2183 29.4271V86.2813L99.4367 114.708M99.4367 57.8542L148.655 29.4271M99.4367 57.8542V114.708M148.655 29.4271V86.2813L99.4367 114.708" stroke="#555555"/>
<path d="M99.4341 57.8568L148.653 86.2839L197.871 57.8568L148.653 29.4297L99.4341 57.8568Z" fill="#1F1F1F"/>
<path d="M197.871 57.8568L148.653 86.2839V143.138L197.871 114.711V57.8568Z" fill="#1F1F1F"/>
<path d="M148.653 86.2839L99.4341 57.8568V114.711L148.653 143.138V86.2839Z" fill="#1F1F1F"/>
<path d="M99.4341 57.8568L148.653 86.2839M99.4341 57.8568L148.653 29.4297L197.871 57.8568M99.4341 57.8568V114.711L148.653 143.138M148.653 86.2839L197.871 57.8568M148.653 86.2839V143.138M197.871 57.8568V114.711L148.653 143.138" stroke="#555555"/>
<g class="animated-cube">
<path d="M1.00391 57.8568L50.2224 86.2839L99.4409 57.8568L50.2224 29.4297L1.00391 57.8568Z" fill="#1F1F1F"/>
<path d="M99.4409 57.8568L50.2224 86.2839V143.138L99.4409 114.711V57.8568Z" fill="#1F1F1F"/>
<path d="M50.2224 86.2839L1.00391 57.8568V114.711L50.2224 143.138V86.2839Z" fill="#1F1F1F"/>
<path d="M1.00391 57.8568L50.2224 86.2839M1.00391 57.8568L50.2224 29.4297L99.4409 57.8568M1.00391 57.8568V114.711L50.2224 143.138M50.2224 86.2839L99.4409 57.8568M50.2224 86.2839V143.138M99.4409 57.8568V114.711L50.2224 143.138" stroke="#ED3B44"/>
</g>
<path d="M50.2183 86.2845L99.4367 114.712L148.655 86.2845L99.4367 57.8574L50.2183 86.2845Z" fill="#1F1F1F"/>
<path d="M148.655 86.2845L99.4367 114.712V171.566L148.655 143.139V86.2845Z" fill="#1F1F1F"/>
<path d="M99.4367 114.712L50.2183 86.2845V143.139L99.4367 171.566V114.712Z" fill="#1F1F1F"/>
<path d="M50.2183 86.2845L99.4367 114.712M50.2183 86.2845L99.4367 57.8574L148.655 86.2845M50.2183 86.2845V143.139L99.4367 171.566M99.4367 114.712L148.655 86.2845M99.4367 114.712V171.566M148.655 86.2845V143.139L99.4367 171.566" stroke="#555555"/>
</svg>
</div>
</div>
<div class="header__menu-footer-content --border-wrapper">
<span class="--horizontal-border --border-top" data-animate="width" data-index="5"
data-do-not-clear-animate></span>
<?php
$link_1 = $header['link_1'];
$link_2 = $header['link_2'];
if ($link_1) :
?>
<div class="text text-2 mob-text-2 --light" data-animate="fade" data-index="6" data-do-not-clear-animate>
<?php echo $link_1; ?>
</div>
<?php
endif;
if ($link_2) :
?>
<div class="text text-2 mob-text-2 --light" data-animate="fade" data-index="6" data-do-not-clear-animate>
<?php echo $link_2; ?>
</div>
<?php
endif;
?>
</div>
</div>
</div>
</div>
</div>
</header>