<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>游戏验证</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
font-family: 'Press Start 2P', cursive;
color: #fff;
overflow: hidden;
perspective: 1000px;
}
.game-scene {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background:
linear-gradient(transparent 95%, #1a1a1a 95%),
linear-gradient(90deg, transparent 95%, #1a1a1a 95%);
background-size: 50px 50px;
transform: perspective(500px) rotateX(60deg);
transform-origin: center center;
animation: gridMove 20s linear infinite;
z-index: 0;
}
@keyframes gridMove {
from { background-position: 0 0; }
to { background-position: 0 1000px; }
}
.game-container {
position: relative;
width: 600px;
z-index: 1;
transform-style: preserve-3d;
}
.game-box {
background: rgba(0, 0, 0, 0.8);
border: 4px solid #ff0066;
border-radius: 10px;
padding: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 0 30px rgba(255, 0, 102, 0.3);
}
.energy-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: #333;
}
.energy-fill {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #ff0066, #ff3399);
transform-origin: left;
animation: energyDrain 3s linear infinite;
}
@keyframes energyDrain {
0% { transform: scaleX(1); }
50% { transform: scaleX(0.3); }
100% { transform: scaleX(1); }
}
.game-title {
text-align: center;
font-size: 24px;
color: #ff0066;
margin-bottom: 30px;
text-transform: uppercase;
position: relative;
text-shadow: 0 0 10px rgba(255, 0, 102, 0.5);
}
.game-title::after {
content: 'v2.0.4';
position: absolute;
right: 0;
top: 0;
font-size: 12px;
color: #666;
}
.input-container {
background: rgba(255, 0, 102, 0.1);
border: 2px solid #ff0066;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
position: relative;
}
.input-container::before {
content: '>';
color: #ff0066;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
animation: blink 1s step-end infinite;
}
.key-input {
width: 100%;
background: transparent;
border: none;
color: #ff0066;
font-family: 'Press Start 2P', cursive;
font-size: 16px;
padding-left: 30px;
letter-spacing: 2px;
}
.key-input::placeholder {
color: rgba(255, 0, 102, 0.3);
}
.key-input:focus {
outline: none;
}
.verify-btn {
width: 100%;
padding: 20px;
background: #ff0066;
border: none;
border-radius: 5px;
color: #fff;
font-family: 'Press Start 2P', cursive;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.verify-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(255, 0, 102, 0.4);
}
.verify-btn:active {
transform: translateY(0);
}
.verify-btn::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transform: rotate(45deg);
animation: shine 2s linear infinite;
}
@keyframes shine {
0% { transform: rotate(45deg) translateY(-100%); }
100% { transform: rotate(45deg) translateY(100%); }
}
.status-box {
margin-top: 20px;
text-align: center;
font-size: 14px;
height: 20px;
color: #ff0066;
}
.status-box.error {
color: #ff0000;
animation: shake 0.5s ease-in-out;
}
.status-box.success {
color: #00ff66;
animation: pulse 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: #ff0066;
border-radius: 50%;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
@media (max-width: 640px) {
.game-container {
width: 90%;
margin: 20px;
}
.game-title {
font-size: 20px;
}
.key-input {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="game-scene"></div>
<div class="game-container">
<div class="game-box">
<div class="energy-bar">
<div class="energy-fill"></div>
</div>
<div class="particles"></div>
<h1 id=title" class="game-title">系统验证</h1>
<div class="input-container">
<input type="text" class="key-input" placeholder="输入激活码" maxlength="32" id="code">
</div>
<button onclick="Call_Verify(code.value);" class="verify-btn" id="verifyBtn">验证</button>
<div class="status-box" id="statusMsg"></div>
</div>
</div>
<script>
function createParticles() {
const container = document.querySelector('.particles');
const particleCount = 20;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const x = Math.random() * 100;
const y = Math.random() * 100;
const duration = 2 + Math.random() * 2;
const delay = Math.random() * 2;
particle.style.left = `${x}%`;
particle.style.top = `${y}%`;
particle.style.animation = `float ${duration}s ${delay}s ease-in-out infinite`;
container.appendChild(particle);
}
}
document.getElementById('verifyBtn').addEventListener('click', function() {
const statusBox = document.getElementById('statusMsg');
const keyInput = document.getElementById('keyInput').value;
if (keyInput.length < 19) {
statusBox.textContent = '密钥不完整';
statusBox.className = 'status-box error';
return;
}
statusBox.textContent = '验证中...';
statusBox.className = 'status-box';
this.style.transform = 'scale(0.95)';
setTimeout(() => this.style.transform = '', 200);
createParticles();
</script>
<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";
}
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->