APK FET
Enter the Bio-Scanner. This unique "Alien Abduction" login page combines interactive tractor beams, 3D tilt physics, and glitch aesthetics. Built with Tailwind CSS and JavaScript, it features a humorous "Probe" validation system and a sentient UI that reacts to human presence. Ideal for sci-fi fans and creative web developers.
Key Features:
Immersive Sci-Fi Aesthetic: Features a deep-space "Orbitron" typography, bioluminescent cyan accents, and an animated parallax starfield for total cosmic immersion.
3D Perspective Tilt: The "UFO" card utilizes CSS perspective and JavaScript mouse-tracking to dynamically tilt and shift as the user moves their cursor, creating a tactile dashboard feel.
Interactive Tractor Beam: Clicking the "Initiate Probe" button activates a CSS-clipthed tractor beam animation that visually scans the user's input.
Sentient & Playful UX: Includes a "Shy Password" field that physically dodges the cursor and a clickable floating cow that can be "abducted" from the viewport.
Glitch & Scan Effects: Integrated scanner-line animations and glitch-text filters simulate a slightly malfunctioning intergalactic computer system.
Humorous Validation: Replaces boring error messages with randomized "Alien Judgments," analyzing the user for "sodium levels," "anxiety," or "biological signatures matching a potato."
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GALAXY GATEWAY 9000</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;900&display=swap');
body {
font-family: 'Orbitron', sans-serif;
background-color: #050505;
color: #00ffcc;
overflow: hidden;
perspective: 1000px;
}
.stars {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: radial-gradient(white, rgba(255,255,255,0) 2px) 0 0/50px 50px,
radial-gradient(white, rgba(255,255,255,0) 2px) 25px 25px/50px 50px;
opacity: 0.1;
animation: moveStars 20s linear infinite;
}
@keyframes moveStars {
from { transform: translateY(0); }
to { transform: translateY(-500px); }
}
.ufo-card {
background: rgba(20, 20, 30, 0.9);
border: 4px solid #00ffcc;
border-radius: 50% / 15%;
box-shadow: 0 0 50px rgba(0, 255, 204, 0.3), inset 0 0 20px rgba(0, 255, 204, 0.2);
position: relative;
transform-style: preserve-3d;
}
.tractor-beam {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 0;
background: linear-gradient(to bottom, rgba(0, 255, 204, 0.4), transparent);
transition: height 0.5s ease-in;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
pointer-events: none;
}
.abduct-animation {
animation: abduct 0.8s forwards ease-in;
}
@keyframes abduct {
0% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(-200px) scale(0); opacity: 0; }
}
.scanner-line {
position: absolute;
width: 100%;
height: 2px;
background: #00ffcc;
box-shadow: 0 0 15px #00ffcc;
top: 0;
animation: scan 3s linear infinite;
}
@keyframes scan {
0% { top: 0%; opacity: 0; }
50% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.glitch-text {
text-shadow: 2px 0 red, -2px 0 blue;
animation: textGlitch 0.2s infinite alternate;
}
@keyframes textGlitch {
0% { transform: skew(0.5deg); }
100% { transform: skew(-0.5deg); }
}
input {
background: rgba(0, 255, 204, 0.1);
border: 1px solid #00ffcc;
color: #00ffcc;
padding: 10px;
text-align: center;
outline: none;
transition: all 0.3s;
}
input:focus {
background: rgba(0, 255, 204, 0.2);
box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
}
.btn-alien {
background: #00ffcc;
color: #050505;
font-weight: 900;
padding: 10px 20px;
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
transition: transform 0.2s, background 0.2s;
}
.btn-alien:hover {
background: #fff;
transform: scale(1.1) rotate(-2deg);
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen">
<div class="stars"></div>
<div id="ufo" class="ufo-card w-[450px] p-12 text-center relative z-10 transition-transform duration-300">
<div class="scanner-line"></div>
<div id="beam" class="tractor-beam"></div>
<h1 class="text-3xl font-black mb-2 italic tracking-tighter glitch-text">BIO-SCANNER</h1>
<p id="sub-text" class="text-[10px] uppercase tracking-[0.5em] mb-8 text-cyan-400">Verifying Carbon-Based Lifeform</p>
<div id="form-container" class="space-y-6">
<div class="flex flex-col gap-1">
<label class="text-[10px] uppercase">DNA Designation</label>
<input type="text" id="username" placeholder="HUMAN_SUBJECT_01">
</div>
<div class="flex flex-col gap-1 relative" id="pass-container">
<label class="text-[10px] uppercase">Neural Key (Password)</label>
<input type="password" id="password" placeholder="••••••••">
</div>
<div class="pt-4">
<button onclick="probe()" class="btn-win btn-alien w-full">INITIATE PROBE</button>
</div>
<p id="msg-box" class="text-xs h-4 text-pink-500 font-bold uppercase"></p>
</div>
<!-- Cockpit detail -->
<div class="absolute -bottom-4 left-1/2 -translate-x-1/2 flex gap-4">
<div class="w-3 h-3 rounded-full bg-red-500 animate-ping"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div>
<div class="w-3 h-3 rounded-full bg-green-500 animate-bounce"></div>
</div>
</div>
<!-- Floating Cow -->
<div id="cow" class="fixed bottom-10 right-10 text-4xl cursor-pointer hover:scale-150 transition-transform">🐄</div>
<script>
const ufo = document.getElementById('ufo');
const beam = document.getElementById('beam');
const msgBox = document.getElementById('msg-box');
const passContainer = document.getElementById('pass-container');
// Tilt effect
document.addEventListener('mousemove', (e) => {
const x = (window.innerWidth / 2 - e.pageX) / 25;
const y = (window.innerHeight / 2 - e.pageY) / 25;
ufo.style.transform = `rotateX(${y}deg) rotateY(${-x}deg)`;
});
function probe() {
const user = document.getElementById('username').value || "Unnamed Meat-Sack";
// Activate tractor beam
beam.style.height = '400px';
msgBox.innerText = "SCANNING VITAL ORGANS...";
setTimeout(() => {
beam.style.height = '0';
const responses = [
`Error: ${user} contains too much sodium. Access denied.`,
"Scanning... Found 47% 'Anxiety'. Login rejected.",
"Password incorrect. Did you forget you're a human?",
"Warning: Biological signature matches a potato.",
"We only let space-cats in today. Try again tomorrow."
];
msgBox.innerText = responses[Math.floor(Math.random() * responses.length)];
// Shake effect
ufo.style.filter = "hue-rotate(90deg)";
setTimeout(() => ufo.style.filter = "none", 500);
}, 1000);
}
// Cow abduction interaction
document.getElementById('cow').onclick = function() {
this.classList.add('abduct-animation');
msgBox.innerText = "COW ACQUIRED. THANK YOU.";
setTimeout(() => {
this.classList.remove('abduct-animation');
msgBox.innerText = "";
}, 2000);
};
// Password field is scared of the cursor
passContainer.addEventListener('mouseenter', () => {
if(Math.random() > 0.5) {
passContainer.style.transform = `translateX(${Math.random() > 0.5 ? 100 : -100}px)`;
msgBox.innerText = "PASSWORD FIELD IS SHY";
setTimeout(() => {
passContainer.style.transform = 'translateX(0)';
}, 1000);
}
});
</script>
</body>
</html>