<!DOCTYPE html>
<html>
    <head>
        <title translate = "es:title">Sci-Hub: verificaci├│n</title>
        <meta charset = "UTF-8">
        <meta name = "viewport" content = "width=device-width">

        <script async defer src = "/scripts/altcha.min.js" type="module"></script>
    </head>
    <body>

        <style>

    @import url('/styles/Atkinson.css');
    @import url('/styles/Overpass.css');

    html { font-size: 12px }

    @media only screen and (min-width: 1400px) { html { font-size: 13px } }
    @media only screen and (min-width: 1600px) { html { font-size: 14px } }
    @media only screen and (min-width: 1800px) { html { font-size: 16px } }
    @media only screen and (min-width: 2048px) { html { font-size: 18px } }

    @media only screen and (max-height: 600px) { html { font-size: 10px } }

    body {font-family: 'Atkinson Hyperlegible Mono', 'Overpass Mono', monospace; background-color: white; margin: 0; padding: 0 }

    a {text-decoration: none; color: #c9211e}

    fixed-width {margin: 0 auto; padding: 2.33rem; max-width: 2048px; overflow-x: hidden; display: block }

    .vertical,
    row-split     { display: flex; flex-direction: column; align-items: center }
    column-split  { display: flex; align-items: flex-start; width: 100% }
    column-center { flex-grow: 1 }

    mobile-content { display: none }
    mobile-content.wide column-split > * { margin-left: 2rem }
    mobile-content.wide .picture { overflow: hidden; max-height: 30rem; }

    block-rounded { border: dotted 2px #ccc; border-radius: 2rem; flex-grow: 1; margin: 0; place-items: center; display: grid; font-size: 1.33rem }
    block-space   { margin-top: 3rem; display: block }

    header-small  { font-size: 1.66rem; font-weight: bold; margin: 1rem; color: #c9211e}

    block-rounded.info    { display: block; padding: 2.88rem; font-size: 1.22rem }
    block-rounded.info h1 { font-size: 1.66rem; color: #333;  margin-bottom: 2rem; font-weight: bold; color: #333 }

    block-date       { display: block; padding: 1rem; margin-right: 1.88rem;  max-width: fit-content; max-height: fit-content; text-align: center; color: white; border-radius: 1rem; font-size: 1.66rem; font-weight: bold; }

    block-date.black { background-color: black; }
    block-date.red   { background-color: #c9211e; }
    block-date.white { border: dotted 2px #c9211e; background-color: white; color: #c9211e }
    block-date.gray  { border: none; border-radius: 0; border-bottom:  dotted 2px #333; background-color: white; color: #333; font-weight: normal; }

    block-date .number { font-size: 2rem }

    span.rotate { animation: spin 3s linear infinite; display: inline-block; font-size: 1.88rem; }
    @keyframes spin { from { transform: rotate(0deg) }  to { transform: rotate(360deg) } }

    .yes { display: inline-block }
    .no  { display: none }

    @media only screen and (max-width: 1024px)
    {
        fixed-width { padding: 1.88rem }

        column-split   { justify-content: space-around; align-items: center }
        mobile-content { display: block; margin: 3rem 3rem 0 0 }
    }

    @media only screen and (max-width: 640px)
    {
        fixed-width { padding: 0.88rem }

        mobile-content.wide { display: none }
        mobile-content { margin-right: 0; }

        block-rounded { margin: 0 1rem;  }
    }

    @media only screen and (max-width: 480px)
    {
        fixed-width { padding: 0 }
    }

</style>

<script>

    function local(id) { return document.querySelector(".messages ." + id).innerText  }

</script>

        <style>

            body { min-height: 100vh;  }

            .question { position: absolute; left: 8rem; top: 8rem; z-index: 1; width: fit-content; height: fit-content; }
            .question .ask { font-size: 4rem; font-weight: bold; }
            .question .answer { margin-top: 4rem; font-size: 2rem;  display: grid; place-items: center; border: dotted 2px black; border-radius: 50%; aspect-ratio: 1; width: 7rem; cursor: pointer; }
            .question .answer:hover { border: solid 6px black; font-weight: bold; }

            .background { position: absolute; width: fit-content; height: 48vh; bottom: 0; right: 0; text-align: right; overflow: hidden; z-index: 0 }
            .background img { height: 100%; }

            altcha-widget { display: none }

            .result { display: none; font-size: 2rem; margin-top: 4rem; }
            .messages { display: none }

        </style>

        <script>

            function local(id) { return document.querySelector(".messages ." + id).innerText  }

            window.onload = function()
            {

                document.querySelector('altcha-widget').configure({
                    strings: { label: '', verifying: ''},
                })

                document.querySelector("altcha-widget").addEventListener("statechange",
                    async (ev) =>
                    {
                        if (ev.detail.state === "verified")
                        
                            try
                            {
                                let data = {captcha: ev.detail.payload}

                                let response = await fetch('/captcha/solution/37282704',
                                {
                                    method   : 'POST', 
                                    headers  : { 'Content-Type': 'application/json' },
                                    body     : JSON.stringify(data)
                                })

                                if (response.ok)
                                {
                                    response = await response.json()

                                    if (response.success)
                                    {
                                        document.querySelector(".result").innerText = local('verified')

                                        window.location.reload()
                                    }
                                }

                                else
                                    throw new Error(response.status)

                            } catch (error) { console.error(error) }

                    })

            }

            function check()
            {                
                document.querySelector('.answer').style.display = 'none'
                document.querySelector('altcha-widget').verify()

                document.querySelector(".result").style.display = 'block'
            }

        </script>

        <div class = "question">
            <div class = "ask" translate = "es:isrobot">┬┐Eres un robot?</div>
            <div class = "answer" onclick = "check()" translate = "es:nope">No soy un robot</div>
            <div class = "result" translate = "es:verifying">verificando...</div>

            <altcha-widget style="--altcha-border-width:0" challengeurl = "/captcha/challenge/37282704" hidelogo hidefooter></altcha-widget>
        </div>

        <div class = "background">
            <img src = "/pictures/robot.svg">
        </div>
    
        <div class = "messages">
            <div class = "verified" translate = "es:verified">verificado</div>
        </div>

    </body>
</html>