HTML CSS JS 壓縮器

壓縮器會移除源碼中所有不影響運行的部分：註釋、多餘空白、空行和冗餘標點。更小的文件意味着更快的頁面加載、更低的帶寬成本、更好的 Core Web Vitals——這正是所有正經生產站點在發佈前都要壓縮 HTML、CSS 和 JavaScript 的原因。安全地做這件事比看上去難：JavaScript 字符串字面量裏的空白是有意義的，正則裏包含像註釋的 "/" 和 "//"，HTML 中

 裏的空白必須保留。本工具會先對每種語言做分詞，只移除經過證明是安全的那些內容。
它能做什麼
在一個帶標籤的工具裏壓縮 HTML、CSS 或 JavaScript
刪除註釋而不觸碰藏在字符串裏的內容
摺疊空白，同時保留字符串、正則和模板內容
HTML 中 
/ 的內容保持不變</li><li>顯示壓縮前後字節數和節省百分比</li><li>複製或下載壓縮結果</li></ul><h3>什麼時候用它</h3><ul><li>發佈前把 JS 片段、CSS 塊或內聯 HTML 壓縮變小</li><li>用更小的載荷通過性能預算門檻</li><li>爲拒絕換行的字段準備單行輸出</li><li>快速減小內嵌資源的體積</li></ul><p>隱私：壓縮完全在你的瀏覽器裏進行，粘貼的內容絕不會被上傳。</p></div>
</section>
<section class="mt-14 max-w-3xl mx-auto card p-6 sm:p-8">
  <h2 class="text-xl font-semibold mb-4">安全壓縮與危險花招</h2>
  <div class="prose prose-slate dark:prose-invert max-w-none text-sm sm:text-base"><ul><li>註解、縮排、換行先行——通常砍掉原始體積的三分之一，零風險。</li><li>區域變數改名只在作用域證明安全的地方進行；全域名與屬性名一律不碰，外部 API 不會因此失靈。</li><li>即使已經 gzip，壓縮後的原始碼仍顯著更小——兩層去掉的是不同種類的冗餘。</li></ul></div>
</section>
<section class="mt-16 max-w-4xl mx-auto">
  <h2 class="text-2xl font-bold text-center">位元組到底省在哪裡</h2>
  <div class="mt-6 grid gap-4 sm:grid-cols-3"><div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">⚡</div>
      <h3 class="font-semibold mt-1">三種語言一個工具</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">HTML、CSS、JS 壓縮共用一個帶標籤的頁面，每種語言都有對症的分詞器——不用在各個單用途網站之間來回跳。</p>
    </div>
<div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🔒</div>
      <h3 class="font-semibold mt-1">字符串和正則安然無恙</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">分詞器能識別帶引號的字符串、模板字面量和正則字面量，壓縮永遠不會弄壞 "a/ b/c" 或其中看起來像註釋的文本。</p>
    </div>
<div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🎯</div>
      <h3 class="font-semibold mt-1">節省可量化</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">狀態欄報告壓縮前後的字節數及節省百分比，你能清楚看到每次壓縮到底減掉了多少載荷。</p>
    </div></div>
</section>
<section class="mt-14 max-w-3xl mx-auto">
  <h2 class="text-xl font-semibold mb-4">常見問題</h2>
  <div class="space-y-3"><details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">對 JavaScript 安全嗎？<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">安全。JS 壓縮器先對輸入分詞，把註釋與正則字面量、字符串區分開，所以 "/…/" 模式和字符串裏的 "//" 文本會逐字節保留，只有真正的註釋和裝飾性空白會被移除。</p>
    </details>
<details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">HTML 空白怎麼辦？<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">標籤之間的空白被摺疊，但 <pre> 和 <textarea> 內的內容原樣保留（那裏可能有意義），字符串屬性也保持原樣。輸出仍然是渲染效果一致的合法 HTML。</p>
    </details>
<details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">它能取代構建流水線嗎？<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">一次性任務可以。整個項目仍需在 CI 裏用 esbuild/terser/CSSNano；但本工具非常適合把代碼片段、郵件模板或單個資源複製成最小形態。</p>
    </details></div>
</section>
<section class="mt-14 max-w-3xl mx-auto">
  <h2 class="text-xl font-semibold mb-4">相關工具</h2>
  <div class="grid gap-3 sm:grid-cols-2"><a href="/zh-tw/tools/html-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🌐</span>
      <span class="font-medium text-sm">HTML 美化工具</span>
    </a>
<a href="/zh-tw/tools/css-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🎨</span>
      <span class="font-medium text-sm">CSS 美化工具</span>
    </a>
<a href="/zh-tw/tools/js-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🟨</span>
      <span class="font-medium text-sm">JS 美化工具</span>
    </a>
<a href="/zh-tw/tools/sql-formatter" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🗄️</span>
      <span class="font-medium text-sm">SQL 格式化工具</span>
    </a></div>
</section>

<script id="mn-i18n" type="application/json">{"ui.input":"輸入","ui.output":"輸出","ui.minify":"壓縮","ui.sample":"載入示例","ui.clear":"清空","ui.copy":"複製","ui.copied":"已複製","ui.download":"下載","ui.html":"HTML","ui.css":"CSS","ui.js":"JavaScript","ui.placeholder":"在此粘貼 HTML、CSS 或 JavaScript…","ui.error":"錯誤","ui.saved":"節省","ui.privacy":"一切都在你的瀏覽器裏運行——代碼始終留在你的設備上。"}</script>
<script>
(function () {
  'use strict';
  var S = JSON.parse(document.getElementById('mn-i18n').textContent);
  var mfTokenizeJs = (function mfTokenizeJs(src) {
  var tokens = [];
  var i = 0, n = src.length;
  var codeBuf = "";
  function flushCode() {
    if (codeBuf) {
      tokens.push({ text: codeBuf, kind: "code" });
      codeBuf = "";
    }
  }
  __name(flushCode, "flushCode");
  while (i < n) {
    var ch = src[i];
    if (ch === '"' || ch === "'") {
      flushCode();
      var quote = ch, start = i;
      i++;
      while (i < n) {
        if (src[i] === "\\" && i + 1 < n)
          i += 2;
        else if (src[i] === quote) {
          i++;
          break;
        } else if (src[i] === "\n") {
          i++;
          break;
        } else
          i++;
      }
      tokens.push({ text: src.slice(start, i), kind: "string" });
      continue;
    }
    if (ch === "`") {
      flushCode();
      var tplStart = i;
      i++;
      while (i < n) {
        if (src[i] === "\\" && i + 1 < n)
          i += 2;
        else if (src[i] === "`") {
          i++;
          break;
        } else
          i++;
      }
      tokens.push({ text: src.slice(tplStart, i), kind: "string" });
      continue;
    }
    if (ch === "/" && src[i + 1] === "/") {
      flushCode();
      var end = src.indexOf("\n", i);
      tokens.push({ text: src.slice(i, end === -1 ? n : end), kind: "comment" });
      i = end === -1 ? n : end;
      continue;
    }
    if (ch === "/" && src[i + 1] === "*") {
      flushCode();
      var end2 = src.indexOf("*/", i + 2);
      tokens.push({ text: src.slice(i, end2 === -1 ? n : end2 + 2), kind: "comment" });
      i = end2 === -1 ? n : end2 + 2;
      continue;
    }
    if (ch === "/" && (src[i + 1] !== "/" && src[i + 1] !== "*")) {
      var prev = src.slice(0, i).replace(/\s+$/, "").slice(-1);
      var ahead = src.slice(0, i).replace(/\s+$/, "");
      var wordM = /([A-Za-z_$][A-Za-z0-9_$]*)$/.exec(ahead);
      var prevWord = wordM ? wordM[1] : "";
      var kwRe = /^(return|typeof|case|instanceof|in|of|void|new|delete|do|else|yield|await|throw)$/.test(prevWord);
      var exprPos = prev === "" || /[(\[,;=!&|?{}]/.test(prev) || kwRe;
      if (exprPos) {
        flushCode();
        var rxStart = i;
        i++;
        var inClass = false;
        while (i < n) {
          var c = src[i];
          if (c === "\\") {
            i += 2;
            continue;
          }
          if (c === "[")
            inClass = true;
          else if (c === "]")
            inClass = false;
          else if (c === "/" && !inClass) {
            i++;
            break;
          } else if (c === "\n") {
            i++;
            break;
          }
          i++;
        }
        tokens.push({ text: src.slice(rxStart, i), kind: "regex" });
        continue;
      }
    }
    codeBuf += ch;
    i++;
  }
  flushCode();
  return tokens;
});
  var mfMinifyHtml = (function mfMinifyHtml(html) {
  var PRESERVE = ["pre", "textarea"];
  var out = "";
  var i = 0, n = html.length;
  while (i < n) {
    var tagMatch = /^<(pre|textarea)\b[^>]*>/i.exec(html.slice(i));
    if (tagMatch) {
      var tagName = tagMatch[1].toLowerCase();
      var closeIdx = html.toLowerCase().indexOf("</" + tagName, i);
      var end = closeIdx === -1 ? n : html.indexOf(">", closeIdx) + 1;
      out += html.slice(i, end);
      i = end;
      continue;
    }
    var ch = html[i];
    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r") {
      var j = i;
      while (j < n && /\s/.test(html[j] || ""))
        j++;
      var prevChar = out.slice(-1);
      var nextChar = html[j] || "";
      if (prevChar === ">" && nextChar === "<") {
      } else {
        out += " ";
      }
      i = j;
      continue;
    }
    out += ch;
    i++;
  }
  return out.replace(/<!--[\s\S]*?-->/g, "").trim();
});
  var mfMinifyCss = (function mfMinifyCss(css) {
  var noComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
  var strings = [];
  var placeheld = noComments.replace(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, function(m) {
    strings.push(m);
    return "\0" + (strings.length - 1) + "\0";
  });
  var minified = placeheld.replace(/\s*([{}:;,])\s*/g, "$1").replace(/;}/g, "}").replace(/\s+/g, " ").trim();
  return minified.replace(/\x00(\d+)\x00/g, function(_m, idx) {
    return strings[Number(idx)];
  });
});
  var mfMinifyJs = (function mfMinifyJs(src) {
  var tokens = mfTokenizeJs(src);
  var out = "";
  for (var i = 0; i < tokens.length; i++) {
    var tok = tokens[i];
    if (tok.kind === "comment")
      continue;
    if (tok.kind === "code")
      out += tok.text.replace(/\s+/g, " ");
    else
      out += tok.text;
  }
  return out.replace(/\s*([{}();,:])\s*/g, "$1").replace(/\s+/g, " ").trim();
});
  var inp = document.getElementById('mn-in'), out = document.getElementById('mn-out'), status = document.getElementById('mn-status');
  var tabs = { html: 'mn-tab-html', css: 'mn-tab-css', js: 'mn-tab-js' };
  var active = 'html';

  function setStatus(ok, msg) {
    status.textContent = msg;
    status.className = 'mt-3 text-sm ' + (ok ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400');
  }

  function setTab(kind) {
    active = kind;
    Object.keys(tabs).forEach(function (k) {
      var el = document.getElementById(tabs[k]);
      if (k === active) { el.classList.add('bg-indigo-600', 'text-white'); el.classList.remove('text-slate-600'); }
      else { el.classList.remove('bg-indigo-600', 'text-white'); el.classList.add('text-slate-600'); }
    });
    inp.value = '';
    out.value = '';
    status.className = 'hidden';
  }
  document.getElementById('mn-tab-html').addEventListener('click', function () { setTab('html'); });
  document.getElementById('mn-tab-css').addEventListener('click', function () { setTab('css'); });
  document.getElementById('mn-tab-js').addEventListener('click', function () { setTab('js'); });

  var SAMPLES = {
    html: '<div class="box">\n  <p>Hello & welcome</p>\n  <!-- A comment to strip -->\n  <br>\n</div>',
    css: '.box { color: red; /* c */\n  margin: 0 auto;\n}',
    js: 'function add(a, b) {\n  // comment\n  return a + b;\n}\nconst x = add(1, 2);'
  };

  document.getElementById('mn-run').addEventListener('click', function () {
    var text = inp.value;
    if (!text.trim()) { setStatus(false, S['ui.error'] + ': (empty)'); return; }
    var fn = active === 'html' ? mfMinifyHtml : active === 'css' ? mfMinifyCss : mfMinifyJs;
    var before = new Blob([text]).size;
    out.value = fn(text);
    var after = new Blob([out.value]).size;
    setStatus(true, '✓ ' + S['ui.saved'] + ': ' + before.toLocaleString() + ' → ' + after.toLocaleString() + ' bytes (' + Math.round((1 - after / before) * 100) + '%)');
  });
  document.getElementById('mn-clear').addEventListener('click', function () { inp.value = ''; out.value = ''; status.className = 'hidden'; });
  document.getElementById('mn-sample').addEventListener('click', function () { inp.value = SAMPLES[active]; });
  document.getElementById('mn-copy').addEventListener('click', function () {
    navigator.clipboard.writeText(out.value).then(function () {
      var btn = document.getElementById('mn-copy');
      var orig = btn.textContent;
      btn.textContent = S['ui.copied'];
      setTimeout(function () { btn.textContent = orig; }, 1500);
    });
  });
  document.getElementById('mn-dl').addEventListener('click', function () {
    var mime = active === 'html' ? 'text/html' : active === 'css' ? 'text/css' : 'text/javascript';
    var ext = active === 'html' ? 'html' : active === 'css' ? 'css' : 'js';
    var a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([out.value], { type: mime + ';charset=utf-8' }));
    a.download = 'minified.' + ext;
    a.click();
    URL.revokeObjectURL(a.href);
  });
})();
</script><section class="mt-14 max-w-4xl mx-auto">
        <h2 class="text-xl font-semibold mb-4">相關工具</h2>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"><a href="/zh-tw/tools/json-formatter" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🧩</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">免費</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">JSON 格式化</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">格式化、校驗、壓縮、鍵排序 —— 100% 瀏覽器本地處理</p>
  </a>
<a href="/zh-tw/tools/base64" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🔤</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">免費</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">Base64 編碼/解碼</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">正確處理中文與 Emoji，支援 URL-safe 與檔案轉換</p>
  </a>
<a href="/zh-tw/tools/uuid-generator" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🆔</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">免費</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">UUID 產生器</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">批次產生 v4 隨機 / v7 時間有序 UUID（RFC 9562）</p>
  </a></div>
      </section>
    <div class="mt-8 max-w-6xl mx-auto ad-slot ad-slot-global_footer" role="complementary" aria-label="Advertisement">
  <div class="ad-label">廣告</div>
  <div class="ad-content"><ins class="adsbygoogle" style="display:block" data-ad-client="pub-6594328378083782" data-ad-format="auto" data-full-width-responsive="true"></ins></div>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
  </main>
  <footer class="border-t border-slate-200/70 dark:border-slate-800/70 mt-8">
    <div class="mx-auto max-w-6xl px-4 py-8 space-y-5 text-sm text-slate-500 dark:text-slate-400">
      <nav class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2" aria-label="Footer">
        <a href="/zh-tw/about" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">關於我們</a>
        <a href="/zh-tw/contact" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">聯絡我們</a>
        <a href="/zh-tw/pricing" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">定價</a>
        <a href="/zh-tw/guides" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">使用指南</a>
        <a href="/zh-tw/privacy" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">隱私政策</a>
        <a href="/zh-tw/terms" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">服務條款</a>
        <a href="/zh-tw/aup" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">可接受使用政策</a>
        <a href="/zh-tw/refund" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">退款政策</a>
        <a href="/zh-tw/ai-models" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">AI 模型</a>
        <a href="/zh-tw/announcements" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">公告</a>
        <a id="sprite-reset-link" href="#" style="display:none" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition" onclick="localStorage.removeItem('sprite_hidden');location.reload()">顯示幫助小助手</a>
      </nav>
      <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
        <p class="flex items-center gap-2">
          <span class="grid place-items-center h-6 w-6 rounded-lg bg-gradient-to-br from-indigo-600 to-fuchsia-600 text-white text-xs">✦</span>
          © 2026 tomai
        </p>
        <p>日常任務的線上工具</p>
      </div>
    </div>
  </footer>
  <script>
    // Global credit spend/refund toast — call from any tool's script as
    // window.showCreditToast(message, 'spend' | 'refund'). Auto-dismisses
    // after 3s. message is caller-provided plain text (already localized
    // and interpolated), rendered via textContent — never HTML.
    window.showCreditToast = function (message, kind) {
      var root = document.getElementById('credit-toast-root');
      if (!root) return;
      var el = document.createElement('div');
      el.className = 'credit-toast ' + (kind === 'refund' ? 'refund' : 'spend');
      var icon = document.createElement('span');
      icon.className = 'credit-toast-icon';
      icon.textContent = kind === 'refund' ? '↩️' : '🪙';
      var text = document.createElement('span');
      text.textContent = message;
      var bar = document.createElement('span');
      bar.className = 'credit-toast-bar';
      el.appendChild(icon);
      el.appendChild(text);
      el.appendChild(bar);
      root.appendChild(el);
      // The bar's own 3s CSS animation is the visual countdown; this timeout
      // (same 3000ms) is what actually removes the toast once it empties.
      setTimeout(function () {
        el.classList.add('leaving');
        setTimeout(function () { el.remove(); }, 250);
      }, 3000);
    };
  </script>
  <script>
    // Swap the login link for "My account" when the login-hint cookie is set.
    (function () {
      if (/(?:^|;\s*)li=1/.test(document.cookie)) {
        var a = document.getElementById('nav-auth');
        a.href = a.dataset.accountHref;
        a.textContent = a.dataset.accountLabel;
      }
    })();
  </script>
  <script>
    // Header membership CTA: anonymous/free users see "⚡ Upgrade" -> /pricing
    // (the prominent entry point, not just the footer link). Signed-in Pro/Max
    // members see a calm plan badge -> /account instead of a repeated upsell.
    (function () {
      if (!/(?:^|;\s*)li=1/.test(document.cookie)) return;
      var a = document.getElementById('nav-upgrade');
      if (!a) return;
      fetch('/api/credits').then(function (r) { return r.json(); }).then(function (b) {
        if (!b || !b.ok || (b.data.plan !== 'pro' && b.data.plan !== 'max')) return;
        a.href = a.dataset.accountHref;
        a.classList.add('member');
        var label = document.getElementById('nav-upgrade-label');
        if (label) label.textContent = b.data.plan.toUpperCase();
        a.setAttribute('aria-label', b.data.plan.toUpperCase());
      }).catch(function () {});
    })();
  </script>
  <script>
    // Record visit for the home page "recently used" row (local only).
    try {
      var _id = "minifier";
      var _r = JSON.parse(localStorage.getItem('recent_tools') || '[]').filter(function (x) { return x !== _id; });
      _r.unshift(_id);
      localStorage.setItem('recent_tools', JSON.stringify(_r.slice(0, 8)));
    } catch (e) {}
  </script>
  <script>
    // Announcement bar — fetches latest banner, renders inline. Ephemeral content,
    // not SEO-critical; the /announcements page IS full SSR for indexing.
    (function(){
      var bar=document.getElementById('announcement-bar');
      var link=document.getElementById('announcement-bar-link');
      var closeBtn=document.getElementById('announcement-bar-close');
      if(!bar||!link)return;
      var locale="zh-tw";
      fetch('/api/announcements/latest?lang='+encodeURIComponent(locale))
        .then(function(r){return r.json()})
        .then(function(b){
          if(!b.ok||!b.data||!b.data.banner)return;
          var ann=b.data.banner;
          try{if(sessionStorage.getItem('ab_'+ann.id)==='1')return}catch(e){}
          link.textContent=ann.title;
          if(ann.slug)link.href='/'+locale+'/announcements/'+ann.slug;
          bar.classList.remove('hidden')
        }).catch(function(){});
      closeBtn.addEventListener('click',function(){
        bar.classList.add('hidden');
        try{sessionStorage.setItem('ab_'+link.href.split('/').pop(),'1')}catch(e){}
      })
    })();
    // First-visit popup — lazy-shown 4s after load, localStorage-dismissed forever.
    (function(){
      if(false)return; // game pages: no popup over gameplay
      var locale="zh-tw";
      fetch('/api/announcements/latest?lang='+encodeURIComponent(locale))
        .then(function(r){return r.json()})
        .then(function(b){
          if(!b.ok||!b.data||!b.data.popups||!b.data.popups.length)return;
          var popup=b.data.popups[0];
          try{if(localStorage.getItem('ap_'+popup.id)==='1')return}catch(e){}
          setTimeout(function(){showPopup(popup)},4000)
        }).catch(function(){});
      function showPopup(p){
        var o=document.createElement('div');
        o.className='fixed inset-0 bg-black/50 z-[9998] flex items-center justify-center p-4';
        o.style.animation='fadeIn .25s ease';
        var slug = p.slug||'';
        var detailUrl = slug ? '/'+locale+'/announcements/'+slug : '';
        o.innerHTML='<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-8 relative" style="animation:scaleIn .25s ease">'+
          '<button id="apx" class="absolute top-3 right-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 text-xl leading-none">×</button>'+
          '<div class="text-3xl mb-3">📢</div>'+
          '<h2 class="text-lg font-bold mb-2"></h2>'+
          '<p class="text-sm text-slate-600 dark:text-slate-300 mb-5 leading-relaxed"></p>'+
          '<div class="flex gap-2">'+
          '<button id="apd" class="btn-primary text-sm flex-1">Got it</button>'+
          (detailUrl ? '<a href="'+detailUrl+'" class="btn-ghost text-sm flex-1 text-center">Read more →</a>' : '')+
          '</div></div>';
        document.body.appendChild(o);
        o.querySelector('h2').textContent=p.title;
        o.querySelector('p').textContent=p.content.length>200?p.content.slice(0,200)+'…':p.content;
        function close(){o.remove();try{localStorage.setItem('ap_'+p.id,'1')}catch(e){}}
        o.querySelector('#apx').addEventListener('click',close);
        o.querySelector('#apd').addEventListener('click',close);
        o.addEventListener('click',function(e){if(e.target===o)close()})
      }
    })();
  </script>
</body>
</html>