Skip to content

Commit

Permalink
Create IdiotCaptcha
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ubuv6vvyv
Ubuv6vvyv authored Feb 12, 2025
1 parent d2495dc commit 0a5d3ed
Showing 1 changed file with 363 additions and 0 deletions.
363 changes: 363 additions & 0 deletions IdiotCaptcha
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,363 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Motion CAPTCHA Verification</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
touch-action: none;
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #f0f0f0, #e0e0e0, #f0f0f0);
background-size: 600% 600%;
animation: gradientAnimation 20s ease infinite;
}

@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

#game-container {
position: fixed;
width: 100vw;
height: 100vh;
overflow: hidden;
}

#captcha-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
width: 280px;
}

#captcha-text {
font-family: 'Courier New', monospace;
font-size: 32px;
letter-spacing: 3px;
color: #333;
position: relative;
height: 50px;
background: #f8f8f8;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
overflow: hidden;
}

#missing-piece {
position: absolute;
width: 30px;
height: 40px;
background: #4a90e2;
border-radius: 4px;
transform: translate(-50%, -50%);
z-index: 2;
transition: width 0.3s, height 0.3s;
}

.piece-slot {
position: absolute;
width: 30px;
height: 40px;
background: rgba(74, 144, 226, 0.2);
border: 2px dashed #4a90e2;
border-radius: 4px;
box-sizing: border-box;
}

.trail {
position: absolute;
border-radius: 4px;
pointer-events: none;
opacity: 0.2;
background: radial-gradient(circle at center, rgba(74,144,226,0.8), rgba(74,144,226,0.5) 50%, transparent 70%);
z-index: 1;
}

#timer {
position: fixed;
bottom: 20px;
right: 20px;
color: #333;
font-size: 12px;
background: rgba(255,255,255,0.9);
padding: 10px;
border-radius: 5px;
}

#instructions {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #333;
text-align: center;
background: rgba(255,255,255,0.95);
padding: 20px;
border-radius: 10px;
z-index: 100;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.hidden {
display: none !important;
}

#difficulty-indicator {
position: fixed;
top: 20px;
left: 20px;
background: rgba(255,255,255,0.9);
padding: 10px;
border-radius: 5px;
font-size: 14px;
color: #333;
opacity: 0;
transition: opacity 0.3s;
}
</style>
</head>
<body>
<div id="game-container">
<div id="captcha-container">
<div id="captcha-text">
<div class="piece-slot"></div>
RX7K9M
</div>
</div>
<div id="missing-piece"></div>
</div>
<div id="timer">Verifying...</div>
<div id="difficulty-indicator"></div>
<div id="instructions">
Complete Motion Verification<br>
Guide missing piece to complete the CAPTCHA<br>
<small>Tap to begin</small>
</div>

<script>
class MotionCaptcha {
constructor() {
this.piece = document.getElementById('missing-piece');
this.slot = document.querySelector('.piece-slot');
this.instructions = document.getElementById('instructions');
this.timer = document.getElementById('timer');
this.difficultyIndicator = document.getElementById('difficulty-indicator');
this.container = document.getElementById('game-container');

this.position = { x: window.innerWidth / 2, y: window.innerHeight - 100 };
this.velocity = { x: 0, y: 0 };
this.acceleration = { x: 0, y: 0 };

this.defaultValues = {
friction: 0.985,
bounce: 0.8,
sensitivity: 0.6
};

this.friction = this.defaultValues.friction;
this.bounce = this.defaultValues.bounce;
this.sensitivity = this.defaultValues.sensitivity;

this.startTime = null;
this.currentDifficulty = null;

this.handleMotion = this.handleMotion.bind(this);
this.update = this.update.bind(this);
this.init = this.init.bind(this);

document.addEventListener('click', this.init, { once: true });
this.positionSlot();
}

createTrail() {
const trail = document.createElement('div');
trail.className = 'trail';
trail.style.width = '30px';
trail.style.height = '40px';
trail.style.left = `${this.position.x}px`;
trail.style.top = `${this.position.y}px`;
this.container.appendChild(trail);

setTimeout(() => {
trail.style.opacity = '0';
setTimeout(() => trail.remove(), 300);
}, 1000);
}

setDifficulty(difficulty) {
if (this.currentDifficulty === difficulty) return;
this.currentDifficulty = difficulty;

this.friction = this.defaultValues.friction;
this.bounce = this.defaultValues.bounce;
this.sensitivity = this.defaultValues.sensitivity;

this.difficultyIndicator.style.opacity = '1';

switch(difficulty) {
case 'wind':
this.friction = 0.995;
this.difficultyIndicator.textContent = 'Warning: Strong Winds';
this.applyWindForce();
break;
case 'magnetic':
this.bounce = 1.2;
this.difficultyIndicator.textContent = 'Warning: Magnetic Field';
break;
case 'precision':
this.sensitivity = 0.3;
this.difficultyIndicator.textContent = 'Warning: Precision Required';
break;
default:
this.difficultyIndicator.style.opacity = '0';
break;
}

setTimeout(() => {
this.difficultyIndicator.style.opacity = '0';
}, 2000);
}

applyWindForce() {
const windForce = Math.sin(Date.now() / 1000) * 0.2;
this.velocity.x += windForce;
}

update(timestamp) {
const deltaTime = (timestamp - this.lastUpdate) / 16;
this.lastUpdate = timestamp;

const elapsedTime = (Date.now() - this.startTime) / 1000;
this.timer.textContent = `Verification time: ${elapsedTime.toFixed(1)}s`;

if (Math.abs(this.velocity.x) > 1 || Math.abs(this.velocity.y) > 1) {
this.createTrail();
}

if (elapsedTime > 5 && elapsedTime < 10) {
this.setDifficulty('wind');
} else if (elapsedTime > 15 && elapsedTime < 20) {
this.setDifficulty('magnetic');
} else if (elapsedTime > 25 && elapsedTime < 30) {
this.setDifficulty('precision');
} else {
this.setDifficulty(null);
}

this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.y += this.acceleration.y * deltaTime;
this.velocity.x *= this.friction;
this.velocity.y *= this.friction;

this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;

// Edge collisions
if (this.position.x < 15) {
this.position.x = 15;
this.velocity.x = -this.velocity.x * this.bounce;
} else if (this.position.x > window.innerWidth - 15) {
this.position.x = window.innerWidth - 15;
this.velocity.x = -this.velocity.x * this.bounce;
}

if (this.position.y < 20) {
this.position.y = 20;
this.velocity.y = -this.velocity.y * this.bounce;
} else if (this.position.y > window.innerHeight - 20) {
this.position.y = window.innerHeight - 20;
this.velocity.y = -this.velocity.y * this.bounce;
}

// Check for slot collision
const slotRect = this.slot.getBoundingClientRect();
const dx = this.position.x - (slotRect.left + slotRect.width/2);
const dy = this.position.y - (slotRect.top + slotRect.height/2);
const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < 20 && Math.abs(this.velocity.x) < 3 && Math.abs(this.velocity.y) < 3) {
alert('Verification successful!');
window.location.reload();
return;
}

this.piece.style.transform = `translate(${this.position.x}px, ${this.position.y}px)`;

requestAnimationFrame(this.update);
}

positionSlot() {
const captchaText = document.getElementById('captcha-text');
const textRect = captchaText.getBoundingClientRect();
const randomPosition = Math.floor(Math.random() * 6);
this.slot.style.left = `${randomPosition * 25}px`;
}

async init() {
try {
if (typeof DeviceMotionEvent.requestPermission === 'function') {
const permission = await DeviceMotionEvent.requestPermission();
if (permission === 'granted') {
this.startVerification();
}
} else {
this.startVerification();
}
} catch (error) {
alert('Motion sensors required for verification');
}
}

startVerification() {
this.instructions.classList.add('hidden');
this.startTime = Date.now();
window.addEventListener('devicemotion', this.handleMotion);
this.lastUpdate = performance.now();
requestAnimationFrame(this.update);
}

handleMotion(event) {
const landscape = window.innerWidth > window.innerHeight;

if (landscape) {
this.acceleration.x = event.accelerationIncludingGravity.x * this.sensitivity;
this.acceleration.y = event.accelerationIncludingGravity.z * this.sensitivity;
} else {
this.acceleration.x = event.accelerationIncludingGravity.x * this.sensitivity;
this.acceleration.y = event.accelerationIncludingGravity.y * this.sensitivity;
}

if (this.currentDifficulty === 'magnetic') {
const slotRect = this.slot.getBoundingClientRect();
const dx = this.position.x - (slotRect.left + slotRect.width/2);
const dy = this.position.y - (slotRect.top + slotRect.height/2);
const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < 150) {
const force = 0.3 * (1 - distance / 150);
this.acceleration.x -= (dx / distance) * force;
this.acceleration.y -= (dy / distance) * force;
}
}
}
}

const captcha = new MotionCaptcha();
</script>
</body>
</html>

0 comments on commit 0a5d3ed

Please sign in to comment.