Files
checkpoint/html/index.html
nyx 119da9c973 html: minor fixes to styling (#28)
* e

* minify

---------

Co-authored-by: Vaxry <vaxry@vaxry.net>
2025-04-24 00:05:16 +02:00

470 lines
15 KiB
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>