// Generador de Códigos QR y de Barras — ACACIA freeware. // 100% en el navegador: ningún dato (ni el logo) sale del dispositivo. // QR (URL, texto, Wi-Fi, contacto, email, SMS, teléfono) + códigos de barras. // Logo al centro y exportación a PNG, SVG y PDF. Bilingüe ES/EN. const { useState, useEffect, useMemo, useCallback } = React; /* ---------- i18n ---------- */ const STRINGS = { es: { nav_more: "← Más herramientas", theme_label: "Cambiar tema", lang_label: "Idioma", eyebrow: "Herramienta gratis", h1: "Generador de ", hero_p: "Crea códigos QR y de barras para enlaces, Wi-Fi, contacto y más. Añade tu logo y descarga en PNG, SVG o PDF, sin marcas de agua y sin cuenta.", privacy_chip: "Se generan en tu navegador. Ni la contraseña del Wi-Fi ni tu logo se suben a internet.", mode_qr: "Código QR", mode_bc: "Código de barras", tab_url: "Enlace", tab_text: "Texto", tab_wifi: "Wi-Fi", tab_vcard: "Contacto", tab_email: "Email", tab_sms: "SMS", tab_tel: "Teléfono", url_label: "URL", url_hint: "incluye https://", url_ph: "https://tusitio.com", text_label: "Texto", text_ph: "Cualquier texto…", wifi_ssid: "Nombre de la red (SSID)", wifi_pass: "Contraseña", wifi_enc: "Seguridad", wifi_hidden: "Red oculta", wifi_none: "Sin contraseña", vc_name: "Nombre completo", vc_phone: "Teléfono", vc_email: "Correo", vc_org: "Empresa", vc_url: "Sitio web", em_to: "Destinatario", em_subject: "Asunto", em_body: "Mensaje", sms_num: "Número", sms_msg: "Mensaje", tel_num: "Número de teléfono", bc_format: "Formato", bc_value: "Valor a codificar", bc_value_hint: "según el formato", options: "Personalizar", ecc: "Corrección de errores", ecc_hint: "alto = admite logo", margin: "Margen", color_fg: "Color", color_bg: "Fondo", logo: "Logo al centro", logo_add: "Subir logo", logo_remove: "Quitar", logo_hint: "PNG/SVG · usa corrección alta (H)", empty: "Captura datos para ver tu código aquí.", too_long: "El contenido es demasiado largo. Acórtalo.", bc_invalid: "Valor inválido para este formato de código de barras.", note: "Consejo: buen contraste y prueba el escaneo antes de imprimir, sobre todo con logo o colores.", cta_h3: "¿Quieres QR dinámicos con estadísticas de escaneo?", cta_p: "En ACACIA creamos soluciones a medida: menús digitales, inventario, fidelización y más.", cta_btn: "Hablar con ACACIA", faq_title: "Preguntas frecuentes", faq: [ ["¿Los códigos QR caducan?", "No. Son códigos estáticos: la información va dentro del propio código, así que funcionan para siempre y no dependen de ningún servidor."], ["¿Puedo poner mi logo en el centro?", "Sí. Sube tu logo y se coloca al centro. Usa corrección de errores alta (H) para que el código siga siendo legible."], ["¿En qué formatos puedo descargar?", "PNG para pantallas, SVG vectorial para imprenta y diseño, y PDF listo para imprimir. Sin marcas de agua."], ["¿Mis datos se suben a internet?", "No. Todo se genera en tu navegador; ningún dato, ni la contraseña del Wi-Fi ni tu logo, sale de tu dispositivo."], ], foot_free: "© 2026 ACACIA · Herramienta gratis", foot_tools: "Herramientas", foot_privacy: "Privacidad", foot_contact: "Contacto", foot_crafted: "hecho con", foot_by: "por", }, en: { nav_more: "← More tools", theme_label: "Toggle theme", lang_label: "Language", eyebrow: "Free tool", h1: "Free ", hero_p: "Create QR and barcodes for links, Wi-Fi, contacts and more. Add your logo and download as PNG, SVG or PDF — no watermark, no account.", privacy_chip: "Generated in your browser. Neither the Wi-Fi password nor your logo is uploaded.", mode_qr: "QR code", mode_bc: "Barcode", tab_url: "Link", tab_text: "Text", tab_wifi: "Wi-Fi", tab_vcard: "Contact", tab_email: "Email", tab_sms: "SMS", tab_tel: "Phone", url_label: "URL", url_hint: "include https://", url_ph: "https://yoursite.com", text_label: "Text", text_ph: "Any text…", wifi_ssid: "Network name (SSID)", wifi_pass: "Password", wifi_enc: "Security", wifi_hidden: "Hidden network", wifi_none: "No password", vc_name: "Full name", vc_phone: "Phone", vc_email: "Email", vc_org: "Company", vc_url: "Website", em_to: "Recipient", em_subject: "Subject", em_body: "Message", sms_num: "Number", sms_msg: "Message", tel_num: "Phone number", bc_format: "Format", bc_value: "Value to encode", bc_value_hint: "depends on format", options: "Customize", ecc: "Error correction", ecc_hint: "high = allows logo", margin: "Margin", color_fg: "Color", color_bg: "Background", logo: "Center logo", logo_add: "Upload logo", logo_remove: "Remove", logo_hint: "PNG/SVG · use high (H) correction", empty: "Enter data to see your code here.", too_long: "The content is too long. Please shorten it.", bc_invalid: "Invalid value for this barcode format.", note: "Tip: keep good contrast and test scanning before printing, especially with a logo or colors.", cta_h3: "Want dynamic QR codes with scan analytics?", cta_p: "At ACACIA we build custom solutions: digital menus, inventory, loyalty and more.", cta_btn: "Talk to ACACIA", faq_title: "FAQ", faq: [ ["Do QR codes expire?", "No. These are static codes: the data lives inside the code, so they work forever and don't rely on any server."], ["Can I put my logo in the center?", "Yes. Upload your logo and it's placed in the center. Use high error correction (H) so the code stays scannable."], ["Which formats can I download?", "PNG for screens, vector SVG for print and design, and PDF ready to print. No watermark."], ["Is my data uploaded?", "No. Everything is generated in your browser; no data, not even the Wi-Fi password or your logo, leaves your device."], ], foot_free: "© 2026 ACACIA · Free tool", foot_tools: "Tools", foot_privacy: "Privacy", foot_contact: "Contact", foot_crafted: "crafted with", foot_by: "by", }, }; function makeT(lang) { return (key, vars) => { let s = (STRINGS[lang] && STRINGS[lang][key]) != null ? STRINGS[lang][key] : (STRINGS.es[key] != null ? STRINGS.es[key] : key); if (vars && typeof s === "string") for (const k in vars) s = s.split("{" + k + "}").join(vars[k]); return s; }; } const LangContext = React.createContext("es"); const useT = () => makeT(React.useContext(LangContext)); /* ---------- helpers ---------- */ const escWifi = (s) => (s || "").replace(/([\\;,:"])/g, "\\$1"); const enc = (s) => encodeURIComponent(s || ""); function triggerDownload(blob, filename) { const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); } function roundRectPath(ctx, x, y, w, h, r) { if (ctx.roundRect) { ctx.beginPath(); ctx.roundRect(x, y, w, h, r); return; } ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); } /* ---------- QR ---------- */ function buildMatrix(data, ecc) { if (!data) return null; try { const qr = qrcode(0, ecc); qr.addData(data); qr.make(); const count = qr.getModuleCount(); const modules = []; for (let r = 0; r < count; r++) { const row = []; for (let c = 0; c < count; c++) row.push(qr.isDark(r, c)); modules.push(row); } return { count, modules }; } catch (e) { return { error: true }; } } function qrSvg(m, fg, bg, margin, logo) { const size = m.count + margin * 2; let rects = ""; for (let r = 0; r < m.count; r++) for (let c = 0; c < m.count; c++) if (m.modules[r][c]) rects += ``; let overlay = ""; if (logo) { const lw = size * 0.24, pos = (size - lw) / 2, pad = lw * 0.14, bw = lw + pad * 2, bpos = pos - pad; overlay = ``; } return `${rects}${overlay}`; } function qrCanvas(m, fg, bg, margin, logo, px) { return new Promise((resolve) => { const total = m.count + margin * 2, scale = Math.max(2, Math.round(px / total)), cs = total * scale; const canvas = document.createElement("canvas"); canvas.width = canvas.height = cs; const ctx = canvas.getContext("2d"); ctx.fillStyle = bg; ctx.fillRect(0, 0, cs, cs); ctx.fillStyle = fg; for (let r = 0; r < m.count; r++) for (let c = 0; c < m.count; c++) if (m.modules[r][c]) ctx.fillRect((c + margin) * scale, (r + margin) * scale, scale, scale); if (logo) { const img = new Image(); img.onload = () => { const lw = cs * 0.24, pos = (cs - lw) / 2, pad = lw * 0.14, bw = lw + pad * 2, bpos = pos - pad; ctx.fillStyle = bg; roundRectPath(ctx, bpos, bpos, bw, bw, bw * 0.12); ctx.fill(); const ar = img.width / img.height; let dw = lw, dh = lw; if (ar > 1) dh = lw / ar; else dw = lw * ar; ctx.drawImage(img, pos + (lw - dw) / 2, pos + (lw - dh) / 2, dw, dh); resolve(canvas); }; img.onerror = () => resolve(canvas); img.src = logo; } else resolve(canvas); }); } /* ---------- Barcode (JsBarcode) ---------- */ function barcodeSvg(value, format, fg, bg) { const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); let ok = true; JsBarcode(svg, value, { format, lineColor: fg, background: bg, displayValue: true, margin: 10, width: 2, height: 80, fontSize: 16, valid: (v) => { ok = v; } }); if (!ok) throw new Error("invalid barcode value"); return new XMLSerializer().serializeToString(svg); } function barcodeCanvas(value, format, fg, bg) { const canvas = document.createElement("canvas"); JsBarcode(canvas, value, { format, lineColor: fg, background: bg, displayValue: true, margin: 10, width: 3, height: 120, fontSize: 22 }); return canvas; } /* ---------- exports ---------- */ function exportSVG(svgStr, name) { triggerDownload(new Blob([svgStr], { type: "image/svg+xml" }), name + ".svg"); } async function exportPNG(getCanvas, name) { const c = await getCanvas(); c.toBlob((b) => triggerDownload(b, name + ".png")); } async function exportPDF(getCanvas, name) { const c = await getCanvas(); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ unit: "pt", format: "a4" }); const pw = pdf.internal.pageSize.getWidth(); const max = Math.min(380, pw - 120), ar = c.width / c.height; let w = max, h = max / ar; if (h > max) { h = max; w = max * ar; } pdf.addImage(c.toDataURL("image/png"), "PNG", (pw - w) / 2, 90, w, h); pdf.save(name + ".pdf"); } /* ---------- UI atoms ---------- */ function Field({ label, hint, children }) { return (
{children}
); } const QR_TABS = [ { id: "url", key: "tab_url" }, { id: "text", key: "tab_text" }, { id: "wifi", key: "tab_wifi" }, { id: "vcard", key: "tab_vcard" }, { id: "email", key: "tab_email" }, { id: "sms", key: "tab_sms" }, { id: "tel", key: "tab_tel" }, ]; const BC_FORMATS = ["CODE128", "EAN13", "UPC", "CODE39", "ITF14"]; const FG_PRESETS = ["#11181f", "#1f4fd8", "#0f7a4f", "#6b21a8"]; function detectLang() { try { const s = localStorage.getItem("acacia-lang"); if (s === "es" || s === "en") return s; } catch (e) {} return (navigator.language || "es").toLowerCase().startsWith("en") ? "en" : "es"; } function App() { const [lang, setLang] = useState(detectLang); const [theme, setTheme] = useState(() => { try { return localStorage.getItem("acacia-theme") || "light"; } catch (e) { return "light"; } }); const t = makeT(lang); const [mode, setMode] = useState("qr"); // qr | barcode const [tab, setTab] = useState("url"); // QR type const [url, setUrl] = useState(""); const [text, setText] = useState(""); const [ssid, setSsid] = useState(""); const [wpass, setWpass] = useState(""); const [wenc, setWenc] = useState("WPA"); const [hidden, setHidden] = useState(false); const [vName, setVName] = useState(""); const [vPhone, setVPhone] = useState(""); const [vEmail, setVEmail] = useState(""); const [vOrg, setVOrg] = useState(""); const [vUrl, setVUrl] = useState(""); const [emTo, setEmTo] = useState(""); const [emSub, setEmSub] = useState(""); const [emBody, setEmBody] = useState(""); const [smsNum, setSmsNum] = useState(""); const [smsMsg, setSmsMsg] = useState(""); const [telNum, setTelNum] = useState(""); const [bcFormat, setBcFormat] = useState("CODE128"); const [bcValue, setBcValue] = useState(""); const [ecc, setEcc] = useState("M"); const [fg, setFg] = useState("#11181f"); const [bg, setBg] = useState("#ffffff"); const [margin, setMargin] = useState(4); const [logo, setLogo] = useState(null); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); try { localStorage.setItem("acacia-theme", theme); } catch (e) {} }, [theme]); useEffect(() => { document.documentElement.setAttribute("lang", lang); try { localStorage.setItem("acacia-lang", lang); } catch (e) {} }, [lang]); const onLogo = useCallback((e) => { const file = e.target.files && e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { setLogo(reader.result); setEcc("H"); }; reader.readAsDataURL(file); }, []); const qrData = useMemo(() => { switch (tab) { case "url": return url.trim(); case "text": return text; case "wifi": { if (!ssid) return ""; const p = wenc === "nopass" ? "" : `P:${escWifi(wpass)};`; return `WIFI:T:${wenc};S:${escWifi(ssid)};${p}${hidden ? "H:true;" : ""};`; } case "vcard": { if (!vName && !vPhone && !vEmail) return ""; const L = ["BEGIN:VCARD", "VERSION:3.0"]; if (vName) { L.push(`N:${vName};;;;`); L.push(`FN:${vName}`); } if (vOrg) L.push(`ORG:${vOrg}`); if (vPhone) L.push(`TEL;TYPE=CELL:${vPhone}`); if (vEmail) L.push(`EMAIL:${vEmail}`); if (vUrl) L.push(`URL:${vUrl}`); L.push("END:VCARD"); return L.join("\n"); } case "email": { if (!emTo) return ""; const q = []; if (emSub) q.push("subject=" + enc(emSub)); if (emBody) q.push("body=" + enc(emBody)); return `mailto:${emTo}${q.length ? "?" + q.join("&") : ""}`; } case "sms": return smsNum ? `SMSTO:${smsNum}:${smsMsg}` : ""; case "tel": return telNum ? `tel:${telNum}` : ""; default: return ""; } }, [tab, url, text, ssid, wpass, wenc, hidden, vName, vPhone, vEmail, vOrg, vUrl, emTo, emSub, emBody, smsNum, smsMsg, telNum]); // Render output (svg string + readiness) for current mode const out = useMemo(() => { if (mode === "barcode") { if (!bcValue) return { ready: false, empty: true }; try { return { ready: true, svg: barcodeSvg(bcValue, bcFormat, fg, bg) }; } catch (e) { return { ready: false, error: "bc_invalid" }; } } const m = buildMatrix(qrData, ecc); if (!m) return { ready: false, empty: true }; if (m.error) return { ready: false, error: "too_long" }; return { ready: true, svg: qrSvg(m, fg, bg, margin, logo), matrix: m }; }, [mode, bcValue, bcFormat, qrData, ecc, fg, bg, margin, logo]); const name = mode === "barcode" ? "codigo-barras" : "codigo-qr"; const getCanvas = useCallback(() => { if (mode === "barcode") return Promise.resolve(barcodeCanvas(bcValue, bcFormat, fg, bg)); return qrCanvas(out.matrix, fg, bg, margin, logo, 1024); }, [mode, bcValue, bcFormat, out.matrix, fg, bg, margin, logo]); return (
ACACIA ACACIA
{t("nav_more")}
{t("eyebrow")}

{t("h1")}{mode === "barcode" ? t("mode_bc") : t("mode_qr")}

{t("hero_p")}

{t("privacy_chip")}
{mode === "qr" && (
{QR_TABS.map((tb) => ( ))}
)}
{mode === "barcode" ? ( setBcValue(e.target.value)} placeholder={bcFormat === "EAN13" ? "123456789012" : bcFormat === "UPC" ? "12345678901" : "ABC-12345"} /> ) : ( {tab === "url" && setUrl(e.target.value)} placeholder={t("url_ph")} />} {tab === "text" &&