1242 lines
63 KiB
HTML
1242 lines
63 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>授权验证</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet">
|
|
<script>
|
|
// 注入Tailwind CSS
|
|
const tailwindScript = document.createElement('script');
|
|
tailwindScript.src = 'https://cdn.tailwindcss.com';
|
|
document.head.appendChild(tailwindScript);
|
|
|
|
// 注入Font Awesome
|
|
const fontAwesomeScript = document.createElement('link');
|
|
fontAwesomeScript.href = 'https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css';
|
|
fontAwesomeScript.rel = 'stylesheet';
|
|
document.head.appendChild(fontAwesomeScript);
|
|
|
|
// 配置Tailwind自定义颜色和字体
|
|
tailwindScript.onload = function() {
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#00FFEA',
|
|
secondary: '#00FF9C',
|
|
accent: '#FF00E5',
|
|
dark: '#0B0E14',
|
|
neon: '#00FFEA',
|
|
matrix: '#00FF41',
|
|
error: '#FF4D4F',
|
|
warning: '#FFC53D',
|
|
info: '#40A9FF',
|
|
success: '#52C41A'
|
|
},
|
|
fontFamily: {
|
|
code: ['Courier New', 'monospace'],
|
|
digital: ['Digital-7', 'monospace']
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.text-glow {
|
|
text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
|
|
}
|
|
.border-glow {
|
|
box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
|
|
}
|
|
.animate-matrix {
|
|
animation: matrix 15s linear infinite;
|
|
}
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
.animate-pulse-fast {
|
|
animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
.animate-scan {
|
|
animation: scan 2s linear infinite;
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.5s ease-in-out forwards;
|
|
}
|
|
.animate-slide-up {
|
|
animation: slideUp 0.5s ease-in-out forwards;
|
|
}
|
|
.animate-slide-down {
|
|
animation: slideDown 0.5s ease-in-out forwards;
|
|
}
|
|
.animate-progress {
|
|
animation: progress 1.5s ease-in-out forwards;
|
|
}
|
|
.bg-mesh {
|
|
background-image:
|
|
linear-gradient(rgba(0, 255, 234, 0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 255, 234, 0.05) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: rgba(0, 255, 234, 0.1);
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 255, 234, 0.5);
|
|
border-radius: 2px;
|
|
}
|
|
.glass-effect {
|
|
background: rgba(11, 14, 20, 0.6);
|
|
backdrop-blur: 10px;
|
|
}
|
|
.grid-auto-fit {
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
}
|
|
}
|
|
|
|
@keyframes matrix {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 0 -1000px; }
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
100% { transform: translateY(0px); }
|
|
}
|
|
|
|
@keyframes scan {
|
|
0% { top: -100%; }
|
|
100% { top: 100%; }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from { transform: translateY(-20px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
@keyframes progress {
|
|
from { width: 0%; }
|
|
to { width: var(--progress-width); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-dark text-neon font-code min-h-screen overflow-hidden flex flex-col items-center justify-center p-4 bg-mesh">
|
|
<!-- 背景效果 -->
|
|
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-dark/80 via-dark/90 to-dark opacity-70"></div>
|
|
<div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_rgba(0,255,234,0.15),transparent_70%)]"></div>
|
|
<div id="matrix-bg" class="absolute top-0 left-0 w-full h-full text-matrix opacity-30 text-xs animate-matrix">
|
|
<!-- 由JS动态填充 -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主容器 -->
|
|
<div class="relative z-10 w-full max-w-6xl mx-auto">
|
|
<!-- 标题 -->
|
|
<div class="text-center mb-8 animate-float">
|
|
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold tracking-wider text-glow">TERMINATION<span class="text-accent">4.1.0</span></h1>
|
|
<p class="text-sm md:text-base mt-2 text-primary/70 tracking-widest">AUTHORIZATION SYSTEM</p>
|
|
</div>
|
|
|
|
<!-- 主界面容器 -->
|
|
<div id="auth-container" class="relative bg-dark/70 backdrop-blur-sm border border-primary/50 rounded-lg p-6 md:p-8 shadow-lg border-glow">
|
|
<!-- 扫描线效果 -->
|
|
<div class="absolute inset-0 overflow-hidden rounded-lg pointer-events-none">
|
|
<div class="absolute w-full h-1 bg-gradient-to-r from-transparent via-primary/50 to-transparent animate-scan"></div>
|
|
</div>
|
|
|
|
<!-- 系统状态卡片 -->
|
|
<!--别看了都是硬编码的,单纯为了给那群煞笔耍帅看的,有权限看到这个页面就说明够有权限了-->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-dark/50 border border-info/30 rounded-lg p-4 animate-fade-in" style="animation-delay: 0.1s">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<h3 class="text-info text-sm font-medium">数据服务器状态</h3>
|
|
<span class="text-success text-xs">在线</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="text-3xl mr-3">
|
|
<i class="fa fa-server text-info"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-info/70">CPU 使用率</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-1 mb-2">
|
|
<div class="h-full bg-info" style="width: 25%"></div>
|
|
</div>
|
|
<div class="text-xs text-info/70">内存使用</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-1">
|
|
<div class="h-full bg-info" style="width: 40%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-dark/50 border border-warning/30 rounded-lg p-4 animate-fade-in" style="animation-delay: 0.2s">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<h3 class="text-warning text-sm font-medium">安全级别</h3>
|
|
<span class="text-warning text-xs">军事级</span><!--别笑,这么加密还真就是军事级-->
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="text-3xl mr-3">
|
|
<i class="fa fa-shield text-warning"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-warning/70">加密强度</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-1 mb-2">
|
|
<div class="h-full bg-warning" style="width: 92%"></div>
|
|
</div>
|
|
<div class="text-xs text-warning/70">防护状态</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-1">
|
|
<div class="h-full bg-warning" style="width: 99%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-dark/50 border border-secondary/30 rounded-lg p-4 animate-fade-in" style="animation-delay: 0.3s">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<h3 class="text-secondary text-sm font-medium">授权信息</h3>
|
|
<span class="text-secondary text-xs">未授权</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="text-3xl mr-3">
|
|
<i class="fa fa-key text-secondary"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs text-secondary/70">授权有效期</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-1 mb-2">
|
|
<div class="h-full bg-secondary" style="width: 0%"></div>
|
|
</div>
|
|
<div class="text-xs text-secondary/70">剩余时间</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-1">
|
|
<div class="h-full bg-secondary" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 输入区域 -->
|
|
<div id="input-section" class="space-y-6 animate-fade-in" style="animation-delay: 0.4s">
|
|
<div class="bg-dark/50 border border-primary/30 rounded-lg p-6">
|
|
<div class="space-y-3">
|
|
<p class="text-sm text-primary/80">请输入授权密码</p>
|
|
<div class="relative">
|
|
<input
|
|
type="password"
|
|
id="auth-password"
|
|
class="w-full bg-dark/80 border border-primary/30 rounded px-4 py-3 text-primary focus:outline-none focus:border-primary focus:border-glow transition-all duration-300"
|
|
>
|
|
<div class="absolute right-3 top-1/2 -translate-y-1/2">
|
|
<button id="toggle-password" class="text-primary/60 hover:text-primary transition-colors">
|
|
<i class="fa fa-eye-slash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<button
|
|
id="auth-button"
|
|
class="w-full bg-primary/20 hover:bg-primary/30 border border-primary/50 text-primary py-3 rounded-lg transition-all duration-300 hover:border-glow hover:text-glow font-medium"
|
|
>
|
|
<i class="fa fa-unlock-alt mr-2"></i> 验证授权
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 结果区域 (初始隐藏) -->
|
|
<div id="result-section" class="space-y-6 hidden">
|
|
<div id="success-message" class="hidden">
|
|
<div class="bg-dark/50 border border-secondary/30 rounded-lg p-6 text-center">
|
|
<div class="text-secondary text-glow text-2xl mb-4">
|
|
<i class="fa fa-check-circle"></i> 验证成功
|
|
</div>
|
|
<p class="text-sm text-primary/80 mb-4">临时授权代码已生成</p>
|
|
<div class="bg-dark/80 border border-secondary/30 rounded p-4 mb-6">
|
|
<code id="auth-code" class="text-secondary text-glow text-lg font-mono tracking-widest"></code>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
<div class="bg-dark/60 border border-info/30 rounded p-4">
|
|
<p class="text-xs text-info/70 mb-1">授权有效期</p>
|
|
<p id="expiry-time" class="text-info text-glow font-mono"></p>
|
|
<div class="h-2 bg-dark/80 rounded-full overflow-hidden mt-2">
|
|
<div id="expiry-progress" class="h-full bg-info" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-dark/60 border border-warning/30 rounded p-4">
|
|
<p class="text-xs text-warning/70 mb-1">安全等级</p>
|
|
<p id="security-level" class="text-warning text-glow font-mono">军事级加密</p>
|
|
<div class="h-2 bg-dark/80 rounded-full overflow-hidden mt-2">
|
|
<div class="bg-warning" style="width: 95%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-dark/60 border border-primary/30 rounded p-4">
|
|
<p class="text-xs text-primary/70 mb-2">系统资源使用情况</p>
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<div>
|
|
<p class="text-xs text-primary/60 mb-1">CPU</p>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary" style="width: 35%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-primary/60 mb-1">内存</p>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary" style="width: 45%"></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-primary/60 mb-1">网络</p>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden">
|
|
<div class="h-full bg-primary" style="width: 20%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="error-message" class="hidden">
|
|
<div class="bg-dark/50 border border-accent/30 rounded-lg p-6 text-center">
|
|
<div class="text-accent text-glow text-2xl mb-4">
|
|
<i class="fa fa-times-circle"></i> 验证失败
|
|
</div>
|
|
<p class="text-sm text-primary/80 mb-4">授权密码不正确,请重试</p>
|
|
<div class="bg-dark/80 border border-accent/30 rounded p-4 mb-6 text-left">
|
|
<p class="text-xs text-accent/80">
|
|
<i class="fa fa-exclamation-triangle mr-1"></i> 安全提示:多次尝试失败可能导致账户锁定
|
|
</p>
|
|
<p class="text-xs text-accent/60 mt-2">
|
|
<i class="fa fa-lock mr-1"></i> 剩余尝试次数:3
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="reset-button"
|
|
class="w-full bg-primary/20 hover:bg-primary/30 border border-primary/50 text-primary py-3 rounded-lg transition-all duration-300 hover:border-glow hover:text-glow font-medium"
|
|
>
|
|
<i class="fa fa-refresh mr-2"></i> 返回
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部信息 -->
|
|
<div class="text-center mt-8 text-xs text-primary/40 tracking-widest">
|
|
<p>SYSTEM AUTHORIZATION INTERFACE v1.0.0</p>
|
|
<p class="mt-1">IF U DARE TO PRESS CTRL U TO VIEW THE SOURCE CODE I WILL KILL U</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 验证窗口 (初始隐藏) -->
|
|
<div id="verification-window" class="fixed inset-0 z-50 flex items-center justify-center p-4 hidden">
|
|
<div class="absolute inset-0 bg-dark/90 backdrop-blur-sm"></div>
|
|
<div class="relative w-full max-w-6xl bg-dark/70 border border-primary/50 rounded-lg shadow-xl border-glow overflow-hidden animate-fade-in">
|
|
<!-- 窗口标题栏 -->
|
|
<div class="bg-primary/10 border-b border-primary/30 px-4 py-2 flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 rounded-full bg-error mr-2"></div>
|
|
<div class="w-3 h-3 rounded-full bg-warning mr-2"></div>
|
|
<div class="w-3 h-3 rounded-full bg-success"></div>
|
|
<span class="ml-4 text-primary text-sm">Termination 4.2.0 授权验证系统</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<button id="minimize-verification" class="text-primary/60 hover:text-primary transition-colors mr-3">
|
|
<i class="fa fa-window-minimize"></i>
|
|
</button>
|
|
<button id="maximize-verification" class="text-primary/60 hover:text-primary transition-colors mr-3">
|
|
<i class="fa fa-window-maximize"></i>
|
|
</button>
|
|
<button id="close-verification" class="text-primary/60 hover:text-primary transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 验证内容区 -->
|
|
<div class="p-4">
|
|
<!-- 验证进度 -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="text-sm text-primary/80">总体验证进度</div>
|
|
<div class="text-xs text-primary/60" id="verification-percentage">0%</div>
|
|
</div>
|
|
<div class="h-2.5 bg-dark/80 rounded-full overflow-hidden border border-primary/30">
|
|
<div id="verification-progress" class="h-full bg-gradient-to-r from-primary via-secondary to-info w-0 transition-all duration-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 验证指标卡片 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-dark/60 border border-info/30 rounded-lg p-3 animate-fade-in" style="animation-delay: 0.1s">
|
|
<div class="text-xs text-info/70 mb-1">SHA256 验证</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="text-info text-sm">进行中</div>
|
|
<div class="text-xs text-info/60">65%</div>
|
|
</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-2">
|
|
<div class="h-full bg-info" style="width: 65%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-dark/60 border border-warning/30 rounded-lg p-3 animate-fade-in" style="animation-delay: 0.2s">
|
|
<div class="text-xs text-warning/70 mb-1">MD5 验证</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="text-warning text-sm">已完成</div>
|
|
<div class="text-xs text-warning/60">100%</div>
|
|
</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-2">
|
|
<div class="h-full bg-warning" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-dark/60 border border-secondary/30 rounded-lg p-3 animate-fade-in" style="animation-delay: 0.3s">
|
|
<div class="text-xs text-secondary/70 mb-1">AES 加解密</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="text-secondary text-sm">进行中</div>
|
|
<div class="text-xs text-secondary/60">45%</div>
|
|
</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-2">
|
|
<div class="h-full bg-secondary" style="width: 45%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-dark/60 border border-accent/30 rounded-lg p-3 animate-fade-in" style="animation-delay: 0.4s">
|
|
<div class="text-xs text-accent/70 mb-1">数据链验证</div>
|
|
<div class="flex justify-between items-center">
|
|
<div class="text-accent text-sm">待执行</div>
|
|
<div class="text-xs text-accent/60">0%</div>
|
|
</div>
|
|
<div class="h-1.5 bg-dark/80 rounded-full overflow-hidden mt-2">
|
|
<div class="h-full bg-accent" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 验证选项卡 -->
|
|
<div class="flex border-b border-primary/30 mb-4">
|
|
<button class="verification-tab py-2 px-4 text-primary text-sm border-b-2 border-primary" data-tab="all">
|
|
<i class="fa fa-list-ul mr-1"></i> 全部进程
|
|
</button>
|
|
<button class="verification-tab py-2 px-4 text-primary/60 text-sm border-b-2 border-transparent" data-tab="sha256">
|
|
<i class="fa fa-shield mr-1"></i> SHA256 计算
|
|
</button>
|
|
<button class="verification-tab py-2 px-4 text-primary/60 text-sm border-b-2 border-transparent" data-tab="md5">
|
|
<i class="fa fa-lock mr-1"></i> MD5 计算
|
|
</button>
|
|
<button class="verification-tab py-2 px-4 text-primary/60 text-sm border-b-2 border-transparent" data-tab="aes">
|
|
<i class="fa fa-key mr-1"></i> AES 加解密
|
|
</button>
|
|
<button class="verification-tab py-2 px-4 text-primary/60 text-sm border-b-2 border-transparent" data-tab="datalink">
|
|
<i class="fa fa-link mr-1"></i> 数据链验证
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 验证日志区域 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
<!-- 左侧:验证摘要 -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-dark/60 border border-primary/30 rounded-lg h-[400px] overflow-hidden">
|
|
<div class="bg-primary/10 px-3 py-2 text-sm border-b border-primary/30 flex justify-between items-center">
|
|
<span>验证摘要</span>
|
|
<span class="text-xs text-primary/60" id="summary-count">0/0 步骤</span>
|
|
</div>
|
|
<div id="summary-log" class="p-3 text-xs text-matrix/80 space-y-2 h-[364px] overflow-y-auto scrollbar-thin">
|
|
<!-- 验证摘要将通过JS动态添加 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧:详细计算过程 -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-dark/60 border border-primary/30 rounded-lg h-[400px] overflow-hidden">
|
|
<div class="bg-primary/10 px-3 py-2 text-sm border-b border-primary/30 flex justify-between items-center">
|
|
<span id="detail-title">全部验证过程</span>
|
|
<span id="current-step" class="text-xs text-primary/60">步骤 0/0</span>
|
|
</div>
|
|
<div id="detail-log" class="p-3 text-xs text-matrix/80 space-y-1 h-[364px] overflow-y-auto scrollbar-thin">
|
|
<!-- 详细验证过程将通过JS动态添加 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部控制区 -->
|
|
<div class="mt-6 flex justify-between items-center">
|
|
<div class="text-xs text-primary/60">
|
|
<span id="verification-status">准备验证...</span>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button id="pause-verification" class="bg-dark/60 hover:bg-dark/40 border border-warning/30 text-warning px-4 py-2 rounded-lg transition-all duration-300 hover:border-glow hover:text-glow text-sm hidden">
|
|
<i class="fa fa-pause mr-1"></i> 暂停
|
|
</button>
|
|
<button id="resume-verification" class="bg-dark/60 hover:bg-dark/40 border border-secondary/30 text-secondary px-4 py-2 rounded-lg transition-all duration-300 hover:border-glow hover:text-glow text-sm hidden">
|
|
<i class="fa fa-play mr-1"></i> 继续
|
|
</button>
|
|
<button id="cancel-verification" class="bg-dark/60 hover:bg-dark/40 border border-error/30 text-error px-4 py-2 rounded-lg transition-all duration-300 hover:border-glow hover:text-glow text-sm">
|
|
<i class="fa fa-stop mr-1"></i> 取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面加载完成后执行
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 生成矩阵背景
|
|
generateMatrixBackground();
|
|
|
|
// 获取DOM元素
|
|
const authPassword = document.getElementById('auth-password');
|
|
const authButton = document.getElementById('auth-button');
|
|
const togglePassword = document.getElementById('toggle-password');
|
|
const inputSection = document.getElementById('input-section');
|
|
const resultSection = document.getElementById('result-section');
|
|
const successMessage = document.getElementById('success-message');
|
|
const errorMessage = document.getElementById('error-message');
|
|
const resetButton = document.getElementById('reset-button');
|
|
const authCode = document.getElementById('auth-code');
|
|
const expiryTime = document.getElementById('expiry-time');
|
|
const expiryProgress = document.getElementById('expiry-progress');
|
|
|
|
// 验证窗口元素
|
|
const verificationWindow = document.getElementById('verification-window');
|
|
const verificationProgress = document.getElementById('verification-progress');
|
|
const verificationPercentage = document.getElementById('verification-percentage');
|
|
const summaryLog = document.getElementById('summary-log');
|
|
const detailLog = document.getElementById('detail-log');
|
|
const detailTitle = document.getElementById('detail-title');
|
|
const currentStep = document.getElementById('current-step');
|
|
const verificationStatus = document.getElementById('verification-status');
|
|
const closeVerification = document.getElementById('close-verification');
|
|
const cancelVerification = document.getElementById('cancel-verification');
|
|
const pauseVerification = document.getElementById('pause-verification');
|
|
const resumeVerification = document.getElementById('resume-verification');
|
|
const verificationTabs = document.querySelectorAll('.verification-tab');
|
|
const summaryCount = document.getElementById('summary-count');
|
|
|
|
// 窗口控制元素
|
|
const minimizeVerification = document.getElementById('minimize-verification');
|
|
const maximizeVerification = document.getElementById('maximize-verification');
|
|
|
|
// 状态变量
|
|
let verificationPaused = false;
|
|
let verificationSteps = [];
|
|
let currentStepIndex = 0;
|
|
let verificationInterval = null;
|
|
|
|
// 切换密码可见性
|
|
togglePassword.addEventListener('click', function() {
|
|
const type = authPassword.getAttribute('type') === 'password' ? 'text' : 'password';
|
|
authPassword.setAttribute('type', type);
|
|
this.innerHTML = type === 'password' ? '<i class="fa fa-eye-slash"></i>' : '<i class="fa fa-eye"></i>';
|
|
});
|
|
|
|
// 验证按钮点击事件
|
|
authButton.addEventListener('click', function() {
|
|
const password = authPassword.value.trim();
|
|
|
|
// 简单验证 - 实际应用中应该与后端验证
|
|
if (password) {
|
|
startVerification(password);
|
|
} else {
|
|
shakeInput();
|
|
}
|
|
});
|
|
|
|
// 回车键触发验证
|
|
authPassword.addEventListener('keyup', function(event) {
|
|
if (event.key === 'Enter') {
|
|
authButton.click();
|
|
}
|
|
});
|
|
|
|
// 返回按钮点击事件
|
|
resetButton.addEventListener('click', function() {
|
|
resetVerification();
|
|
});
|
|
|
|
// 关闭验证窗口
|
|
closeVerification.addEventListener('click', function() {
|
|
verificationWindow.classList.add('hidden');
|
|
resetVerification();
|
|
});
|
|
|
|
// 取消验证
|
|
cancelVerification.addEventListener('click', function() {
|
|
verificationWindow.classList.add('hidden');
|
|
resetVerification();
|
|
});
|
|
|
|
// 暂停验证
|
|
pauseVerification.addEventListener('click', function() {
|
|
verificationPaused = true;
|
|
pauseVerification.classList.add('hidden');
|
|
resumeVerification.classList.remove('hidden');
|
|
verificationStatus.textContent = '验证已暂停';
|
|
clearInterval(verificationInterval);
|
|
});
|
|
|
|
// 恢复验证
|
|
resumeVerification.addEventListener('click', function() {
|
|
verificationPaused = false;
|
|
pauseVerification.classList.remove('hidden');
|
|
resumeVerification.classList.add('hidden');
|
|
verificationStatus.textContent = '继续验证...';
|
|
|
|
// 继续执行验证步骤
|
|
executeNextStep();
|
|
});
|
|
|
|
// 最小化验证窗口
|
|
minimizeVerification.addEventListener('click', function() {
|
|
verificationWindow.classList.add('hidden');
|
|
// 在实际应用中,这里应该有一个小的浮动窗口显示验证进度
|
|
});
|
|
|
|
// 最大化验证窗口
|
|
maximizeVerification.addEventListener('click', function() {
|
|
const verificationContent = verificationWindow.querySelector('.relative');
|
|
if (verificationContent.classList.contains('max-w-6xl')) {
|
|
verificationContent.classList.remove('max-w-6xl');
|
|
verificationContent.classList.add('w-full', 'h-full');
|
|
maximizeVerification.innerHTML = '<i class="fa fa-window-restore"></i>';
|
|
} else {
|
|
verificationContent.classList.add('max-w-6xl');
|
|
verificationContent.classList.remove('w-full', 'h-full');
|
|
maximizeVerification.innerHTML = '<i class="fa fa-window-maximize"></i>';
|
|
}
|
|
});
|
|
|
|
// 切换验证选项卡
|
|
verificationTabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
// 移除所有选项卡的激活状态
|
|
verificationTabs.forEach(t => {
|
|
t.classList.remove('text-primary', 'border-primary');
|
|
t.classList.add('text-primary/60', 'border-transparent');
|
|
});
|
|
|
|
// 添加当前选项卡的激活状态
|
|
this.classList.remove('text-primary/60', 'border-transparent');
|
|
this.classList.add('text-primary', 'border-primary');
|
|
|
|
// 更新详细日志内容
|
|
const tabId = this.getAttribute('data-tab');
|
|
updateDetailLog(tabId);
|
|
});
|
|
});
|
|
|
|
// 开始验证过程
|
|
function startVerification(password) {
|
|
// 重置验证状态
|
|
resetVerificationState();
|
|
|
|
// 显示验证窗口
|
|
verificationWindow.classList.remove('hidden');
|
|
|
|
// 设置初始状态
|
|
verificationStatus.textContent = '开始验证...';
|
|
detailTitle.textContent = '全部验证过程';
|
|
currentStep.textContent = '步骤 0/0';
|
|
pauseVerification.classList.remove('hidden');
|
|
resumeVerification.classList.add('hidden');
|
|
|
|
// 生成验证数据
|
|
verificationSteps = generateVerificationData(password);
|
|
|
|
// 更新摘要计数
|
|
summaryCount.textContent = `0/${verificationSteps.length} 步骤`;
|
|
|
|
// 总验证步骤数
|
|
const totalSteps = verificationSteps.length;
|
|
currentStepIndex = 0;
|
|
|
|
// 执行下一步验证
|
|
executeNextStep();
|
|
}
|
|
|
|
// 执行下一步验证
|
|
function executeNextStep() {
|
|
if (verificationPaused) return;
|
|
|
|
if (currentStepIndex >= verificationSteps.length) {
|
|
// 验证完成
|
|
verificationComplete();
|
|
return;
|
|
}
|
|
|
|
// 获取当前步骤数据
|
|
const stepData = verificationSteps[currentStepIndex];
|
|
currentStepIndex++;
|
|
|
|
// 更新步骤显示
|
|
currentStep.textContent = `步骤 ${currentStepIndex}/${verificationSteps.length}`;
|
|
summaryCount.textContent = `${currentStepIndex}/${verificationSteps.length} 步骤`;
|
|
|
|
// 计算并更新进度
|
|
const progress = (currentStepIndex / verificationSteps.length) * 100;
|
|
verificationProgress.style.width = `${progress}%`;
|
|
verificationProgress.style.setProperty('--progress-width', `${progress}%`);
|
|
verificationPercentage.textContent = `${Math.round(progress)}%`;
|
|
|
|
// 添加到摘要日志
|
|
addSummaryLog(stepData);
|
|
|
|
// 添加到详细日志
|
|
if (stepData.details) {
|
|
stepData.details.forEach(detail => {
|
|
addDetailLog(detail.message, currentStepIndex, detail.type, stepData.category);
|
|
});
|
|
}
|
|
|
|
// 更新状态
|
|
verificationStatus.textContent = stepData.status;
|
|
|
|
// 设置下一步的延迟
|
|
verificationInterval = setTimeout(executeNextStep, stepData.delay || 100);
|
|
}
|
|
|
|
// 添加摘要日志
|
|
function addSummaryLog(stepData) {
|
|
const logElement = document.createElement('div');
|
|
logElement.className = `flex items-center p-2 rounded ${stepData.type === 'success' ? 'bg-success/10 border border-success/30' :
|
|
stepData.type === 'error' ? 'bg-error/10 border border-error/30' :
|
|
stepData.type === 'warning' ? 'bg-warning/10 border border-warning/30' : 'bg-dark/60 border border-primary/30'}`;
|
|
|
|
// 步骤编号
|
|
const stepNumber = document.createElement('div');
|
|
stepNumber.className = 'w-6 h-6 rounded-full flex items-center justify-center mr-3 text-xs font-medium';
|
|
stepNumber.className += stepData.type === 'success' ? ' bg-success/20 text-success' :
|
|
stepData.type === 'error' ? ' bg-error/20 text-error' :
|
|
stepData.type === 'warning' ? ' bg-warning/20 text-warning' : ' bg-primary/20 text-primary';
|
|
stepNumber.textContent = currentStepIndex;
|
|
logElement.appendChild(stepNumber);
|
|
|
|
// 步骤图标
|
|
const stepIcon = document.createElement('i');
|
|
stepIcon.className = `fa ${stepData.type === 'success' ? 'fa-check-circle' :
|
|
stepData.type === 'error' ? 'fa-times-circle' :
|
|
stepData.type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle'} mr-2`;
|
|
stepIcon.className += stepData.type === 'success' ? ' text-success' :
|
|
stepData.type === 'error' ? ' text-error' :
|
|
stepData.type === 'warning' ? ' text-warning' : ' text-primary';
|
|
|
|
// 步骤内容
|
|
const stepContent = document.createElement('div');
|
|
stepContent.className = 'flex-1';
|
|
|
|
const stepSummary = document.createElement('div');
|
|
stepSummary.className = 'text-sm';
|
|
stepSummary.textContent = stepData.summary;
|
|
|
|
const stepCategory = document.createElement('div');
|
|
stepCategory.className = 'text-xs text-primary/60';
|
|
stepCategory.textContent = `[${stepData.category.toUpperCase()}] ${stepData.status}`;
|
|
|
|
stepContent.appendChild(stepSummary);
|
|
stepContent.appendChild(stepCategory);
|
|
|
|
logElement.appendChild(stepIcon);
|
|
logElement.appendChild(stepContent);
|
|
|
|
// 添加进度指示器
|
|
if (stepData.progress) {
|
|
const progressContainer = document.createElement('div');
|
|
progressContainer.className = 'w-24 h-1.5 bg-dark/80 rounded-full overflow-hidden ml-3';
|
|
|
|
const progressBar = document.createElement('div');
|
|
progressBar.className = 'h-full';
|
|
progressBar.className += stepData.type === 'success' ? ' bg-success' :
|
|
stepData.type === 'error' ? ' bg-error' :
|
|
stepData.type === 'warning' ? ' bg-warning' : ' bg-primary';
|
|
progressBar.style.width = `${stepData.progress}%`;
|
|
|
|
progressContainer.appendChild(progressBar);
|
|
logElement.appendChild(progressContainer);
|
|
}
|
|
|
|
// 添加到摘要日志
|
|
summaryLog.appendChild(logElement);
|
|
summaryLog.scrollTop = summaryLog.scrollHeight;
|
|
}
|
|
|
|
// 添加详细日志
|
|
function addDetailLog(message, step, type, category) {
|
|
const logElement = document.createElement('div');
|
|
logElement.className = type === 'success' ? 'text-secondary' :
|
|
type === 'error' ? 'text-accent' :
|
|
type === 'warning' ? 'text-warning' : 'text-matrix/80';
|
|
logElement.setAttribute('data-category', category);
|
|
|
|
// 添加步骤编号
|
|
const stepNumber = document.createElement('span');
|
|
stepNumber.className = 'text-primary/50 mr-2';
|
|
stepNumber.textContent = `[${step.toString().padStart(3, '0')}]`;
|
|
logElement.appendChild(stepNumber);
|
|
|
|
// 添加类别标签
|
|
const categoryTag = document.createElement('span');
|
|
categoryTag.className = `inline-block px-1.5 py-0.5 rounded text-[10px] mr-2`;
|
|
categoryTag.className += category === 'sha256' ? ' bg-info/20 text-info' :
|
|
category === 'md5' ? ' bg-warning/20 text-warning' :
|
|
category === 'aes' ? ' bg-secondary/20 text-secondary' :
|
|
category === 'datalink' ? ' bg-accent/20 text-accent' : ' bg-primary/20 text-primary';
|
|
categoryTag.textContent = category.toUpperCase();
|
|
logElement.appendChild(categoryTag);
|
|
|
|
// 添加消息内容
|
|
const messageSpan = document.createElement('span');
|
|
messageSpan.textContent = message;
|
|
logElement.appendChild(messageSpan);
|
|
|
|
// 添加到详细日志
|
|
detailLog.appendChild(logElement);
|
|
|
|
// 如果是当前选中的选项卡,则滚动到底部
|
|
const activeTab = document.querySelector('.verification-tab.text-primary');
|
|
if (activeTab.getAttribute('data-tab') === 'all' ||
|
|
activeTab.getAttribute('data-tab') === category) {
|
|
detailLog.scrollTop = detailLog.scrollHeight;
|
|
}
|
|
}
|
|
|
|
// 验证完成
|
|
function verificationComplete() {
|
|
verificationStatus.textContent = '验证完成';
|
|
pauseVerification.classList.add('hidden');
|
|
resumeVerification.classList.add('hidden');
|
|
|
|
// 短暂延迟后显示结果
|
|
setTimeout(function() {
|
|
const password = authPassword.value.trim();
|
|
verificationWindow.classList.add('hidden');
|
|
inputSection.classList.add('hidden');
|
|
resultSection.classList.remove('hidden');
|
|
|
|
// 生成授权码
|
|
if (password === "TERMINATION420") { // 预设密码
|
|
successMessage.classList.remove('hidden');
|
|
authCode.textContent = generateAuthCode();
|
|
|
|
// 设置过期时间
|
|
const now = new Date();
|
|
now.setMinutes(now.getMinutes() + 10);
|
|
expiryTime.textContent = now.toLocaleTimeString();
|
|
|
|
// 启动倒计时
|
|
startExpiryCountdown(now);
|
|
} else {
|
|
errorMessage.classList.remove('hidden');
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
// 启动过期倒计时
|
|
function startExpiryCountdown(expiryDate) {
|
|
const countdownInterval = setInterval(function() {
|
|
const now = new Date();
|
|
const diff = expiryDate - now;
|
|
|
|
if (diff <= 0) {
|
|
clearInterval(countdownInterval);
|
|
expiryTime.textContent = '已过期';
|
|
expiryProgress.style.width = '0%';
|
|
return;
|
|
}
|
|
|
|
const minutes = Math.floor(diff / 60000);
|
|
const seconds = Math.floor((diff % 60000) / 1000);
|
|
|
|
expiryTime.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
|
|
|
// 更新进度条
|
|
const totalTime = 10 * 60 * 1000; // 10分钟
|
|
const remainingTime = diff;
|
|
const progress = (remainingTime / totalTime) * 100;
|
|
expiryProgress.style.width = `${progress}%`;
|
|
|
|
}, 1000);
|
|
}
|
|
|
|
// 重置验证过程
|
|
function resetVerification() {
|
|
inputSection.classList.remove('hidden');
|
|
resultSection.classList.add('hidden');
|
|
successMessage.classList.add('hidden');
|
|
errorMessage.classList.add('hidden');
|
|
authPassword.value = '';
|
|
resetVerificationState();
|
|
}
|
|
|
|
// 重置验证状态
|
|
function resetVerificationState() {
|
|
verificationPaused = false;
|
|
verificationSteps = [];
|
|
currentStepIndex = 0;
|
|
clearInterval(verificationInterval);
|
|
|
|
verificationProgress.style.width = '0%';
|
|
verificationPercentage.textContent = '0%';
|
|
summaryLog.innerHTML = '';
|
|
detailLog.innerHTML = '';
|
|
verificationStatus.textContent = '准备验证...';
|
|
}
|
|
|
|
// 更新详细日志内容
|
|
function updateDetailLog(tabId) {
|
|
const logs = detailLog.querySelectorAll('div');
|
|
const title = tabId === 'all' ? '全部验证过程' :
|
|
tabId === 'sha256' ? 'SHA256 计算过程' :
|
|
tabId === 'md5' ? 'MD5 计算过程' :
|
|
tabId === 'aes' ? 'AES 加解密过程' : '数据链验证过程';
|
|
|
|
detailTitle.textContent = title;
|
|
|
|
logs.forEach(log => {
|
|
if (tabId === 'all' || log.getAttribute('data-category') === tabId) {
|
|
log.classList.remove('hidden');
|
|
} else {
|
|
log.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// 滚动到底部
|
|
detailLog.scrollTop = detailLog.scrollHeight;
|
|
}
|
|
|
|
// 生成授权码
|
|
function generateAuthCode() {
|
|
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
|
let code = '';
|
|
for (let i = 0; i < 32; i++) {
|
|
code += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
if ((i + 1) % 8 === 0 && i < 31) {
|
|
code += '-';
|
|
}
|
|
}
|
|
return code;
|
|
}
|
|
|
|
// 生成矩阵背景
|
|
function generateMatrixBackground() {
|
|
const matrixBg = document.getElementById('matrix-bg');
|
|
const chars = '0123456789ABCDEF';
|
|
const columns = Math.floor(window.innerWidth / 10);
|
|
|
|
for (let i = 0; i < columns; i++) {
|
|
const column = document.createElement('div');
|
|
column.className = 'absolute left-[calc(' + i + '*10px)] top-0';
|
|
|
|
for (let j = 0; j < 20; j++) {
|
|
const char = document.createElement('span');
|
|
char.className = 'opacity-0 transition-opacity duration-1000';
|
|
char.textContent = chars.charAt(Math.floor(Math.random() * chars.length));
|
|
char.style.opacity = Math.random() * 0.5 + 0.2;
|
|
char.style.animationDelay = Math.random() * 5 + 's';
|
|
char.style.animationDuration = Math.random() * 3 + 2 + 's';
|
|
column.appendChild(char);
|
|
|
|
// 随机换行
|
|
if (Math.random() > 0.8) {
|
|
column.appendChild(document.createElement('br'));
|
|
}
|
|
}
|
|
|
|
matrixBg.appendChild(column);
|
|
}
|
|
|
|
// 动画效果
|
|
animateMatrixChars();
|
|
}
|
|
|
|
// 矩阵字符动画
|
|
function animateMatrixChars() {
|
|
const matrixChars = document.querySelectorAll('#matrix-bg span');
|
|
|
|
setInterval(() => {
|
|
matrixChars.forEach(char => {
|
|
if (Math.random() < 0.05) {
|
|
char.textContent = '0123456789ABCDEF'.charAt(Math.floor(Math.random() * 16));
|
|
|
|
// 闪烁效果
|
|
char.style.opacity = '0';
|
|
setTimeout(() => {
|
|
char.style.opacity = Math.random() * 0.5 + 0.2;
|
|
}, 100);
|
|
}
|
|
});
|
|
}, 100);
|
|
}
|
|
|
|
// 生成验证数据
|
|
function generateVerificationData(password) {
|
|
// 模拟验证步骤
|
|
return [
|
|
{
|
|
category: 'system',
|
|
summary: '启动安全验证系统',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 0,
|
|
delay: 500,
|
|
details: [
|
|
{ message: '初始化验证环境...', type: 'info' },
|
|
{ message: '加载安全模块...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'sha256',
|
|
summary: '计算系统文件 SHA256 哈希值',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 0,
|
|
delay: 1000,
|
|
details: [
|
|
{ message: '正在读取系统文件...', type: 'info' },
|
|
{ message: '初始化 SHA256 算法...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'sha256',
|
|
summary: '验证 /system/core 目录',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 25,
|
|
delay: 800,
|
|
details: [
|
|
{ message: '计算 core_module.dll 的哈希值...', type: 'info' },
|
|
{ message: '验证文件完整性...', type: 'info' },
|
|
{ message: '文件校验通过', type: 'success' }
|
|
]
|
|
},
|
|
{
|
|
category: 'sha256',
|
|
summary: '验证 /system/lib 目录',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 50,
|
|
delay: 900,
|
|
details: [
|
|
{ message: '计算 security_layer.so 的哈希值...', type: 'info' },
|
|
{ message: '文件校验通过', type: 'success' },
|
|
{ message: '计算 encryption_engine.dll 的哈希值...', type: 'info' },
|
|
{ message: '文件校验通过', type: 'success' }
|
|
]
|
|
},
|
|
{
|
|
category: 'sha256',
|
|
summary: '验证 /bin 目录',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 75,
|
|
delay: 700,
|
|
details: [
|
|
{ message: '计算 auth_service 的哈希值...', type: 'info' },
|
|
{ message: '文件校验通过', type: 'success' },
|
|
{ message: '计算 verification_tool 的哈希值...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'sha256',
|
|
summary: 'SHA256 验证完成',
|
|
status: '成功',
|
|
type: 'success',
|
|
progress: 100,
|
|
delay: 500,
|
|
details: [
|
|
{ message: '所有系统文件哈希值验证通过', type: 'success' },
|
|
{ message: '系统完整性: 100%', type: 'success' }
|
|
]
|
|
},
|
|
{
|
|
category: 'md5',
|
|
summary: '计算授权文件 MD5 哈希值',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 0,
|
|
delay: 600,
|
|
details: [
|
|
{ message: '定位授权文件...', type: 'info' },
|
|
{ message: '读取授权证书...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'md5',
|
|
summary: '验证授权证书签名',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 50,
|
|
delay: 800,
|
|
details: [
|
|
{ message: '提取证书公钥...', type: 'info' },
|
|
{ message: '验证数字签名...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'md5',
|
|
summary: 'MD5 验证完成',
|
|
status: '成功',
|
|
type: 'success',
|
|
progress: 100,
|
|
delay: 500,
|
|
details: [
|
|
{ message: '授权证书签名验证通过', type: 'success' },
|
|
{ message: '证书有效期至: 2025-12-31', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'aes',
|
|
summary: '初始化 AES 加密引擎',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 0,
|
|
delay: 700,
|
|
details: [
|
|
{ message: '生成临时加密密钥...', type: 'info' },
|
|
{ message: '初始化 AES-256-CBC 加密模式...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'aes',
|
|
summary: '解密授权密码',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 50,
|
|
delay: 1000,
|
|
details: [
|
|
{ message: '应用盐值...', type: 'info' },
|
|
{ message: '执行10000次迭代...', type: 'info' },
|
|
{ message: '生成加密密钥...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'aes',
|
|
summary: '验证密码哈希值',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 80,
|
|
delay: 1200,
|
|
details: [
|
|
{ message: '计算输入密码的哈希值...', type: 'info' },
|
|
{ message: '与存储的哈希值比较...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'aes',
|
|
summary: '密码验证完成',
|
|
status: password === "TERMINATION420" ? '成功' : '失败',
|
|
type: password === "TERMINATION420" ? 'success' : 'error',
|
|
progress: 100,
|
|
delay: 500,
|
|
details: [
|
|
{ message: password === "TERMINATION420" ? '密码验证通过' : '密码验证失败', type: password === "TERMINATION420" ? 'success' : 'error' },
|
|
{ message: password === "TERMINATION420" ? '授权级别: 管理员' : '授权级别: 拒绝访问', type: password === "TERMINATION420" ? 'success' : 'error' }
|
|
]
|
|
},
|
|
{
|
|
category: 'datalink',
|
|
summary: '建立安全数据链',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 0,
|
|
delay: 800,
|
|
details: [
|
|
{ message: '初始化 TLS 1.3 握手...', type: 'info' },
|
|
{ message: '生成会话密钥...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'datalink',
|
|
summary: '验证服务器证书',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 50,
|
|
delay: 1000,
|
|
details: [
|
|
{ message: '检查证书颁发机构...', type: 'info' },
|
|
{ message: '验证证书链...', type: 'info' },
|
|
{ message: '检查证书有效期...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'datalink',
|
|
summary: '数据链验证完成',
|
|
status: '成功',
|
|
type: 'success',
|
|
progress: 100,
|
|
delay: 800,
|
|
details: [
|
|
{ message: '安全连接已建立', type: 'success' },
|
|
{ message: '加密强度: 256-bit AES-GCM', type: 'info' },
|
|
{ message: '数据传输速率: 100 Mbps', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'system',
|
|
summary: '生成临时授权码',
|
|
status: '进行中',
|
|
type: 'info',
|
|
progress: 0,
|
|
delay: 600,
|
|
details: [
|
|
{ message: '基于用户信息生成唯一标识符...', type: 'info' },
|
|
{ message: '应用时间戳...', type: 'info' }
|
|
]
|
|
},
|
|
{
|
|
category: 'system',
|
|
summary: '授权码生成完成',
|
|
status: '成功',
|
|
type: 'success',
|
|
progress: 100,
|
|
delay: 1000,
|
|
details: [
|
|
{ message: '临时授权码已生成', type: 'success' },
|
|
{ message: '有效期: 10分钟', type: 'info' },
|
|
{ message: '访问级别: 系统管理员', type: 'info' }
|
|
]
|
|
}
|
|
];
|
|
}
|
|
|
|
// 输入框抖动效果
|
|
function shakeInput() {
|
|
const input = document.getElementById('auth-password');
|
|
input.classList.add('animate-shake');
|
|
setTimeout(() => {
|
|
input.classList.remove('animate-shake');
|
|
}, 5000);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |