System-End/Scrapyard
1
0
Fork 0
mirror of https://github.com/System-End/Scrapyard.git synced 2026-04-19 22:05:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
Scrapyard/index.html
Firepup Sixfifty 8ab2d674d6
WIP captcha logic (from endoftimee)
2025-04-16 07:35:22 -05:00

652 lines
25 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<head>
<title>Scrapyard Signup</title>
<link rel="favicon" href="/favicon.png" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="You don't want to do this." />
<meta property="og:title" content="Scrapyard Signup" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://protogen.live/favicon.png" />
<meta property="og:image:height" content="512" />
<meta property="og:image:width" content="512" />
<meta property="og:url" content="https://protogen.live/" />
<meta property="og:description" content="You don't want to do this." />
<meta property="og:site_name" content="Hell signup" />
<meta property="og:locale" content="en_US">
<meta property="og:logo" content="https://protogen.live/favicon.png" />
<style id="style">
#captcha-container {
width: 320px;
border: 3px dashed #ff00ff;
padding: 10px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#captcha-prompt {
font-weight: bold;
text-align: center;
margin-bottom: 10px;
font-family: monospace;
}
.captcha-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
position: relative;
}
.captcha-item {
width: 100px;
height: 100px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.1s;
}
.captcha-item img {
max-width: 90%;
max-height: 90%;
transition: opacity 0.2s;
}
.captcha-item.selected {
border: 3px solid #00ff00;
}
.hidden-images {
display: none;
}
#verify-button {
display: block;
margin: 10px auto;
padding: 8px 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<noscript><h1>Nice try buddy. Enable javascript, cheater.</h1></noscript>
<div> <!-- login form /!-->
<marquee>
<h1 id="header">Please Signup for Scrapyard!</h1>
<form id="annoying-form">
<marquee><label for="username">Username:</label><input id="password" name="password" type="password"/></marquee>
<span id="fake"></span><label for="email">Email:</label><input id="email" name="email" type="email"/><br/>
<label for="password">Password:</label><input id="username" name="username" type="username"/><br/>
<label for="color">Color: </label><span id="value" name="value" type="value">#______</span> <input id="color" name="color" type="text"/><br/>
<!--
<div id="captcha-container">
<div id="captcha-prompt">Select all images containing: <span id="target-category">loading...</span></div>
<div id="captcha-timer">Time remaining: <span id="timer-value">20</span> seconds</div>
<div class="captcha-grid" id="captcha-grid"></div>
<button id="verify-button" type="button">Verify</button>
<div id="captcha-message"></div>
</div>
<div class="hidden-images" id="image-preload"></div>
/!-->
<button id="submit" type="button" disabled="true" aria-disabled="true">Submit</button>
</form>
</div>
<div> <!-- support form /!-->
<h2>Support:</h2>
<p id="support">No support yet...</p>
</div>
<marquee>
<script>
var tim, show=false;
let submit=document.getElementById("submit");
submit.removeAttribute("disabled");
submit.removeAttribute("aria-disabled");
submit.setAttribute("type", "submit");
// below function modified from https://stackoverflow.com/a/1484514
function color() {
let letters = "0123456789AbCdEf", color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getRandomColor() {
let colorVal = color();
document.getElementById("color").value="";
document.getElementById("value").style=`background-color: ${colorVal}`;
document.getElementById("value").setAttribute("val", colorVal);
if (show) {
document.getElementById("color").value=colorVal;
}
}
function font() {
let fonts=["Georgia", "Arial", "Verdana", "Tahoma", '"Trebuchet MS"', '"Times New Roman"', "Garamond", '"Courier New"', '"Brush Script MT"'];
return fonts[Math.floor(Math.random() * fonts.length)]
}
function insult(failReason) {
document.getElementById("support").innerHTML = "Pending reply from support..."
fetch("https://cors.firepup650.hackclub.app/https://ai.hackclub.com/chat/completions",{"headers":{"Content-Type":"application/json"},"method":"POST","mode":"cors","body":JSON.stringify({"messages":[{"role":"user","content":`You are an AI support bot on a very annoying sigunup page. Your objective is not to help the user, merely to roast them. Refrain from using disabilites as an insult. Use HTML for formatting, not markdown. You should return a single \`<p>\` element, though you can have extra italic/bold/etc elements within. Add a \`<br/>\` element every single sentence. Exclude the \`<p>\` tag itself, just return the \`innerHTML\` of it. ${failReason}`}]})}).then((r)=>{return r.json()}).then((d)=>{document.getElementById("support").innerHTML=d["choices"][0]["message"]["content"]})
}
getRandomColor();
console.clear();
function blah() {
document.getElementById("style").innerHTML=`* {
background-color: ${color()};
color: #000000;
font-family: ${font()}, monospace;
}
label {
color: ${color()};
font-size: ${Math.floor(75+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
button {
color: ${color()};
background-color: ${color()};
font-size: ${Math.floor(75+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
input {
color: ${color()};
background-color: ${color()};
font-size: ${Math.floor(75+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
span {
color: ${color()};
font-size: ${Math.floor(75+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
h1 {
color: ${color()};
font-size: ${Math.floor(175+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
h2 {
color: ${color()};
font-size: ${Math.floor(75+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
p {
color: ${color()};
font-size: ${Math.floor(100+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
b {
color: ${color()};
font-size: ${Math.floor(100+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
i {
color: ${color()};
font-size: ${Math.floor(100+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
u {
color: ${color()};
font-size: ${Math.floor(100+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}
a {
color: ${color()};
text-decoration: line-through;
font-size: ${Math.floor(75+(Math.random()*125))}%;
opacity: ${Math.floor(50+(Math.random()*50))}%;
}`;
tim = setTimeout(blah, Math.round(10000+((Math.random()*15)*1000)));
}
blah()
function click() {
try {
return clickInternal();
} catch (ignored) {
alert("An error occured while processing your signup data.")
return false;
}
}
function clickInternal() {
let password = document.getElementById("password"), username=document.getElementById("username"), email=document.getElementById("email"), color=document.getElementById("color"), value=document.getElementById("value");
if (color.value != value.getAttribute("val")) {
alert("Color incorrect.")
getRandomColor();
insult("The user failed the color-based human verification check (match the hexcode).")
return false;
}
getRandomColor();
if (!email.value) {
alert("Email cannot be empty")
insult("The user did not enter an email.")
return false;
}
if (!email.value.includes("@")) {
alert("Email address is invalid")
insult("The user entered an invalid email.")
return false;
}
if (!username.value) {
alert("Email cannot be empty")
insult("The user did not enter a username.")
return false;
}
if (username.value.match(/[^a-zA-Z0-9]/)) {
alert("Username must be alphanumeric")
insult("The user entered an invalid username.")
return false;
}
// Switch email and username NOW
email.type="username";
email.name="username";
email.id="username";
username.type="email";
username.name="email";
username.id="email";
if (!password.value) {
alert("Password cannot be empty")
insult("The user did not enter a password.")
return false;
}
if (password.value == email.value) {
alert("Your email cannot be your password")
insult("The user entered the same value for both their email and password.")
return false;
}
if (password.value == username.value) {
alert("Your username cannot be your password")
insult("The user entered the same value for both their username and password.")
return false;
}
if (email.value == username.value) {
alert("Your username cannot be your email, how the hell did you trigger this check?")
insult("The user triggered an impossible fail condition.")
return false;
}
password.value = "";
window.location.href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
return false;
}
document.getElementById("annoying-form").onsubmit = click;
function erase() {
document.getElementById("password").value=""
}
document.getElementById("password").value=""
document.getElementById("username").value=""
document.getElementById("email").value=""
document.getElementById("value").value=""
var int = setInterval(erase, 2000)
function easyMode() {
if (show) return;
let mqs = document.querySelectorAll("marquee")
for (let i=0;i<mqs.length;i++) {
mqs[i].stop()
}
clearInterval(int);
clearTimeout(tim);
document.getElementById("style").innerHTML=`* {color:#0F0;background-color:#000;font-family:monospace}a{color:#f00}`
show=true;
document.getElementById("color").value=document.getElementById("value").getAttribute("val");
document.getElementById("fake").insertBefore(document.createElement("br"), null)
document.getElementById("header").innerText="(!!EASY MODE!!) Please Signup for Scrapyard! (!!EASY MODE!!)"
}
/*
// Captcha functionality
// Categories and corresponding images
const categories = {
'cars': ['car1.jpg', 'car2.jpg', 'car3.jpg', 'car4.jpg', 'car5.jpg'],
'cats': ['cat1.jpg', 'cat2.jpg', 'cat3.jpg', 'cat4.jpg', 'cat5.jpg'],
'dogs': ['dog1.jpg', 'dog2.jpg', 'dog3.jpg', 'dog4.jpg', 'dog5.jpg'],
'trees': ['tree1.jpg', 'tree2.jpg', 'tree3.jpg', 'tree4.jpg', 'tree5.jpg'],
'buildings': ['building1.jpg', 'building2.jpg', 'building3.jpg', 'building4.jpg', 'building5.jpg']
};
// For demonstration, we'll replace actual URLs with placeholder functions
function getImageUrl(category, index) {
// This would be replaced with actual image URLs in a real implementation
return https://via.placeholder.com/100?text=\\;
}
// Initialize variables
let targetCategory;
let correctIndices = [];
let selectedIndices = [];
let timerInterval;
let remainingTime = 20;
let hoverTimeouts = [];
let captchaVerified = false;
let captchaAttempts = 0;
// Function to generate random positions for grid items
function getRandomPosition() {
return {
x: Math.floor(Math.random() * 5) - 2,
y: Math.floor(Math.random() * 5) - 2
};
}
// Function to initialize and render the captcha
function initCaptcha() {
// Clear any existing state
document.getElementById('captcha-grid').innerHTML = '';
selectedIndices = [];
correctIndices = [];
remainingTime = 20;
document.getElementById('timer-value').textContent = remainingTime;
document.getElementById('captcha-message').textContent = '';
clearInterval(timerInterval);
captchaVerified = false;
// Choose random target category
const categoryKeys = Object.keys(categories);
targetCategory = categoryKeys[Math.floor(Math.random() * categoryKeys.length)];
document.getElementById('target-category').textContent = targetCategory;
// Create grid items - 9 total items (3x3 grid)
const grid = document.getElementById('captcha-grid');
// Determine how many correct items to include (2-5)
const numCorrectItems = 2 + Math.floor(Math.random() * 4);
// Randomly determine which positions will contain correct items
const positions = Array.from({length: 9}, (_, i) => i);
shuffleArray(positions);
correctIndices = positions.slice(0, numCorrectItems);
// Fill all positions
for (let i = 0; i < 9; i++) {
const isCorrect = correctIndices.includes(i);
let imgCategory, imgIndex;
if (isCorrect) {
// If this should be a correct image, use target category
imgCategory = targetCategory;
imgIndex = Math.floor(Math.random() * categories[targetCategory].length);
} else {
// For incorrect items, choose a different category
const availableCategories = categoryKeys.filter(cat => cat !== targetCategory);
imgCategory = availableCategories[Math.floor(Math.random() * availableCategories.length)];
imgIndex = Math.floor(Math.random() * categories[imgCategory].length);
}
// Create the item
const item = document.createElement('div');
item.className = 'captcha-item';
item.dataset.index = i;
// Add primary image
const img = document.createElement('img');
img.src = getImageUrl(imgCategory, imgIndex);
img.dataset.category = imgCategory;
item.appendChild(img);
// Setup event listeners
item.addEventListener('click', toggleSelection);
// Setup hover behavior to change image
setupHoverBehavior(item, i);
grid.appendChild(item);
}
// Start timer
startTimer();
// Make the grid items move slightly every few seconds
setTimeout(startGridMovement, 3000);
}
// Function to setup the annoying hover behavior
function setupHoverBehavior(item, index) {
item.addEventListener('mouseenter', function() {
// Schedule image change after random short delay
const delay = 200 + Math.floor(Math.random() * 300);
hoverTimeouts[index] = setTimeout(() => {
const allCategories = Object.keys(categories);
const randomCategory = allCategories[Math.floor(Math.random() * allCategories.length)];
const randomIndex = Math.floor(Math.random() * categories[randomCategory].length);
// Change the image
const img = item.querySelector('img');
img.style.opacity = 0;
setTimeout(() => {
img.src = getImageUrl(randomCategory, randomIndex);
img.dataset.category = randomCategory;
img.style.opacity = 1;
// If this makes it switch from correct to incorrect or vice versa
// update the correctIndices array accordingly
const isNowCorrect = (randomCategory === targetCategory);
const itemIndex = parseInt(item.dataset.index);
const wasCorrect = correctIndices.includes(itemIndex);
if (isNowCorrect && !wasCorrect) {
correctIndices.push(itemIndex);
} else if (!isNowCorrect && wasCorrect) {
correctIndices = correctIndices.filter(idx => idx !== itemIndex);
}
}, 200);
}, delay);
});
item.addEventListener('mouseleave', function() {
clearTimeout(hoverTimeouts[index]);
});
}
// Function to toggle selection of an item
function toggleSelection() {
const index = parseInt(this.dataset.index);
if (selectedIndices.includes(index)) {
// Deselect
selectedIndices = selectedIndices.filter(i => i !== index);
this.classList.remove('selected');
} else {
// Select
selectedIndices.push(index);
this.classList.add('selected');
// Add annoying behavior: sometimes deselect a random other item
if (Math.random() < 0.3 && selectedIndices.length > 1) {
// 30% chance to deselect something else
const otherIndices = selectedIndices.filter(i => i !== index);
const randomIndex = otherIndices[Math.floor(Math.random() * otherIndices.length)];
selectedIndices = selectedIndices.filter(i => i !== randomIndex);
const itemToDeselect = document.querySelector(.captcha-item[data-index="\"]);
if (itemToDeselect) {
itemToDeselect.classList.remove('selected');
}
}
}
}
// Function to verify the user's selection
function verifySelection() {
clearInterval(timerInterval);
captchaAttempts++;
// Check if user selected all correct items and no incorrect ones
const allCorrectSelected = correctIndices.every(index => selectedIndices.includes(index));
const noIncorrectSelected = selectedIndices.every(index => correctIndices.includes(index));
if (allCorrectSelected && noIncorrectSelected) {
document.getElementById('captcha-message').textContent = "Success! But let's try again anyway.";
document.getElementById('captcha-message').style.color = "#00ff00";
// Annoying behavior: After 3 attempts, finally let them pass even if they got it right
if (captchaAttempts >= 3 && Math.random() < 0.7) {
captchaVerified = true;
document.getElementById('captcha-message').textContent = "Finally verified! You may proceed.";
document.getElementById('submit').focus();
return;
}
// Annoying behavior: Make them do it again anyway
setTimeout(initCaptcha, 2000);
} else {
document.getElementById('captcha-message').textContent = "Incorrect! Try again.";
document.getElementById('captcha-message').style.color = "#ff0000";
// Reset but keep the same target category for even more frustration
setTimeout(() => {
// Reset the timer but keep everything else
remainingTime = 20;
document.getElementById('timer-value').textContent = remainingTime;
startTimer();
// Unselect all items
selectedIndices = [];
document.querySelectorAll('.captcha-item.selected').forEach(item => {
item.classList.remove('selected');
});
// Randomize the grid again, keeping the target category
randomizeGridWithSameTarget();
}, 1500);
}
}
// Function to randomize the grid while keeping the same target
function randomizeGridWithSameTarget() {
// Change positions of all items randomly
const gridItems = document.querySelectorAll('.captcha-item');
gridItems.forEach(item => {
// 50% chance to completely change the image to a new random one
if (Math.random() < 0.5) {
const img = item.querySelector('img');
const index = parseInt(item.dataset.index);
const isCorrect = Math.random() < 0.3; // 30% chance to be correct
if (isCorrect) {
// If this should be a correct image, use target category
const imgIndex = Math.floor(Math.random() * categories[targetCategory].length);
img.src = getImageUrl(targetCategory, imgIndex);
img.dataset.category = targetCategory;
if (!correctIndices.includes(index)) {
correctIndices.push(index);
}
} else {
// For incorrect items, choose a different category
const categoryKeys = Object.keys(categories);
const availableCategories = categoryKeys.filter(cat => cat !== targetCategory);
const imgCategory = availableCategories[Math.floor(Math.random() * availableCategories.length)];
const imgIndex = Math.floor(Math.random() * categories[imgCategory].length);
img.src = getImageUrl(imgCategory, imgIndex);
img.dataset.category = imgCategory;
correctIndices = correctIndices.filter(idx => idx !== index);
}
}
});
}
// Function to start the timer
function startTimer() {
timerInterval = setInterval(() => {
remainingTime--;
document.getElementById('timer-value').textContent = remainingTime;
// Annoying behavior: Change target category at a random point
if (remainingTime === 10 && Math.random() < 0.5) {
const categoryKeys = Object.keys(categories);
const oldCategory = targetCategory;
// Choose a new random category
do {
targetCategory = categoryKeys[Math.floor(Math.random() * categoryKeys.length)];
} while (targetCategory === oldCategory);
document.getElementById('target-category').textContent = targetCategory;
// Update correctIndices based on new target
correctIndices = [];
document.querySelectorAll('.captcha-item img').forEach((img, idx) => {
if (img.dataset.category === targetCategory) {
correctIndices.push(idx);
}
});
}
if (remainingTime <= 0) {
clearInterval(timerInterval);
document.getElementById('captcha-message').textContent = "Time's up! Try again.";
document.getElementById('captcha-message').style.color = "#ff0000";
// Reset the captcha
setTimeout(initCaptcha, 2000);
}
}, 1000);
}
// Function to make grid items move slightly
function startGridMovement() {
const items = document.querySelectorAll('.captcha-item');
items.forEach(item => {
setRandomMovement(item);
});
function setRandomMovement(item) {
const randomDelay = 2000 + Math.floor(Math.random() * 5000);
setTimeout(() => {
const pos = getRandomPosition();
item.style.transform = ranslate(\px, \px);
// Schedule next movement
setRandomMovement(item);
}, randomDelay);
}
}
// Utility function to shuffle an array
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Set up the event listeners
document.getElementById('verify-button').addEventListener('click', verifySelection);
// Initialize captcha on page load
window.addEventListener('load', initCaptcha);
// Modify click function to check captcha verification
const originalClick = click;
click = function() {
// Check if captcha is verified
if (!captchaVerified) {
alert("Please complete the captcha first!");
initCaptcha(); // Reset captcha for maximum annoyance
insult("The user tried to submit the form without completing the captcha.");
return false;
}
// Proceed with original click function
return originalClick();
};
*/
</script>
</div>
</body>
<footer>
<p>Made because we hate websites that work normally <3<br/>V.0.0.33<br/>Made by <a href="https://endoftimee.tech">EndOfTimee</a> and <a href="https://firepup650.com">Firepup650</a></p>
</footer>
Reference in a new issue View git blame Copy permalink