AI摘要
代码演示
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 Error | Access Denied</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<!-- Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
neon: '#39FF14',
dark: '#0F172A',
darker: '#020617',
terminal: '#0D1117',
},
fontFamily: {
matrix: ['"Courier New"', 'monospace'],
},
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.glow {
text-shadow: 0 0 10px rgba(57, 255, 20, 0.7);
}
.matrix-code {
background-image:
linear-gradient(rgba(13, 17, 23, 0.9), rgba(13, 17, 23, 0.9)),
url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2339FF14' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.scan-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, rgba(57, 255, 20, 0.8), transparent);
animation: scan 3s linear infinite;
}
@keyframes scan {
0% { top: 0; }
50% { top: 100%; }
100% { top: 0; }
}
.noise {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.05;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
.typewriter {
overflow: hidden;
white-space: nowrap;
animation: typing 2s steps(40, end);
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
.blink {
animation: blink 1s step-end infinite;
}
@keyframes blink {
from, to { opacity: 1; }
50% { opacity: 0; }
}
}
</style>
</head>
<body class="bg-darker text-neon font-matrix min-h-screen flex flex-col matrix-code overflow-hidden">
<!-- 噪点背景 -->
<div class="noise"></div>
<!-- 扫描线效果 -->
<div class="scan-line"></div>
<!-- 顶部导航栏 -->
<header class="py-4 px-6 border-b border-neon/20 backdrop-blur-sm bg-darker/80">
<div class="flex justify-between items-center">
<div class="text-neon text-xl font-bold">
<i class="fa fa-shield mr-2"></i>SYSTEM PROTECTION
</div>
<div class="flex space-x-6">
<span class="text-neon/70">STATUS: SECURE</span>
<span class="text-neon/70">TIME: <span id="current-time">00:00:00</span></span>
<span class="text-neon/70">ID: <span id="session-id">XK-78239</span></span>
</div>
</div>
</header>
<!-- 主要内容 -->
<main class="flex-grow p-8 md:p-16 overflow-hidden">
<div class="max-w-4xl mx-auto">
<!-- 404 错误信息 -->
<div class="mb-12">
<h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold mb-4 glow">404</h1>
<p class="text-[clamp(1rem,3vw,1.5rem)] mb-8">ACCESS DENIED</p>
<div class="bg-terminal/50 border border-neon/30 rounded-lg p-6 mb-8 shadow-lg shadow-neon/10">
<div class="flex items-center mb-4">
<span class="text-neon/70 mr-2">ERROR</span>
<span class="text-neon">404</span>
<span class="text-neon/70 ml-2">|</span>
<span class="text-neon/70">RESOURCE NOT FOUND</span>
</div>
<p class="text-neon/80 mb-4">The requested resource could not be located on this system.</p>
<div class="text-neon/60">
<p class="mb-1">Status Code: 404 Not Found</p>
<p class="mb-1">Timestamp: <span id="error-timestamp">2023-05-12T14:30:45Z</span></p>
<p class="mb-1">Request ID: <span id="request-id">3a4b5c6d-7e8f-9a0b-1c2d-3e4f5a6b7c8d</span></p>
<p>Session Terminated: <span id="session-terminated">TRUE</span></p>
</div>
</div>
</div>
<!-- 模拟命令行 -->
<div class="bg-terminal/80 border border-neon/30 rounded-lg p-4 mb-8 shadow-lg shadow-neon/10">
<div class="flex items-center mb-2">
<span class="text-neon">user@system</span>
<span class="text-neon/50">:</span>
<span class="text-neon/70">~$</span>
<span class="ml-2 typewriter">ls -la</span>
<span class="ml-1 blink">_</span>
</div>
<div class="text-neon/60 text-sm">
<p class="mb-1">total 0</p>
<p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 .</p>
<p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 ..</p>
<p class="mb-1">lrwxrwxrwx 1 root root 7 Jan 1 00:00 bin -> usr/bin</p>
<p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 boot</p>
<p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 dev</p>
<p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 etc</p>
<p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 home</p>
<p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 lib</p>
<p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 media</p>
<p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 mnt</p>
<p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 opt</p>
<p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 proc</p>
<p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 root</p>
<p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 run</p>
<p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 sbin</p>
<p class="mb-1">drwxr-xr-x 2 root root 4096 Jan 1 00:00 srv</p>
<p class="mb-1">dr-xr-xr-x 1 root root 4096 Jan 1 00:00 sys</p>
<p class="mb-1">drwxrwxrwt 1 root root 4096 Jan 1 00:00 tmp</p>
<p class="mb-1">drwxr-xr-x 1 root root 4096 Jan 1 00:00 usr</p>
<p>drwxr-xr-x 1 root root 4096 Jan 1 00:00 var</p>
</div>
</div>
<!-- 按钮 -->
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button id="back-btn" class="bg-neon/20 hover:bg-neon/30 text-neon border border-neon/50 px-6 py-3 rounded-md transition-all duration-300 flex items-center justify-center">
<i class="fa fa-arrow-left mr-2"></i> Return to Safety
</button>
<button id="retry-btn" class="bg-transparent hover:bg-neon/10 text-neon/80 border border-neon/30 px-6 py-3 rounded-md transition-all duration-300 flex items-center justify-center">
<i class="fa fa-refresh mr-2"></i> Retry Connection
</button>
</div>
</div>
</main>
<!-- 底部信息 -->
<footer class="py-4 px-6 border-t border-neon/20 text-neon/50 text-sm backdrop-blur-sm bg-darker/80">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-2 md:mb-0">
<i class="fa fa-lock mr-2"></i>SYSTEM PROTECTION NETWORK
</div>
<div>
<span>UNAUTHORIZED ACCESS ATTEMPTS WILL BE LOGGED AND REPORTED</span>
</div>
</div>
</footer>
<!-- 动画代码效果背景 -->
<div id="matrix-code" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div>
<script>
// 更新当前时间
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('current-time').textContent = timeString;
}
// 生成随机ID
function generateRandomId() {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
let result = '';
for (let i = 0; i < 8; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
// 生成随机请求ID
function generateRequestId() {
const parts = [];
for (let i = 0; i < 5; i++) {
const length = i === 0 ? 8 : i === 4 ? 12 : 4;
let part = '';
for (let j = 0; j < length; j++) {
part += Math.floor(Math.random() * 16).toString(16);
}
parts.push(part);
}
return parts.join('-');
}
// 初始化页面
function initPage() {
// 更新时间
updateTime();
setInterval(updateTime, 1000);
// 更新会话ID
document.getElementById('session-id').textContent = generateRandomId();
// 更新请求ID
document.getElementById('request-id').textContent = generateRequestId();
// 更新时间戳
const now = new Date();
document.getElementById('error-timestamp').textContent = now.toISOString();
// 设置按钮点击事件
document.getElementById('back-btn').addEventListener('click', function() {
// 模拟返回安全区域的动画
this.classList.add('animate-pulse');
setTimeout(() => {
window.history.back();
}, 500);
});
document.getElementById('retry-btn').addEventListener('click', function() {
// 模拟重试连接的动画
this.classList.add('animate-spin');
setTimeout(() => {
location.reload();
}, 1000);
});
// 初始化矩阵代码背景
initMatrixCode();
}
// 矩阵代码背景动画
function initMatrixCode() {
const canvas = document.getElementById('matrix-code');
const ctx = canvas.getContext('2d');
// 设置画布大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
// 字符集
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+-=[]{}|;:,.<>?';
const fontSize = 16;
const columns = Math.floor(canvas.width / fontSize);
const drops = [];
// 初始化下落位置
for (let i = 0; i < columns; i++) {
drops[i] = Math.floor(Math.random() * canvas.height);
}
// 绘制函数
function draw() {
// 半透明黑色背景，创造轨迹效果
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 设置文本样式
ctx.fillStyle = '#39FF14';
ctx.font = `${fontSize}px Courier New`;
// 绘制每个字符
for (let i = 0; i < columns; i++) {
const text = chars.charAt(Math.floor(Math.random() * chars.length));
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
// 随机重置位置
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
// 开始动画
setInterval(draw, 33);
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initPage);
</script>
</body>
</html>
本文著作权归作者 [ Feng ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。
我来测测$[经典表情]::(折磨)
不错不错 拿去试试$[经典表情]::(菜汪)