<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!-- 本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>类原生安卓15</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* === CSS 变量定义 === */
:root {
--bg-color: #fff1f0;
--card-bg: white;
--text-color: #333;
--shadow-color: rgba(0,0,0,0.1);
--button-blue: linear-gradient(135deg, #4facfe, #00f2fe);
--button-purple: linear-gradient(135deg, #4facfe, #7352ff);
--button-pink: linear-gradient(135deg, #ff4d79, #ff0072);
--button-blue-dark: linear-gradient(135deg, #1a73e8, #0d47a1);
--button-purple-dark: linear-gradient(135deg, #673ab7, #3f51b5);
}
.dark-theme {
--bg-color: #121212;
--card-bg: #1e1e1e;
--text-color: #f0f0f0;
--shadow-color: rgba(0,0,0,0.3);
--button-blue: linear-gradient(135deg, #4facfe, #00f2fe);
--button-purple: linear-gradient(135deg, #673ab7, #3f51b5);
--button-pink: linear-gradient(135deg, #ff4d79, #ff0072);
--button-blue-dark: linear-gradient(135deg, #64b5f6, #1976d2);
--button-purple-dark: linear-gradient(135deg, #7b1fa2, #4a148c);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-color);
transition: background 0.3s ease, color 0.3s ease;
position: relative;
}
/* === 主题切换按钮 === */
.theme-toggle {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
z-index: 3;
}
.theme-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: white;
box-shadow: 0 2px 10px var(--shadow-color);
transition: all 0.3s ease;
}
.dark-theme .theme-icon {
background: #333;
color: white;
}
/* === 容器 === */
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
z-index: 1;
}
.container {
position: relative;
max-width: 360px;
width: 90%;
background: var(--card-bg);
border-radius: 16px;
padding: 24px;
margin: 16px;
box-shadow: 0 8px 24px var(--shadow-color);
z-index: 2;
animation: popIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes popIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
h1 {
font-size: 20px;
font-weight: 500;
color: var(--text-color);
text-align: start;
margin-bottom: 8px;
}
.notice {
font-size: 14px;
font-weight: 400;
color: #616161;
text-align: start;
margin-bottom: 20px;
}
/* === 输入框 === */
.code input {
width: 100%;
padding: 12px 16px;
background: #f1f3f4;
border: none;
border-radius: 12px;
font-size: 16px;
color: var(--text-color);
transition: background 0.2s ease;
}
.code input:focus {
outline: none;
background: #e8eaf6;
box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.1);
}
.code input::placeholder {
color: #757575;
}
/* === 渐变按钮 === */
.code button,
.code-other button {
width: 100%;
padding: 12px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
color: #ffffff;
cursor: pointer;
position: relative;
overflow: hidden;
background: var(--button-blue);
}
.code-ver {
background: var(--button-purple);
}
.code-buy {
background: var(--button-pink);
}
.code button:hover,
.code-other button:hover {
filter: brightness(1.1);
}
/* === 按钮涟漪效果 === */
.ripple {
position: absolute;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
pointer-events: none;
animation: ripple-effect 0.6s ease-out;
}
@keyframes ripple-effect {
to {
width: 200%;
height: 200%;
opacity: 0;
}
}
/* === 辅助按钮组 === */
.code-other {
display: flex;
gap: 12px;
justify-content: flex-end;
}
.code-other button {
flex: 1;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: #fff;
}
/* === 底部信息 === */
.footer {
margin-top: 24px;
text-align: center;
}
.footer button {
background: none;
border: none;
font-size: 14px;
font-weight: 500;
color: var(--text-color);
cursor: default;
}
.footer span {
display: block;
font-size: 12px;
font-weight: 400;
color: #616161;
margin-top: 4px;
}
@media (max-width: 480px) {
.container {
padding: 16px;
margin: 8px;
}
h1 {
font-size: 18px;
}
.notice {
font-size: 12px;
}
.code input,
.code button {
padding: 10px 14px;
}
.code-other {
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.code-other button {
width: auto;
}
}
</style>
</head>
<body>
<!-- == 主题切换按钮 == -->
<div class="theme-toggle" onclick="toggleTheme()">
<div class="theme-icon">
<svg id="themeIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<!-- 默认太阳图标 -->
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="11" x2="3" y2="13"></line>
<line x1="21" y1="11" x2="23" y2="13"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</div>
</div>
<!-- == 页面容器 == -->
<div class="overlay"></div>
<div class="container">
<h1 id="title">title</h1>
<span class="notice" id="notice">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)">
激活
</button>
</div>
<div class="code-other">
<button id="Query_Trial" class="code-ver" onclick="Call_Query_Trial(code.value)">查询卡密</button>
<button id="Pay" class="code-buy" onclick="Call_Pay()">购买卡密</button>
</div>
<div class="footer">
<button>『中纸片』提供服务</button>
<span>『中纸片』让我们服务与您</span>
</div>
</div>
<script>
// == 动态按钮涟漪 ==
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const ripple = document.createElement('span');
ripple.className = 'ripple';
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
this.appendChild(ripple);
ripple.addEventListener('animationend', () => {
ripple.remove();
});
});
});
// == 主题切换逻辑 ==
function toggleTheme() {
document.body.classList.toggle('dark-theme');
const icon = document.getElementById('themeIcon');
if (document.body.classList.contains('dark-theme')) {
// 显示月亮图标
icon.innerHTML = `
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
`;
} else {
// 显示太阳图标
icon.innerHTML = `
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="11" x2="3" y2="13"></line>
<line x1="21" y1="11" x2="23" y2="13"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
`;
}
}
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();
}
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->