iOS风格_可解绑_

3570971544 2026-06-26 0
详细描述
实时预览
源代码
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>授权验证</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
    }
    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,0.4);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
    }
    /* 主iOS验证弹窗 */
    .ios-alert {
      width: 82%;
      max-width: 360px;
      background: #ffffff;
      border-radius: 18px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      text-align: center;
    }
    .ios-alert__wrap {
      padding: 24px 20px;
    }
    .ios-alert__title {
      font-size: 18px;
      color: #1c1c1e;
      font-weight: 500;
      margin-bottom: 6px;
    }
    .ios-alert__notice {
      font-size: 14px;
      color: #6e6e73;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    #cardKey {
      width: 100%;
      border: 1px solid #e5e5e7;
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 16px;
      color: #1c1c1e;
      background: #fff;
    }
    #cardKey:focus {
      outline: none;
      border-color: #007aff;
    }
    .ios-alert__btns {
      display: flex;
      border-top: 1px solid #e5e5e7;
    }
    .ios-alert__btn {
      flex: 1;
      padding: 14px 0;
      font-size: 17px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      color: #007aff;
      border-right: 1px solid #e5e5e7;
    }
    .ios-alert__btn:last-child {
      border-right: none;
    }
    /* 结果提示弹窗（单独确认关闭，不自动消失） */
    .tip-alert {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;
      display: none;
    }
    .tip-box {
      width: 80%;
      max-width: 320px;
      background: #fff;
      border-radius: 18px;
      overflow: hidden;
      text-align: center;
    }
    .tip-text {
      padding: 26px 20px;
      font-size: 16px;
      color: #1c1c1e;
      line-height: 1.6;
    }
    .tip-close-btn {
      width: 100%;
      padding: 14px 0;
      font-size: 17px;
      border: none;
      background: transparent;
      color: #007aff;
      border-top: 1px solid #e5e5e7;
      cursor: pointer;
      font-family: inherit;
    }
  </style>
</head>
<body>
  <!-- 主验证弹窗 -->
  <div class="ios-alert">
    <div class="ios-alert__wrap">
      <div class="ios-alert__title" id="title">请输入卡密</div>
      <div class="ios-alert__notice" id="notice"></div>
      <input id="cardKey" type="text" placeholder="卡密加q3570971544" oninput="checkEmptyKey()">
    </div>
    <div class="ios-alert__btns">
      <button class="ios-alert__btn" onclick="Call_Verify(cardKey.value)">确认</button>
      <button class="ios-alert__btn" onclick="goBuy()">前往购卡</button>
      <button class="ios-alert__btn" onclick="submitKm()">解绑</button>
    </div>
  </div>

  <!-- 验证结果提示弹窗（必须点确认关闭，不会自动消失） -->
  <div class="tip-alert" id="tipMask">
    <div class="tip-box">
      <div class="tip-text" id="tipContent"></div>
      <button class="tip-close-btn" onclick="closeTip()">确认</button>
    </div>
  </div>

  <script>
    // 心跳保活定时器
    let heartTimer = null;
    const heartInterval = 3000;

    // 启动心跳保活
    function startHeartBeat() {
      if (heartTimer) return;
      heartTimer = setInterval(function() {
        if (typeof PanGolin !== 'undefined' && PanGolin.HeartBeat) {
          PanGolin.HeartBeat();
        }
      }, heartInterval);
    }
    // 停止心跳保活
    function stopHeartBeat() {
      if (heartTimer) {
        clearInterval(heartTimer);
        heartTimer = null;
      }
    }
    // 输入为空直接退出闪退
    function checkEmptyKey(){
        let km = document.getElementById("cardKey").value.trim();
        if(km == ""){
            if (typeof PanGolin !== 'undefined' && PanGolin.ExitApp) {
                PanGolin.ExitApp();
            }
        }
    }
    // 打开提示弹窗
    function openTip(msg){
      document.getElementById("tipContent").innerText = msg;
      document.getElementById("tipMask").style.display = "flex";
    }
    // 关闭提示弹窗
    function closeTip(){
      document.getElementById("tipMask").style.display = "none";
    }
    // 确认验证对接云纸片，模拟回调提示（实际成功/失败由云纸片回调替换，当前文案按你要求设置）
    function Call_Verify(v) {
      let trimVal = v.trim();
      if(!trimVal){
        openTip("请填写卡密");
        return;
      }
      // 实际运行由PanGolin验证回调判定成功失败，这里预留逻辑入口，提示文案按你的要求：
      // 验证成功文案：尊敬的用户，您的卡密验证成功
      // 验证失败文案：卡密不存在，请查看是否正确
      if (typeof PanGolin !== 'undefined' && PanGolin.Verify) {
        // 云纸片内部校验后，成功时调用openTip("尊敬的用户，您的卡密验证成功")
        // 失败时调用openTip("卡密不存在，请查看是否正确")
        PanGolin.Verify(trimVal);
      }
    }
    // 解绑跳转
    function submitKm(){
      let card = cardKey.value.trim();
      if(card == ''){
        openTip("请先输入卡密");
        return;
      }
      window.location.href = `https://zhongzhipian.top/dmdm.php?card=${card}`;
    }
    // 购卡跳转
    function goBuy(){
      window.open('https://faka08.com/shop/TA9VCV0F','_blank');
    }
    // 页面加载读取云纸片标题公告、启动心跳
    document.addEventListener('DOMContentLoaded', () => {
      if(typeof PanGolin !== 'undefined'){
        title.textContent = PanGolin.GetTitle();
        notice.textContent = PanGolin.GetNotice();
      }
      startHeartBeat();
    });
    // 页面卸载停心跳
    window.addEventListener('beforeunload', function(){
      stopHeartBeat();
    });
  </script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->