第 1-100 行（共100行）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>验证窗口 - 赛博朋克</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@keyframes neonFlicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px #ff00de,
0 0 10px #ff00de,
0 0 20px #ff00de,
0 0 40px #ff00de;
}
20%, 24%, 55% {
text-shadow: none;
}
}
@keyframes scanline {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
@keyframes glitch {
0% {
clip-path: inset(40% 0 61% 0);
transform: translate(-10px, 10px);
}
20% {
clip-path: inset(92% 0 1% 0);
transform: translate(8px, -10px);
}
40% {
clip-path: inset(43% 0 1% 0);
transform: translate(3px, 6px);
}
60% {
clip-path: inset(25% 0 58% 0);
transform: translate(-5px, -2px);
}
80% {
clip-path: inset(54% 0 7% 0);
transform: translate(2px, -2px);
}
100% {
clip-path: inset(58% 0 43% 0);
transform: translate(-10px, 10px);
}
}
body {
position: fixed;
inset: 0;
background-color: #0b0b14;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-image:
radial-gradient(rgba(45, 41, 220, 0.1) 1px, transparent 1px),
radial-gradient(rgba(220, 41, 189, 0.15) 1px, transparent 1px);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(18, 16, 39, 0) 50%, rgba(48, 43, 99, 0.25) 50%);
background-size: 100% 4px;
pointer-events: none;
z-index: 10;
}
.scanline {
position: absolute;
inset: 0;
width: 100%;
height: 100px;
background: linear-gradient(
第 101-200 行（共100行）
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(255, 0, 230, 0.1) 10%,
rgba(217, 0, 255, 0.2) 50%,
rgba(255, 0, 230, 0.1) 90%,
rgba(0, 0, 0, 0) 100%
);
opacity: 0.1;
pointer-events: none;
animation: scanline 8s linear infinite;
}
.modal {
width: 90%;
max-width: 420px;
background-color: rgba(20, 20, 35, 0.8);
border-radius: 4px;
padding: 35px 25px;
box-shadow:
0 0 15px rgba(230, 0, 255, 0.2),
0 0 30px rgba(230, 0, 255, 0.1),
0 0 0 1px rgba(230, 0, 255, 0.1);
border: 1px solid rgba(230, 0, 255, 0.3);
position: relative;
z-index: 2;
overflow: hidden;
}
.modal::before, .modal::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
rgba(33, 33, 81, 0.5) 0%,
rgba(33, 33, 81, 0) 70%);
z-index: -1;
pointer-events: none;
}
.modal::after {
background: linear-gradient(-45deg,
rgba(230, 0, 255, 0.15) 0%,
rgba(230, 0, 255, 0) 70%);
}
.title {
margin-bottom: 30px;
position: relative;
text-transform: uppercase;
}
.title h2 {
font-family: 'Orbitron', sans-serif;
font-size: 26px;
color: #e6f1ff;
letter-spacing: 1px;
font-weight: 700;
text-transform: uppercase;
position: relative;
text-shadow: 0 0 5px rgba(230, 0, 255, 0.7);
}
.title h2::before {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -2px 0 #00f0ff;
top: 0;
color: #e6f1ff;
overflow: hidden;
clip-path: inset(0 0 0 0);
animation: glitch 3s infinite linear alternate-reverse;
}
.title h2::after {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 2px 0 #ff00de;
top: 0;
color: #e6f1ff;
overflow: hidden;
clip-path: inset(0 0 0 0);
animation: glitch 2s infinite linear alternate-reverse;
animation-delay: 1s;
}
.input-wrapper {
position: relative;
margin: 5px 0 30px;
}
.input-wrapper::before {
content: ">";
position: absolute;
left: 15px;
top: 50%;
第 201-300 行（共100行）
transform: translateY(-50%);
color: #00f0ff;
font-family: monospace;
font-size: 18px;
font-weight: bold;
text-shadow: 0 0 5px #00f0ff;
}
.input-wrapper input {
width: 100%;
padding: 15px 15px 15px 40px;
border: 1px solid rgba(230, 0, 255, 0.3);
border-radius: 2px;
font-size: 15px;
color: #e6f1ff;
background-color: rgba(46, 41, 78, 0.2);
transition: all 0.3s ease;
font-family: 'Orbitron', sans-serif;
letter-spacing: 1px;
box-shadow: 0 0 10px rgba(0, 240, 255, 0.1) inset;
}
.input-wrapper input:focus {
outline: none;
border-color: #00f0ff;
box-shadow:
0 0 10px rgba(0, 240, 255, 0.3),
0 0 20px rgba(0, 240, 255, 0.1) inset;
}
.input-wrapper input::placeholder {
color: rgba(230, 241, 255, 0.4);
}
.btn {
width: 100%;
padding: 14px 20px;
border: 1px solid rgba(230, 0, 255, 0.4);
border-radius: 2px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background-color: transparent;
margin-bottom: 15px;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
letter-spacing: 1px;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(230, 0, 255, 0), rgba(230, 0, 255, 0.1), rgba(230, 0, 255, 0));
transform: translateX(-100%);
transition: transform 0.7s ease;
}
.btn:hover::before {
transform: translateX(100%);
}
.btn-primary {
color: #00f0ff;
background-color: rgba(46, 41, 78, 0.4);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
text-shadow: 0 0 5px rgba(0, 240, 255, 0.7);
margin-bottom: 10px;
}
.btn-secondary {
color: #ff00de;
background-color: rgba(20, 20, 35, 0.3);
border-color: rgba(255, 0, 222, 0.3);
margin-bottom: 30px;
}
.btn:active {
transform: scale(0.98);
}
.notice {
background-color: rgba(46, 41, 78, 0.2);
border: 1px solid rgba(230, 0, 255, 0.2);
border-radius: 2px;
padding: 20px;
position: relative;
overflow: hidden;
}
.notice::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
第 301-400 行（共100行）
background: linear-gradient(90deg,
transparent,
rgba(230, 0, 255, 0.5),
transparent);
}
.notice h3 {
font-size: 14px;
color: #ff00de;
margin-bottom: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'Orbitron', sans-serif;
animation: neonFlicker 3s infinite alternate-reverse;
}
.notice p {
font-size: 13px;
color: #b8c7db;
line-height: 1.6;
}
.terminal-cursor {
display: inline-block;
width: 8px;
height: 16px;
background-color: #00f0ff;
animation: blink 1s infinite;
vertical-align: middle;
margin-left: 4px;
}
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
.version {
text-align: center;
font-size: 10px;
color: rgba(230, 241, 255, 0.3);
margin-top: 25px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
}
@media (max-width: 480px) {
.modal {
width: 95%;
padding: 30px 20px;
}
}
</style>
</head>
<body>
<div class="scanline"></div>
<div class="modal">
<div class="title">
<h2 data-text="系统验证">系统验证</h2>
</div>
<div class="input-wrapper">
<input type="text" id="code" placeholder="输入安全密钥" pattern="^[a-zA-Z0-9_-]{1,16}$">
</div>
<button class="btn btn-primary" onclick="Call_Verify(code.value)">授权验证</button>
<button class="btn btn-secondary" onclick="Call_Query_Trial(code.value)">查询密钥</button>
<div class="notice">
<h3>SYSTEM//MSG:</h3>
<p id="notice">请输入有效的安全密钥进行验证。安全协议V2.0已启用，未授权访问将被记录。</p>
<span class="terminal-cursor"></span>
</div>
<div class="version">CyberSec v3.7.14</div>
</div>
<script>
function Call_Verify(text) {
try {
if (typeof RuoLv !== 'undefined' && RuoLv.onButtonClick) {
RuoLv.onButtonClick(0, text);
}
} catch (e) {
console.error('验证接口调用失败', e);
}
}
function Call_Query_Trial(text) {
try {
if (typeof RuoLv !== 'undefined' && RuoLv.onButtonClick) {
RuoLv.onButtonClick(1, text);
}
} catch (e) {
console.error('查询接口调用失败', e);
}
}
第 401-408 行（共8行）
// 初始化公告内容
document.addEventListener('DOMContentLoaded', function() {
// 服务端获取公告内容
});
</script>
</body>
</html> 
用户评论
0 条评论暂无评论
成为第一个评论此应用的用户吧！