554 lines
17 KiB
HTML
554 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GVSDS 访问拒绝 | verify.gvsds.com</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-dark: #0a0a12;
|
|
--primary-red: #ff3333;
|
|
--secondary-red: #cc0000;
|
|
--accent-glow: rgba(255, 51, 51, 0.3);
|
|
--text-primary: #e0e0e0;
|
|
--text-secondary: #a0a0a0;
|
|
--grid-color: rgba(255, 51, 51, 0.1);
|
|
--denied-red: #ff2a6d;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--primary-dark);
|
|
color: var(--text-primary);
|
|
font-family: 'Font-Cyber', 'Orbitron', sans-serif;
|
|
overflow: hidden;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* 增强背景效果 */
|
|
.enhanced-background {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -3;
|
|
}
|
|
|
|
.grid-pattern {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
|
|
linear-gradient(var(--grid-color) 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
opacity: 0.3;
|
|
z-index: 1;
|
|
animation: gridMove 60s linear infinite;
|
|
}
|
|
|
|
.neon-glow {
|
|
position: absolute;
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle at center, var(--primary-red), transparent 70%);
|
|
opacity: 0.1;
|
|
z-index: 2;
|
|
animation: float 30s ease-in-out infinite;
|
|
}
|
|
|
|
.neon-glow:nth-child(2) {
|
|
background: radial-gradient(circle at center, var(--denied-red), transparent 70%);
|
|
opacity: 0.08;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.neon-glow:nth-child(3) {
|
|
background: radial-gradient(circle at center, var(--secondary-red), transparent 70%);
|
|
opacity: 0.07;
|
|
animation-delay: 10s;
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
width: 90%;
|
|
max-width: 1200px;
|
|
height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.id-card {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 80%;
|
|
background: linear-gradient(145deg, #0f0f1a, #05050c);
|
|
border-radius: 20px;
|
|
box-shadow:
|
|
0 0 50px var(--accent-glow),
|
|
0 0 100px var(--primary-red),
|
|
inset 0 0 20px rgba(255, 51, 51, 0.1);
|
|
border: 1px solid var(--primary-red);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 30px;
|
|
z-index: 2;
|
|
transition: transform 0.3s ease;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.id-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.id-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background:
|
|
linear-gradient(45deg, transparent 48%, var(--primary-red) 49%, var(--primary-red) 51%, transparent 52%),
|
|
linear-gradient(-45deg, transparent 48%, var(--primary-red) 49%, var(--primary-red) 51%, transparent 52%);
|
|
background-size: 20px 20px;
|
|
opacity: 0.1;
|
|
transform: rotate(0deg);
|
|
animation: gridMove 60s linear infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
color: var(--primary-red);
|
|
text-shadow: 0 0 10px var(--primary-red);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.verify-status {
|
|
font-size: 0.9rem;
|
|
color: var(--primary-red);
|
|
border: 1px solid var(--primary-red);
|
|
padding: 5px 15px;
|
|
border-radius: 20px;
|
|
box-shadow: 0 0 10px var(--accent-glow);
|
|
}
|
|
|
|
.hero-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.avatar {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(145deg, var(--primary-red), var(--secondary-red));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 0 30px var(--accent-glow);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -10px;
|
|
right: -10px;
|
|
bottom: -10px;
|
|
border-radius: 50%;
|
|
border: 2px dashed var(--primary-red);
|
|
opacity: 0.5;
|
|
animation: spin 20s linear infinite;
|
|
}
|
|
|
|
.avatar-inner {
|
|
width: 140px;
|
|
height: 140px;
|
|
border-radius: 50%;
|
|
background-color: var(--primary-dark);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 3rem;
|
|
color: var(--primary-red);
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 2.5rem;
|
|
margin: 10px 0;
|
|
background: linear-gradient(to right, var(--primary-red), var(--secondary-red));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 15px var(--accent-glow);
|
|
}
|
|
|
|
.user-title {
|
|
font-size: 1.2rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 30px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.clearance-level {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.clearance-label {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 5px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.clearance-value {
|
|
font-size: 3rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(to right, var(--primary-red), var(--secondary-red));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
position: relative;
|
|
}
|
|
|
|
.clearance-value::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: linear-gradient(to right, transparent, var(--primary-red), transparent);
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.authority {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.authority strong {
|
|
color: var(--primary-red);
|
|
}
|
|
|
|
.authentication {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.authentication strong {
|
|
color: var(--primary-red);
|
|
}
|
|
|
|
.scanlines {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background:
|
|
linear-gradient(to bottom,
|
|
rgba(255, 51, 51, 0.03) 0%,
|
|
rgba(255, 51, 51, 0) 2%);
|
|
background-size: 100% 4px;
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
}
|
|
|
|
.corner {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-color: var(--primary-red);
|
|
border-style: solid;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.corner-tl {
|
|
top: 20px;
|
|
left: 20px;
|
|
border-width: 3px 0 0 3px;
|
|
}
|
|
|
|
.corner-tr {
|
|
top: 20px;
|
|
right: 20px;
|
|
border-width: 3px 3px 0 0;
|
|
}
|
|
|
|
.corner-bl {
|
|
bottom: 20px;
|
|
left: 20px;
|
|
border-width: 0 0 3px 3px;
|
|
}
|
|
|
|
.corner-br {
|
|
bottom: 20px;
|
|
right: 20px;
|
|
border-width: 0 3px 3px 0;
|
|
}
|
|
|
|
@keyframes gridMove {
|
|
0% { transform: rotate(0deg) translate(0, 0); }
|
|
100% { transform: rotate(360deg) translate(0, 0); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
25% { transform: translate(20px, -20px) scale(1.05); }
|
|
50% { transform: translate(0, 20px) scale(1); }
|
|
75% { transform: translate(-20px, -10px) scale(1.03); }
|
|
}
|
|
|
|
.glow {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: radial-gradient(circle at center, var(--primary-red), transparent 70%);
|
|
opacity: 0.05;
|
|
z-index: -1;
|
|
}
|
|
|
|
.particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
background-color: var(--primary-red);
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.access-denied-message {
|
|
text-align: center;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.access-denied-title {
|
|
font-size: 2.5rem;
|
|
color: var(--denied-red);
|
|
text-shadow: 0 0 20px var(--accent-glow);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.access-denied-reason {
|
|
font-size: 1.2rem;
|
|
color: var(--text-secondary);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.contact-support {
|
|
margin-top: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.support-link {
|
|
color: var(--primary-red);
|
|
text-decoration: none;
|
|
border-bottom: 1px dashed var(--primary-red);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.support-link:hover {
|
|
color: var(--denied-red);
|
|
text-shadow: 0 0 10px var(--accent-glow);
|
|
}
|
|
|
|
/* 自定义滚动条 */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--primary-dark);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to bottom, var(--primary-red), var(--secondary-red));
|
|
border-radius: 5px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(to bottom, #ff4d4d, #b30000);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 增强的背景元素 -->
|
|
<div class="enhanced-background">
|
|
<div class="grid-pattern"></div>
|
|
<div class="neon-glow" style="top: 20%; left: 10%;"></div>
|
|
<div class="neon-glow" style="top: 50%; right: 15%;"></div>
|
|
<div class="neon-glow" style="bottom: 30%; left: 25%;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="id-card">
|
|
<div class="glow"></div>
|
|
<div class="scanlines"></div>
|
|
|
|
<div class="corner corner-tl"></div>
|
|
<div class="corner corner-tr"></div>
|
|
<div class="corner corner-bl"></div>
|
|
<div class="corner corner-br"></div>
|
|
|
|
<div class="header">
|
|
<div class="logo">GVSDS ACCESS</div>
|
|
<div class="verify-status">ACCESS DENIED</div>
|
|
</div>
|
|
|
|
<div class="hero-section">
|
|
<div class="avatar">
|
|
<div class="avatar-inner">!</div>
|
|
</div>
|
|
|
|
<h1 class="user-name">访问拒绝</h1>
|
|
<p class="user-title">未授权访问</p>
|
|
|
|
<div class="clearance-level">
|
|
<div class="clearance-label">权限等级</div>
|
|
<div class="clearance-value">DENIED</div>
|
|
</div>
|
|
|
|
<div class="access-denied-message">
|
|
<div class="access-denied-title">拒 · 绝</div>
|
|
<div class="access-denied-reason">您没有权限访问此资源。您必须处于 ELT 登录状态</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 创建更多粒子
|
|
const particlesContainer = document.createElement('div');
|
|
particlesContainer.className = 'particles';
|
|
document.querySelector('.container').appendChild(particlesContainer);
|
|
|
|
for (let i = 0; i < 50; i++) {
|
|
createParticle(particlesContainer);
|
|
}
|
|
|
|
function createParticle(container) {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
|
|
const size = Math.random() * 4 + 1;
|
|
const posX = Math.random() * 100;
|
|
const posY = Math.random() * 100;
|
|
const opacity = Math.random() * 0.4 + 0.1;
|
|
const animationDuration = Math.random() * 25 + 15;
|
|
const hue = Math.random() * 30 + 350; // 红色调范围
|
|
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${posX}%`;
|
|
particle.style.top = `${posY}%`;
|
|
particle.style.opacity = opacity;
|
|
particle.style.animation = `float ${animationDuration}s linear infinite`;
|
|
particle.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
|
|
|
|
container.appendChild(particle);
|
|
|
|
// 随机时间后重新创建粒子，实现动态效果
|
|
setTimeout(() => {
|
|
particle.remove();
|
|
createParticle(container);
|
|
}, animationDuration * 1000);
|
|
}
|
|
|
|
// 添加浮动动画
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
@keyframes float {
|
|
0% { transform: translate(0, 0) scale(1); }
|
|
50% {
|
|
transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px) scale(1.05);
|
|
opacity: ${Math.random() * 0.6 + 0.1};
|
|
}
|
|
100% { transform: translate(0, 0) scale(1); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// 动态网格动画
|
|
let angle = 0;
|
|
setInterval(() => {
|
|
angle = (angle + 0.1) % 360;
|
|
document.querySelector('.id-card::before').style.transform = `rotate(${angle}deg)`;
|
|
}, 100);
|
|
|
|
// 禁用卡片点击事件
|
|
document.querySelector('.id-card').addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
// 可以添加拒绝访问的提示动画或声音
|
|
this.classList.add('shake');
|
|
setTimeout(() => {
|
|
this.classList.remove('shake');
|
|
}, 500);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |