<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!-- 本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>
<style>
:root {
--space-black: #0F172A;
--neon-teal: #2DD4BF;
--cyber-purple: #7C3AED;
--terminal-green: #10B981;
}
body {
background: var(--space-black);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'HarmonyOS Sans', system-ui, sans-serif;
}
.main-container {
width: 380px;
background: rgba(15, 23, 42, 0.95);
border-radius: 16px;
padding: 28px;
border: 1px solid rgba(125, 211, 252, 0.1);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(12px);
}
.status-bar {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 24px;
}
.status-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 12px;
text-align: center;
border: 1px solid rgba(45, 212, 191, 0.1);
}
.status-label {
color: #94A3B8;
font-size: 12px;
margin-bottom: 4px;
}
.status-value {
color: var(--neon-teal);
font-size: 18px;
font-weight: 600;
}
.title-section {
text-align: center;
margin-bottom: 28px;
}
.main-title {
color: #E2E8F0;
font-size: 24px;
letter-spacing: 1px;
position: relative;
display: inline-block;
}
.main-title::after {
content: "";
display: block;
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--neon-teal), transparent);
margin: 8px auto 0;
}
.input-group {
position: relative;
margin-bottom: 24px;
}
.activation-input {
width: 100%;
padding: 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(45, 212, 191, 0.3);
border-radius: 8px;
color: #E2E8F0;
font-size: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.activation-input:focus {
outline: none;
border-color: var(--neon-teal);
box-shadow: 0 0 12px rgba(45, 212, 191, 0.2);
}
.verify-btn {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
background: var(--neon-teal);
color: var(--space-black);
border: none;
padding: 8px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.verify-btn:hover {
background: #22c5ae;
box-shadow: 0 0 12px rgba(45, 212, 191, 0.3);
}
.time-display {
display: flex;
justify-content: space-between;
color: #64748B;
margin: 20px 0;
font-size: 14px;
}
.announcement-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(45, 212, 191, 0.1);
border-radius: 8px;
padding: 16px;
margin-top: 20px;
}
.announcement-title {
color: var(--neon-teal);
font-size: 14px;
margin-bottom: 8px;
}
.announcement-content {
color: #94A3B8;
font-size: 13px;
line-height: 1.5;
min-height: 80px;
}
.control-buttons {
display: flex;
gap: 12px;
margin-top: 24px;
}
.control-btn {
flex: 1;
background: rgba(45, 212, 191, 0.1);
border: 1px solid rgba(45, 212, 191, 0.3);
color: var(--neon-teal);
padding: 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.control-btn:hover {
background: rgba(45, 212, 191, 0.2);
}
</style>
</head>
<body>
<div class="main-container">
<div class="status-bar">
<div class="status-item">
<div class="status-label">设备编号</div>
<div class="status-value">11</div>
</div>
<div class="status-item">
<div class="status-label">剩余次数</div>
<div class="status-value">88</div>
</div>
<div class="status-item">
<div class="status-label">在线设备</div>
<div class="status-value">1</div>
</div>
</div>
<div class="title-section">
<h1 class="main-title" id="title">乔治弱网验证系统</h1>
</div>
<div class="input-group">
<input type="text"
class="activation-input"
id="code"
placeholder="输入激活码"
pattern="^[a-zA-Z0-9_-]{1,16}$">
<button class="verify-btn"
ontouchstart="mStart(this)"
ontouchend="mUp(this)"
onclick="Call_Verify(code.value)">
验证
</button>
</div>
<div class="time-display">
<div>验证时长：01:34:35</div>
<div>本次启动：00:12</div>
</div>
<div class="announcement-box" id="notice">
<div class="announcement-title">系统公告</div>
<div class="announcement-content"></div>
</div>
<div class="control-buttons">
<button class="control-btn"
id="Query_Trial"
ontouchstart="tStart(this)"
ontouchend="tUp(this)"
onclick="Call_Query_Trial(code.value)">
查询状态
</button>
<button class="control-btn"
id="Pay"
ontouchstart="tStart(this)"
ontouchend="tUp(this)"
onclick="Call_Pay()">
购买激活
</button>
</div>
</div>
<script>
// 功能逻辑保持不变
function Call_Verify(n) {
PanGolin.Verify(n)
}
function Call_Query_Trial(n) {
PanGolin.Is_Trial() ? PanGolin.Trial() : PanGolin.Query(n)
}
function Call_Pay() {
PanGolin.Pay()
}
function mStart(n) {
n.style.background = "linear-gradient(135deg, #1a4b6d, #0F172A)"
}
function mUp(n) {
n.style.background = "var(--neon-teal)"
}
function tStart(n) {
n.style.color = "#2DD4BF";
n.style.boxShadow = "0 0 10px rgba(45, 212, 191, 0.5)"
}
function tUp(n) {
n.style.color = "var(--neon-teal)";
n.style.boxShadow = "none"
}
// 初始化
document.getElementById("title").innerHTML = PanGolin.GetTitle();
document.querySelector(".announcement-content").innerHTML = PanGolin.GetNotice();
document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() ? "免费试用" : "查询状态";
document.getElementById("Pay").style.display = PanGolin.Is_Pay() ? "block" : "none";
// 时间更新逻辑
let startSeconds = 12;
setInterval(() => {
startSeconds++;
const minutes = Math.floor(startSeconds / 60).toString().padStart(2, '0');
const seconds = (startSeconds % 60).toString().padStart(2, '0');
document.querySelector('.time-display div:last-child').textContent = `本次启动：${minutes}:${seconds}`;
}, 1000);
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->