第 1-100 行（共100行）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>验证窗口</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'SF Pro Display', -apple-system, sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
background: #000;
}
.container {
width: 90%;
max-width: 340px;
background: linear-gradient(165deg, #1a1a1a 0%, #0a0a0a 100%);
border-radius: 16px;
border: 1px solid #333;
padding: 2px;
position: relative;
overflow: hidden;
}
.glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(
from 90deg at 50% 50%,
#000000 0%,
#00ff9d 25%,
#00b8ff 50%,
#7000ff 75%,
#000000 100%
);
animation: rotate 4s linear infinite;
opacity: 0.1;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.content {
background: #0a0a0a;
border-radius: 15px;
padding: 24px;
position: relative;
z-index: 1;
}
.title {
text-align: center;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: 2px;
}
.input-box {
margin-bottom: 20px;
position: relative;
}
.input-box input {
width: 100%;
padding: 14px;
background: #151515;
border: 1px solid #333;
border-radius: 8px;
color: #fff;
font-size: 15px;
transition: all 0.3s ease;
}
.input-box input:focus {
outline: none;
border-color: #00ff9d;
box-shadow: 0 0 15px rgba(0, 255, 157, 0.1);
}
.input-box input::placeholder {
color: #666;
}
第 101-200 行（共100行）
.btn {
width: 100%;
padding: 14px;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
margin-bottom: 12px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-verify {
background: linear-gradient(90deg, #00ff9d, #00b8ff);
color: #000;
}
.btn-query {
background: #151515;
color: #fff;
border: 1px solid #333;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
}
.btn:hover::before {
left: 100%;
}
.notice {
margin-top: 20px;
padding: 16px;
background: #151515;
border: 1px solid #333;
border-radius: 8px;
}
.notice h3 {
color: #fff;
font-size: 14px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.notice h3::before {
content: '⚡';
}
.notice p {
color: #999;
font-size: 13px;
line-height: 1.5;
}
/* 添加霓虹灯效果 */
.neon-line {
position: absolute;
height: 1px;
width: 100%;
background: linear-gradient(90deg, #00ff9d, #00b8ff);
top: 60px;
left: 0;
opacity: 0.2;
}
/* 添加扫描线动画 */
.scan-line {
position: absolute;
width: 100%;
height: 4px;
background: linear-gradient(90deg,
transparent,
rgba(0, 255, 157, 0.2),
transparent
);
top: 0;
left: 0;
animation: scan 2s linear infinite;
}
@keyframes scan {
第 201-239 行（共39行）
0% { transform: translateY(0); }
100% { transform: translateY(100%); }
}
</style>
</head>
<body>
<div class="container">
<div class="glow"></div>
<div class="content">
<div class="scan-line"></div>
<div class="neon-line"></div>
<div class="title">System Verify</div>
<div class="input-box">
<input type="text" id="code" placeholder="Enter Activation Code">
</div>
<button class="btn btn-verify" onclick="Call_Verify(code.value)">Verify Now</button>
<button class="btn btn-query" onclick="Call_Query_Trial(code.value)">Check Status</button>
<div class="notice">
<h3>Notice</h3>
<p id="notice"></p>
</div>
</div>
</div>
<script>
function Call_Verify(text) {
RuoLv.onButtonClick(0, text);
}
function Call_Query_Trial(text) {
RuoLv.onButtonClick(1, text);
}
</script>
</body>
</html>
用户评论
0 条评论暂无评论
成为第一个评论此应用的用户吧！