<!-- 本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">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
}
a {
text-decoration: none;
}
a:focus {
text-decoration: none;
}
button,
input {
outline: none;
border: none;
background-color: transparent;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
}
.message {
position: relative;
width: 100%;
height: 250px;
background-image: linear-gradient(#50807b, #625656);
border-top: 1px solid #767278;
}
.message::after {
content: '';
position: absolute;
left: 0;
bottom: -29px;
width: 100%;
height: 30px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
background-color: #625656;
}
.msgtop {
display: flex;
justify-content: flex-start;
margin-top: 58px;
}
.msgtop>img {
width: 120px;
height: 120px;
border-radius: 120px;
box-shadow: 1px 1px 5px #888888;
margin-left: 25px;
margin-right: 20px;
overflow: hidden;
}
.msgtop div {
width: 50%;
padding-right: 10px;
}
.msgtop div h1 {
font-size: 23px;
color: #ffffff;
font-weight: 400;
margin-bottom: 10px;
}
.msgtop div img {
width: 25px;
height: 25px;
margin-right: 8px;
vertical-align: middle;
}
.msgtop div>span {
display: block;
width: 100%;
height: 90px;
color: #dddddd;
white-space: pre-line;
word-wrap: break-word;
overflow: hidden;
}
.message .more {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left: 50%;
bottom: -22px;
transform: translate(-50%, 50%);
width: 80%;
height: 45px;
background-color: #fff;
border-radius: 35px;
z-index: 3;
box-shadow: 0px 0px 5px #ccc;
padding: 0 23px;
}
.message .more p {
width: 2px;
height: 23px;
background-color: #efefef;
}
.message .more span {
font-size: 14px;
height: 22px;
line-height: 22px;
}
.message .more span img {
width: 22px;
height: 22px;
margin-right: 5px;
vertical-align: top;
}
.code {
margin-top: 65px;
width: 100%;
padding: 0 20px;
}
.code .code-vertify {
position: relative;
width: 100%;
height: 50px;
}
.code .code-vertify input {
width: 100%;
height: 100%;
border-radius: 8px;
background-color: #fff;
box-shadow: 0px 0px 5px #bbb;
padding-left: 45px;
}
.code .code-vertify img {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 8px;
width: 30px;
height: 30px;
}
.code .code-vertify button {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 25%;
height: 38px;
background-color: #666;
border-radius: 8px;
color: #fff;
}
.code .code-vertify button:active {
background-color: #fff;
color: #000000;
border: 1px solid #666;
}
.footer {
width: 100%;
height: 100px;
margin-top: -100px;
box-shadow: 0px -1px 2px #ccc;
line-height: 100px;
}
.footer p {
width: 100%;
text-align: center;
}
.code-other {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin-top: 20px;
}
.code-other button {
width: 45%;
height: 38px;
background-color: #666;
border-radius: 8px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="message">
<div class="msgtop">
<a href="https://zhongzhipian.top">
<img border="0" src="https://zhongzhipian.top/assets/img/logo.png" alt="『中纸片』" width="100" height="100"></a></p>
<div>
<h1 id="title">标题</h1>
<p>
<img src="https://s3.bmp.ovh/imgs/2021/08/8398da5b52c17b4e.png" alt=""><span style="color: #fff;">公告：</span>
</p>
<span class="notice">出现此内容时，表示未设置或获取不到公告</span>
</div>
</div>
<div class="more">
<span onclick="window.location.href='' "><img src="https://s3.bmp.ovh/imgs/2021/08/70c7e0b689ec1f71.png" alt="">客服</span>
<p></p>
<span onclick="window.location.href='' "><img src="https://s3.bmp.ovh/imgs/2021/08/ada001e3a1624ea1.png" alt="">Q群</span>
<p></p>
<span onclick="window.location.href='' "><img src="https://s3.bmp.ovh/imgs/2021/08/3c50941a34129a26.png" alt="">分享</span>
</div>
</div>
<div class="code">
<div class="code-vertify">
<img src="https://s3.bmp.ovh/imgs/2021/08/2bb89e02b5f55bf4.png" alt="">
<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>
</div>
<script>
let docHeight = document.body.offsetHeight;
window.onresize = () => {
document.body.style.height = docHeight + 'px';
}
document.getElementById("title").innerHTML = PanGolin.GetTitle();
document.getElementById("notice").innerHTML = PanGolin.GetNotice();
document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() == true ? "试用" : "查码";
document.getElementById("Pay").style.display = PanGolin.Is_Pay() == true ? "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 -->