HTML CSS JS Minifier

A minifier removes everything from source code that is not required to run it: comments, extra whitespace, blank lines and redundant punctuation. Smaller files mean faster page loads, lower bandwidth bills and better Core Web Vitals — this is why every serious production site minifies its HTML, CSS and JavaScript before shipping. Doing it safely is harder than it looks: whitespace inside a string literal in JavaScript is significant, a regex contains "/" and "//" that look like comments, and HTML whitespace inside

 must survive. This tool tokenizes each language and removes only what is provably safe.
What it can do
Minify HTML, CSS or JavaScript from one tabbed tool
Strip comments without touching the string they hide in
Collapse whitespace while preserving string, regex and template content
Keep 
/ content untouched in HTML</li><li>Show bytes before → after and the percentage saved</li><li>Copy or download the minified result</li></ul><h3>When to use it</h3><ul><li>Shrinking a JS snippet, CSS block or inline HTML before shipping</li><li>Making a page pass performance budgets with less payload</li><li>Preparing one-line outputs for fields that reject newlines</li><li>Quickly obfuscating the file size of an embedded asset</li></ul><p>Privacy: the minification happens entirely in your browser — nothing you paste is ever uploaded.</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">Safe minification versus risky tricks</h2>
  <div class="prose prose-slate dark:prose-invert max-w-none text-sm sm:text-base"><ul><li>Comments, indentation and line breaks go first — usually a third of raw script size with zero risk.</li><li>Local variable renaming happens only where scope proves it safe; globals and property names stay untouched so external APIs never break.</li><li>Even after gzip, minified source stays meaningfully smaller — the two layers remove different kinds of redundancy.</li></ul></div>
</section>
<section class="mt-16 max-w-4xl mx-auto">
  <h2 class="text-2xl font-bold text-center">Where the bytes actually go</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">Three languages, one tool</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">HTML, CSS and JS minification share one tabbed page, each with a language-appropriate tokenizer — no hopping between single-purpose sites.</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">Strings and regexes survive</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">The tokenizer understands quoted strings, template literals and regex literals, so minification never breaks "a/ b/c" or the comment-looking text inside them.</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">Measured savings</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">The status bar reports bytes before and after plus the percentage saved, so you can see exactly how much payload each minify removes.</p>
    </div></div>
</section>
<section class="mt-14 max-w-3xl mx-auto">
  <h2 class="text-xl font-semibold mb-4">Frequently asked questions</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">Is it safe for 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">Yes. The JS minifier tokenizes the input first, distinguishing comments from regex literals and strings, so "/…/" patterns and "//" text inside strings are preserved byte-for-byte while only true comments and cosmetic whitespace are removed.</p>
    </details>
<details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">What about HTML whitespace?<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">Whitespace between tags is collapsed, but content inside <pre> and <textarea> is preserved because it can be meaningful, and string attributes are kept as-is. The output remains valid HTML that renders identically.</p>
    </details>
<details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">Does this replace a build pipeline?<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">For one-off tasks, yes. For a whole project you would still use esbuild/terser/CSSNano in CI, but this tool is ideal for copying a snippet, an email template or a single asset into the smallest form.</p>
    </details></div>
</section>
<section class="mt-14 max-w-3xl mx-auto">
  <h2 class="text-xl font-semibold mb-4">Related tools</h2>
  <div class="grid gap-3 sm:grid-cols-2"><a href="/en/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 Beautifier</span>
    </a>
<a href="/en/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 Beautifier</span>
    </a>
<a href="/en/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 Beautifier</span>
    </a>
<a href="/en/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 Formatter</span>
    </a></div>
</section>

<script id="mn-i18n" type="application/json">{"ui.input":"Input","ui.output":"Output","ui.minify":"Minify","ui.sample":"Load sample","ui.clear":"Clear","ui.copy":"Copy","ui.copied":"Copied","ui.download":"Download","ui.html":"HTML","ui.css":"CSS","ui.js":"JavaScript","ui.placeholder":"Paste HTML, CSS or JavaScript here…","ui.error":"Error","ui.saved":"saved","ui.privacy":"Everything runs in your browser — your code stays on your device."}</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">Related tools</h2>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"><a href="/en/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">Free</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">JSON Formatter</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">Format, validate, minify and sort JSON — 100% in your browser</p>
  </a>
<a href="/en/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">Free</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">Base64 Encode / Decode</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">UTF-8 safe Base64 with URL-safe variant and file support</p>
  </a>
<a href="/en/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">Free</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">UUID Generator</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">Bulk UUID v4 & time-ordered v7 (RFC 9562), client-side</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">Advertisement</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="/en/about" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">About Us</a>
        <a href="/en/contact" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Contact Us</a>
        <a href="/en/pricing" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Pricing</a>
        <a href="/en/guides" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Guides</a>
        <a href="/en/privacy" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Privacy Policy</a>
        <a href="/en/terms" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Terms of Service</a>
        <a href="/en/aup" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Acceptable Use</a>
        <a href="/en/refund" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Refund Policy</a>
        <a href="/en/ai-models" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">AI Models</a>
        <a href="/en/announcements" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Announcements</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()">Show Help Assistant</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>Online tools for everyday tasks</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="en";
      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="en";
      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>