APK FET
The Signal Intercept navbar is a retro-futuristic terminal interface that replaces traditional menu access with a skill-based "decryption" game. It is designed to look like a high-security military or hacker terminal from the late 80s.
Core Components
Signal Analyzer (The Game): The primary interactive element is a frequency synchronization module. A high-speed green pulse oscillates across a horizontal waveform. The user must click the module precisely when the pulse aligns with the central shaded "target zone."
Progressive Security: Access is gated by a multi-sync requirement. The user must successfully time three consecutive hits to "decrypt" the system. To prevent simple spamming, any miss immediately resets the synchronization counter to zero.
Gated Navigation Links: The primary site links (Database, Archives, and Uplink) are initially locked. They appear at low opacity and are non-functional (using CSS pointer-events: none) until the decryption sequence is completed.
Status & Feedback: The navbar provides real-time telemetry, including a "Sync Count" (0/3), a flickering "Status" indicator that changes color based on success or failure, and a system clock.
Success State: Upon completing the third synchronization, the game loop terminates, the pulse locks into a "perfect" center position with an enhanced glow, and the navigation links transition into an "unlocked" state with full opacity and hover effects.
Visual Aesthetic
The navbar utilizes a CRT-Terminal style, characterized by:
Scanline Overlays: A CSS linear-gradient creates the illusion of a physical glass monitor.
Chromatic Aberration & Flicker: Subtle animations simulate the instability of an old monitor.
Monospace Typography: Using "Fira Code" to maintain the "coder" or "terminal" persona.
Matrix Color Palette: A strict adherence to deep greens (#4ade80), obsidian blacks, and emergency reds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signal Intercept Terminal</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;500&display=swap');
body {
background-color: #0a0c0a;
color: #4ade80;
font-family: 'Fira Code', monospace;
overflow: hidden;
height: 100vh;
}
/* Scanline Effect */
body::before {
content: " ";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 100;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
.terminal-border {
border: 1px solid #14532d;
background: rgba(20, 83, 45, 0.05);
}
/* The Game Waveform */
.wave-container {
width: 140px; /* Slightly wider */
height: 44px;
position: relative;
background: #000;
border: 1px solid #166534;
overflow: hidden;
}
.target-zone {
position: absolute;
left: 50%;
top: 0;
width: 34px; /* Widened from 20px to 34px for easier hits */
height: 100%;
background: rgba(74, 222, 128, 0.15);
border-left: 1px solid rgba(74, 222, 128, 0.5);
border-right: 1px solid rgba(74, 222, 128, 0.5);
transform: translateX(-50%);
}
.signal-pulse {
position: absolute;
left: 0;
top: 0;
width: 6px;
height: 100%;
background: #4ade80;
box-shadow: 0 0 12px #4ade80;
}
/* Nav Link Styles */
.terminal-link {
opacity: 0.3;
pointer-events: none;
transition: all 0.3s ease;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.1em;
}
.terminal-link.unlocked {
opacity: 1;
pointer-events: auto;
color: #fff;
text-shadow: 0 0 5px #4ade80;
}
.terminal-link:hover {
background: #4ade80;
color: #000;
}
@keyframes crt-flicker {
0% { opacity: 0.98; }
100% { opacity: 1; }
}
.crt-on {
animation: crt-flicker 0.15s infinite;
}
.glitch-text {
animation: glitch 2s linear infinite;
}
@keyframes glitch {
2%, 64% { transform: translate(1px, 0); }
4%, 60% { transform: translate(-1px, 0); }
}
</style>
</head>
<body class="crt-on">
<!-- Top Navigation Bar -->
<nav class="fixed top-0 w-full p-4 terminal-border flex items-center justify-between z-50">
<!-- The Game Logic -->
<div class="flex items-center space-x-4">
<div class="flex flex-col">
<span class="text-[10px] text-green-900 font-bold mb-1">SIGNAL ANALYZER</span>
<div class="wave-container cursor-pointer" onclick="attemptSync()">
<div class="target-zone"></div>
<div id="signal-pulse" class="signal-pulse"></div>
</div>
</div>
<div class="text-[10px]">
<div>STATUS: <span id="status-text" class="animate-pulse">DECRYPTING...</span></div>
<div>SYNC: <span id="sync-count">0/3</span></div>
</div>
</div>
<!-- The Locked Links -->
<div class="flex space-x-6">
<a href="#" id="nav-1" class="terminal-link px-2 py-1 border border-green-900">Database</a>
<a href="#" id="nav-2" class="terminal-link px-2 py-1 border border-green-900">Archives</a>
<a href="#" id="nav-3" class="terminal-link px-2 py-1 border border-green-900">Uplink</a>
</div>
<div class="text-[10px] text-right hidden md:block">
<div class="text-green-800 uppercase tracking-widest">Protocol: Easy_Intermission</div>
<div id="clock">00:00:00</div>
</div>
</nav>
<!-- Main Content Area -->
<main class="flex flex-col items-center justify-center min-h-screen text-center p-6">
<div id="terminal-screen" class="max-w-2xl w-full p-8 terminal-border rounded-sm relative bg-black/40">
<div class="absolute top-2 left-2 text-[10px] opacity-30">SYS_ROOT: /USER/UNAUTHORIZED</div>
<h1 class="text-3xl md:text-5xl font-light mb-6 glitch-text" data-text="ACCESS RESTRICTED">ACCESS RESTRICTED</h1>
<div class="space-y-4 text-sm text-green-700/80 leading-relaxed max-w-md mx-auto">
<p>> Frequency stabilizer recalibrated. Alignment window widened.</p>
<p>> Click the analyzer when the green pulse enters the central shaded zone.</p>
</div>
<div id="success-display" class="hidden mt-10 p-6 border border-green-400 bg-green-400/10">
<p class="text-white text-lg tracking-widest animate-pulse">CONNECTION SECURE</p>
<p class="text-xs uppercase mt-2 text-green-400">Terminal decrypted. Welcome, Administrator.</p>
</div>
</div>
</main>
<script>
let syncs = 0;
let pulsePos = 0;
let direction = 1;
let speed = 1.5; // Lowered initial speed from 2 to 1.5
let gameActive = true;
const containerWidth = 140;
const pulseWidth = 6;
function animatePulse() {
if (!gameActive) return;
const pulse = document.getElementById('signal-pulse');
pulsePos += direction * speed;
if (pulsePos >= (containerWidth - pulseWidth) || pulsePos <= 0) {
direction *= -1;
}
pulse.style.left = pulsePos + 'px';
requestAnimationFrame(animatePulse);
}
function attemptSync() {
if (!gameActive) return;
const statusText = document.getElementById('status-text');
const syncDisplay = document.getElementById('sync-count');
// Pulse Center
const pulseCenter = pulsePos + (pulseWidth / 2);
// Target Zone is center (70px) with 34px width -> 53px to 87px
const targetMin = 53;
const targetMax = 87;
if (pulseCenter >= targetMin && pulseCenter <= targetMax) {
syncs++;
speed += 0.8; // Lowered speed increase from 1.5 to 0.8
syncDisplay.innerText = `${syncs}/3`;
statusMsg("MATCH DETECTED", "#4ade80");
if (syncs >= 3) {
unlockTerminal();
}
} else {
syncs = 0;
speed = 1.5; // Reset to easy speed
syncDisplay.innerText = `0/3`;
statusMsg("SYNC FAILED", "#ef4444");
}
}
function statusMsg(txt, color) {
const status = document.getElementById('status-text');
status.innerText = txt;
status.style.color = color;
setTimeout(() => {
if (gameActive) {
status.innerText = "DECRYPTING...";
status.style.color = "";
}
}, 600);
}
function unlockTerminal() {
gameActive = false;
document.getElementById('status-text').innerText = "ONLINE";
document.getElementById('status-text').classList.remove('animate-pulse');
document.getElementById('status-text').style.color = "#fff";
document.querySelectorAll('.terminal-link').forEach(link => {
link.classList.add('unlocked');
});
document.getElementById('success-display').classList.remove('hidden');
// Center the pulse perfectly for victory
document.getElementById('signal-pulse').style.left = '67px';
document.getElementById('signal-pulse').style.boxShadow = '0 0 30px #4ade80';
}
setInterval(() => {
const now = new Date();
document.getElementById('clock').innerText = now.toTimeString().split(' ')[0];
}, 1000);
animatePulse();
</script>
</body>
</html>