<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.theme-purple {
--primary: #7e57ff;
--primary-light: #b39ddb;
--bg: #f8f5ff;
--text: #4a4458;
--text-light: #7a7289;
--input-bg: #ffffff;
}
.theme-blue {
--primary: #42a5f5;
--primary-light: #90caf9;
--bg: #e3f2fd;
--text: #0d47a1;
--text-light: #5472d3;
--input-bg: #ffffff;
}
.theme-orange {
--primary: #ff7043;
--primary-light: #ffab91;
--bg: #fff3e0;
--text: #e65100;
--text-light: #ff8a65;
--input-bg: #ffffff;
}
.theme-dark {
--primary: #bb86fc;
--primary-light: #d1c4e9;
--bg: #121212;
--text: #e1e1e1;
--text-light: #b0b0b0;
--input-bg: #1e1e1e;
}
.theme-mint {
--primary: #26c6da;
--primary-light: #80deea;
--bg: #e0f7fa;
--text: #00838f;
--text-light: #4fb3bf;
--input-bg: #ffffff;
}
.theme-pink {
--primary: #ff4081;
--primary-light: #ff80ab;
--bg: #fce4ec;
--text: #ad1457;
--text-light: #e91e63;
--input-bg: #ffffff;
}
.theme-teal {
--primary: #26a69a;
--primary-light: #80cbc4;
--bg: #e0f2f1;
--text: #00695c;
--text-light: #4db6ac;
--input-bg: #ffffff;
}
.theme-indigo {
--primary: #5c6bc0;
--primary-light: #9fa8da;
--bg: #e8eaf6;
--text: #283593;
--text-light: #7986cb;
--input-bg: #ffffff;
}
.theme-amber {
--primary: #ffca28;
--primary-light: #ffe082;
--bg: #fff8e1;
--text: #ff8f00;
--text-light: #ffb300;
--input-bg: #ffffff;
}
.theme-cyan {
--primary: #00bcd4;
--primary-light: #4dd0e1;
--bg: #e0f7fa;
--text: #00838f;
--text-light: #26c6da;
--input-bg: #ffffff;
}
.theme-deep-purple {
--primary: #7c4dff;
--primary-light: #b388ff;
--bg: #ede7f6;
--text: #4527a0;
--text-light: #9575cd;
--input-bg: #ffffff;
}
.theme-green {
--primary: #66bb6a;
--primary-light: #a5d6a7;
--bg: #e8f5e9;
--text: #2e7d32;
--text-light: #81c784;
--input-bg: #ffffff;
}
.theme-red {
--primary: #ef5350;
--primary-light: #ef9a9a;
--bg: #ffebee;
--text: #c62828;
--text-light: #e57373;
--input-bg: #ffffff;
}
.theme-brown {
--primary: #8d6e63;
--primary-light: #bcaaa4;
--bg: #efebe9;
--text: #5d4037;
--text-light: #a1887f;
--input-bg: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
}
body {
min-height: 100vh;
background: var(--bg);
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
transition: all 0.4s ease;
}
.theme-switcher {
position: absolute;
top: 20px;
right: 20px;
background: rgba(var(--primary-rgb), 0.1);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--primary);
font-size: 18px;
transition: all 0.3s;
z-index: 10;
}
.theme-switcher:hover {
background: rgba(var(--primary-rgb), 0.2);
}
.theme-switcher.rotate {
animation: rotateBtn 0.6s ease-out;
}
@keyframes rotateBtn {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
.icon-title {
font-size: 32px;
color: var(--primary);
margin-bottom: 10px;
text-align: center;
}
.main-title {
font-size: 24px;
font-weight: 600;
color: var(--primary);
margin-bottom: 8px;
text-align: center;
}
.subtitle {
font-size: 14px;
color: var(--text-light);
text-align: center;
margin-bottom: 30px;
}
.input-container {
width: 100%;
max-width: 400px;
margin-bottom: 20px;
position: relative;
}
input {
width: 100%;
padding: 14px 16px 14px 42px;
border: 1px solid rgba(126, 87, 255, 0.3);
border-radius: 10px;
font-size: 15px;
color: var(--text);
background: rgba(126, 87, 255, 0.05);
transition: all 0.3s;
}
input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(126, 87, 255, 0.2);
}
.input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--primary);
opacity: 0.7;
}
.buttons {
width: 100%;
max-width: 400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 25px;
}
.btn {
padding: 14px;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn:hover {
background: var(--primary-light);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}
.btn:active {
transform: translateY(0);
}
.notice {
width: 100%;
max-width: 400px;
background: rgba(var(--primary-rgb), 0.05);
border-radius: 10px;
padding: 16px;
border: 1px solid rgba(var(--primary-rgb), 0.1);
}
.notice h3 {
font-size: 15px;
margin-bottom: 10px;
color: var(--primary);
display: flex;
align-items: center;
gap: 8px;
}
.notice p {
color: var(--text-light);
line-height: 1.5;
font-size: 14px;
white-space: pre-line;
}
@media screen and (max-width: 480px) {
.buttons {
grid-template-columns: 1fr;
}
.icon-title {
font-size: 28px;
}
.main-title {
font-size: 22px;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
}
.color-picker {
position: absolute;
top: 70px;
right: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
padding: 10px;
display: none;
z-index: 100;
}
.color-picker.show {
display: block;
}
.color-picker input[type="range"] {
width: 100%;
margin: 5px 0;
}
.color-picker label {
display: block;
margin-bottom: 5px;
}
.color-picker button {
padding: 5px 10px;
margin-top: 10px;
border: none;
border-radius: 5px;
background: #7e57ff;
color: white;
cursor: pointer;
}
.color-picker button:hover {
background: #b39ddb;
}
</style>
<body class="theme-purple">
<button class="theme-switcher" id="themeSwitcher">
<i class="fas fa-palette"></i>
</button>
<div class="color-picker" id="colorPicker">
<label for="red">红色 (R):</label>
<input type="range" id="red" min="0" max="255" value="126">
<label for="green">绿色 (G):</label>
<input type="range" id="green" min="0" max="255" value="87">
<label for="blue">蓝色 (B):</label>
<input type="range" id="blue" min="0" max="255" value="255">
<label for="gradient">渐变 (A):</label>
<input type="range" id="gradient" min="0" max="1" step="0.01" value="0.5">
<button id="applyColor">应用颜色</button>
</div>
<div class="icon-title">
<i class="fas fa-lock"></i>
</div>
<h1 class="main-title" id="title">验证系统</h1>
<div class="subtitle">请输入您的激活码完成验证</div>
<div class="input-container">
<i class="fas fa-key input-icon"></i>
<input type="text" id="code" placeholder="输入激活码" pattern="^[a-zA-Z0-9_-]{1,16}$">
</div>
<div class="buttons">
<button class="btn" onclick="Call_Verify(code.value);">
<i class="fas fa-check-circle"></i> 验证
</button>
<button class="btn" onclick="Call_Query_Trial(code.value);" id="Query_Trial">
<i class="fas fa-search"></i> 解绑
</button>
<button class="btn" id="Pay" onclick="Call_Pay()">
<i class="fas fa-credit-card"></i> 购卡
</button>
</div>
<div class="notice">
<h3><i class="fas fa-bullhorn"></i> 系统公告</h3>
<p id="notice"></p>
</div>
<script>
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";
}
document.getElementById('themeSwitcher').addEventListener('click', function() {
const colorPicker = document.getElementById('colorPicker');
colorPicker.classList.toggle('show');
});
document.getElementById('applyColor').addEventListener('click', function() {
const r = document.getElementById('red').value;
const g = document.getElementById('green').value;
const b = document.getElementById('blue').value;
const a = document.getElementById('gradient').value;
const colorStart = `rgba(${r},${g},${b},1)`;
const colorEnd = `rgba(${r},${g},${b},0)`;
document.body.style.backgroundImage = `linear-gradient(to right, ${colorStart},${colorEnd})`;
document.getElementById('colorPicker').classList.remove('show');
});
const colorInputs = document.querySelectorAll('#colorPicker input[type="range"]');
colorInputs.forEach(input => {
input.addEventListener('input', function() {
const r = document.getElementById('red').value;
const g = document.getElementById('green').value;
const b = document.getElementById('blue').value;
const a = document.getElementById('gradient').value;
const colorStart = `rgba(${r},${g},${b},1)`;
const colorEnd = `rgba(${r},${g},${b},0)`;
document.body.style.backgroundImage = `linear-gradient(to right, ${colorStart},${colorEnd})`;
});
});
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->