checkpoint/html/index.html

<!DOCTYPE html>
<html>

<head>
    <title>STOP! - Checkpoint</title>
</head>

<body style="background-color: #0e0e0e; overflow: hidden;">

    <style>
        @font-face {
            font-family: "Noto Sans";
            src: url("/checkpoint/NotoSans.woff");
        }

        * {
            font-family: "Noto Sans";
        }

        .middle-box {
            display: block;
            position: absolute;
            width: 30rem;
            height: calc(100% - 2rem);
            left: calc(50% - 15rem);
            top: 1rem;
            background-color: #111111;
            border-radius: 0.5rem;
            border: 1px solid #280d0e;
        }

        .big-icon {
            margin: 0;
            padding: 0;
            font-size: 8rem;
            color: white;
            width: 100%;
            text-align: center;
        }

        .subtext {
            margin: 0;
            padding: 0;
            font-size: 3rem;
            color: #d9d9d9;
            width: 100%;
            text-align: center;
        }

        .text-hr {
            margin: auto;
            margin-top: 1rem;
            margin-bottom: 1rem;
            padding: 0;
            background-color: #444444;
            width: 50%;
            box-shadow: none;
            text-align: center;
            height: 1px;
            border: none;
        }

        .text-hr-small {
            margin: auto;
            margin-top: 1rem;
            margin-bottom: 1rem;
            padding: 0;
            background-color: #444444;
            width: 25%;
            box-shadow: none;
            text-align: center;
            height: 1px;
            border: none;
        }

        .text-description {
            margin: 0;
            padding: 0;
            font-size: 1rem;
            color: #d9d9d9;
            width: 85%;
            margin-left: 7.5%;
            text-align: center;
        }

        .text-question {
            margin: 0;
            margin-top: 4rem;
            padding: 0;
            font-size: 1.4rem;
            color: #d9d9d9;
            width: 85%;
            margin-left: 7.5%;
            text-align: center;
        }

        .bottom-bar {
            position: absolute;
            width: 100%;
            height: auto;
            bottom: 0.4rem;
            left: 0;
        }

        .bottom-hash-text {
            margin: 0;
            padding: 0;
            font-size: 1rem;
            color: #d9d9d9;
            width: 85%;
            margin-left: 7.5%;
            text-align: center;
        }

        .bottom-credit-text {
            display: block;
            margin: 0;
            padding: 0;
            font-size: 0.5rem;
            color: #4b4b4b;
            width: 98%;
            text-align: right;
            transition: ease-in-out 0.1s;
            margin-top: 0.2rem;
        }

        .bottom-credit-text:hover,
        .bottom-credit-text:link:hover,
        .bottom-credit-text:visited:hover {
            color: #764343;
            cursor: pointer;
        }

        .bottom-credit-text:link,
        .bottom-credit-text:visited {
            color: #4b4b4b;
        }

        .bottom-progress {
            position: relative;
            height: 3px;
            background-color: #222222;
            width: 80%;
            margin-left: 10%;
            margin-bottom: 0.8rem;
        }

        .bottom-progress-light {
            position: absolute;
            left: 0;
            top: 0;
            width: 0%;
            height: 3px;
            background-color: #692225;
            transition: ease-in-out 0.1s;
        }

        .link,
        .link:visited,
        .link:link,
        .link:focus,
        .link:active {
            color: #c03940;
            text-decoration: none;
        }

        .link:hover {
            text-decoration: underline;
        }

        @media (pointer:none),
        (pointer:coarse) {
            .big-icon {
                margin-top: 10rem;
            }

            .middle-box {
                width: 90%;
                left: 5%;
            }

            .subtext {
                font-size: 6rem;
            }

            .text-description {
                font-size: 3rem;
            }

            .text-hr {
                height: 3px;
            }

            .bottom-hash-text {
                font-size: 2.5rem;
            }

            .bottom-credit-text {
                font-size: 1rem;
            }
        }
    </style>

    <div class="middle-box">
        <p class="big-icon">
            &#128721; <!-- 🛑 -->
        </p>
        <p class="subtext" id="subtext">
            STOP!
        </p>
        <hr class="text-hr" />

        <noscript>
            <p class="text-description">
                This website uses&nbsp;<a class="link" href="https://github.com/vaxerski/checkpoint">checkpoint</a>&nbsp;and
                requires
                javascript to
                automatically verify you are not a bot.<br /><br />
                You seem to be running without Javascript enabled, and thus will have to do this manually.<br /><br />
                Paste this command into your Linux terminal and provide the output below:
            </p>

            <p class="code-block">
                perl -MDigest::SHA=sha256_hex -e '$n="{{ tl:text challengeNonce }}";$d={{ tl:text challengeDifficulty
                }};for($i=0;;$i++){$h=sha256_hex($n.$i);if(substr($h,0,$d) eq "0"x$d){print "$i\n";last}}'
            </p>

            <form action="/checkpoint/challengeNoJs" method="get">
                <div>
                    <label class="form-label" for="name">Enter the output </label>
                    <input class="form-input" type="text" name="solution" id="solution" required />
                </div>
                <input class="input-hidden" type="text" name="fingerprint" id="fingerprint"
                    value="{{ tl:text challengeFingerprint }}" />
                <input class="input-hidden" type="text" name="challenge" id="challenge"
                    value="{{ tl:text challengeNonce }}" />
                <input class="input-hidden" type="text" name="sig" id="sig" value="{{ tl:text challengeSignature }}" />
                <input class="input-hidden" type="text" name="timestamp" id="timestamp"
                    value="{{ tl:text challengeTimestamp }}" />
                <input class="input-hidden" type="text" name="difficulty" id="difficulty"
                    value="{{ tl:text challengeDifficulty }}" />
                <input class="form-button" type="submit" value="Send" />
            </form>

            <p class="text-description text-warning">
                Never trust random scripts from the internet! Make sure you understand the perl script above.
                If you don't, click&nbsp<a class="link" href="/checkpoint/explainNoJs" target="_blank" style="text-decoration: underline;">here</a>&nbspfor an explanation.
            </p>

            <style>
                .form-label {
                    color: #d9d9d9;
                    display: block;
                    text-align: center;
                    margin-bottom: 0.5rem;
                    font-size: 1rem;
                }

                .form-input {
                    display: block;
                    margin: 0 auto;
                    width: 15rem;
                    background-color: #161616;
                    color: #d9d9d9;
                    border: 1px solid #280d0e;
                    border-radius: 0.3rem;
                    padding: 0.5rem;
                    font-size: 1rem;
                    margin-bottom: 0.5rem;
                    outline: none;
                    transition: border-color 0.2s ease-in-out;
                }

                .form-input:focus {
                    border-color: #692225;
                }

                .form-button {
                    display: block;
                    margin: 0 auto;
                    background-color: #280d0e;
                    color: #d9d9d9;
                    border: none;
                    border-radius: 0.3rem;
                    padding: 0.5rem 1.5rem;
                    font-size: 1rem;
                    cursor: pointer;
                    transition: background-color 0.2s ease-in-out;
                }

                .form-button:hover {
                    background-color: #692225;
                }

                .code-block {
                    background-color: #161616;
                    color: #d9d9d9;
                    border-radius: 1rem;
                    font-family: monospace;
                    margin: 1rem;
                    width: calc(100% - 3rem);
                    max-width: 100%;
                    text-wrap: break-word;
                    overflow-wrap: break-word;
                    padding: 0.5rem;
                    text-align: left;
                    border: 1px solid #280d0e;
                }

                .input-hidden {
                    visibility: hidden;
                    position: absolute;
                }

                .text-warning {
                    color:#c03940;
                }

                .require-js {
                    display: none;
                }
            </style>
        </noscript>

        <p class="text-description require-js">
            Verifying that you are not a bot. This might take a short moment.

            <br />
            <br />

            You do not need to do anything.
        </p>

        <p class="text-question require-js">
            Why am I seeing this?
        </p>

        <hr class="text-hr-small require-js" />

        <p class="text-description require-js">
            This website protects itself from AI bots and scrapers
            by asking you to complete a cryptographic challenge before allowing you entry.
        </p>

        <div class="bottom-bar require-js">
            <div class="bottom-progress">
                <div class="bottom-progress-light" name="progress-light"></div>
            </div>

            <p class="bottom-hash-text" id="results">
                Difficulty {{ tl:text challengeDifficulty }}, elapsed 0ms, 0h, 0h/s
            </p>

            <a class="bottom-credit-text" href="https://github.com/vaxerski/checkpoint">
                <i>Powered by checkpoint v{{ tl:text checkpointVersion }}</i>
            </a>
        </div>
    </div>

    <script type="text/javascript">
        setTimeout(
            async function () {
                var it = 0;
                var start = Date.now();
                const challengeNonce = "{{ tl:text challengeNonce }}";
                const challengeTimestamp = "{{ tl:text challengeTimestamp }}";
                const difficulty = parseInt("{{ tl:text challengeDifficulty }}");
                const challengeSig = "{{ tl:text challengeSignature }}";
                const challengeFingerprint = "{{ tl:text challengeFingerprint }}";

                function itShort(it) {
                    if (it > 1000000)
                        return parseInt(it / 100000) / 10 + "M";

                    return parseInt(it / 100) / 10 + "k";
                }

                function timeShort(ms) {
                    if (ms > 1000)
                        return parseInt(ms / 100) / 10 + "s";
                    return ms + "ms";
                }

                function getCompletionPercent(it) {
                    const exp = Math.pow(2, 4 * difficulty);
                    return Math.floor((1 - 1 / (Math.pow(it / exp * 3, 2) + 1)) * 100);
                }

                function success(it) {
                    document.getElementById("results").innerHTML = "Success! Completed challenge after " + itShort(it) + " iterations, in " + timeShort(Math.floor(Date.now() - start)) + ".";
                    document.getElementsByName("progress-light")[0].style.width = "100%";

                    const data = JSON.stringify({
                        challenge: challengeNonce,
                        solution: it,
                        difficulty: difficulty,
                        sig: challengeSig,
                        fingerprint: challengeFingerprint,
                        timestamp: challengeTimestamp
                    });

                    fetch("/checkpoint/challenge",
                        {
                            headers: {
                                "Content-Type": "application/json"
                            },
                            method: "POST",
                            body: data
                        }
                    ).then((res) => {
                        if (res.status == 200) {
                            console.log("Got token.");
                            window.location.reload();
                        } else
                            console.log("Server error");
                    });
                }

                const workBuffer = new Uint8Array(challengeNonce.length + 10);
                for (let i = 0; i < challengeNonce.length; i++)
                    workBuffer[i] = challengeNonce.charCodeAt(i);

                while (true) {
                    const digits = it === 0 ? 1 : (~~Math.floor(Math.log10(it)) + 1);
                    for (let i = digits - 1; i >= 0; i--)
                        workBuffer[challengeNonce.length + (digits - 1 - i)] = 48 + ~~Math.floor((it / Math.pow(10, i)) % 10);

                    const hashedData = new Uint8Array(await window.crypto.subtle.digest('sha-256', workBuffer.slice(0, challengeNonce.length + digits)));
                    let zeroPos = 0;
                    for (; zeroPos < difficulty; zeroPos++) {
                        if ((zeroPos % 2 == 0 ? (hashedData[~~(zeroPos / 2)] >> 4) : (hashedData[~~(zeroPos / 2)] & 0x0F)) != 0)
                            break;
                    }

                    if (zeroPos >= difficulty) {
                        success(it);
                        console.log("Success: it " + it + ": " + Array.from(hashedData).map((item) => item.toString(16).padStart(2, "0")).join(""));
                        break;
                    }

                    it++;

                    if (it % 11377 == 0) {
                        let ms = Math.floor(Date.now() - start);
                        let hpers = it / (ms / 1000);
                        document.getElementById("results").innerHTML = "Difficulty: " + difficulty + ", elapsed " + timeShort(ms) + ", " + itShort(it) + "h, " + itShort(hpers) + "h/s";
                        document.getElementsByName("progress-light")[0].style.width = getCompletionPercent(it) + "%";
                    }
                }
            }, 100);


        var currentTitle = 1;

        setInterval(
            () => {
                const titles = ["STOP", "HALT", "ST&#0211;J", "ARR&#0202;T", "&#1057;&#1058;&#1030;&#1049;"];

                document.getElementById("subtext").innerHTML = titles[currentTitle] + "!";

                currentTitle++;
                if (currentTitle >= titles.length)
                    currentTitle = 0;
            }, 2000
        )
    </script>

</body>

</html>