From 119da9c9736c890c60ad1ab553593dc18a366d58 Mon Sep 17 00:00:00 2001
From: nyx <nnyyxxxx@protonmail.com>
Date: Wed, 23 Apr 2025 18:05:16 -0400
Subject: [PATCH] html: minor fixes to styling (#28)

* e

* minify

---------

Co-authored-by: Vaxry <vaxry@vaxry.net>
---
 html/index.html     | 50 ++++++++++++++++++++++++++++++++++-----------
 html/index.min.html |  2 +-
 2 files changed, 39 insertions(+), 13 deletions(-)
diff --git a/html/index.html b/html/index.html
index d4fd2be..f5faead 100644
--- a/html/index.html
+++ b/html/index.html
@@ -212,7 +212,7 @@
 
         <noscript>
             <p class="text-description">
-                This website uses <a class="link" href="https://github.com/vaxerski/checkpoint">checkpoint</a> and
+                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 />
@@ -227,7 +227,7 @@
 
             <form action="/checkpoint/challengeNoJs" method="get">
                 <div>
-                    <label class="form-label" for="name">Enter the output: </label>
+                    <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"
@@ -249,21 +249,47 @@
 
             <style>
                 .form-label {
-                    color: #fff;
+                    color: #d9d9d9;
                     display: block;
                     text-align: center;
-                }
-
-                .form-button {
-                    margin-left: 9.5rem;
-                    width: calc(100%-19rem);
-                    display: block;
-                    position: relative;
+                    margin-bottom: 0.5rem;
+                    font-size: 1rem;
                 }
 
                 .form-input {
-                    margin-left: 9.5rem;
-                    width: calc(100%-19rem);
+                    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 {
diff --git a/html/index.min.html b/html/index.min.html
index fba7ad3..5e84cdd 100644
--- a/html/index.min.html
+++ b/html/index.min.html
@@ -1,2 +1,2 @@
-<!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:#111;border-radius:.5rem;border:1px solid #280d0e}.big-icon{margin:0;padding:0;font-size:8rem;color:#fff;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:#444;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:#444;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:.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:.5rem;color:#4b4b4b;width:98%;text-align:right;transition:ease-in-out .1s;margin-top:.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:#222;width:80%;margin-left:10%;margin-bottom:.8rem}.bottom-progress-light{position:absolute;left:0;top:0;width:0%;height:3px;background-color:#692225;transition:ease-in-out .1s}.link,.link:active,.link:focus,.link:link,.link:visited{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<a class="link" href="https://github.com/vaxerski/checkpoint">checkpoint</a>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:#fff;display:block;text-align:center}.form-button{margin-left:9.5rem;width:calc(100%-19rem);display:block;position:relative}.form-input{margin-left:9.5rem;width:calc(100%-19rem)}.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:.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>
+<!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:#111;border-radius:.5rem;border:1px solid #280d0e}.big-icon{margin:0;padding:0;font-size:8rem;color:#fff;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:#444;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:#444;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:.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:.5rem;color:#4b4b4b;width:98%;text-align:right;transition:ease-in-out .1s;margin-top:.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:#222;width:80%;margin-left:10%;margin-bottom:.8rem}.bottom-progress-light{position:absolute;left:0;top:0;width:0%;height:3px;background-color:#692225;transition:ease-in-out .1s}.link,.link:active,.link:focus,.link:link,.link:visited{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:.5rem;font-size:1rem}.form-input{display:block;margin:0 auto;width:15rem;background-color:#161616;color:#d9d9d9;border:1px solid #280d0e;border-radius:.3rem;padding:.5rem;font-size:1rem;margin-bottom:.5rem;outline:0;transition:border-color .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:.3rem;padding:.5rem 1.5rem;font-size:1rem;cursor:pointer;transition:background-color .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:.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 e=0,t=Date.now();let l="{{ tl:text challengeNonce }}",n=parseInt("{{ tl:text challengeDifficulty }}");function $(e){return e>1e6?parseInt(e/1e5)/10+"M":parseInt(e/100)/10+"k"}function r(e){return e>1e3?parseInt(e/100)/10+"s":e+"ms"}function o(e){return Math.floor((1-1/(Math.pow(e/Math.pow(2,4*n)*3,2)+1))*100)}function i(e){document.getElementById("results").innerHTML="Success! Completed challenge after "+$(e)+" iterations, in "+r(Math.floor(Date.now()-t))+".",document.getElementsByName("progress-light")[0].style.width="100%";let o=JSON.stringify({challenge:l,solution:e,difficulty:n,sig:"{{ tl:text challengeSignature }}",fingerprint:"{{ tl:text challengeFingerprint }}",timestamp:"{{ tl:text challengeTimestamp }}"});fetch("/checkpoint/challenge",{headers:{"Content-Type":"application/json"},method:"POST",body:o}).then(e=>{200==e.status?(console.log("Got token."),window.location.reload()):console.log("Server error")})}let s=new Uint8Array(l.length+10);for(let a=0;a<l.length;a++)s[a]=l.charCodeAt(a);for(;;){let c=0===e?1:~~Math.floor(Math.log10(e))+1;for(let g=c-1;g>=0;g--)s[l.length+(c-1-g)]=48+~~Math.floor(e/Math.pow(10,g)%10);let _=new Uint8Array(await window.crypto.subtle.digest("sha-256",s.slice(0,l.length+c))),f=0;for(;f<n&&(f%2==0?_[~~(f/2)]>>4:15&_[~~(f/2)])==0;f++);if(f>=n){i(e),console.log("Success: it "+e+": "+Array.from(_).map(e=>e.toString(16).padStart(2,"0")).join(""));break}if(++e%11377==0){let h=Math.floor(Date.now()-t),u=e/(h/1e3);document.getElementById("results").innerHTML="Difficulty: "+n+", elapsed "+r(h)+", "+$(e)+"h, "+$(u)+"h/s",document.getElementsByName("progress-light")[0].style.width=o(e)+"%"}}},100);var currentTitle=1;setInterval(()=>{let e=["STOP","HALT","ST&#0211;J","ARR&#0202;T","&#1057;&#1058;&#1030;&#1049;"];document.getElementById("subtext").innerHTML=e[currentTitle]+"!",++currentTitle>=e.length&&(currentTitle=0)},2e3);</script></body></html>
\ No newline at end of file
