第 1-100 行（共100行）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>云科技系统 - 安全授权</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}
body {
min-height: 100vh;
background: linear-gradient(135deg, #1a1f25 0%, #101318 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(41, 128, 185, 0.1) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(52, 152, 219, 0.1) 0%, transparent 40%);
z-index: 0;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
}
.container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1200px;
padding: 20px;
}
.auth-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 40px;
width: 100%;
max-width: 480px;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.4),
0 0 100px rgba(41, 128, 185, 0.1);
}
.auth-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.05),
transparent
);
transition: 0.5s;
}
.auth-card:hover::before {
left: 100%;
}
.logo-section {
text-align: center;
margin-bottom: 40px;
}
.logo-container {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #3498db, #2980b9);
border-radius: 20px;
第 101-200 行（共100行）
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 10px 20px rgba(41, 128, 185, 0.3);
}
.logo-container i {
font-size: 32px;
color: white;
}
.logo-container::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
filter: blur(20px);
opacity: 0.5;
z-index: -1;
}
.title {
color: #fff;
font-size: 28px;
font-weight: 600;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.subtitle {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.input-group {
margin-bottom: 30px;
position: relative;
}
.input-field {
width: 100%;
background: rgba(255, 255, 255, 0.02);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 20px;
color: #fff;
font-size: 16px;
transition: all 0.3s ease;
}
.input-field:focus {
outline: none;
border-color: #3498db;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 0 30px rgba(52, 152, 219, 0.1);
}
.input-field::placeholder {
color: rgba(255, 255, 255, 0.3);
}
/* 公告样式 */
.notice-board {
margin: 20px 0 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.notice-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.notice-header i {
color: #3498db;
font-size: 18px;
}
.notice-header span {
color: #fff;
font-size: 16px;
font-weight: 600;
}
.notice-content {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.6;
}
第 201-300 行（共100行）
.notice-content p {
margin-bottom: 8px;
}
.notice-content p:last-child {
margin-bottom: 0;
}
/* 添加公告的动态效果 */
@keyframes noticePulse {
0% {
box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.1);
}
70% {
box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
}
}
.notice-board {
animation: noticePulse 2s infinite;
}
.btn {
width: 100%;
padding: 20px;
border: none;
border-radius: 16px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
box-shadow: 0 10px 20px rgba(41, 128, 185, 0.3);
}
.btn-secondary {
background: linear-gradient(135deg, #34495e, #2c3e50);
box-shadow: 0 10px 20px rgba(44, 62, 80, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(41, 128, 185, 0.4);
}
.btn i {
font-size: 18px;
}
.security-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 30px 0;
padding: 15px;
background: rgba(46, 204, 113, 0.05);
border: 1px solid rgba(46, 204, 113, 0.1);
border-radius: 12px;
}
.security-badge i {
color: #2ecc71;
}
.security-badge span {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.footer {
margin-top: 40px;
text-align: center;
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
.footer a {
color: #3498db;
text-decoration: none;
margin: 0 10px;
transition: color 0.3s ease;
}
.footer a:hover {
第 301-400 行（共100行）
color: #2980b9;
}
@media (max-width: 480px) {
.auth-card {
padding: 30px 20px;
}
.title {
font-size: 24px;
}
.logo-container {
width: 60px;
height: 60px;
}
.logo-container i {
font-size: 24px;
}
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container">
<div class="auth-card">
<div class="logo-section">
<div class="logo-container">
<i class="fas fa-shield-alt"></i>
</div>
<h1 class="title">云科技授权系统</h1>
<p class="subtitle">专业的软件授权解决方案</p>
</div>
<div class="input-group">
<input type="text" id="code" class="input-field" placeholder="请输入您的授权码" pattern="^[a-zA-Z0-9_-]{1,16}$">
</div>
<button class="btn btn-primary" onclick="Call_Verify(code.value)">
<i class="fas fa-key"></i>
<span>立即验证</span>
</button>
<button class="btn btn-secondary" onclick="Call_Query_Trial(code.value)">
<i class="fas fa-search"></i>
<span>查询授权</span>
</button>
<div class="notice-board">
<div class="notice-header">
<i class="fas fa-bullhorn"></i>
<span>系统公告</span>
</div>
<div class="notice-content" id="notice">
<!-- 公告内容将通过JavaScript动态更新 -->
</div>
</div>
<div class="security-badge">
<i class="fas fa-shield-alt"></i>
<span>企业级安全加密 | 实时状态监控</span>
</div>
<div class="footer">
<a href="#"><i class="fas fa-shopping-cart"></i> 购买授权</a>
<a href="#"><i class="fas fa-headset"></i> 在线客服</a>
<p style="margin-top: 15px;">云科技 © 2024 | 让软件授权更简单</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
if(typeof particlesJS !== 'undefined') {
particlesJS("particles-js", {
"particles": {
"number": {
"value": 50,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#3498db"
},
"shape": {
"type": "circle"
},
"opacity": {
"value": 0.3,
"random": true
},
"size": {
"value": 3,
"random": true
},
第 401-458 行（共58行）
"line_linked": {
"enable": true,
"distance": 150,
"color": "#3498db",
"opacity": 0.2,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 0.5
}
},
"push": {
"particles_nb": 3
}
}
},
"retina_detect": true
});
}
});
function Call_Verify(text) {
RuoLv.onButtonClick(0, text);
}
function Call_Query_Trial(text) {
RuoLv.onButtonClick(1, text);
}
</script>
</body>
</html>
用户评论
0 条评论暂无评论
成为第一个评论此应用的用户吧！