<!-- 本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">
<title>验证系统</title>
<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-lime {
--primary: #d4e157;
--primary-light: #e6ee9c;
--bg: #f9fbe7;
--text: #9e9d24;
--text-light: #dce775;
--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;
}
</style>
</head>
<body class="theme-purple">
<button class="theme-switcher" id="themeSwitcher">
<i class="fas fa-palette"></i>
</button>
<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-Z00-9_-]{1,16}$">
</div>
<div class="buttons">
<button class="btn" onclick="validateAndCallVerify()">
<i class="fas fa-check-circle"></i> 验证
</button>
<button class="btn" onclick="validateAndCallQueryTrial()" 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();
const noticeText = PanGolin.GetNotice();
document.getElementById("notice").innerText = noticeText;
const trialBtn = document.getElementById("Query_Trial");
const isTrial = PanGolin.Is_Trial();
if (isTrial) {
trialBtn.innerHTML = '<i class="fas fa-clock"></i> 试用';
} else {
trialBtn.innerHTML = '<i class="fas fa-search"></i> 查码';
}
document.getElementById("Pay").style.display = PanGolin.Is_Pay() ? "flex" : "none";
function showPlaceholderMessage(message, duration) {
const input = document.getElementById("code");
const originalPlaceholder = input.placeholder;
input.placeholder = message;
setTimeout(() => {
input.placeholder = originalPlaceholder;
}, duration);
}
function validateInput() {
const input = document.getElementById("code").value.trim();
if (input === "") {
showPlaceholderMessage("请输入激活码", 3000);
return false;
} else {
return true;
}
}
function validateAndCallVerify() {
if (validateInput()) {
const btn = event.target;
const originalHtml = btn.innerHTML;
btn.innerHTML = '<span class="loading"></span> 验证中';
btn.disabled = true;
setTimeout(() => {
Call_Verify(document.getElementById("code").value);
btn.innerHTML = originalHtml;
btn.disabled = false;
}, 800);
}
}
function validateAndCallQueryTrial() {
if (PanGolin.Is_Trial()) {
const btn = event.target;
const originalHtml = btn.innerHTML;
btn.innerHTML = '<span class="loading"></span> 试用中';
btn.disabled = true;
setTimeout(() => {
PanGolin.Trial();
btn.innerHTML = originalHtml;
btn.disabled = false;
}, 800);
} else {
if (validateInput()) {
const btn = event.target;
const originalHtml = btn.innerHTML;
btn.innerHTML = '<span class="loading"></span> 处理中';
btn.disabled = true;
setTimeout(() => {
PanGolin.Query(document.getElementById("code").value);
btn.innerHTML = originalHtml;
btn.disabled = false;
}, 800);
}
}
}
function Call_Verify(data) {
PanGolin.Verify(data);
}
function Call_Pay() {
const btn = event.target;
const originalHtml = btn.innerHTML;
btn.innerHTML = '<span class="loading"></span> 跳转中';
btn.disabled = true;
setTimeout(() => {
PanGolin.Pay();
btn.innerHTML = originalHtml;
btn.disabled = false;
}, 800);
}
const themeSwitcher = document.getElementById('themeSwitcher');
const themes = [
'theme-purple',
'theme-blue',
'theme-orange',
'theme-dark',
'theme-mint',
'theme-pink',
'theme-teal',
'theme-indigo',
'theme-amber',
'theme-cyan',
'theme-deep-purple',
'theme-green',
'theme-red',
'theme-lime',
'theme-brown'
];
let currentTheme = 0;C
themeSwitcher.addEventListener('click', () => {
themeSwitcher.classList.add('rotate');
currentTheme = (currentTheme + 1) % themes.length;
document.body.className = themes[currentTheme];
setTimeout(() => {
themeSwitcher.classList.remove('rotate');
}, 600);
});
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->