<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" xmlns="http://www.w3.org/1999/html">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

<style>
    #browser-compatibility-modal .modal-dialog {
        overflow-y: initial !important;
        max-width: 100% !important;
    }

    #browser-compatibility-modal .modal-content {
        height: 100vh;
        padding-bottom: 4rem;
        overflow-y: auto;
        border: none !important;
    }

    .display-5 {
        font-size: 1.4rem;
        font-weight: 300;
        line-height: 1.2;
    }

    .small_icon {
        width: auto;
        height: 1.5rem;
        margin-top: -0.5rem;
    }


    /* Chrome */
    .chrome_green {
        fill: #2a9c4a;
    }

    .chrome_red {
        fill: #df362a;
    }

    .chrome_yellow {
        fill: #fbbd0c;
    }

    .chrome_white {
        fill: #fff;
    }

    .chrome_blue {
        fill: #1a73e8;
    }

    .download_blue {
        fill: #5499ff;
    }


    .cursor {
        fill: #fff;
        stroke: #000;
        stroke-miterlimit: 10;
        stroke-width: 1.83px;
    }

    /* Copy icon */
    .copy_grey {
        fill: #b2b6c1;
        fill-rule: evenodd;
    }

    .paste_blue {
        fill: #4285f4;
        fill-rule: evenodd;
    }

    .incognito-dark {
        fill: #35363a;
        fill-rule: evenodd;
    }


    /* Checkmark */
    .checkmark__circle {
        stroke-dasharray: 166;
        stroke-dashoffset: 166;
        stroke-width: 2;
        stroke-miterlimit: 10;
        stroke: #7ac142;
        fill: none;
        animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
    }

    .checkmark {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: block;
        stroke-width: 2;
        stroke: #fff;
        stroke-miterlimit: 10;
        margin: 10% auto;
        box-shadow: inset 0px 0px 0px #7ac142;
        animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
    }

    .checkmark__check {
        transform-origin: 50% 50%;
        stroke-dasharray: 48;
        stroke-dashoffset: 48;
        animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
    }

    @keyframes stroke {
        100% {
            stroke-dashoffset: 0
        }
    }

    @keyframes scale {
        0%, 100% {
            transform: none
        }
        50% {
            transform: scale3d(1.1, 1.1, 1)
        }
    }

    @keyframes fill {
        100% {
            box-shadow: inset 0 0 0 30px #7ac142
        }
    }


</style>

<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="icon" type="image/png" href="/static/favicon.png">
<script src="/static/scripts/platform.min.js"></script>
<script src="/static/scripts/detectIncognito.min.js"></script>

<script>
    var browser = (function () {
        var browser = {};
        function base64ToImage(base64) {
            var url = 'data:image/png;base64,' + base64;
            return '<img width="18" height="18" src="' + url + '">';
        }

        function chromeMoreIcon() {
            return base64ToImage('iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAKElEQVR4AWMYrqDUvfQ5ELoTrQGo+D8QPqeZBoSTqAVGQ2k0lIYpAAA/gTrh2+TtPAAAAABJRU5ErkJggg==')
        }

        function chromeArrowIcon() {
            return base64ToImage('iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAQ0lEQVR4AWOgDxgFo6CkpGRBaWnpfFoZ7gA0/D8I08wSoMEJZFsyaglNLQClLtobPmp4RUWFAg0Mx/QBzHD6g1EwCgBqtlwMak9M6QAAAABJRU5ErkJggg==')
        }

        function chromeIncognitoIcon() {
            return base64ToImage('iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAAnNCSVQICFXsRgQAAAKcSURBVEiJ7ZRdSFNhGMf/56OFuek0m0KpBZpgRaZBH1bIjOkMQrwog7zLYwiSuZVkV2NBZDOwQMrsJjPqIummj5nYcLahmF1EF+Go1Low2DI/Sufm00W5nc29NfEq8H9x4H3//+d3nofzvgdY1UqkRC6EwErEbqjYYY6Nabvx4cj6kZin1XfAtZz6ofekb3lSWYOpZYJIZ7CKoECAwMGHpiKuK3JeiLwNiJd822lJuH/Ny0eR8zwL5C4PxwAEdzkrzwCZKhUR9xUwVS4LpDrBejPLiQzKc2cvHQwACO5s5EUNGiibS2Z1NJc8UBYtSPO8kPkNwMOqhSYqEOVM7Ik8GAAQPHsph2mvXIGTTQVjh2PmFziAp2ifc2JqN2f7XS8ugt4ebT+7/D4q1sG20lnCFOHSOoq2bCPFjCvTjvEwK3n4YGwG5/34br/1X6CY9sY31RzPwY9416F6bWfQ6i61N05mCiDQwq6WivP4ye5PbbEb6HYDkgBJZ3YayVO8aH3VG8nslHQAklovGshiRzyT01tbQw4psEwwO00uxAIAYk0usxMJgfGlGuqtZY52ZjR9uK40+A88rttkTeyMi+MU3z2e0nHdvReBqOra45GM5vRgbcjJFlILX8t/pQ+7eEzqZzWziZPFAmQYYEo7JKTJa0NAXnxWh/S4YQH5V8/tNO7Y1+QHkuR1o2qvvDQUpLT1lpDs3rdVYV7sAYC13fC1VgUd0vSVKG1gibIMMw2DlAIegMoh1VFH86L34HodOSSoAPCU0jBonKat8tqwc0QnjbfEb/nP0iZ6cj9pN/bVF8D/xxKu2L4c2NyjHRpVv9L7EiwS1/EXEEBZF25OFyjgHztmyb+LCZml7q+4bxTSvFDaLp/m3jMHW9V/o18NUOKGCFK8ugAAAABJRU5ErkJggg==')
        }

        function hideResumeModal() {
            var resumeModal = $('#resume-modal');
            if (resumeModal.length > 0) {
                resumeModal[0].style = {};
            }
        }

        function renderBrowserWarning() {
            hideResumeModal();
            var warningMsg = "";
            if (browser.forceGoogleChrome) {
                if (!browser.isChrome) {
                    warningMsg = "{{ pgettext("browser_compatibility", "You need to use Google Chrome to take part in the experiment.")  | replace('"',"'")|safe }} {{ pgettext("browser_compatibility", "You are using")  | replace('"',"'")|safe }} " + browser.name + ". {{ pgettext("browser_compatibility", "Please follow the instructions below to continue.")  | replace('"',"'") | safe }}";
                } else {
                    if (browser.isOldVersion) {
                        warningMsg = "{{ pgettext("browser_compatibility", "You need to use the latest version of Google Chrome to take part in the experiment.")  | replace('"',"'") | safe  }}  (> " + browser.minVersion + "). {{ pgettext("browser_compatibility", "You are using:") | replace('"',"'") | safe }}: " + browser.version + ". {{ pgettext("browser_compatibility", "Please follow the instructions below to continue.")  | replace('"',"'") | safe }}";
                    }
                }
            }

            if (browser.forceIncognitoMode) {
                if (!browser.isIncognito) {
                    // only show this warning if people are using the right browser
                    if (warningMsg === "") {
                        warningMsg = `{{ pgettext("browser_compatibility", "You need to use the incognito mode to take part in the experiment.") | safe }}`;
                        warningMsg += ` {{ pgettext("browser_compatibility", "Please follow the instructions below to continue.") | replace('"',"'") | safe }}`;
                    }
                }
            }


            var out = '<div class="container">';
            out += getPsyNetLogo();
            out += '<div class="alert alert-warning" role="alert">';
            out += "<h4 class='alert-heading'>";
            out += `{{ pgettext("browser_compatibility", "Warning!")  | replace('"',"'") | safe }}`
            out += "</h4>";
            out += '<p>' + warningMsg + '</p>';
            out += '</div>';
            out += '<table class="table mt-3">';
            out += '<tbody>';

            if (browser.forceGoogleChrome && !browser.isChrome) {
                var chromeLink = "<a href='https://www.google.com/chrome/' target='_blank'>{{ pgettext("browser_compatibility", "Click here")  | replace('"',"'") | safe }}" + getIcon('link') + "</a>";
                if (browser.isOldVersion) {
                    out += renderInstruction('download-chrome', "{{ pgettext("browser_compatibility", "Install the latest version of Google Chrome")  | replace('"',"'") | safe }}: " + chromeLink);
                } else {
                    out += renderInstruction('download-chrome', "{{ pgettext("browser_compatibility", "Install Google Chrome if you haven't")  | replace('"',"'") | safe }}" + chromeLink);
                }
            }
            out += renderInstruction('copy-filled', "{{ pgettext("browser_compatibility", "Copy the link below")  | replace('"',"'") | safe }}", renderCopyArea('url', window.location.href));
            if (browser.forceGoogleChrome && !browser.isChrome) {
                out += renderInstruction('open-chrome', "{{ pgettext("browser_compatibility", "Open Google Chrome")  | replace('"',"'") | safe }}");
            }

            if (browser.forceIncognitoMode) {
                var shortcut = isMacOS() ? '<strong>⌘ + Shift + n</strong> (MacOS)' : '<strong>Ctrl + Shift + N</strong>';
                var incognitoInstructions = '';
                if (browser.isChrome) {
                    incognitoInstructions += "<p>";
                    incognitoInstructions += "<ol class='mt-3'>";
                    incognitoInstructions += "<li>{{ pgettext("browser_compatibility", "On your computer, open Chrome.") | replace('"',"'") | safe }}</li>";
                    incognitoInstructions += " <li>{{ pgettext("browser_compatibility", "At the top right, click More")  | replace('"',"'") | safe }}" + chromeMoreIcon();
                    incognitoInstructions += chromeArrowIcon() + "<strong>{{ pgettext("browser_compatibility", "New Incognito Window")  | replace('"',"'") | safe }}</strong>.</li>";
                    incognitoInstructions += "<li>{{ pgettext("browser_compatibility", "A new window appears. In the top corner, check for the Incognito icon")  | replace('"',"'") | safe }}" + chromeIncognitoIcon() + "</li>";
                    incognitoInstructions += "</ol>";
                    incognitoInstructions += "{{ pgettext("browser_compatibility", "You can also use a keyboard shortcut to open an Incognito window")  | replace('"',"'") | safe }}: {{ pgettext("browser_compatibility", "Press")  | replace('"',"'") | safe }} " + shortcut;
                    incognitoInstructions += "</p>";
                }

                out += renderInstruction('incognito', "{{ pgettext("browser_compatibility", "Open a new incognito window")  | replace('"',"'") | safe }}", incognitoInstructions);
            }
            var continueMsg = ''
            var isTimeline = window.location.href.indexOf('timeline') !== -1
            if (browser.forceIncognitoMode) {
                if (isTimeline) {
                    continueMsg = "{{ pgettext("browser_compatibility", "Paste the link into the incognito window to continue the experiment")  | replace('"',"'") | safe }}";
                } else {
                    continueMsg = "{{ pgettext("browser_compatibility", "Paste the link into the incognito window to start the experiment")  | replace('"',"'") | safe }}";
                }
            } else {
                if (isTimeline) {
                    continueMsg = "{{ pgettext("browser_compatibility", "Paste the link into the Chrome browser to continue the experiment")  | replace('"',"'") | safe }}";
                } else {
                    continueMsg = "{{ pgettext("browser_compatibility", "Paste the link into the Chrome browser to start the experiment")  | replace('"',"'") | safe }}";
                }
            }
            out += renderInstruction('paste-filled', continueMsg);
            out += '</tbody>';
            out += '</table>';
            out += '</div>';

            document.getElementById('browser-compatibility-content').innerHTML = out;
            document.getElementById('browser-compatibility-modal').style.display = 'block'
        }

        function getPsyNetLogo(){
            var out = '<div class="row mb-3">';
            out += '<div class="col">';
            out += $('#psynet_logo')[0].innerHTML;
            out += '</div>';
            out += '</div>';
            return out;
        }

        function renderMobileWarning() {
            hideResumeModal();

            var out = "<div class='container'>";
            out += getPsyNetLogo();
            out += "<div class='alert alert-danger' role='alert'>";
            out += "<p>";
            out += "{{ pgettext("browser_compatibility", "You cannot take part in the experiment from a mobile device.")  | replace('"',"'") | safe }} ";
            out += "{{ pgettext("browser_compatibility", "Please open the survey on your computer.") | replace('"',"'") | safe}}";
            out += "</p>";
            out += "</div>";

            document.getElementById('browser-compatibility-content').innerHTML = out;
            document.getElementById('browser-compatibility-modal').style.display = 'block'
        }

        function fallbackCopyTextToClipboard(text) {
            var textArea = document.createElement("textarea");
            textArea.value = text;

            // Avoid scrolling to bottom
            textArea.style.top = "0";
            textArea.style.left = "0";
            textArea.style.position = "fixed";

            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();

            try {
                var successful = document.execCommand('copy');
                var msg = successful ? 'successful' : 'unsuccessful';
                console.log('Fallback: Copying text command was ' + msg);
            } catch (err) {
                console.error('Fallback: Oops, unable to copy', err);
            }

            document.body.removeChild(textArea);
        }

        browser.copyTextToClipboard = function (text) {
            console.log('copying text to clipboard', text)
            if (!navigator.clipboard) {
                fallbackCopyTextToClipboard(text);
                return;
            }
            navigator.clipboard.writeText(text).then(function () {
                console.log('Async: Copying to clipboard was successful!');
            }, function (err) {
                console.error('Async: Could not copy text: ', err);
            });
        }

        browser.allowMobileDevices = {{ config.allow_mobile_devices|tojson }};
        browser.forceGoogleChrome = {{ config.force_google_chrome|tojson }};
        browser.forceIncognitoMode = {{ config.force_incognito_mode|tojson }};
        browser.minVersion = "{{ config.min_browser_version }}";
        browser.version = platform.version;
        browser.isOldVersion = !isVersionAtLeast(browser.version, browser.minVersion);
        browser.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

        function renderInstruction(iconName, text, details = '') {
            var line = getIcon(iconName) + ' <span class="display-5">' + text + '</span>' + details;
            var out = '<tr>';
            out += '<td>' + line + '</td>';
            out += '</tr>';
            return out
        }

        function getIcon(iconName) {
            var elem = document.getElementById(iconName + '-icon');
            return elem.outerHTML;
        }

        function userAgentContains(str) {
            return navigator.userAgent.indexOf(str) !== -1;
        }

        function detectOS() {
            if (userAgentContains("Win")) return "Windows";
            else if (userAgentContains("Mac")) return "MacOS";
            else if (userAgentContains("X11")) return "UNIX";
            else if (userAgentContains("Linux")) return "Linux";
            else return "Unknown";
        }

        function isMacOS() {
            return detectOS() === "MacOS";
        }

        function renderCopyArea(id, text) {
            var out = '<div class="input-group my-3">';
            out += '<input id="' + id + '" type="text" class="form-control" value="' + text + '" readonly>';
            out += '<div class="input-group-append">';
            out += '<button onclick="browser.onclickCopy(\'' + id + '\')" class="btn btn-outline-secondary" type="button" id="copy-button">';
            out += getIcon('copy-outline');
            out += '</button>';
            out += '</div>';
            out += '</div>';
            return out;
        }


        function isVersionAtLeast(x, comparison) {
            var xSplit = x.split(".").map(Number);
            var comparisonSplit = comparison.split(".").map(Number);
            for (var i = 0; i < comparisonSplit.length; i++) {
                if (i < xSplit.length) {
                    // Both have version numbers at that specifity to compare
                    if (xSplit[i] > comparisonSplit[i]) {
                        return true;
                    } else if (xSplit[i] < comparisonSplit[i]) {
                        return false;
                    }
                } else {
                    if (comparisonSplit[i] > 0) {
                        return false;
                    }
                }
            }
            return true;
        }

        browser.onclickCopy = function (id) {
            var elem = $('#' + id);
            browser.copyTextToClipboard(elem.val());
            document.getElementById('copy-button').innerHTML = getIcon('checkmark');
        }



        browser.validate = function() {
            if (!browser.allowMobileDevices && browser.isMobile) {
                renderMobileWarning();
                {% if experiment.with_lucid_recruitment() %}
                    let url = '/terminate_participant?reason=mobile-phone&' + window.location.search.substring(1);
                    if (typeof participant !== 'undefined') {
                        url += '&participant_id=' + participant.id;
                    }
                    window.onbeforeunload = null;
                    window.location.replace(url);
                {% endif %}
                return false;
            }

            detectIncognito().then((result) => {
                browser.name = result.browserName;
                browser.isIncognito = result.isPrivate;
                browser.isChrome = result.browserName === "Chrome";
                var correctBrowserUsed = true;
                if (browser.forceGoogleChrome) {
                    correctBrowserUsed = correctBrowserUsed && browser.isChrome && !browser.isOldVersion
                }
                if (browser.forceIncognitoMode) {
                    correctBrowserUsed = correctBrowserUsed && browser.isIncognito;
                }
                if (!correctBrowserUsed) {
                    renderBrowserWarning();
                    {% if experiment.with_lucid_recruitment() %}
                        let url = '/terminate_participant?reason=wrong-browser&' + window.location.search.substring(1);
                        if (typeof participant !== 'undefined') {
                            url += '&participant_id=' + participant.id;
                        }
                        window.onbeforeunload = null;
                        window.location.replace(url);
                    {% endif %}
                    return false;
                }
                console.log("Browser check finished");
                browser.isValidated = true;
            });
            return true;
        }
        return browser;
    })();

</script>


{% macro svg(id, viewbox, content, class_name="small_icon", width=none, height=none, fill="currentColor") %}
    <svg id="{{ id }}" class="{{ class_name }}" viewBox="{{ viewbox }}"
            {% if width is not none %} width="{{ width }} {% endif %}"
            {% if height is not none %} height="{{ height }} {% endif %}"
         fill="{{ fill }}">
        {{ content }}
    </svg>
{% endmacro %}


{% macro chrome_svg_content() %}
    <path class="chrome_white"
          d="m31.5,47.25c8.7,0,15.75-7.05,15.75-15.75s-7.05-15.75-15.75-15.75-15.75,7.05-15.75,15.75,7.05,15.75,15.75,15.75Z"/>
    <path class="chrome_green"
          d="m17.86,39.38L4.22,15.75C1.46,20.54,0,25.97,0,31.5s1.46,10.96,4.22,15.75c2.76,4.79,6.74,8.76,11.53,11.53,4.79,2.76,10.22,4.22,15.75,4.22l13.64-23.62h0c-1.38,2.39-3.37,4.38-5.76,5.76s-5.11,2.11-7.88,2.11-5.48-.73-7.88-2.11c-2.39-1.38-4.38-3.37-5.76-5.77Z"/>
    <path class="chrome_yellow"
          d="m45.14,39.37l-13.64,23.62c5.53,0,10.96-1.45,15.75-4.22,4.79-2.76,8.76-6.74,11.53-11.53,2.76-4.79,4.22-10.22,4.22-15.75,0-5.53-1.46-10.96-4.22-15.75h-27.28c2.77,0,5.48.73,7.88,2.11,2.4,1.38,4.38,3.37,5.77,5.76,1.38,2.39,2.11,5.11,2.11,7.88,0,2.77-.73,5.48-2.11,7.88h0Z"/>
    <path class="chrome_blue"
          d="m31.5,43.97c6.89,0,12.47-5.58,12.47-12.47s-5.58-12.47-12.47-12.47-12.47,5.58-12.47,12.47,5.58,12.47,12.47,12.47Z"/>
    <path class="chrome_red"
          d="m31.5,15.75h27.28c-2.76-4.79-6.74-8.77-11.53-11.53C42.46,1.45,37.03,0,31.5,0s-10.96,1.46-15.75,4.22c-4.79,2.77-8.76,6.74-11.53,11.53l13.64,23.62h0c-1.38-2.39-2.11-5.11-2.11-7.87s.73-5.48,2.11-7.88c1.38-2.39,3.37-4.38,5.77-5.77,2.39-1.38,5.11-2.11,7.88-2.11Z"/>
{% endmacro %}


{% macro download_svg_content() %}
    <polygon class="download_blue" points="88.89 44.89 70.71 24.26 107.07 24.26 88.89 44.89"/>
    <rect class="download_blue" x="80.38" y="7.28" width="17.02" height="17.88"/>
    <rect class="download_blue" x="68.89" y="48.72" width="40" height="6.44"/>
{% endmacro %}


{% macro download_chrome_icon() %}
    {{ svg(id="download-chrome-icon", viewbox="0 0 108.89 63", content=download_svg_content() + chrome_svg_content()) }}
{% endmacro %}

{% macro link_svg_content() %}
    <path d="M13.85 5H14V4h-4v1h2.15l-5.36 5.364.848.848L13 5.85V8h1V4h-1v.15l.15-.15.85.85-.15.15zM8 4H4.995A1 1 0 004 4.995v8.01a1 1 0 00.995.995h8.01a1 1 0 00.995-.995V10h-1v3H5V5h3V4z"></path>
{% endmacro %}

{% macro link_icon() %}
    {{ svg(id="link-icon", viewbox="0 0 16 16", content=link_svg_content()) }}
{% endmacro %}

{% macro copy_filled_svg_content() %}
    <path class="copy_grey"
          d="m30.56,0c16.88,0,30.56,13.68,30.56,30.56s-13.68,30.56-30.56,30.56S0,47.43,0,30.56,13.68,0,30.56,0Zm7.55,21.88v1.95h3.08c.97,0,1.85.4,2.49,1.04.63.63,1.03,1.51,1.03,2.48h0v18.51h0s0,0,0,0c0,.97-.4,1.85-1.04,2.49-.63.63-1.51,1.03-2.48,1.03h0s0,0,0,0h-15.59c-.97,0-1.85-.4-2.49-1.04-.63-.63-1.03-1.51-1.03-2.48h0v-4.15h-3.08c-.97,0-1.85-.4-2.49-1.04-.63-.63-1.03-1.51-1.03-2.48h0v-16.32h0s0,0,0,0c0-.97.4-1.85,1.04-2.49.63-.63,1.51-1.03,2.48-1.03h0s0,0,0,0h15.59c.97,0,1.85.4,2.49,1.04.63.63,1.03,1.51,1.03,2.48h0Zm-2.67,1.95v-1.95h0s0,0,0,0c0-.23-.1-.44-.26-.6-.15-.15-.37-.25-.6-.25h0s0,0,0,0h-15.59c-.23,0-.44.09-.6.25s-.25.37-.25.6h0v16.32h0s0,0,0,0c0,.23.1.44.26.6.15.15.37.25.6.25h0s0,0,0,0h3.08v-11.69h0s0,0,0,0c0-.97.4-1.85,1.04-2.49.63-.63,1.51-1.03,2.48-1.03h0s0,0,0,0h9.83Zm6.6,22.03v-18.51h0s0,0,0,0c0-.23-.1-.44-.26-.6-.15-.15-.37-.25-.6-.25h0s0,0,0,0h-15.59c-.23,0-.44.09-.6.25s-.25.37-.25.6h0v18.51h0s0,0,0,0c0,.23.1.44.26.6.15.15.37.25.6.25h0s0,0,0,0h15.59c.23,0,.44-.09.6-.25s.25-.37.25-.6h0s0,0,0,0Z"/>
    </path>
{% endmacro %}

{% macro copy_filled_icon() %}
    {{ svg(id="copy-filled-icon", viewbox="0 0 61.12 61.12", content=copy_filled_svg_content()) }}
{% endmacro %}


{% macro copy_outline_svg_content() %}
    <path d="M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02 v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02 c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1 c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7 h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02 c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65 v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02 h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02 v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z"/>
{% endmacro %}

{% macro copy_outline_icon(width=15, height=15) %}
    {{ svg(id="copy-outline-icon", viewbox="0 0 115.77 122.88", content=copy_outline_svg_content(), class_name="", width=width, height=height) }}
{% endmacro %}

{% macro checkmark_svg_content() %}
    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
{% endmacro %}


{% macro checkmark_icon() %}
    {{ svg(id="checkmark-icon", viewbox="0 0 52 52", content=checkmark_svg_content(), class_name="checkmark") }}
{% endmacro %}

{% macro cursor_svg_content() %}
    <path class="cursor"
          d="m50.13,18.18c-.1,0-.2.02-.3.06-.26.12-.43.38-.43.67v33.32c0,.25.12.48.32.61.12.08.26.12.4.12.1,0,.2-.02.3-.06l8.67-3.84,4.73,10.68c.12.27.39.43.67.43.1,0,.2-.02.29-.06l3-1.33,3-1.33c.37-.16.53-.59.37-.96l-4.73-10.68,8.67-3.84c.23-.1.39-.31.43-.55.04-.24-.05-.49-.23-.66l-24.68-22.39c-.14-.12-.31-.19-.49-.19h0Z"/>
{% endmacro %}

{% macro open_chrome_icon() %}
    {{ svg(id="open-chrome-icon", viewbox="0 0 77.51 63", content=chrome_svg_content() + cursor_svg_content()) }}
{% endmacro %}

{% macro incognito_svg_content() %}
    <path class="incognito-dark"
          d="m30.56,0c16.88,0,30.56,13.68,30.56,30.56s-13.68,30.56-30.56,30.56S0,47.43,0,30.56,13.68,0,30.56,0Zm8.91,33.02c-3.29,0-6.02,2.29-6.73,5.36-1.66-.71-3.21-.51-4.36-.02-.73-3.06-3.47-5.34-6.73-5.34-3.82,0-6.93,3.1-6.93,6.92s3.11,6.92,6.93,6.92,6.6-2.81,6.87-6.36c.59-.42,2.16-1.19,4.08.04.32,3.54,3.25,6.32,6.87,6.32,3.82,0,6.93-3.1,6.93-6.92s-3.11-6.92-6.93-6.92Zm-17.83,1.98c2.73,0,4.95,2.21,4.95,4.94s-2.22,4.94-4.95,4.94-4.95-2.21-4.95-4.94,2.22-4.94,4.95-4.94h0Zm17.83,0c2.73,0,4.95,2.21,4.95,4.94s-2.22,4.94-4.95,4.94-4.95-2.21-4.95-4.94,2.22-4.94,4.95-4.94h0Zm8.91-5.97H12.73v2.04h35.65v-2.04Zm-11.27-14.09c-.41-.93-1.46-1.42-2.44-1.09l-4.12,1.38-4.14-1.38-.1-.03c-.98-.27-2.01.26-2.38,1.22l-4.52,11.96h22.26l-4.54-11.96-.04-.09Z"/>
{% endmacro %}


{% macro incognito_icon() %}
    {{ svg(id="incognito-icon", viewbox="0 0 61.12 61.12", content=incognito_svg_content()) }}
{% endmacro %}

{% macro paste_filled_svg_content() %}
    <path class="paste_blue"
          d="m30.56,0c16.88,0,30.56,13.68,30.56,30.56s-13.68,30.56-30.56,30.56S0,47.43,0,30.56,13.68,0,30.56,0Zm2.42,12.7c1.97,0,3.59,1.49,3.8,3.4h3c2.02,0,3.68,1.57,3.82,3.56v.26c0,.64-.47,1.18-1.09,1.26h-.18c-.64.01-1.18-.47-1.26-1.09v-.17c-.01-.65-.49-1.18-1.11-1.26h-.17s-3.62-.01-3.62-.01c-.69,1.02-1.85,1.69-3.17,1.69h-5.96c-1.32,0-2.48-.67-3.17-1.69h-3.62c-.65,0-1.18.48-1.26,1.1v.17s-.01,22.95-.01,22.95c0,.65.48,1.18,1.1,1.26h.17s5.1.01,5.1.01c.65,0,1.18.48,1.26,1.1v.17c.01.7-.56,1.27-1.26,1.27h-5.1c-2.02,0-3.68-1.57-3.82-3.56v-.26s0-22.95,0-22.95c0-2.02,1.57-3.68,3.56-3.82h.26s3,0,3,0c.21-1.91,1.83-3.4,3.8-3.4h5.96Zm10.19,10.2c2.02,0,3.68,1.57,3.82,3.56v.26s0,16.15,0,16.15c0,2.02-1.57,3.68-3.56,3.82h-.26s-11.05,0-11.05,0c-2.02,0-3.68-1.57-3.82-3.56v-.26s0-16.15,0-16.15c0-2.02,1.57-3.68,3.56-3.82h.26s11.05,0,11.05,0Zm0,2.55h-11.05c-.65,0-1.18.48-1.26,1.1v.17s-.01,16.15-.01,16.15c0,.65.48,1.18,1.1,1.26h.17s11.05.01,11.05.01c.65,0,1.18-.48,1.26-1.1v-.17s.01-16.15.01-16.15c0-.65-.48-1.18-1.1-1.26h-.17Zm-10.19-10.2h-5.96c-.7,0-1.27.57-1.27,1.27s.57,1.27,1.27,1.27h5.96c.7,0,1.27-.57,1.27-1.27s-.57-1.27-1.27-1.27Z"/>
{% endmacro %}

{% macro paste_filled_icon() %}
    {{ svg(id="paste-filled-icon", viewbox="0 0 61.12 61.12", content=paste_filled_svg_content()) }}
{% endmacro %}




<div id="hidden-svgs" style="display:none">
    {{ download_chrome_icon() }}
    {{ link_icon() }}
    {{ copy_filled_icon() }}
    {{ copy_outline_icon() }}
    {{ checkmark_icon() }}
    {{ open_chrome_icon() }}
    {{ incognito_icon() }}
    {{ paste_filled_icon() }}
</div>


<noscript>
    <div class="modal" tabindex="-1" style="display:block">
        <div class="modal-body">
            <div class="container">
                <img id="adlogo" class="my-3" src="/static/images/logo.svg" alt="PsyNet logo"
                     style="width: 150px; float: none;">
                <div class="alert alert-danger" role="alert">
                    {{ pgettext('browser_compatibility', 'This site requires JavaScript to function properly.') }}
                    {{ pgettext('browser_compatibility', 'Please enable JavaScript in your browser.') }}
                    {{ pgettext('browser_compatibility', 'Follow the steps below to make sure the experiment works.') }}
                </div>
                <table class="table mt-3">
                    <tbody>
                    <tr>
                        <td>
                            {{ download_chrome_icon() }}
                            <span class="display-5">
                                {{ pgettext("browser_compatibility", "Install the latest version of Google Chrome on your computer") }}
                                <a href="https://www.google.com/chrome/" target="_blank">
                                    {{ pgettext("browser_compatibility", "Click here") }}
                                    {{ link_icon() }}
                                    </a>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            {{ copy_filled_icon() }}
                            <span class="display-5">
                                {{ pgettext("browser_compatibility", "Copy the current URL to the clipboard:") }}
                                <tt>{{ request.url }}</tt>
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            {{ open_chrome_icon() }}
                            <span class="display-5">
                                {{ pgettext("browser_compatibility", "Open Google Chrome") }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            {{ incognito_icon() }}
                            <span class="display-5">{{ pgettext("browser_compatibility", "Open a new incognito window") }}</span>
                            <p>
                                {{ pgettext("browser_compatibility", "Open a new incognito window with  the following keyboard shortcuts:") }}<br>
                                {{ pgettext("browser_compatibility", "On Windows, Linux, or Chrome OS: Press") }}
                                <strong>Strg + Shift + n</strong>.<br>
                                {{ pgettext("browser_compatibility", "On Mac: Press") }} <strong>⌘ + Shift + n</strong>.<br>
                            </p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            {{ paste_filled_icon() }}
                            <span class="display-5">{{ pgettext("browser_compatibility", "Paste the link into the incognito window to start the experiment") }}</span>
                        </td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</noscript>


<div id="browser-compatibility-modal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="browser-compatibility-content" class="modal-body">
            </div>
        </div>
    </div>
</div>