<!-- 本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>
* {
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: transparent; /* Transparent to mimic dialog overlay */
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4); /* Subtle dim for dialog effect */
backdrop-filter: blur(2px); /* Slight blur for modern feel */
z-index: 1;
}
.container {
position: relative;
max-width: 360px;
width: 90%;
background: #ffffff;
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);
}
@keyframes popIn {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
h1 {
font-size: 20px;
font-weight: 500;
color: #1a1a1a;
text-align: start;
margin-bottom: 8px;
}
.notice {
font-size: 14px;
font-weight: 400;
color: #616161;
text-align: start;
margin-bottom: 20px;
}
.code {
margin-bottom: 20px;
}
.code input {
width: 100%;
padding: 12px 16px;
background: #f1f3f4;
border: none;
border-radius: 12px;
font-size: 16px;
color: #1a1a1a;
transition: background 0.2s ease;
}
.code input:focus {
outline: none;
background: #e8eaf6;
box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.1); /* Dynamic purple accent */
}
.code input::placeholder {
color: #757575;
}
.code button {
width: 100%;
padding: 12px;
background: #6750a4; /* Android 15 dynamic purple */
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 500;
color: #ffffff;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background 0.2s ease;
}
.code button:hover {
background: #5e4696;
}
/* 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: flex-end;
}
.code-other button {
padding: 10px 16px;
border: none;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
position: relative;
overflow: hidden;
background: transparent;
color: #6750a4;
transition: background 0.2s ease;
}
.code-other .code-ver:hover {
background: #e8eaf6;
}
.code-other .code-buy {
color: #00796b; /* Teal accent for distinction */
}
.code-other .code-buy:hover {
background: #e0f2f1;
}
.code-other button::after {
content: '';
position: absolute;
background: rgba(103, 80, 164, 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: 500;
color: #6750a4;
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 {
padding: 10px;
text-align: center;
}
}
</style>
</head>
<body>
<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);" 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>
<script>
// Original logic
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 -->
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->