<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!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="styles.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style type="text/css" media="all">
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 基本样式 */
body {
font-family: "Microsoft YaHei", "微软雅黑", "SimHei", "黑体", sans-serif;
line-height: 1.6;
color: #e0f7ff;
background-color: #0c1016;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* 粒子背景 */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
/* 主容器 */
.container {
width: 100%;
max-width: 100%;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
position: relative;
}
/* 授权界面 */
.auth-interface {
background: rgba(16, 24, 38, 0.8);
width: 100%;
max-width: 480px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0, 132, 255, 0.15),
0 0 60px rgba(0, 132, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
position: relative;
transition: all 0.5s ease;
}
/* 顶部装饰线 */
.interface-lines {
height: 4px;
width: 100%;
display: flex;
overflow: hidden;
}
.line {
height: 100%;
flex: 1;
}
.line:nth-child(1) {
background: linear-gradient(90deg, #0062ff, #00b3ff);
}
.line:nth-child(2) {
background: linear-gradient(90deg, #00b3ff, #00ffe7);
}
.line:nth-child(3) {
background: linear-gradient(90deg, #00ffe7, #0062ff);
}
/* 系统标识 */
.system-identity {
display: flex;
align-items: center;
padding: 25px 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(16, 24, 38, 0.5);
}
.system-logo {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0062ff, #00b3ff);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
box-shadow: 0 5px 15px rgba(0, 132, 255, 0.3);
}
.system-logo i {
font-size: 24px;
color: white;
}
.system-info h1 {
font-size: 24px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 5px;
color: white;
}
.system-version {
font-size: 12px;
opacity: 0.7;
margin-left: 5px;
font-weight: normal;
letter-spacing: 0;
}
.system-status {
display: flex;
align-items: center;
}
.status-dot {
width: 8px;
height: 8px;
background-color: #00ff9d;
border-radius: 50%;
margin-right: 8px;
position: relative;
}
.status-dot::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background-color: rgba(0, 255, 157, 0.4);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
70% {
transform: scale(1.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.status-text {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
/* 授权面板 */
.auth-panel {
padding: 30px;
}
.panel-header {
display: flex;
align-items: center;
margin-bottom: 25px;
}
.header-icon {
width: 36px;
height: 36px;
background: rgba(0, 132, 255, 0.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
}
.header-icon i {
font-size: 18px;
color: #00a8ff;
}
.panel-header h2 {
font-size: 18px;
font-weight: 600;
color: white;
}
/* 输入容器 */
.input-container {
margin-bottom: 25px;
}
.input-group {
position: relative;
margin-bottom: 15px;
}
.input-group label {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 8px;
}
.input-group input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 14px 16px;
color: white;
font-size: 15px;
transition: all 0.3s;
}
.input-group input:focus {
outline: none;
border-color: #0084ff;
background: rgba(255, 255, 255, 0.08);
}
.input-group input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.input-highlight {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, #0062ff, #00b3ff);
transition: width 0.3s;
}
.input-group input:focus ~ .input-highlight {
width: 100%;
}
/* 安全指示器 */
.security-indicator {
display: flex;
align-items: center;
margin-top: 12px;
}
.indicator-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
}
.indicator-icon i {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.indicator-text {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
/* 授权按钮 */
.auth-btn {
width: 100%;
background: linear-gradient(90deg, #0062ff, #00b3ff);
border: none;
border-radius: 8px;
padding: 14px;
color: white;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.auth-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: all 0.5s;
}
.auth-btn:hover {
box-shadow: 0 5px 15px rgba(0, 132, 255, 0.3);
transform: translateY(-2px);
}
.auth-btn:hover::before {
left: 100%;
}
.btn-text {
margin-right: 8px;
}
.btn-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
/* 底部操作区 */
.action-panel {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 30px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(16, 24, 38, 0.5);
}
.action-item {
display: flex;
align-items: center;
cursor: pointer;
transition: all 0.3s;
padding: 8px 12px;
border-radius: 6px;
}
.action-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.action-item i {
font-size: 16px;
color: #00a8ff;
margin-right: 8px;
}
.action-item span {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.action-separator {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.1);
margin: 0 20px;
}
/* 系统页脚 */
.system-footer {
padding: 15px 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10, 15, 25, 0.8);
}
.encryption-info {
display: flex;
align-items: center;
}
.encryption-info i {
font-size: 14px;
color: rgba(255, 255, 255, 0.4);
margin-right: 8px;
}
.encryption-info span {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
.copyright span {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
/* 验证状态动画 */
.auth-interface.Wuai_Clouding {
box-shadow: 0 0 30px rgba(255, 208, 0, 0.15),
0 0 60px rgba(255, 208, 0, 0.1);
}
.auth-interface.verified {
box-shadow: 0 0 30px rgba(0, 255, 157, 0.15),
0 0 60px rgba(0, 255, 157, 0.1);
}
.auth-interface.error {
box-shadow: 0 0 30px rgba(255, 71, 87, 0.15),
0 0 60px rgba(255, 71, 87, 0.1);
}
/* 响应式调整 */
@media (max-width: 500px) {
.auth-interface {
max-width: 100%;
}
.system-identity,
.auth-panel,
.action-panel,
.system-footer {
padding-left: 20px;
padding-right: 20px;
}
.system-logo {
width: 40px;
height: 40px;
}
.system-info h1 {
font-size: 20px;
}
}
/* 公告弹窗样式 */
.modal {
display: none; /* 默认隐藏 */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
backdrop-filter: blur(10px); /* 背景模糊效果 */
justify-content: center;
align-items: center;
}
.modal-content {
background: rgba(16, 24, 38, 0.9); /* 与授权界面一致的背景 */
border-radius: 12px;
width: 90%;
max-width: 500px;
box-shadow: 0 5px 15px rgba(0, 132, 255, 0.3);
overflow: hidden;
animation: fadeIn 0.3s ease;
}
.modal-header {
padding: 20px;
background: rgba(0, 132, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
font-size: 20px;
color: #fff;
margin: 0;
}
.close-btn {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s;
}
.close-btn:hover {
opacity: 0.7;
}
.modal-body {
padding: 20px;
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
line-height: 1.6;
}
/* 淡入动画 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 主题切换按钮样式 */
.theme-switch {
margin-left: auto;
padding-left: 20px;
}
.theme-btn {
background: none;
border: none;
color: #00a8ff;
font-size: 20px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.theme-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
/* 暗色主题样式 */
body.dark-theme {
background-color: #0c1016;
}
body.dark-theme .auth-interface {
background: rgba(16, 24, 38, 0.8);
}
/* 亮色主题样式 */
body.light-theme {
background-color: #f0f2f5;
}
body.light-theme .auth-interface {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1),
0 0 60px rgba(0, 0, 0, 0.05);
}
body.light-theme .system-identity {
background: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
body.light-theme .system-info h1 {
color: #1a1a1a;
}
body.light-theme .status-text {
color: #555;
}
body.light-theme .panel-header h2 {
color: #1a1a1a;
}
body.light-theme .input-group label {
color: #444;
}
body.light-theme .input-group input {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.15);
color: #333;
}
body.light-theme .input-group input::placeholder {
color: rgba(0, 0, 0, 0.3);
}
body.light-theme .security-indicator {
color: #666;
}
body.light-theme .indicator-icon i {
color: #666;
}
body.light-theme .indicator-text {
color: #666;
}
body.light-theme .action-panel {
background: rgba(255, 255, 255, 0.9);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
body.light-theme .action-item span {
color: #444;
}
body.light-theme .action-separator {
background: rgba(0, 0, 0, 0.1);
}
body.light-theme .system-footer {
background: rgba(255, 255, 255, 0.95);
}
body.light-theme .encryption-info i,
body.light-theme .encryption-info span,
body.light-theme .copyright span {
color: #666;
}
body.light-theme .modal-content {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}
body.light-theme .modal-header h3 {
color: #1a1a1a;
}
body.light-theme .modal-body {
color: #444;
}
body.light-theme .modal-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/* 粒子效果在亮色主题下的调整 */
body.light-theme #particles-js canvas {
opacity: 1;
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container">
<div class="auth-interface">
<div class="interface-lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="system-identity">
<div class="system-logo">
<i class="fas fa-shield-alt"></i>
</div>
<div class="system-info">
<h1 id="title"></h1>
<div class="system-status">
<span class="status-dot"></span>
<span class="status-text">安全系统在线</span>
</div>
</div>
<div class="theme-switch">
<button class="theme-btn" onclick="toggleTheme()">
<i class="fas fa-sun"></i>
</button>
</div>
</div>
<div class="auth-panel">
<div class="panel-header">
<div class="header-icon"><i class="fas fa-key"></i></div>
<p id="notice" style="text-align: center"; ></p>
</div>
<form id="login-form">
<div class="input-container">
<div class="input-group">
<label for="card-key">授权密钥</label>
<input type="text" id="code" name="card-key" placeholder="输入您的授权密钥" required>
<div class="input-highlight"></div>
</div>
<div class="security-indicator">
<div class="indicator-icon"><i class="fas fa-lock"></i></div>
<div class="indicator-text">端到端加密传输</div>
</div>
</div>
<button type="button" class="auth-btn" onclick="Call_Verify(code.value);" style="margin-bottom: 10px;">
<span class="btn-text">立即验证</span>
<span class="btn-icon"><i class="fas fa-arrow-right"></i></span>
</button>
<button type="button" class="auth-btn" onclick="Call_Query_Trial(code.value);">
<span class="btn-text">查询卡密</span>
<span class="btn-icon"><i class="fas fa-search"></i></span>
</button>
</form>
</div>
<div class="action-panel">
<div class="action-item" onclick="Call_Pay();">
<i class="fas fa-shopping-cart"></i>
<span>购买卡密</span>
</div>
<div class="action-separator"></div>
<div class="action-item" onclick="Call_Pay();">
<i class="fas fa-headset"></i>
<span>卡密购买</span>
</div>
</div>
<div class="system-footer">
<div class="copyright">
<span>diy.zhongzhipian.top</span>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/particles.js/2.0.0/particles.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (typeof particlesJS !== 'undefined') {
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
},
"opacity": {
"value": 0.3,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.2,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": false,
"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": 1
}
},
"push": {
"particles_nb": 4
}
}
},
"retina_detect": true
});
}
});
</script>
<script>
function initTheme() {
try {
const savedTheme = localStorage.getItem('cloud_theme') || 'dark';
setTheme(savedTheme);
console.log('Theme initialized:', savedTheme);
} catch(e) {
console.error('Failed to initialize theme:', e);
setTheme('dark');
}
}
function setTheme(theme) {
const body = document.body;
const themeBtn = document.querySelector('.theme-btn i');
body.classList.remove('light-theme', 'dark-theme');
body.classList.add(theme + '-theme');
if(themeBtn) {
themeBtn.classList.remove('fa-sun', 'fa-moon');
themeBtn.classList.add(theme === 'light' ? 'fa-moon' : 'fa-sun');
}
try {
localStorage.setItem('cloud_theme', theme);
} catch(e) {
console.error('Failed to save theme:', e);
}
updateParticles(theme);
}
function toggleTheme() {
try {
const isDark = document.body.classList.contains('dark-theme');
setTheme(isDark ? 'light' : 'dark');
} catch(e) {
console.error('Failed to toggle theme:', e);
}
}
function updateParticles(theme) {
if(typeof particlesJS === 'undefined') return;
const isDark = theme === 'dark';
const config = {
"particles": {
"number": {
"value": isDark ? 80 : 40,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": isDark ? "#ffffff" : "#0062ff"
},
"shape": {
"type": "circle"
},
"opacity": {
"value": isDark ? 0.3 : 0.6,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": isDark ? 0.1 : 0.2,
"sync": false
}
},
"size": {
"value": isDark ? 3 : 4,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": isDark ? "#ffffff" : "#0062ff",
"opacity": isDark ? 0.2 : 0.4,
"width": isDark ? 1 : 2
},
"move": {
"enable": true,
"speed": isDark ? 2 : 3,
"direction": "none",
"random": false,
"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": isDark ? 1 : 0.8
}
},
"push": {
"particles_nb": 4
}
}
},
"retina_detect": true
};
particlesJS("particles-js", config);
}
document.addEventListener('DOMContentLoaded', function () {
initTheme();
const noticeElement = document.getElementById('notice');
const titleElement = document.getElementById('title');
noticeElement.textContent = getNotice();
titleElement.textContent = getTitle();
const codeElement=document.getElementById('code');
codeElement.value=getOldCard();
});
</script>
<script>
// Original logic
document.getElementById("title").innerHTML = PanGolin.GetTitle();
document.getElementById("notice").innerHTML = PanGolin.GetNotice();
document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() ? "试用" : "查码";
document.getElementById("Pay").style.display = PanGolin.Is_Pay() ? "block" : "none";
function Call_Verify(data) {
PanGolin.Verify(data);
}
function Call_Query_Trial(data) {
if (PanGolin.Is_Trial()) PanGolin.Trial();
else PanGolin.Query(data);
}
function Call_Pay() {
PanGolin.Pay();
}
function mStart(obj) {
obj.style.opacity = "0.8";
}
function mUp(obj) {
obj.style.opacity = "1";
}
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->