第 1-100 行（共100行）
<!DOCTYPE html>
<html lang="en">
<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>new-module</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(125deg, #0f172a, #1e293b);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.modal {
width: 95%;
max-width: 900px;
min-height: 500px;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 30px;
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(20px);
border-radius: 40px;
padding: 40px;
box-shadow: 0 25px 45px rgba(0,0,0,0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
animation: modalShow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.left-panel {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px;
position: relative;
}
.right-panel {
background: rgba(30, 41, 59, 0.9);
border-radius: 30px;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.title {
color: #f8fafc;
font-size: 2.8em;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.subtitle {
color: #cbd5e1;
font-size: 1.2em;
margin-bottom: 40px;
line-height: 1.6;
}
.input-box {
margin-bottom: 30px;
}
.input-box input {
width: 100%;
padding: 20px 25px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
font-size: 18px;
color: #f8fafc;
transition: all 0.3s ease;
letter-spacing: 0.5px;
}
.input-box input::placeholder {
color: #94a3b8;
}
.input-box input:focus {
第 101-200 行（共100行）
border-color: #3b82f6;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
outline: none;
background: rgba(255, 255, 255, 0.15);
}
.btn-group {
display: flex;
gap: 15px;
}
.btn {
flex: 1;
padding: 20px;
border: none;
border-radius: 20px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 1px;
}
.btn-primary {
background: linear-gradient(45deg, #3b82f6, #2563eb);
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #f8fafc;
border: 2px solid rgba(255, 255, 255, 0.2);
}
.btn:hover {
transform: translateY(-2px);
filter: brightness(110%);
}
.btn:active {
transform: translateY(1px);
}
.notice {
margin-top: auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 25px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.notice h3 {
color: #f8fafc;
font-size: 1.4em;
margin-bottom: 15px;
font-weight: 600;
}
.notice p {
color: #cbd5e1;
line-height: 1.6;
font-size: 1.1em;
}
@keyframes modalShow {
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media (max-width: 768px) {
.modal {
grid-template-columns: 1fr;
max-width: 400px;
min-height: auto;
padding: 30px;
}
.left-panel {
padding: 10px 0;
}
.title {
font-size: 2.2em;
}
.btn {
padding: 16px;
font-size: 16px;
}
}
</style>
</head>
<body>
第 201-234 行（共34行）
<div class="modal">
<div class="left-panel">
<h1 class="title">验证中心</h1>
<p class="subtitle">欢迎使用我们的服务，请输入您的激活码进行验证或查询。</p>
<div class="input-box">
<input type="text" id="code" placeholder="请输入激活码" pattern="^[a-zA-Z0-9_-]{1,16}$">
</div>
<div class="btn-group">
<button class="btn btn-primary" onclick="Call_Verify(code.value)">验证</button>
<button class="btn btn-secondary" onclick="Call_Query_Trial(code.value)">查询卡密</button>
</div>
</div>
<div class="right-panel">
<div class="notice">
<h3>系统公告</h3>
<p id="notice"></p>
</div>
</div>
</div>
<script>
document.body.style.display = 'flex';
function Call_Verify(text) {
RuoLv.onButtonClick(0,text);
}
function Call_Query_Trial(text) {
RuoLv.onButtonClick(1,text);
}
</script>
</body>
</html>
用户评论
0 条评论暂无评论
成为第一个评论此应用的用户吧！