<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8">

    <script>
        document.documentElement.className = document.documentElement.className.replace("no-js","js");
        document.documentElement.setAttribute('style', 'overflow: hidden');
    </script>
    <?php
    wp_head();

    // General
    $color                      = get_field('color');
    $downloadAppLabel           = get_field('download_app_label');
    ?>
</head>
<body class="<?= $color ?>">
<noscript>Your browser does not support JavaScript!</noscript>
<style>
    .preloader {
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='L7' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='%23f1f1f1' d='M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='2s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3Cpath fill='%23f1f1f1' d='M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='-360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3Cpath fill='%23f1f1f1' d='M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='2s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /%3E%3C/path%3E%3C/svg%3E");
    }
</style>

<div id="cover" class="u-cover preloader" style="position: absolute; left: 0; top: 0; z-index: 200; width: 100%; height: 100%; background-color: white; background-size: 100px 100px; background-repeat: no-repeat; background-position: center center"></div>

<div class="c-topbar">
    <div class="o-wrap">
        <?php if ( has_custom_logo() ): ?>
            <?php the_custom_logo(); ?>
        <?php endif; ?>

        <i class="o-hamburger js-hamburger"></i>
    </div>


    <nav class="c-nav js-nav">
        <ul>
            <?php if(in_array($color, ['gray'])): ?>
                <li>
                    <a href="<?= home_url() ?>#about" data-target="#about">Onco Desk</a>
                </li>
                <li>
                    <a href="<?= home_url() ?>#content" data-target="#content">Content</a>
                </li>
                <li>
                    <a href="<?= home_url() ?>#download" data-target="#download" data-offset="-100"><?= $downloadAppLabel ?></a>
                </li>
            <?php else: ?>
                <li>
                    <a href="<?= home_url() ?>#about" data-target="#about">O aplikacji</a>
                </li>
                <li>
                    <a href="<?= home_url() ?>#content" data-target="#content">Treści aplikacji</a>
                </li>
                <li>
                    <a href="<?= home_url() ?>#download" data-target="#download" data-offset="-100"><?= $downloadAppLabel ?></a>
                </li>
            <?php endif ?>
        </ul>
    </nav>


</div>