HTML CSS JS मिनिफायर

मिनिफायर स्रोत कोड से वह सब कुछ हटाता है जो उसे चलाने के लिए आवश्यक नहीं है: टिप्पणियाँ, अतिरिक्त स्थान, खाली पंक्तियाँ और अनावश्यक विराम चिह्न। छोटी फ़ाइलें तेज़ पृष्ठ लोड, कम बैंडविड्थ और बेहतर Core Web Vitals अर्थ रखती हैं। इसे सुरक्षित रूप से करना दिखने से कठिन है: 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>गज़िप के बाद भी, मिनिफाइड स्रोत अर्थपूर्ण रूप से छोटा बना रहता है — दोनों परतें अलग-अलग प्रकार की अतिरेकता को हटाती हैं।</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="/hi/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="/hi/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="/hi/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="/hi/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="/hi/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="/hi/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">सही UTF-8, URL-safe वैरिएंट और फ़ाइल समर्थन</p>
  </a>
<a href="/hi/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 समय-क्रमित (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="/hi/about" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">हमारे बारे में</a>
        <a href="/hi/contact" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">संपर्क करें</a>
        <a href="/hi/pricing" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">क़ीमतें</a>
        <a href="/hi/guides" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">गाइड</a>
        <a href="/hi/privacy" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">गोपनीयता नीति</a>
        <a href="/hi/terms" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">सेवा की शर्तें</a>
        <a href="/hi/aup" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">स्वीकार्य उपयोग</a>
        <a href="/hi/refund" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">रिफ़ंड नीति</a>
        <a href="/hi/ai-models" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">एआई मॉडल</a>
        <a href="/hi/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="hi";
      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="hi";
      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>