288 lines
12 KiB
HTML
288 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>404 - Signal Lost</title><script src="./tailwindcss.js"></script><script src="./iconify-icon.min.js"></script></head><body>
|
|
<style id="style-404">
|
|
/* 核心背景：动态噪点与 CRT 效果 */
|
|
@keyframes noise {
|
|
0%, 100% { transform: translate(0, 0); }
|
|
10% { transform: translate(-5%, -5%); }
|
|
20% { transform: translate(-10%, 5%); }
|
|
30% { transform: translate(5%, -10%); }
|
|
40% { transform: translate(-5%, 15%); }
|
|
50% { transform: translate(-10%, 5%); }
|
|
60% { transform: translate(15%, 0); }
|
|
70% { transform: translate(0, 10%); }
|
|
80% { transform: translate(-15%, 0); }
|
|
90% { transform: translate(10%, 5%); }
|
|
}
|
|
|
|
.bg-noise {
|
|
position: fixed;
|
|
top: -50%;
|
|
left: -50%;
|
|
right: -50%;
|
|
bottom: -50%;
|
|
width: 200%;
|
|
height: 200vh;
|
|
background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
|
|
background-repeat: repeat;
|
|
animation: noise .2s infinite;
|
|
opacity: .05;
|
|
visibility: visible;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.crt-overlay {
|
|
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));
|
|
background-size: 100% 2px, 3px 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vignette {
|
|
background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 高级 Glitch 文本效果 */
|
|
.cyber-glitch {
|
|
position: relative;
|
|
color: #fff;
|
|
mix-blend-mode: lighten;
|
|
}
|
|
|
|
.cyber-glitch::before,
|
|
.cyber-glitch::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
background: #050505;
|
|
clip: rect(0, 0, 0, 0);
|
|
}
|
|
|
|
.cyber-glitch::before {
|
|
left: -2px;
|
|
text-shadow: 2px 0 #ff00c1;
|
|
animation: glitch-anim-1 2s infinite linear alternate-reverse;
|
|
}
|
|
|
|
.cyber-glitch::after {
|
|
left: 2px;
|
|
text-shadow: -2px 0 #00fff9;
|
|
animation: glitch-anim-2 3s infinite linear alternate-reverse;
|
|
}
|
|
|
|
@keyframes glitch-anim-1 {
|
|
0% { clip: rect(20px, 9999px, 10px, 0); }
|
|
20% { clip: rect(50px, 9999px, 80px, 0); }
|
|
40% { clip: rect(10px, 9999px, 40px, 0); }
|
|
60% { clip: rect(80px, 9999px, 20px, 0); }
|
|
80% { clip: rect(30px, 9999px, 60px, 0); }
|
|
100% { clip: rect(60px, 9999px, 30px, 0); }
|
|
}
|
|
@keyframes glitch-anim-2 {
|
|
0% { clip: rect(60px, 9999px, 30px, 0); }
|
|
20% { clip: rect(10px, 9999px, 50px, 0); }
|
|
40% { clip: rect(70px, 9999px, 10px, 0); }
|
|
60% { clip: rect(30px, 9999px, 90px, 0); }
|
|
80% { clip: rect(90px, 9999px, 20px, 0); }
|
|
100% { clip: rect(20px, 9999px, 60px, 0); }
|
|
}
|
|
|
|
/* 装饰性扫描线 */
|
|
.scanline-bar {
|
|
width: 100%;
|
|
height: 5px;
|
|
background: rgba(0, 255, 249, 0.3);
|
|
position: absolute;
|
|
z-index: 10;
|
|
animation: scan 3s linear infinite;
|
|
opacity: 0.3;
|
|
box-shadow: 0 0 10px rgba(0, 255, 249, 0.5);
|
|
}
|
|
|
|
@keyframes scan {
|
|
0% { top: -10%; }
|
|
100% { top: 110%; }
|
|
}
|
|
|
|
/* 终端光标闪烁 */
|
|
.cursor-blink {
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="content-404" class="relative min-h-screen bg-[#050505] flex flex-col items-center justify-center overflow-hidden font-mono text-gray-300 selection:bg-electric/30 selection:text-white">
|
|
|
|
<!-- Environmental Effects -->
|
|
<div class="bg-noise"></div>
|
|
<div class="crt-overlay absolute inset-0 z-50 pointer-events-none"></div>
|
|
<div class="vignette absolute inset-0 z-40 pointer-events-none"></div>
|
|
<div class="scanline-bar pointer-events-none"></div>
|
|
|
|
<!-- Background Grid -->
|
|
<div class="absolute inset-0 bg-[linear-gradient(rgba(30,30,30,0.5)_1px,transparent_1px),linear-gradient(90deg,rgba(30,30,30,0.5)_1px,transparent_1px)] bg-[size:40px_40px] opacity-10 pointer-events-none z-0" style="perspective: 500px; transform: rotateX(20deg) scale(1.5);"></div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="relative z-30 flex flex-col items-center w-full max-w-4xl px-6">
|
|
|
|
<!-- Glitch Title -->
|
|
<div class="relative mb-6 group cursor-default">
|
|
<h1 class="cyber-glitch text-[120px] md:text-[180px] font-black leading-none tracking-tighter opacity-90 select-none" data-text="404">
|
|
404
|
|
</h1>
|
|
<div class="absolute -bottom-4 left-0 w-full flex justify-between text-[10px] md:text-xs text-electric/40 uppercase tracking-[0.5em] font-bold">
|
|
<span>Sys.Malfunction</span>
|
|
<span>0x00_DEAD</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terminal Window -->
|
|
<div class="w-full max-w-2xl mt-8 mb-12 backdrop-blur-md bg-black/40 border border-white/5 rounded-sm shadow-[0_0_30px_rgba(0,0,0,0.8)] overflow-hidden">
|
|
<!-- Terminal Header -->
|
|
<div class="flex items-center justify-between px-4 py-2 bg-white/5 border-b border-white/5">
|
|
<div class="flex gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-red-900/50 border border-red-500/30"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-900/50 border border-yellow-500/30"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-900/50 border border-green-500/30"></div>
|
|
</div>
|
|
<div class="text-[10px] text-gray-600 font-mono">root@neobot:~/system/logs</div>
|
|
</div>
|
|
|
|
<!-- Terminal Body -->
|
|
<div class="p-6 font-mono text-sm md:text-base leading-relaxed h-48 overflow-y-auto custom-scrollbar">
|
|
<div id="terminal-content" class="space-y-1">
|
|
<!-- Content will be injected by JS -->
|
|
<div class="text-gray-500 transition-opacity duration-100">> initiating_handshake...</div><div class="text-gray-400 transition-opacity duration-100">> resolving_host: calglaubot.internal</div><div class="text-green-500/50 transition-opacity duration-100">> connection_established (port: 443)</div><div class="text-blue-400/60 transition-opacity duration-100">> GET /requested_resource HTTP/1.1</div><div class="text-gray-500 transition-opacity duration-100">> waiting_for_response...</div><div class="text-red-500 font-bold transition-opacity duration-100">> FATAL: endpoint_not_found</div><div class="text-gray-600 mt-2 transition-opacity duration-100">> stack_trace_dump:</div><div class="text-gray-600 pl-4 transition-opacity duration-100">> at Router.resolve (core.js:204)</div><div class="text-gray-600 pl-4 transition-opacity duration-100">> at Neobot.Handler (main.py:404)</div><div class="text-electric/80 mt-2 transition-opacity duration-100">> error: signal_lost_in_void</div></div>
|
|
<div class="flex items-center mt-2 text-electric">
|
|
<span class="mr-2">➜</span>
|
|
<span class="cursor-blink w-2 h-4 bg-electric block"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="flex flex-col md:flex-row gap-6 items-center">
|
|
<a href="index.html" class="group relative px-8 py-3 bg-transparent overflow-hidden">
|
|
<!-- Button Borders -->
|
|
<div class="absolute top-0 left-0 w-2 h-2 border-t border-l border-electric/50 transition-all group-hover:w-full group-hover:h-full group-hover:border-electric"></div>
|
|
<div class="absolute bottom-0 right-0 w-2 h-2 border-b border-r border-electric/50 transition-all group-hover:w-full group-hover:h-full group-hover:border-electric"></div>
|
|
|
|
<!-- Button Content -->
|
|
<div class="relative flex items-center gap-3">
|
|
<iconify-icon icon="mdi:console-network" class="text-xl text-electric/70 group-hover:text-electric transition-colors"></iconify-icon>
|
|
<span class="font-bold tracking-widest text-sm text-gray-400 group-hover:text-white transition-colors">REBOOT_SYSTEM</span>
|
|
</div>
|
|
|
|
<!-- Hover Background -->
|
|
<div class="absolute inset-0 bg-electric/5 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
|
|
</a>
|
|
|
|
<a href="#" class="text-xs text-gray-600 hover:text-electric/60 transition-colors uppercase tracking-widest border-b border-transparent hover:border-electric/30 pb-0.5">
|
|
Report_Incident
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Footer Stats -->
|
|
<div class="absolute bottom-6 left-6 right-6 flex justify-between text-[10px] text-gray-700 font-mono uppercase z-30">
|
|
<div>
|
|
<span>CPU: <span class="text-gray-500">98%</span></span>
|
|
<span class="mx-2">|</span>
|
|
<span>MEM: <span class="text-red-900 animate-pulse">OVERFLOW</span></span>
|
|
</div>
|
|
<div>
|
|
<span>NEOBOT FRAMEWORK</span>
|
|
</div>
|
|
</div>
|
|
</div><script id="script-404">(function() {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const terminalContent = document.getElementById('terminal-content');
|
|
const logs = [
|
|
{ text: 'initiating_handshake...', delay: 100, class: 'text-gray-500' },
|
|
{ text: 'resolving_host: calglaubot.internal', delay: 300, class: 'text-gray-400' },
|
|
{ text: 'connection_established (port: 443)', delay: 600, class: 'text-green-500/50' },
|
|
{ text: 'GET /requested_resource HTTP/1.1', delay: 900, class: 'text-blue-400/60' },
|
|
{ text: 'waiting_for_response...', delay: 1200, class: 'text-gray-500' },
|
|
{ text: 'FATAL: endpoint_not_found', delay: 2000, class: 'text-red-500 font-bold' },
|
|
{ text: 'stack_trace_dump:', delay: 2200, class: 'text-gray-600 mt-2' },
|
|
{ text: ' at Router.resolve (core.js:204)', delay: 2300, class: 'text-gray-600 pl-4' },
|
|
{ text: ' at Neobot.Handler (main.py:404)', delay: 2400, class: 'text-gray-600 pl-4' },
|
|
{ text: 'error: signal_lost_in_void', delay: 2800, class: 'text-electric/80 mt-2' }
|
|
];
|
|
|
|
let currentLine = 0;
|
|
|
|
function typeWriter() {
|
|
if (currentLine < logs.length) {
|
|
const line = logs[currentLine];
|
|
const p = document.createElement('div');
|
|
p.className = `${line.class} opacity-0 transition-opacity duration-100`;
|
|
p.textContent = `> ${line.text}`;
|
|
terminalContent.appendChild(p);
|
|
|
|
// Trigger reflow
|
|
void p.offsetWidth;
|
|
p.classList.remove('opacity-0');
|
|
|
|
// Auto scroll to bottom
|
|
const container = terminalContent.parentElement;
|
|
container.scrollTop = container.scrollHeight;
|
|
|
|
currentLine++;
|
|
setTimeout(typeWriter, Math.random() * 200 + 100); // Random typing speed variation
|
|
}
|
|
}
|
|
|
|
setTimeout(typeWriter, 500);
|
|
});
|
|
})();</script></body></html> |