APK FET
The Prism Refraction navbar is a "Solar-Punk" inspired interface that replaces traditional navigation access with a kinetic light-manipulation puzzle. It features a bright, airy aesthetic centered around the concept of harvesting solar energy to power system protocols.Key ComponentsThe Refraction Prism (Game Logo): The central interactive element is a geometric prism. Users can click to rotate the prism in $45^{\circ}$ increments. Its state changes visually from a cold slate grey to a vibrant amber glow when successfully capturing light.Wandering Light Beam: A dynamic, semi-transparent beam of light constantly drifts vertically behind the prism. This adds a temporal layer to the puzzle; simply having the correct rotation is not enough—the beam must also be physically passing through the prism's location.Power Core Telemetry: To the right of the prism, a "Power Core" gauge tracks the harvested energy. The core only charges when the prism is set to exactly $180^{\circ}$ and the wandering beam is centered.Gated Solar Links: The navigation menu (Radiance, Kinetic, and Thermal) remains in a "dormant" state—desaturated and non-interactable—until the Power Core reaches $100\%$ capacity.Core Status Indicator: A pill-shaped status badge provides real-time feedback, shifting from a neutral "Offline" to a pulsing amber "Charging..." and finally a solid green "Active" state upon completion.Visual AestheticThe navbar utilizes a Solar-Punk design language, characterized by:Glassmorphism: A high-blur backdrop (backdrop-filter: blur(12px)) that allows background colors to bleed through softly.Clean Typography: A combination of the geometric Outfit font for headings and the highly legible Lexend for UI elements.Atmospheric Lighting: Fixed background glows in amber and sky blue create a sense of depth and outdoor luminosity, contrasting with the crisp white surfaces of the primary UI.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prism Refraction Nav</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;600&family=Lexend:wght@300;600&display=swap');
body {
background: #ffffff;
color: #1e293b;
font-family: 'Lexend', sans-serif;
overflow: hidden;
height: 100vh;
}
.glass-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(226, 232, 240, 0.8);
}
/* The Prism Game */
.prism-container {
width: 50px;
height: 50px;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.prism {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 26px solid #e2e8f0;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter: drop-shadow(0 0 5px rgba(0,0,0,0.05));
}
.prism.aligned {
border-bottom-color: #fbbf24;
filter: drop-shadow(0 0 15px #fbbf24);
}
/* The Light Beam */
.light-beam {
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
pointer-events: none;
transition: top 2s ease-in-out;
}
/* Nav Link Styles */
.solar-link {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #cbd5e1;
pointer-events: none;
transition: all 0.6s ease;
position: relative;
}
.solar-link.active {
color: #1e293b;
pointer-events: auto;
}
.solar-link.active::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: #fbbf24;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.solar-link:hover::after {
transform: scaleX(1);
}
/* Background gradients */
.bg-glow {
position: fixed;
width: 60vw;
height: 60vw;
background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
z-index: -1;
filter: blur(60px);
}
@keyframes charge {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.charging { animation: charge 1s infinite; }
</style>
</head>
<body>
<div class="bg-glow" style="top: -10vh; right: -10vw;"></div>
<div class="bg-glow" style="bottom: -10vh; left: -10vw; background: radial-gradient(circle, rgba(56, 189, 248, 0.05) 0%, transparent 70%);"></div>
<nav class="fixed top-0 w-full p-6 glass-panel flex items-center justify-between z-50">
<div class="flex items-center space-x-6">
<div class="flex flex-col">
<span class="text-[9px] font-bold tracking-[0.3em] text-amber-500 uppercase mb-1">Prism Alignment</span>
<div class="flex items-center space-x-3">
<div class="prism-container" onclick="rotatePrism()">
<div id="light-beam" class="light-beam" style="top: 50%;"></div>
<div id="prism-head" class="prism"></div>
</div>
</div>
</div>
<div class="h-8 w-px bg-slate-200"></div>
<div class="flex flex-col">
<span class="text-[9px] text-slate-400 uppercase">Power Core</span>
<span id="power-level" class="text-xs font-bold">0%</span>
</div>
</div>
<!-- Links -->
<div class="flex space-x-10">
<a href="#" class="solar-link">Radiance</a>
<a href="#" class="solar-link">Kinetic</a>
<a href="#" class="solar-link">Thermal</a>
</div>
<div class="hidden md:block">
<div id="core-status" class="text-[10px] font-bold tracking-widest text-slate-300 border border-slate-200 px-4 py-1 rounded-full uppercase">
Offline
</div>
</div>
</nav>
<main class="flex flex-col items-center justify-center min-h-screen text-center px-4">
<div class="max-w-xl space-y-8">
<h1 class="text-6xl md:text-8xl font-light tracking-tighter" style="font-family: 'Outfit', sans-serif;">
SOLAR<span class="font-bold text-amber-400">CORE</span>
</h1>
<p id="hint-text" class="text-slate-400 text-sm tracking-widest leading-loose uppercase">
The beam is drifting. Click the prism to rotate it and catch the light.
Stabilize at <span class="text-amber-500">180°</span> to initiate.
</p>
<div id="alignment-indicator" class="text-4xl font-thin text-slate-200">
<span id="current-deg">0</span>°
</div>
<div id="success-ui" class="hidden animate-in fade-in zoom-in duration-700">
<div class="p-8 border border-amber-100 rounded-2xl bg-amber-50/30">
<p class="text-amber-700 font-semibold mb-2">Core Fully Recharged</p>
<p class="text-slate-500 text-sm">Navigation override successful. Systems online.</p>
</div>
</div>
</div>
</main>
<script>
let rotation = 0;
let power = 0;
let beamPos = 50; // percentage
let beamDirection = 1;
let gameActive = true;
function rotatePrism() {
if (!gameActive) return;
rotation = (rotation + 45) % 360;
document.getElementById('prism-head').style.transform = `rotate(${rotation}deg)`;
document.getElementById('current-deg').innerText = rotation;
checkCapture();
}
// Beam wandering logic
function moveBeam() {
if (!gameActive) return;
const beam = document.getElementById('light-beam');
beamPos += beamDirection * 0.5;
if (beamPos > 80 || beamPos < 20) beamDirection *= -1;
beam.style.top = beamPos + '%';
checkCapture();
requestAnimationFrame(moveBeam);
}
function checkCapture() {
if (!gameActive) return;
const prism = document.getElementById('prism-head');
const powerDisplay = document.getElementById('power-level');
const status = document.getElementById('core-status');
// Alignment condition: Prism must be 180 deg AND beam must be near center
const isAligned = rotation === 180 && beamPos > 40 && beamPos < 60;
if (isAligned) {
prism.classList.add('aligned');
power = Math.min(100, power + 1);
powerDisplay.innerText = `${Math.floor(power)}%`;
status.innerText = "Charging...";
status.classList.add('text-amber-500', 'border-amber-200', 'charging');
if (power >= 100) win();
} else {
prism.classList.remove('aligned');
status.classList.remove('charging');
if (power < 100) {
status.innerText = "Offline";
status.classList.remove('text-amber-500', 'border-amber-200');
}
}
}
function win() {
gameActive = false;
document.getElementById('core-status').innerText = "Active";
document.getElementById('core-status').classList.add('text-green-500', 'border-green-200');
document.getElementById('hint-text').style.display = 'none';
document.getElementById('success-ui').classList.remove('hidden');
document.querySelectorAll('.solar-link').forEach(link => {
link.classList.add('active');
});
// Final visual polish
document.getElementById('light-beam').style.top = '50%';
document.getElementById('light-beam').style.background = 'linear-gradient(90deg, transparent, #fbbf24, transparent)';
document.getElementById('light-beam').style.height = '4px';
}
moveBeam();
</script>
</body>
</html>