APK FET
login page to be intentionally difficult and slightly judgmental. Key "features" include:
Sentient Password Field: It will actively run away from your mouse pointer if you get too close.
Watching Eyes: The avatars at the top track your mouse movement across the screen.
The Soul Clause: You cannot log in without agreeing to a very suspicious terms-of-service checkbox.
The Judgment Engine: Even if you fill everything out correctly, the "Enter" button triggers a random insult instead of logging you in.
Pseudo-3D Hover: The entire card tilts and shifts based on your mouse position for that extra "unstable" feeling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Login from Heck</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;700&display=swap');
body {
font-family: 'Space+Grotesk', sans-serif;
background-color: #000;
overflow: hidden;
cursor: crosshair;
}
.bg-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Ffilter id='noiseFilter'%3E%3FfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3F/filter%3E%3Frect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3F/svg%3E");
opacity: 0.05;
}
.floating {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(2deg); }
}
.shake {
animation: shake 0.2s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
#password-field {
transition: all 0.1s ease-out;
}
.eye {
transition: all 0.1s ease-out;
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen">
<div class="fixed inset-0 bg-noise pointer-events-none"></div>
<!-- Background Blobs -->
<div class="fixed -top-24 -left-24 w-96 h-96 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
<div class="fixed -bottom-24 -right-24 w-96 h-96 bg-yellow-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse" style="animation-delay: 2s"></div>
<div id="login-card" class="relative z-10 bg-white p-8 rounded-3xl shadow-2xl w-full max-w-md border-8 border-black floating">
<!-- The "Eyes" that watch you -->
<div class="flex justify-center gap-4 mb-6">
<div class="w-12 h-12 bg-black rounded-full flex items-center justify-center overflow-hidden">
<div id="eye-l" class="eye w-4 h-4 bg-white rounded-full"></div>
</div>
<div class="w-12 h-12 bg-black rounded-full flex items-center justify-center overflow-hidden">
<div id="eye-r" class="eye w-4 h-4 bg-white rounded-full"></div>
</div>
</div>
<h1 class="text-4xl font-bold text-center mb-2 italic">WHO ARE YOU?</h1>
<p id="status-text" class="text-center text-sm font-medium mb-8 text-gray-500 uppercase tracking-widest">Identify yourself, mortal.</p>
<form id="chaos-form" onsubmit="return handleLogin(event)" class="space-y-6">
<div class="relative">
<label class="block text-xs font-bold uppercase mb-1">Username (Must be ironic)</label>
<input type="text" id="username" placeholder="e.g., HungryCactus" required
class="w-full border-4 border-black p-3 rounded-none focus:bg-yellow-100 outline-none transition-colors">
</div>
<div class="relative h-24">
<label class="block text-xs font-bold uppercase mb-1">Password (Good luck touching it)</label>
<input type="password" id="password-field" placeholder="••••••••"
class="absolute w-full border-4 border-black p-3 rounded-none focus:bg-pink-100 outline-none transition-colors">
</div>
<div class="flex items-center gap-2">
<input type="checkbox" id="soul-check" class="w-6 h-6 border-4 border-black rounded-none appearance-none checked:bg-black cursor-pointer">
<label for="soul-check" class="text-xs font-bold uppercase cursor-pointer">I agree to sell my soul for 15 minutes of WiFi</label>
</div>
<button type="submit" id="submit-btn"
class="w-full bg-black text-white font-bold py-4 rounded-none hover:bg-red-600 transition-colors uppercase text-xl">
Enter the Void
</button>
</form>
<div class="mt-8 flex justify-between text-[10px] font-bold uppercase underline">
<a href="#" onclick="alert('Try remembering harder?')">Forgot Identity?</a>
<a href="#" onclick="alert('We are full.')">Join the Cult</a>
</div>
</div>
<!-- Message Toast -->
<div id="toast" class="fixed bottom-10 left-1/2 -translate-x-1/2 bg-black text-white px-6 py-3 rounded-full font-bold opacity-0 transition-opacity pointer-events-none z-50">
That's a terrible username.
</div>
<script>
const card = document.getElementById('login-card');
const passField = document.getElementById('password-field');
const toast = document.getElementById('toast');
const statusText = document.getElementById('status-text');
const eyes = document.querySelectorAll('.eye');
// Eye tracking logic
document.addEventListener('mousemove', (e) => {
eyes.forEach(eye => {
const rect = eye.getBoundingClientRect();
const x = (e.clientX - rect.left) / 30;
const y = (e.clientY - rect.top) / 30;
eye.style.transform = `translate(${x}px, ${y}px)`;
});
// Password field cowardice logic
const passRect = passField.getBoundingClientRect();
const mouseX = e.clientX;
const mouseY = e.clientY;
const distance = Math.hypot(mouseX - (passRect.left + passRect.width/2), mouseY - (passRect.top + passRect.height/2));
if (distance < 100) {
const angle = Math.atan2(mouseY - (passRect.top + passRect.height/2), mouseX - (passRect.left + passRect.width/2));
const moveX = Math.cos(angle + Math.PI) * 80;
const moveY = Math.sin(angle + Math.PI) * 40;
passField.style.transform = `translate(${moveX}px, ${moveY}px)`;
} else {
passField.style.transform = `translate(0px, 0px)`;
}
});
// Insult logic
const insults = [
"Your password is too weak, much like your resolve.",
"Is that the best you can do?",
"I've seen better usernames on a toaster.",
"Error: User is too boring to log in.",
"Have you tried turning your personality off and on again?",
"Access denied because I don't like your vibe."
];
function handleLogin(e) {
e.preventDefault();
const soulChecked = document.getElementById('soul-check').checked;
card.classList.add('shake');
setTimeout(() => card.classList.remove('shake'), 200);
if (!soulChecked) {
showToast("We need that soul. Check the box.");
return;
}
const randomInsult = insults[Math.floor(Math.random() * insults.length)];
showToast(randomInsult);
statusText.innerText = "PATHETIC ATTEMPT";
statusText.classList.add('text-red-500');
}
function showToast(msg) {
toast.innerText = msg;
toast.style.opacity = '1';
setTimeout(() => {
toast.style.opacity = '0';
}, 3000);
}
// Make the card follow the mouse slightly
document.addEventListener('mousemove', (e) => {
const xAxis = (window.innerWidth / 2 - e.pageX) / 50;
const yAxis = (window.innerHeight / 2 - e.pageY) / 50;
card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});
</script>
</body>
</html>