仿腾讯云风格

2250898553 2026-01-20 6
详细描述
实时预览
源代码
<!-- 本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" />
  <title>腾讯云授权验证</title>

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>

  <style>
    :root {
      --tc-blue: #006EFF;
      --tc-blue-dark: #0052D9;
      --tc-bg: #F2F4F7;
      --tc-border: #E6EAF0;
      --tc-text-main: #1D2129;
      --tc-text-sub: #4E5969;
      --tc-text-tip: #86909C;
      --tc-success: #00A870;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background:
        radial-gradient(circle at 20% 80%, rgba(0,110,255,0.04) 0%, transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(0,110,255,0.03) 0%, transparent 25%),
        linear-gradient(180deg, #F7F9FC 0%, #F2F4F7 100%);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Microsoft YaHei", sans-serif;
      color: var(--tc-text-main);
      padding: 20px;
    }

    .tc-card {
      width: 100%;
      max-width: 560px;
      background: #fff;
      border-radius: 16px;
      border: 1px solid var(--tc-border);
      box-shadow: 0 6px 24px rgba(0,0,0,.06);
      overflow: hidden;
    }

    /* ===== Header ===== */
    .tc-header {
      padding: 28px 32px;
      display: flex;
      gap: 16px;
      align-items: center;
      background: linear-gradient(135deg, var(--tc-blue-dark), var(--tc-blue));
      color: #fff;
    }

    .tc-logo {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .tc-logo img {
      width: 42px;
      height: 42px;
      object-fit: contain;
    }

    .tc-header h1 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .tc-header p {
      font-size: 13px;
      opacity: .9;
    }

    /* ===== Body ===== */
    .tc-body {
      padding: 32px;
    }

    .tc-notice {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: #F0F7FF;
      border: 1px solid #D6E4FF;
      border-radius: 12px;
      margin-bottom: 28px;
    }

    .tc-notice i {
      color: var(--tc-blue);
      margin-top: 2px;
    }

    .tc-notice h3 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .tc-notice p {
      font-size: 13px;
      color: var(--tc-text-sub);
      line-height: 1.6;
    }

    .tc-section {
      border: 1px solid var(--tc-border);
      border-radius: 12px;
      padding: 24px;
    }

    .tc-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .tc-section-title i {
      color: var(--tc-blue);
    }

    .tc-input {
      position: relative;
      margin-bottom: 16px;
    }

    .tc-input i {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #9AA4B2;
      font-size: 14px;
    }

    .tc-input input {
      width: 100%;
      padding: 14px 14px 14px 42px;
      border-radius: 8px;
      border: 1px solid var(--tc-border);
      font-size: 14px;
      transition: .2s;
    }

    .tc-input input:focus {
      outline: none;
      border-color: var(--tc-blue);
      box-shadow: 0 0 0 3px rgba(0,110,255,.15);
    }

    .tc-buttons {
      display: flex;
      gap: 12px;
      margin-top: 8px;
    }

    .tc-btn {
      flex: 1;
      padding: 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: .2s;
    }

    .tc-btn-primary {
      background: var(--tc-blue);
      color: #fff;
    }

    .tc-btn-primary:hover {
      background: var(--tc-blue-dark);
    }

    .tc-btn-secondary {
      background: #fff;
      color: var(--tc-blue);
      border: 1px solid var(--tc-blue);
    }

    .tc-btn-secondary:hover {
      background: #F0F7FF;
    }

    .tc-btn-pay {
      background: var(--tc-success);
      color: #fff;
    }

    .tc-hint {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px dashed var(--tc-border);
      font-size: 12px;
      color: var(--tc-text-tip);
      display: flex;
      gap: 6px;
      align-items: center;
    }

    /* ===== Footer ===== */
    .tc-footer {
      padding: 18px 32px;
      border-top: 1px solid var(--tc-border);
      font-size: 12px;
      color: var(--tc-text-tip);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .tc-status {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .tc-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--tc-success);
    }

    @media (max-width: 600px) {
      .tc-body,
      .tc-header,
      .tc-footer {
        padding: 20px;
      }
      .tc-buttons {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>

  <div class="tc-card">

    <!-- Header -->
    <div class="tc-header">
      <div class="tc-logo">
        <img src="https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/light/tencentcloud-color.png" alt="Tencent Cloud">
      </div>
      <div>
        <h1 id="title">腾讯云授权验证</h1>
        <p>企业级授权与安全验证服务</p>
      </div>
    </div>

    <!-- Body -->
    <div class="tc-body">

      <div class="tc-notice">
        <i class="fas fa-info-circle"></i>
        <div>
          <h3>操作说明</h3>
          <p id="notice">请输入授权卡密，用于验证您的产品使用权限。</p>
        </div>
      </div>

      <div class="tc-section">
        <div class="tc-section-title">
          <i class="fas fa-shield-alt"></i>
          <span>授权验证</span>
        </div>

        <div class="tc-input">
          <i class="fas fa-key"></i>
          <input id="cardKey" type="text" placeholder="请输入卡密">
        </div>

        <div class="tc-buttons">
          <button class="tc-btn tc-btn-primary" onclick="Call_Verify(cardKey.value)">
            <i class="fas fa-check"></i> 验证授权
          </button>

          <button class="tc-btn tc-btn-secondary" id="Query_Trial" onclick="Call_Query_Trial(cardKey.value)">
            <i class="fas fa-user"></i> <span id="btnText">查询卡密</span>
          </button>

          <button class="tc-btn tc-btn-pay" id="Pay" style="display:none" onclick="Call_Pay()">
            <i class="fas fa-shopping-cart"></i> 前往购买
          </button>
        </div>

        <div class="tc-hint">
          <i class="fas fa-lock"></i>
          卡密仅用于授权校验，请妥善保管
        </div>
      </div>

    </div>

    <!-- Footer -->
    <div class="tc-footer">
      <span><i class="fas fa-shield-alt"></i> 数据全程加密传输</span>
      <div class="tc-status">
        <div class="tc-dot"></div>
        <span>服务运行正常</span>
      </div>
    </div>

  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      title.textContent = PanGolin.GetTitle();
      notice.textContent = PanGolin.GetNotice();
      btnText.textContent = PanGolin.Is_Trial() ? '申请试用' : '查询卡密';
      Pay.style.display = PanGolin.Is_Pay() ? 'flex' : 'none';
    });

    function Call_Verify(v) {
      PanGolin.Verify(v);
    }

    function Call_Query_Trial(v) {
      PanGolin.Is_Trial() ? PanGolin.Trial() : PanGolin.Query(v);
    }

    function Call_Pay() {
      PanGolin.Pay();
    }
  </script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->