<!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 · Watermark（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="Watermark.css" />
  <style>body{margin:0;padding:24px;background: var(--kole-color-page-bg);} .kole-box{position:relative;height:240px;background: var(--kole-color-card-bg);border: 1px solid var(--kole-color-border);border-radius:8px;padding:20px;overflow:hidden;}</style>
</head>
<body>
  <div class="kole-box">
    <div class="kole-watermark" id="wm"></div>
    <div class="kole-watermark is-fullscreen" id="wmFull" title="全屏水印演示"></div>
    <h3 style="position:relative;color:var(--color-text-title)">机密文档</h3>
    <p style="position:relative;color:var(--color-text-body)">该区域内容受水印保护，请勿外传。</p>
  </div>

  <script>
    function buildWatermark(text, color, fontSize, rotate, gap) {
      var svg = "<svg xmlns='http://www.w3.org/2000/svg' width='" + gap + "' height='" + gap + "'>" +
        "<text x='0' y='" + (fontSize + 6) + "' font-family='sans-serif' font-size='" + fontSize +
        "' fill='" + color + "' transform='rotate(" + rotate + " 0 " + (fontSize + 6) + ")'> " + text + " </text></svg>";
      return "url(\"data:image/svg+xml;utf8," + encodeURIComponent(svg) + "\")";
    }
    document.getElementById('wm').style.backgroundImage = buildWatermark('Kole UI', 'rgba(0,0,0,0.10)', 14, -22, 160);
  </script>
</body>
</html>
