卡片DIY模板

2250898553 2025-03-28 24 次下载
详细描述
实时预览
源代码
<!-- 本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,maximum-scale=1,user-scalable=no">
    <title>new-module</title>
    <style>*{margin:0;padding:0;box-sizing:border-box;font-size:16px;font-weight:700}input,textarea{-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;outline:0;border:#ddd 1px solid}input:focus,textarea:focus{box-shadow:0 0 5px #2992d8;border:#29c4d8 1px solid}button{outline:0;background-color:transparent;border:none}a{text-decoration:none;color:#0084ff}body,html{height:100%;background-color:#f3f7fa}.container{width:100%;min-height:100%;padding:50px 15px 0}.header{position:relative;width:100%;height:120px;background-color:#fff;border-radius:120px;box-shadow:1px 1px 8px #ccc}.header .logo{position:absolute;top:-10px;left:-10px;width:140px;height:140px;border-radius:120px;background-color:#87ceeb;border:10px solid #fff;box-shadow:5px 2px 8px #ccc;overflow:hidden}.header>div{position:absolute;top:50%;left:150px;transform:translateY(-50%)}.header>div h1{font-size:23px}.code,.info{position:relative;width:100%;background-color:#fff;margin-top:35px;padding:15px;box-shadow:0 0 8px #ccc;border-radius:5px}.info{padding:30px 15px;word-wrap:break-word}.code h2,.info h2{position:absolute;height:30px;top:-10px;left:15px;line-height:30px;padding:0 10px;color:#fff;border-radius:5px;background-color:#239efc;box-shadow:0 1px 8px #239efc}.code h2 img,.info h2 img{width:18px;height:16px;vertical-align:middle;margin-bottom:3px;margin-right:5px}.code-txt{position:relative;width:100%;height:50px;margin-top:20px}.code-txt img{position:absolute;top:50%;left:8px;transform:translateY(-50%);width:30px;height:30px}.code-txt input{width:100%;height:100%;border:2px solid #999;border-radius:10px;padding-left:40px}.code-txt button{position:absolute;top:0;right:0;width:30%;height:100%;background-image:linear-gradient(to right,#7391ef,#c755f9);border-radius:10px;color:#fff}.code-txt button:active{top:2px}.code>button{height:35px;border-radius:10px;color:#fff;background-color:#269735;margin-top:10px;padding:0 10px}.code>button:active{background-color:#fff;color:#000}.code>p{margin-top:15px;font-weight:400;color:#666}.code>button:last-child{margin-top:3px;background-color:#c26a22}.code>button:last-child:active{background-color:#fff;color:#000}.footer{width:100%;height:110px;margin-top:-110px;padding:0 20px}.footer .left p{margin-top:8px}.footer .left p img{width:18px;height:18px;margin-right:8px;vertical-align:middle}</style>
  </head>
  
  <body>
    <div class="container">
      <div class="header">
        <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>『中纸片』提供服务</p>
        </div>
      </div>
      <div class="code">
        <h2>
          <img src="https://s3.bmp.ovh/imgs/2021/08/d1897d5f3a0d3e46.png" alt="">
          <span>卡密验证登入</span>
        </h2>
        <div class="code-txt">
          <img src="https://s3.bmp.ovh/imgs/2021/08/37625479bd27ad6b.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>
        <button id="Query_Trial" type="submit" class="code-ver" onclick="Call_Query_Trial(code.value)">查询卡密</button>
        <p>购买卡密>>></p>
        <button id="Pay" type="submit" class="code-buy" onclick="Call_Pay()">点击购买卡密</button>
      </div>
      <div class="info">
        <h2>
          <img src="https://s3.bmp.ovh/imgs/2021/08/8f1063739b006b97.png" alt="">
          <span>系统公告</span>
        </h2>
        <p id="notice">
        </p>
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <p>
          <img src="https://s3.bmp.ovh/imgs/2021/08/24a59b9720787aba.png" alt="">
          <a href="https://emlog.zhongzhipian.top">『中纸片』论坛</a>
        </p>
        <p>
          <img src="https://s3.bmp.ovh/imgs/2021/08/2b223c4d098b295d.png" alt="">
          <a href="https://diy.zhongzhipian.top">『中纸片』DIY共享平台</a>
        </p>
        <p>
          <img src="https://s3.bmp.ovh/imgs/2021/08/6e6b2f6ee892ce23.png" alt="">
          <a href="https://zhongzhipian.top">『中纸片』官网</a>
        </p>
      </div>
      <div class="right">
      </div>
    </div>

  
  <script>function Call_Verify(n) {
        PanGolin.Verify(n)
      }
      function Call_Query_Trial(n) {
        PanGolin.Is_Trial() ? PanGolin.Trial() : PanGolin.Query(n)
      }
      function Call_Pay() {
        PanGolin.Pay()
      }
      function mStart(n) {
        n.style.backgroundColor = "#075aa3"
      }
      function mUp(n) {
        n.style.backgroundColor = "#fff"
      }
      function tStart(n) {
        n.style.color = "#075db3",
        n.style.textDecoration = "underline"
      }
      function tUp(n) {
        n.style.color = "#a0a4a7",
        n.style.textDecoration = "none"
      }
      document.getElementById("title").innerHTML = PanGolin.GetTitle(),
      document.getElementById("notice").innerHTML = PanGolin.GetNotice(),
      document.getElementById("Query_Trial").innerHTML = 1 == PanGolin.Is_Trial() ? "试用": "查码",
      document.getElementById("Pay").style.display = 1 == PanGolin.Is_Pay() ? "block": "none";</script>
  </body>


</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->