<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · ExceptionVariants（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="ExceptionVariants.css" />
  <style>body{margin:0;padding:24px;background: var(--kole-color-page-bg);display:flex;gap:16px;flex-wrap:wrap;}
    .kole-card{background: var(--kole-color-card-bg);border: 1px solid var(--kole-color-border);border-radius:8px;width:360px;}</style>
</head>
<body>
  <div class="kole-card"><div class="kole-exception" role="status" data-type="403"></div></div>
  <div class="kole-card"><div class="kole-exception" role="status" data-type="404"></div></div>
  <div class="kole-card"><div class="kole-exception" role="status" data-type="500"></div></div>
  <div class="kole-card"><div class="kole-exception" role="status" data-type="502"></div></div>

  <script>
    var DATA = {
      '403': { emoji: '🔒', title: '403 禁止访问', desc: '抱歉，你没有权限访问此页面。' },
      '404': { emoji: '🔍', title: '404 页面不存在', desc: '你访问的页面已被移除或从未存在。' },
      '500': { emoji: '⚙️', title: '500 服务器错误', desc: '服务器开小差了，请稍后再试。' },
      '502': { emoji: '🔌', title: '502 网关错误', desc: '网关无响应，请检查网络后重试。' }
    };
    document.querySelectorAll('.kole-exception').forEach(function (el) {
      var d = DATA[el.dataset.type];
      el.innerHTML = '<div class="kole-exception-emoji" role="status">' + d.emoji + '</div>' +
        '<div class="kole-exception-title">' + d.title + '</div>' +
        '<div class="kole-exception-desc">' + d.desc + '</div>' +
        '<div class="kole-exception-actions" role="status"><button class="kole-exception-btn primary" role="status">返回首页</button>' +
        '<button class="kole-exception-btn" role="status">重试</button></div>';
    });
  </script>
</body>
</html>
