<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>『中纸片』DIY共享平台</title>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Sacramento&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Sacramento', cursive;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ffe6f6, #ffc9e7); /* Soft gradient background */
overflow: hidden;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.3); /* Subtle white overlay */
backdrop-filter: blur(2px); /* Slight blur for modern feel */
z-index: 1;
}
.container {
position: relative;
max-width: 360px;
width: 90%;
background: url('https://img.alicdn.com/imgextra/i4/O1CN01YRYNQy1BtCqUwMkKx_!!6000000006392-2-tps-1000-666.jpg') no-repeat center center/cover; /* Cute pattern background */
border-radius: 16px;
padding: 24px;
margin: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
z-index: 2;
animation: popIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
color: #fff;
position: relative;
}
@keyframes popIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
h1 {
font-size: 24px;
font-weight: normal;
text-align: center;
margin-bottom: 16px;
color: #ff69b4;
}
.notice {
font-size: 16px;
font-style: italic;
text-align: center;
margin-bottom: 24px;
}
.code {
margin-bottom: 24px;
position: relative;
}
.code input {
width: calc(100% - 32px);
padding: 12px 16px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 12px;
font-size: 16px;
color: #fff;
transition: background 0.2s ease;
outline: none;
}
.code input:focus {
background: rgba(255, 255, 255, 0.2);
}
.code input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.code button {
width: 100%;
padding: 12px;
background: #ff69b4; /* Hot pink */
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: bold;
color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background 0.2s ease;
}
.code button:hover {
background: #ff1493;
}
/* Ripple effect */
.code button::after {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.4);
width: 0;
height: 0;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: width 0.4s ease, height 0.4s ease;
}
.code button:active::after {
width: 200px;
height: 200px;
}
.code-other {
display: flex;
gap: 12px;
justify-content: space-between;
margin-top: 16px;
}
.code-other button {
padding: 10px 16px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
position: relative;
overflow: hidden;
background: transparent;
color: #ff69b4;
transition: background 0.2s ease;
}
.code-other .code-ver:hover {
background: rgba(255, 105, 180, 0.2);
}
.code-other .code-buy {
color: #dda0dd; /* Light purple accent for distinction */
}
.code-other .code-buy:hover {
background: rgba(221, 160, 221, 0.2);
}
.code-other button::after {
content: '';
position: absolute;
background: rgba(255, 105, 180, 0.3);
width: 0;
height: 0;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: width 0.4s ease, height 0.4s ease;
}
.code-other button:active::after {
width: 100px;
height: 100px;
}
.footer {
margin-top: 24px;
text-align: center;
}
.footer button {
background: none;
border: none;
font-size: 14px;
font-weight: bold;
color: #ff69b4;
cursor: default;
}
.footer span {
display: block;
font-size: 12px;
font-style: italic;
color: #fff;
margin-top: 4px;
}
/* Floating text effect */
.floating-text {
position: absolute;
font-size: 18px;
color: #ff69b4;
opacity: 0;
animation: floatText 1s ease-out forwards;
}
@keyframes floatText {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-20px); }
}
/* Decorative hearts */
.heart {
position: absolute;
width: 20px;
height: 20px;
background-color: #ff69b4;
transform: rotate(-45deg);
animation: heartBeat 1s infinite alternate;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #ff69b4;
border-radius: 50%;
}
.heart:before {
top: -10px;
left: 0;
}
.heart:after {
left: 10px;
top: 0;
}
@keyframes heartBeat {
0% { transform: scale(1) rotate(-45deg); }
100% { transform: scale(1.2) rotate(-45deg); }
}
/* Stars */
.star {
position: absolute;
width: 5px;
height: 5px;
background-color: #fff;
border-radius: 50%;
animation: twinkle 1.5s infinite alternate;
}
@keyframes twinkle {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
/* Bubbles */
.bubble {
position: absolute;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: bubbleRise 3s infinite ease-in-out;
}
@keyframes bubbleRise {
0% { bottom: 0; opacity: 0.5; transform: translateX(0); }
100% { bottom: 100%; opacity: 0; transform: translateX(50px); }
}
/* Confetti */
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #ff69b4;
border-radius: 50%;
animation: confettiFly 2s infinite ease-in-out;
}
@keyframes confettiFly {
0% { bottom: 0; opacity: 1; transform: translateX(0) rotate(0deg); }
100% { bottom: 100%; opacity: 0; transform: translateX(100px) rotate(360deg); }
}
/* Flowers */
.flower {
position: absolute;
width: 20px;
height: 20px;
background-color: #ffcccb;
border-radius: 50%;
animation: flowerSpin 2s infinite alternate;
}
.flower:before,
.flower:after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background-color: #ffcccb;
border-radius: 50%;
}
.flower:before {
top: -10px;
left: 5px;
}
.flower:after {
top: 5px;
left: -10px;
}
@keyframes flowerSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="container" id="container">
<h1 id="title">欢迎使用我们的服务</h1>
<span class="notice" id="notice">请输入您的激活码以继续享受更多功能！</span>
<div class="code">
<input type="text" name="code" id="code" pattern="^[a-zA-Z0-9_-]{1,16}$" placeholder="请输入你的激活码">
<button type="submit" onclick="Call_Verify(code.value);" ontouchstart="mStart(this)" ontouchend="mUp(this)">激活</button>
</div>
<div class="code-other">
<button id="Query_Trial" type="submit" class="code-ver" onclick="Call_Query_Trial(code.value);">查询卡密</button>
<button id="Pay" type="submit" class="code-buy" onclick="Call_Pay();">购买卡密</button>
</div>
<div class="footer">
<button>『中纸片』提供服务</button>
<span>『中纸片』让我们服务与您</span>
</div>
</div>
<div class="heart" style="top: 20%; left: 10%;"></div>
<div class="heart" style="top: 40%; left: 30%;"></div>
<div class="heart" style="top: 60%; left: 50%;"></div>
<div class="heart" style="top: 80%; left: 70%;"></div>
<div class="heart" style="top: 20%; left: 90%;"></div>
<div class="star" style="top: 10%; left: 5%;"></div>
<div class="star" style="top: 30%; left: 15%;"></div>
<div class="star" style="top: 50%; left: 25%;"></div>
<div class="star" style="top: 70%; left: 35%;"></div>
<div class="star" style="top: 90%; left: 45%;"></div>
<div class="star" style="top: 10%; left: 65%;"></div>
<div class="star" style="top: 30%; left: 75%;"></div>
<div class="star" style="top: 50%; left: 85%;"></div>
<div class="star" style="top: 70%; left: 95%;"></div>
<div class="star" style="top: 90%; left: 5%;"></div>
<div class="bubble" style="left: 10%;"></div>
<div class="bubble" style="left: 30%;"></div>
<div class="bubble" style="left: 50%;"></div>
<div class="bubble" style="left: 70%;"></div>
<div class="bubble" style="left: 90%;"></div>
<div class="confetti" style="left: 15%;"></div>
<div class="confetti" style="left: 45%;"></div>
<div class="confetti" style="left: 75%;"></div>
<div class="flower" style="top: 15%; left: 25%;"></div>
<div class="flower" style="top: 55%; left: 45%;"></div>
<div class="flower" style="top: 85%; left: 65%;"></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);
showFloatingText('已提交！');
}
function Call_Query_Trial(data) {
if (PanGolin.Is_Trial()) PanGolin.Trial();
else PanGolin.Query(data);
showFloatingText('正在查询...');
}
function Call_Pay() {
PanGolin.Pay();
showFloatingText('跳转中...');
}
function mStart(obj) {
obj.style.opacity = "0.8";
}
function mUp(obj) {
obj.style.opacity = "1";
}
function showFloatingText(text) {
const container = document.querySelector('.container');
const floatingText = document.createElement('div');
floatingText.className = 'floating-text';
floatingText.textContent = text;
container.appendChild(floatingText);
setTimeout(() => {
container.removeChild(floatingText);
}, 1000);
}
document.addEventListener('click', function(event) {
const x = event.clientX;
const y = event.clientY;
showFloatingTextAt(x, y, '点击了这里！');
});
function showFloatingTextAt(x, y, text) {
const floatingText = document.createElement('div');
floatingText.className = 'floating-text';
floatingText.textContent = text;
floatingText.style.position = 'fixed';
floatingText.style.left = `${x}px`;
floatingText.style.top = `${y}px`;
document.body.appendChild(floatingText);
setTimeout(() => {
document.body.removeChild(floatingText);
}, 1000);
}
function createRandomDecorations() {
const types = ['heart', 'star', 'bubble', 'confetti', 'flower'];
const colors = ['#ff69b4', '#fff', '#ffcccb'];
for (let i = 0; i < 10; i++) {
const type = types[Math.floor(Math.random() * types.length)];
const color = colors[Math.floor(Math.random() * colors.length)];
const decoration = document.createElement('div');
decoration.className = type;
decoration.style.left = `${Math.random() * 100}%`;
decoration.style.bottom = '0';
decoration.style.backgroundColor = color;
document.body.appendChild(decoration);
}
}
window.onload = createRandomDecorations;
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->