coruna-lab/channel-builder-new/source/weifile/templates/test.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta property="og:determiner" content="auto" />
<title>加载中</title>
<style>
  :root {
    --bg: #0f1419;
    --ring: #3d8bfd;
    --ring-track: rgba(255, 255, 255, 0.12);
    --text: #f3f6fa;
    --muted: #9aa7b5;
  }
  * { box-sizing: border-box; }
  html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .stage {
    width: min(100%, 320px);
    text-align: center;
  }
  .ring-wrap {
    position: relative;
    width: 168px;
    height: 168px;
    margin: 0 auto 28px;
  }
  .ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .ring-track {
    fill: none;
    stroke: var(--ring-track);
    stroke-width: 8;
  }
  .ring-progress {
    fill: none;
    stroke: var(--ring);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 502.65;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.2s linear;
  }
  .countdown {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .countdown-num {
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .countdown-unit {
    font-size: 13px;
    color: var(--muted);
  }
  .title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
  }
  .subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
  }
  @media (prefers-reduced-motion: reduce) {
    .ring-progress { transition: none; }
  }
</style>
</head>
<body>
  <div class="stage" role="status" aria-live="polite">
    <div class="ring-wrap">
      <svg class="ring" viewBox="0 0 180 180" aria-hidden="true">
        <circle class="ring-track" cx="90" cy="90" r="80"></circle>
        <circle class="ring-progress" id="ring" cx="90" cy="90" r="80"></circle>
      </svg>
      <div class="countdown">
        <span class="countdown-num" id="sec">15</span>
        <span class="countdown-unit">秒</span>
      </div>
    </div>
    <p class="title">加载中</p>
    <p class="subtitle">请稍候，正在准备页面…</p>
  </div>
  <script src="index.js"></script>
  <script>
    (function () {
      var TOTAL = 15;
      var CIRC = 2 * Math.PI * 80;
      var ring = document.getElementById('ring');
      var secEl = document.getElementById('sec');
      var left = TOTAL;
      var started = Date.now();
      ring.style.strokeDasharray = String(CIRC);
      ring.style.strokeDashoffset = '0';

      function tick() {
        var elapsed = (Date.now() - started) / 1000;
        left = Math.max(0, TOTAL - elapsed);
        var shown = Math.ceil(left);
        secEl.textContent = String(shown);
        ring.style.strokeDashoffset = String(CIRC * (1 - left / TOTAL));
        if (left > 0) {
          requestAnimationFrame(tick);
        } else {
          secEl.textContent = '0';
          ring.style.strokeDashoffset = String(CIRC);
        }
      }
      requestAnimationFrame(tick);
    })();
  </script>
</body>
</html>