Servicios de Wobe

AreLuARobot?

AreLuARobot es un sistema simple para que tus usuarios certifiquen si son humanos y desbloquear cierto contenido al conseguirlo. Está diseñado para sitios web simples y no para proyectos tan complejos. AreLuARobot? es gratis para todos y siempre tendrá una versión gratuita. Es de código abierto, en esta página solo te enseñaremos a usarlo e implementarlo en tu sitio web. Puedes modificar el código a tu gusto y compartirlo con quien quieras, no tenemos problema con eso.

Demostración - Al completar el captcha, seras redirigido a www.wikipedia.org. Esto se puede modificar dentro del codigo.

Guía de uso para configurar que acción se hace al completar el captcha.

Guía de uso - AreLuARobot?

Este sistema de verificación permite personalizar el comportamiento final tras completar los desafíos.

1. Cómo cambiar la URL del botón

En la sección <script> de configuración (al principio del archivo), busca la variable URL_BOTON_SIGUIENTE. Cambia el enlace entre comillas por el que desees:

const URL_BOTON_SIGUIENTE = "[https://tu-sitio-web.com](https://tu-sitio-web.com)";

2. Personalización de Textos y Modos

Dentro del bloque config-area encontrarás las siguientes variables:

MODO_FINAL: Controla qué sucede al presionar "Siguiente":
- 1: Redirección automática inmediata.
- 2: Muestra un botón que lleva a URL_DESTINO.
- 3: Muestra un texto secreto (definido en TEXTO_SECRETO).
- 4: Carga un sitio dentro de un marco (IFRAME_URL).
- 5: Inyecta código HTML personalizado (CODIGO_HTML_INYECTAR).
TEXTO_SECRETO: El mensaje que aparecerá si usas el Modo 3 (ej: un código de descuento o una contraseña).

3. Sistema de Bloqueo

El sistema permite 3 intentos antes de bloquearse temporalmente.
Cada 3 fallos (acumulativos), el tiempo de espera aumenta 30 segundos.
Al llegar a 9 fallos totales, el icono cambia a una X roja y el sistema se bloquea permanentemente por seguridad.

Codigo

HTML

<!DOCTYPE html>

<head>

<title>AreLuARobot?</title>

<style>

body { background-color: #0a0a0a; color: #e5e5e5; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

.captcha-card { background: #171717; border: 1px solid #262626; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

.btn-primary { background: #3b82f6; transition: all 0.3s; }

.btn-primary:hover { background: #2563eb; transform: translateY(-1px); }

.grid-item { transition: all 0.2s; cursor: pointer; border-width: 3px; }

/* Contorno para que se vea la selección en cuadros azules */

.grid-item[data-selected="true"] { border-color: #ffffff !important; box-shadow: 0 0 10px rgba(59, 130, 246, 0.8); }

.recaptcha-box {

background: #222;

border: 1px solid #333;

border-radius: 3px;

display: flex;

align-items: center;

padding: 15px 20px;

width: fit-content;

margin: 0 auto;

}

.checkbox-custom {

width: 28px;

height: 28px;

border: 2px solid #555;

border-radius: 4px;

margin-right: 15px;

cursor: pointer;

position: relative;

display: flex;

align-items: center;

justify-content: center;

transition: all 0.3s;

}

.checkbox-custom.checked { border-color: #22c55e; background-color: transparent; }

.checkbox-custom.checked::after {

content: '✔';

color: #22c55e;

font-size: 20px;

font-weight: bold;

}

.checkbox-custom.locked { background-color: #3b82f6; border-color: #3b82f6; }

.checkbox-custom.perm-locked { background-color: #ef4444; border-color: #ef4444; }

.timer-bar { height: 4px; background: #3b82f6; width: 100%; transition: width 1s linear; }

.sequence-dot { width: 40px; height: 40px; border-radius: 50%; opacity: 0.3; transition: opacity 0.2s; }

.sequence-dot.active { opacity: 1; transform: scale(1.1); }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.animate-spin-slow { animation: spin 3s linear infinite; }

</style>

</head>

// --- CONFIGURACIÓN ---

const MODO_FINAL = 2; // 1: Redir, 2: Botón, 3: Texto, 4: Iframe, 5: HTML

const URL_DESTINO = "https://www.wikipedia.org";

const URL_BOTON_SIGUIENTE = "https://www.google.com"; // URL tras ganar

const TEXTO_SECRETO = "Acceso concedido. El código es 1010.";

const IFRAME_URL = "https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik";

const CODIGO_HTML_INYECTAR = `<div class='p-4 bg-blue-900/20 border border-blue-500 rounded-lg text-center'><h3 class='text-blue-400 font-bold'>Panel de Control</h3><p class='text-sm'>Bienvenido.</p></div>`;

</script>

</div>

<span id="label-text" class="text-lg font-medium text-gray-300">No soy un robot</span>

</div>

<p id="attempts-left" class="text-center text-[10px] text-gray-600 mt-2 uppercase tracking-widest">3 intentos restantes</p>

</div>

<div id="mode-2-ui" class="hidden"><a id="action-btn" href="#" class="btn-primary text-white font-bold py-3 px-6 rounded-xl block">Ir al destino</a></div>

</div>

let mathAnswer = 0;

let sequence = [];

let userSequence = [];

let timerInterval = null;

let firstTime = true;

let attempts = 3;

let totalFails = 0;

let baseLockTime = 30;

let isLocked = false;

const clockIcon = `<svg class="w-5 h-5 text-white animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>`;

const xIcon = `<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>`;

function startChallenges() {

if (isLocked) return;

document.getElementById('main-check').classList.add('checked');

setTimeout(() => {

document.getElementById('step-checkbox').classList.add('hidden');

document.getElementById('captcha-container').classList.remove('hidden');

initChallenge();

}, 600);

}

function clearCaptchaTimer() { if (timerInterval) clearInterval(timerInterval); }

function initChallenge() {

clearCaptchaTimer();

const container = document.getElementById('captcha-container');

let type = firstTime ? 1 : Math.floor(Math.random() * 3);

firstTime = false;

if (type === 1) { // Cuadrícula

const colors = [{name:'ROJOS',hex:'#ef4444'},{name:'VERDES',hex:'#22c55e'},{name:'AZULES',hex:'#3b82f6'},{name:'AMARILLOS',hex:'#eab308'}];

const targetObj = colors[Math.floor(Math.random() * colors.length)];

container.innerHTML = `<div class="space-y-4"><div class="w-full bg-zinc-800 rounded-full overflow-hidden"><div id="grid-timer" class="timer-bar"></div></div><p class="text-center text-sm">Selecciona los <span class="font-bold underline" style="color:${targetObj.hex}">${targetObj.name}</span></p><div class="grid grid-cols-5 gap-1.5" id="grid-box"></div><button onclick="checkGrid()" class="w-full btn-primary py-3 rounded-xl font-bold">Validar (20s)</button></div>`;

const grid = document.getElementById('grid-box');

for (let i = 0; i < 25; i++) {

const rand = colors[Math.floor(Math.random()*colors.length)];

const div = document.createElement('div');

div.className = `h-12 rounded border-transparent grid-item`;

div.style.backgroundColor = rand.hex;

div.dataset.correct = (rand.name === targetObj.name);

div.dataset.selected = "false";

div.onclick = function() {

this.dataset.selected = this.dataset.selected === "false" ? "true" : "false";

};

grid.appendChild(div);

}

startGeneralTimer(20, 'grid-timer');

} else if (type === 0) { // Mates

const ops = ['+', '-', '*'];

const op = ops[Math.floor(Math.random() * ops.length)];

let n1 = Math.floor(Math.random() * 20) + 5, n2 = Math.floor(Math.random() * 10) + 1;

mathAnswer = eval(`${n1} ${op} ${n2}`);

container.innerHTML = `<div class="text-center space-y-4"><div class="w-full bg-zinc-800 rounded-full overflow-hidden"><div id="math-timer" class="timer-bar"></div></div><p class="text-lg">${n1} ${op} ${n2} = ?</p><input type="number" id="mathInput" class="w-full bg-zinc-800 border border-zinc-700 p-3 rounded-lg text-center outline-none"><button onclick="checkMath()" class="w-full btn-primary py-3 rounded-xl font-bold">Verificar</button></div>`;

startGeneralTimer(15, 'math-timer');

} else { // Memoria

container.innerHTML = `<div class="text-center space-y-4"><p class="text-sm text-gray-400" id="mem-status">Observa...</p><div class="flex justify-center gap-4 py-4"><div id="dot-0" class="sequence-dot bg-red-500"></div><div id="dot-1" class="sequence-dot bg-blue-500"></div><div id="dot-2" class="sequence-dot bg-yellow-500"></div></div><div id="mem-controls" class="hidden grid grid-cols-3 gap-2"><button onclick="recordMem(0)" class="bg-red-900/30 border border-red-500 py-2 rounded text-xs font-bold">ROJO</button><button onclick="recordMem(1)" class="bg-blue-900/30 border border-blue-500 py-2 rounded text-xs font-bold">AZUL</button><button onclick="recordMem(2)" class="bg-yellow-900/30 border border-yellow-500 py-2 rounded text-xs font-bold">AMARILLO</button></div></div>`;

startSequence();

}

function startGeneralTimer(seconds, elementId) {

let remaining = seconds;

const bar = document.getElementById(elementId);

timerInterval = setInterval(() => {

remaining--;

if (bar) bar.style.width = ((remaining / seconds) * 100) + "%";

if (remaining <= 0) retry();

}, 1000);

}

async function startSequence() {

sequence = [Math.floor(Math.random()*3), Math.floor(Math.random()*3), Math.floor(Math.random()*3)];

userSequence = [];

for (let val of sequence) {

await new Promise(r => setTimeout(r, 600));

const dot = document.getElementById(`dot-${val}`);

if(dot) dot.classList.add('active');

await new Promise(r => setTimeout(r, 400));

if(dot) dot.classList.remove('active');

}

if(document.getElementById('mem-status')) document.getElementById('mem-status').innerText = "¡Repite!";

if(document.getElementById('mem-controls')) document.getElementById('mem-controls').classList.remove('hidden');

}

function recordMem(val) {

userSequence.push(val);

if (userSequence[userSequence.length-1] !== sequence[userSequence.length-1]) return retry();

if (userSequence.length === sequence.length) handleWin();

}

function checkMath() { if (parseInt(document.getElementById('mathInput').value) === mathAnswer) handleWin(); else retry(); }

function checkGrid() {

let ok = true;

document.querySelectorAll('.grid-item').forEach(it => { if ((it.dataset.selected === "true") !== (it.dataset.correct === "true")) ok = false; });

if (ok) handleWin(); else retry();

}

function retry() {

clearCaptchaTimer();

attempts--;

totalFails++;

if (totalFails >= 9) permanentLock();

else if (attempts <= 0) lockSystem();

else {

document.getElementById('attempts-left').innerText = `${attempts} intentos restantes`;

initChallenge();

}

function lockSystem() {

isLocked = true;

document.getElementById('captcha-container').classList.add('hidden');

document.getElementById('step-checkbox').classList.remove('hidden');

const check = document.getElementById('main-check');

check.classList.remove('checked');

check.classList.add('locked');

check.innerHTML = clockIcon;

let currentWait = baseLockTime;

const lockInterval = setInterval(() => {

document.getElementById('label-text').innerText = `Espera ${currentWait}s`;

document.getElementById('attempts-left').innerText = "Sistema bloqueado";

currentWait--;

if (currentWait < 0) {

clearInterval(lockInterval);

unlockSystem();

}

}, 1000);

baseLockTime += 30;

}

function permanentLock() {

isLocked = true;

document.getElementById('captcha-container').classList.add('hidden');

document.getElementById('step-checkbox').classList.remove('hidden');

const check = document.getElementById('main-check');

check.classList.remove('checked', 'locked');

check.classList.add('perm-locked');

check.innerHTML = xIcon;

document.getElementById('label-text').innerText = "BLOQUEADO";

document.getElementById('attempts-left').innerText = "9/9 Fallos cometidos";

}

function unlockSystem() {

isLocked = false;

attempts = 3;

const check = document.getElementById('main-check');

check.classList.remove('locked');

check.innerHTML = "";

document.getElementById('label-text').innerText = "No soy un robot";

document.getElementById('attempts-left').innerText = "3 intentos restantes";

}

function handleWin() {

clearCaptchaTimer();

document.getElementById('captcha-container').classList.add('hidden');

document.getElementById('step-checkbox').classList.remove('hidden');

const check = document.getElementById('main-check');

check.classList.add('checked');

check.innerHTML = "";

document.getElementById('label-text').innerText = "Verificado";

document.getElementById('attempts-left').classList.add('hidden');

document.getElementById('btn-next').classList.remove('hidden');

}

function showFinalContent() {

if (URL_BOTON_SIGUIENTE && URL_BOTON_SIGUIENTE !== "#") {

window.location.href = URL_BOTON_SIGUIENTE;

return;

}

document.getElementById('step-checkbox').classList.add('hidden');

document.getElementById('final-result').classList.remove('hidden');

if (MODO_FINAL === 1) window.location.href = URL_DESTINO;

else if (MODO_FINAL === 2) { document.getElementById('mode-2-ui').classList.remove('hidden'); document.getElementById('action-btn').href = URL_DESTINO; }

else if (MODO_FINAL === 3) { document.getElementById('mode-3-ui').classList.remove('hidden'); document.getElementById('secret-display').innerText = TEXTO_SECRETO; }

else if (MODO_FINAL === 4) { document.getElementById('mode-4-ui').classList.remove('hidden'); document.getElementById('res-iframe').src = IFRAME_URL; }

else if (MODO_FINAL === 5) { document.getElementById('mode-5-ui').classList.remove('hidden'); document.getElementById('mode-5-ui').innerHTML = CODIGO_HTML_INYECTAR; }

}

</script>

</body>

</html>

Este texto incluye una marca de agua. Lo menos que puedes hacer por darte esto gratis es no borrarla del código final. Si quieres puedes borrar la URL y el texto en paréntesis del final: