APK FET
xperience the Nebula-X Full Terminal—a groundbreaking interactive interface featuring 3D perspective physics, bioluminescent form elements, and alien-tech animations. Built with Tailwind CSS and JavaScript, this "Terminal v4.2" provides a unique user experience through gravity-shifting navigation and sentient UI feedback.
Core Evolutionary Features:
Multidimensional Form Elements: * Geometric Inputs: Text fields utilized with custom CSS clip-path for a sharp, non-humanoid aesthetic.
Genetic Stability Selectors: Custom radio buttons that transform from standard toggles into neon-highlighted "DNA markers."
Neural Link Toggles: Checkboxes that rotate 45 degrees into "energy crystals" when activated.
Brainwave Sliders: Custom range inputs styled with magenta "power cores" to track simulated energy frequencies.
Adaptive 3D Dashboard: The entire terminal and navigation container utilize a 1200px perspective engine, tilting dynamically based on the user's cursor position for a tactile, "cockpit" feel.
Integrated Interactive Navbar:
Warp Speed: Accelerates background starfield physics.
Sector Analysis: Triggers a systemic viewport scan.
Gravity Inversion: Physically shifts the UI layout and orientation.
Sentient Logic Engine: Every interaction triggers a "Judgment Log," providing humorous, alien-themed feedback such as "Data received. Black hole is fed" or "Eye scan failed."
Bioluminescent Visual Language: A high-contrast palette of #00ffcc (Cyan) and #ff00ff (Magenta) set against a deep-space void, featuring glassmorphism, blur filters, and real-time glitch animations.
Easter Egg Physics: The sentient cow icon features specialized abduction logic, allowing it to orbit the viewport or "ascend" based on user interaction.
<!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 - FULL TERMINAL</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-x: hidden;
perspective: 1200px;
}
.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;
z-index: -1;
}
@keyframes moveStars {
from { transform: translateY(0); }
to { transform: translateY(-500px); }
}
/* Navbar Styling */
.nav-container {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
background: rgba(0, 255, 204, 0.05);
border-bottom: 2px solid #00ffcc;
backdrop-filter: blur(10px);
clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
.nav-link {
position: relative;
padding: 1.2rem 1.5rem;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 2px;
transition: all 0.3s;
cursor: pointer;
}
.nav-link:hover {
color: white;
text-shadow: 0 0 15px #00ffcc;
}
/* Advanced Form Styling */
.terminal-form {
background: rgba(0, 255, 204, 0.02);
border: 1px solid rgba(0, 255, 204, 0.4);
padding: 2.5rem;
width: 100%;
max-width: 600px;
margin: 100px 0;
position: relative;
z-index: 10;
backdrop-filter: blur(8px);
box-shadow: 0 0 40px rgba(0, 255, 204, 0.05);
}
.input-group { margin-bottom: 1.8rem; }
label {
display: block;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 0.6rem;
color: #00ffcc;
opacity: 0.8;
}
/* Unique Input Fields */
.terminal-input {
width: 100%;
background: rgba(0, 255, 204, 0.05);
border: 1px solid rgba(0, 255, 204, 0.3);
padding: 0.8rem;
color: #fff;
outline: none;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
transition: all 0.3s;
}
.terminal-input:focus {
border-color: #ff00ff;
background: rgba(255, 0, 255, 0.08);
padding-left: 1.5rem;
}
/* Unique Dropdown */
.terminal-select {
width: 100%;
background: #050505;
border: 2px solid #00ffcc;
color: #00ffcc;
padding: 0.8rem;
cursor: pointer;
appearance: none;
clip-path: polygon(0 20%, 5% 0, 100% 0, 100% 80%, 95% 100%, 0 100%);
}
/* Custom Radio Buttons (Genetic Markers) */
.radio-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.radio-item {
position: relative;
cursor: pointer;
padding: 0.5rem 1rem;
border: 1px solid rgba(0, 255, 204, 0.3);
font-size: 0.7rem;
transition: 0.3s;
}
.radio-item input { display: none; }
.radio-item:hover { background: rgba(0, 255, 204, 0.1); }
.radio-item input:checked + span { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; }
.radio-item input:checked + span::before { content: '>'; margin-right: 5px; }
/* Custom Checkbox (Neural Link) */
.checkbox-link {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
}
.checkbox-box {
width: 20px;
height: 20px;
border: 2px solid #00ffcc;
position: relative;
transition: 0.3s;
}
.checkbox-link input { display: none; }
.checkbox-link input:checked + .checkbox-box {
background: #ff00ff;
box-shadow: 0 0 15px #ff00ff;
border-color: #ff00ff;
transform: rotate(45deg);
}
/* Range Slider (Power Level) */
.terminal-range {
width: 100%;
height: 4px;
background: rgba(0, 255, 204, 0.2);
appearance: none;
outline: none;
}
.terminal-range::-webkit-slider-thumb {
appearance: none;
width: 15px;
height: 25px;
background: #ff00ff;
cursor: pointer;
border: 1px solid white;
}
.btn-transmit {
width: 100%;
background: #00ffcc;
color: #050505;
padding: 1.2rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 5px;
clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
transition: all 0.3s;
margin-top: 1rem;
}
.btn-transmit:hover {
background: #ff00ff;
color: white;
box-shadow: 0 0 30px #ff00ff;
letter-spacing: 8px;
}
.glitch-text {
text-shadow: 2px 0 red, -2px 0 blue;
animation: textGlitch 0.2s infinite alternate;
}
@keyframes textGlitch {
0% { transform: skew(1deg); }
100% { transform: skew(-1deg); }
}
#status-display {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
pointer-events: none;
}
</style>
</head>
<body class="flex flex-col items-center min-h-screen">
<div class="stars"></div>
<nav id="main-nav" class="nav-container flex justify-center items-center gap-6">
<div class="nav-link" onclick="triggerChaos('WARP_SPEED')">Engage</div>
<div class="nav-link" onclick="triggerChaos('SCAN_SECTOR')">Analyze</div>
<div class="nav-link font-black text-white italic text-xl glitch-text">NEBULA-X</div>
<div class="nav-link" onclick="triggerChaos('GRAVITY_SHIFT')">Gravity</div>
<div class="nav-link" onclick="triggerChaos('ABDUCT_VIEWER')">Abduct</div>
</nav>
<div id="transmission-form" class="terminal-form">
<div class="mb-10 text-center">
<h2 class="text-2xl font-black tracking-widest glitch-text italic">TERMINAL_v4.2</h2>
<p class="text-[10px] text-cyan-500">MULTIDIMENSIONAL DATA ENTRY REQUIRED</p>
</div>
<form onsubmit="event.preventDefault(); triggerChaos('TRANSMIT')">
<!-- Text Field -->
<div class="input-group">
<label>Vocal Identifier</label>
<input type="text" class="terminal-input" placeholder="SUBJECT_NAME" required>
</div>
<!-- Dropdown -->
<div class="input-group">
<label>Species Classification</label>
<select class="terminal-select">
<option>CARBON_BASED (HUMAN)</option>
<option>SILICON_LIFEFORM</option>
<option>GAS_GIANT_ENTITY</option>
<option>INTERDIMENSIONAL_CAT</option>
</select>
</div>
<!-- Radio Buttons -->
<div class="input-group">
<label>Genetic Stability</label>
<div class="radio-container">
<label class="radio-item">
<input type="radio" name="stability" checked> <span>STABLE</span>
</label>
<label class="radio-item">
<input type="radio" name="stability"> <span>MUTATING</span>
</label>
<label class="radio-item">
<input type="radio" name="stability"> <span>DECAYED</span>
</label>
</div>
</div>
<!-- Range Slider -->
<div class="input-group">
<label>Brainwave Frequency (Power Level)</label>
<input type="range" class="terminal-range" min="0" max="100" value="42">
</div>
<!-- Checkbox -->
<div class="input-group">
<label class="checkbox-link">
<input type="checkbox" required>
<div class="checkbox-box"></div>
<span class="text-[9px]">I AUTHORIZE NEURAL PROBING FOR SCIENTIFIC PROGRESS</span>
</label>
</div>
<!-- Text Area -->
<div class="input-group">
<label>Final Thoughts (Before Abduction)</label>
<textarea class="terminal-input h-20 resize-none" placeholder="I REGRET NOTHING..."></textarea>
</div>
<button type="submit" class="btn-transmit">UPLOAD TO VOID</button>
</form>
</div>
<div id="status-display">
<h2 id="log-text" class="text-xl font-bold opacity-0 transition-all duration-300">SYSTEM STABLE</h2>
</div>
<div id="cow" class="fixed bottom-10 right-10 text-6xl cursor-pointer hover:scale-125 transition-transform z-50">🐄</div>
<script>
const nav = document.getElementById('main-nav');
const form = document.getElementById('transmission-form');
const logText = document.getElementById('log-text');
const cow = document.getElementById('cow');
document.addEventListener('mousemove', (e) => {
const x = (window.innerWidth / 2 - e.pageX) / 60;
const y = (window.innerHeight / 2 - e.pageY) / 30;
nav.style.transform = `rotateX(${y}deg) rotateY(${-x}deg)`;
form.style.transform = `rotateX(${y/2}deg) rotateY(${-x/2}deg)`;
});
function triggerChaos(action) {
logText.style.opacity = '1';
logText.classList.add('glitch-text');
if(action === 'TRANSMIT') {
logText.innerText = "DATA RECEIVED. BLACK HOLE IS FED.";
form.style.filter = "invert(1)";
setTimeout(() => form.style.filter = "none", 1000);
} else if (action === 'WARP_SPEED') {
logText.innerText = "ACCELERATING TO IMAGINARY SPEEDS";
} else if (action === 'ABDUCT_VIEWER') {
logText.innerText = "EYE_SCAN_FAILED: RETRY_IN_ANOTHER_DIMENSION";
document.body.style.backgroundColor = "#200";
setTimeout(() => document.body.style.backgroundColor = "#050505", 1000);
} else if (action === 'GRAVITY_SHIFT') {
logText.innerText = "UP IS NOW SLIGHTLY LEFT";
form.style.transform = "rotate(10deg) scale(0.9)";
setTimeout(() => form.style.transform = "rotate(0deg) scale(1)", 2000);
}
setTimeout(() => {
logText.style.opacity = '0';
logText.classList.remove('glitch-text');
}, 3000);
}
cow.onclick = () => {
logText.innerText = "THE COW HAS ENLIGHTENED YOU.";
logText.style.opacity = '1';
cow.style.transition = "5s all";
cow.style.transform = "translateY(-1000px) rotate(720deg)";
setTimeout(() => {
cow.style.transition = "0.3s all";
cow.style.transform = "translateY(0) rotate(0deg)";
}, 5000);
};
</script>
</body>
</html>