{"id":76816,"date":"2026-03-16T15:24:08","date_gmt":"2026-03-16T15:24:08","guid":{"rendered":"https:\/\/aceworldpgs.com\/tools\/?p=76816"},"modified":"2026-05-12T03:12:28","modified_gmt":"2026-05-12T03:12:28","slug":"barcode-qr-code-generator","status":"publish","type":"post","link":"https:\/\/aceworldpgs.com\/tools\/barcode-qr-code-generator\/","title":{"rendered":"Barcode &amp; QR Code Generator"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   BARCODE & QR GENERATOR \u2014 ACEworld Toolkit design system.\n   Local tokens for self-containment.\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n:root {\n  --bqr-navy:      #0f1c3f;\n  --bqr-blue:      #1d4ed8;\n  --bqr-blue-lt:   #3b82f6;\n  --bqr-blue-pale: #eff6ff;\n  --bqr-green:     #166534;\n  --bqr-green-lt:  #dcfce7;\n  --bqr-green-bd:  #86efac;\n  --bqr-amber:     #f59e0b;\n  --bqr-amber-lt:  #fffbeb;\n  --bqr-amber-bd:  #fde68a;\n  --bqr-red:       #dc2626;\n  --bqr-red-lt:    #fef2f2;\n  --bqr-white:     #ffffff;\n  --bqr-gray-50:   #f8fafc;\n  --bqr-gray-100:  #f1f5f9;\n  --bqr-gray-200:  #e2e8f0;\n  --bqr-gray-300:  #cbd5e1;\n  --bqr-gray-400:  #94a3b8;\n  --bqr-gray-600:  #475569;\n  --bqr-gray-800:  #1e293b;\n  --bqr-radius:    12px;\n  --bqr-radius-sm: 8px;\n  --bqr-shadow:    0 4px 24px rgba(15,28,63,0.08);\n  --bqr-shadow-lg: 0 12px 48px rgba(15,28,63,0.12);\n  --bqr-trans:     all 0.2s cubic-bezier(0.4,0,0.2,1);\n  --bqr-font:      'DM Sans', 'Segoe UI', system-ui, sans-serif;\n  --bqr-mono:      'DM Mono', 'Fira Code', ui-monospace, monospace;\n}\n\n\/* \u2500\u2500 ACE HEADER local copy (self-contained) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.ace-tool { max-width: 900px; margin: 0 auto; font-family: var(--bqr-font); }\n.ace-header {\n  background: linear-gradient(135deg, var(--bqr-navy) 0%, #1e3a7a 100%);\n  padding: 28px 32px 24px;\n  border-radius: 20px 20px 0 0;\n  position: relative;\n  overflow: hidden;\n}\n.ace-header::after {\n  content: '';\n  position: absolute;\n  right: -60px; top: -60px;\n  width: 240px; height: 240px;\n  border-radius: 50%;\n  background: rgba(59,130,246,0.12);\n  pointer-events: none;\n}\n.ace-header::before {\n  content: '';\n  position: absolute;\n  left: -40px; bottom: -50px;\n  width: 160px; height: 160px;\n  border-radius: 50%;\n  background: rgba(245,158,11,0.06);\n  pointer-events: none;\n}\n.ace-header-inner {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 16px;\n  flex-wrap: wrap;\n  position: relative;\n  z-index: 1;\n}\n.ace-header-identity { display: flex; flex-direction: column; gap: 6px; }\n.ace-header-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 10px;\n  border-radius: 20px;\n  font-size: 10px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  border: 1px solid rgba(255,255,255,0.25);\n  width: fit-content;\n  color: #fff;\n  background: rgba(255,255,255,0.15);\n}\n.ace-header-badge.badge-sales {\n  background: rgba(245,158,11,0.35);\n  border-color: rgba(245,158,11,0.6);\n}\n.ace-header-title {\n  color: #fff;\n  font-size: clamp(18px,3vw,24px);\n  font-weight: 700;\n  letter-spacing: -0.02em;\n  line-height: 1.2;\n  margin: 0;\n}\n.ace-header-subtitle {\n  color: rgba(255,255,255,0.68);\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.5;\n  margin: 0;\n  max-width: 480px;\n}\n.ace-header-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  background: rgba(255,255,255,0.10);\n  color: #fff;\n  font-family: var(--bqr-font);\n  font-size: 11px;\n  font-weight: 600;\n  padding: 8px 14px;\n  border-radius: 20px;\n  text-decoration: none;\n  border: 1px solid rgba(255,255,255,0.22);\n  white-space: nowrap;\n  transition: var(--bqr-trans);\n  flex-shrink: 0;\n  position: relative;\n  z-index: 1;\n}\n.ace-header-cta:hover { background: rgba(255,255,255,0.20); color: #fff; text-decoration: none; }\n.ace-cta-badge {\n  background: var(--bqr-amber);\n  color: #000;\n  font-size: 9px;\n  font-weight: 800;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n@media (max-width: 560px) {\n  .ace-header { padding: 20px 20px 18px; border-radius: 16px 16px 0 0; }\n  .ace-header-inner { flex-direction: column; gap: 14px; }\n  .ace-header-cta { align-self: flex-start; }\n}\n\n\/* \u2500\u2500 TOOL SHELL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-shell {\n  background: var(--bqr-white);\n  border-radius: 0 0 20px 20px;\n  box-shadow: var(--bqr-shadow-lg);\n  overflow: hidden;\n}\n\n\/* \u2500\u2500 CODE TYPE TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-type-tabs {\n  display: flex;\n  gap: 0;\n  background: var(--bqr-gray-50);\n  border-bottom: 0px solid var(--bqr-gray-200);\n  overflow-x: auto;\n  scrollbar-width: none;\n  padding: 0 28px;\n}\n.bqr-type-tabs::-webkit-scrollbar { display: none; }\n\n.bqr-tab {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 14px 18px 13px;\n  font-size: 13px;\n  font-weight: 600;\n  font-family: var(--bqr-font);\n  color: var(--bqr-gray-400);\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: var(--bqr-trans);\n  margin-bottom: -1px;\n  flex-shrink: 0;\n}\n\/*.bqr-tab:hover { color: var(--bqr-blue); } *\/\n.bqr-tab.active {\n  color: var(--bqr-blue);\n  border-bottom-color: var(--bqr-blue);\n}\n.bqr-tab-icon { font-size: 15px; }\n\n\/* \u2500\u2500 MAIN LAYOUT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-main {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0;\n  min-height: 420px;\n}\n@media (max-width: 640px) {\n  .bqr-main { grid-template-columns: 1fr; }\n}\n\n\/* \u2500\u2500 LEFT: INPUTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-inputs {\n  padding: 28px;\n  border-right: 1px solid var(--bqr-gray-200);\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n@media (max-width: 640px) {\n  .bqr-inputs {\n    padding: 20px 18px;\n    border-right: none;\n    border-bottom: 1px solid var(--bqr-gray-200);\n  }\n}\n\n.bqr-field-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  color: var(--bqr-gray-600);\n  margin-bottom: 8px;\n}\n\n.bqr-input-wrap { position: relative; }\n.bqr-input-wrap .bqr-input-icon {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  font-size: 16px;\n  pointer-events: none;\n}\n\n#toolInput {\n  width: 100%;\n  padding: 13px 13px 13px 40px;\n  border: 1.5px solid var(--bqr-gray-200);\n  border-radius: var(--bqr-radius-sm);\n  font-size: 14px;\n  font-family: var(--bqr-mono);\n  color: var(--bqr-gray-800);\n  background: var(--bqr-white);\n  outline: none;\n  transition: var(--bqr-trans);\n  letter-spacing: 0.03em;\n  -webkit-appearance: none;\n}\n#toolInput::placeholder { font-family: var(--bqr-font); color: var(--bqr-gray-300); letter-spacing: 0; }\n#toolInput:focus {\n  border-color: var(--bqr-blue-lt);\n  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);\n}\n\n\/* Sample buttons *\/\n.bqr-samples {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n.bqr-sample-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  background: var(--bqr-gray-100);\n  border: 1px solid var(--bqr-gray-200);\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  font-family: var(--bqr-mono);\n  color: var(--bqr-gray-600);\n  cursor: pointer;\n  transition: var(--bqr-trans);\n}\n.bqr-sample-btn:hover {\n  background: var(--bqr-blue-pale);\n  border-color: var(--bqr-blue-lt);\n  color: var(--bqr-blue);\n}\n\n\/* QR content type selector *\/\n.bqr-qr-type-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 7px;\n}\n.bqr-qr-type-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  padding: 10px 6px;\n  border: 1.5px solid var(--bqr-gray-200);\n  border-radius: var(--bqr-radius-sm);\n  cursor: pointer;\n  background: var(--bqr-white);\n  transition: var(--bqr-trans);\n  font-family: var(--bqr-font);\n}\n.bqr-qr-type-card:hover { border-color: var(--bqr-blue-lt); background: var(--bqr-blue-pale); }\n.bqr-qr-type-card.active { border-color: var(--bqr-blue); background: var(--bqr-blue-pale); }\n.bqr-qr-type-card .qt-icon { font-size: 20px; }\n.bqr-qr-type-card .qt-label { font-size: 10px; font-weight: 700; color: var(--bqr-gray-600); text-transform: uppercase; letter-spacing: 0.05em; }\n.bqr-qr-type-card.active .qt-label { color: var(--bqr-blue); }\n\n\/* Barcode width slider *\/\n.bqr-slider-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.bqr-slider {\n  flex: 1;\n  -webkit-appearance: none;\n  appearance: none;\n  height: 4px;\n  border-radius: 2px;\n  background: var(--bqr-gray-200);\n  outline: none;\n}\n.bqr-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 16px; height: 16px;\n  border-radius: 50%;\n  background: var(--bqr-blue);\n  cursor: pointer;\n  box-shadow: 0 1px 4px rgba(29,78,216,0.3);\n}\n.bqr-slider::-moz-range-thumb {\n  width: 16px; height: 16px;\n  border-radius: 50%;\n  background: var(--bqr-blue);\n  cursor: pointer;\n  border: none;\n}\n.bqr-slider-val {\n  font-size: 12px;\n  font-weight: 700;\n  font-family: var(--bqr-mono);\n  color: var(--bqr-blue);\n  min-width: 28px;\n  text-align: right;\n}\n\n\/* Generate button *\/\n.bqr-generate-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 14px;\n  background: var(--bqr-blue);\n  color: #fff;\n  border: none;\n  border-radius: var(--bqr-radius-sm);\n  font-size: 14px;\n  font-weight: 700;\n  font-family: var(--bqr-font);\n  cursor: pointer;\n  transition: var(--bqr-trans);\n  margin-top: auto;\n}\n.bqr-generate-btn:hover {\n  background: #1a45c0;\n  box-shadow: 0 4px 16px rgba(29,78,216,0.3);\n}\n.bqr-generate-btn:active { transform: scale(0.98); }\n.bqr-generate-btn .btn-icon { font-size: 16px; }\n.bqr-generate-btn:disabled { background: var(--bqr-gray-300); cursor: not-allowed; }\n\n\/* \u2500\u2500 RIGHT: OUTPUT PANEL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-output {\n  padding: 28px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  background: var(--bqr-gray-50);\n}\n@media (max-width: 640px) { .bqr-output { padding: 20px 18px; } }\n\n.bqr-output-label {\n  font-size: 11px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: var(--bqr-gray-400);\n}\n\n\/* Output canvas \/ svg area *\/\n.bqr-canvas-wrap {\n  flex: 1;\n  min-height: 200px;\n  background: var(--bqr-white);\n  border: 1.5px solid var(--bqr-gray-200);\n  border-radius: var(--bqr-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  position: relative;\n  overflow: hidden;\n  transition: var(--bqr-trans);\n}\n.bqr-canvas-wrap.has-content {\n  border-color: var(--bqr-blue-lt);\n  box-shadow: 0 0 0 3px rgba(59,130,246,0.08);\n}\n\n#placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  color: var(--bqr-gray-300);\n  text-align: center;\n}\n.bqr-placeholder-icon {\n  font-size: 40px;\n  opacity: 0.4;\n}\n.bqr-placeholder-text {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--bqr-gray-300);\n  line-height: 1.4;\n}\n\n#barcodeBox { display: none; text-align: center; width: 100%; }\n#barcodeBox svg { max-width: 100%; height: auto; }\n#qrcode { text-align: center; }\n#qrcode img, #qrcode canvas { border-radius: 6px; max-width: 100%; }\n\n\/* Error message *\/\n.bqr-error {\n  background: var(--bqr-red-lt);\n  border: 1.5px solid #fca5a5;\n  border-radius: var(--bqr-radius-sm);\n  padding: 10px 14px;\n  font-size: 12px;\n  color: var(--bqr-red);\n  display: none;\n  animation: bqrFadeIn 0.25s ease;\n}\n.bqr-error.show { display: block; }\n\n\/* Success state tag *\/\n.bqr-success-tag {\n  display: none;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--bqr-green);\n  background: var(--bqr-green-lt);\n  border: 1px solid var(--bqr-green-bd);\n  padding: 5px 12px;\n  border-radius: 20px;\n  animation: bqrFadeIn 0.3s ease;\n}\n.bqr-success-tag.show { display: inline-flex; }\n\n\/* Download button *\/\n.bqr-download-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 13px;\n  background: var(--bqr-navy);\n  color: #fff;\n  border: none;\n  border-radius: var(--bqr-radius-sm);\n  font-size: 13px;\n  font-weight: 700;\n  font-family: var(--bqr-font);\n  cursor: pointer;\n  transition: var(--bqr-trans);\n  opacity: 0.4;\n  pointer-events: none;\n}\n.bqr-download-btn.ready {\n  opacity: 1;\n  pointer-events: auto;\n}\n.bqr-download-btn.ready:hover {\n  background: #0a1128;\n  box-shadow: 0 4px 16px rgba(15,28,63,0.3);\n}\n.bqr-download-btn.ready:active { transform: scale(0.98); }\n\n\/* \u2500\u2500 SECTION DIVIDER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-section {\n  padding: 20px 28px;\n  border-top: 1px solid var(--bqr-gray-200);\n}\n@media (max-width: 640px) { .bqr-section { padding: 18px 18px; } }\n\n.bqr-section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 14px;\n}\n.bqr-section-title {\n  font-size: 10px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: var(--bqr-blue);\n  white-space: nowrap;\n}\n.bqr-section-line {\n  flex: 1;\n  height: 1px;\n  background: var(--bqr-gray-200);\n}\n\n\/* \u2500\u2500 SPECS \/ INSTRUCTIONS GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-specs-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n}\n@media (max-width: 480px) { .bqr-specs-grid { grid-template-columns: 1fr; } }\n\n.bqr-spec-card {\n  background: var(--bqr-gray-50);\n  border: 1.5px solid var(--bqr-gray-200);\n  border-radius: var(--bqr-radius-sm);\n  padding: 14px 16px;\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n  transition: var(--bqr-trans);\n}\n.bqr-spec-card:hover { border-color: var(--bqr-blue-lt); background: var(--bqr-blue-pale); }\n.bqr-spec-icon {\n  font-size: 20px;\n  flex-shrink: 0;\n  line-height: 1.3;\n}\n.bqr-spec-title { font-size: 12px; font-weight: 700; color: var(--bqr-gray-800); margin-bottom: 2px; }\n.bqr-spec-desc  { font-size: 11px; color: var(--bqr-gray-400); line-height: 1.4; }\n\n\/* \u2500\u2500 UPSELL NOTE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-upsell {\n  background: var(--bqr-amber-lt);\n  border: 1.5px solid var(--bqr-amber-bd);\n  border-radius: var(--bqr-radius-sm);\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 12px;\n  color: #78350f;\n  line-height: 1.5;\n}\n.bqr-upsell a { color: #92400e; font-weight: 700; text-decoration: underline; }\n.bqr-upsell a:hover { color: var(--bqr-navy); }\n\n\/* \u2500\u2500 ANIMATIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@keyframes bqrFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }\n@keyframes bqrPop    { 0%{transform:scale(0.95);opacity:0;} 100%{transform:scale(1);opacity:1;} }\n.bqr-output-anim { animation: bqrPop 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }\n\n\/* \u2500\u2500 SPINNER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-spinner {\n  width: 24px; height: 24px;\n  border: 3px solid var(--bqr-gray-200);\n  border-top-color: var(--bqr-blue);\n  border-radius: 50%;\n  animation: bqrSpin 0.7s linear infinite;\n  display: none;\n}\n@keyframes bqrSpin { to { transform: rotate(360deg); } }\n\n\/* \u2500\u2500 FOOTER SPACING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.bqr-foot { height: 4px; }\n<\/style>\n\n<!-- ============================================================\n     MARKUP\n============================================================ -->\n<div class=\"ace-tool\">\n\n  <!-- Shared header -->\n  \n<div class=\"ace-header\">\n  <div class=\"ace-header-inner\">\n\n    <!-- Left: identity block -->\n    <div class=\"ace-header-identity\">\n\n            <span class=\"ace-header-badge badge-default\">\n        SALES      <\/span>\n      \n      <h2 class=\"ace-header-title\">Barcode &amp; QR Code Generator<\/h2>\n\n            <p class=\"ace-header-subtitle\">The tool helps authors and self-publishers create professional barcodes and QR codes instantly.<\/p>\n      \n    <\/div><!-- \/.ace-header-identity -->\n\n    <!-- Right: CTA button -->\n    <a href=\"https:\/\/aceworldpgs.com\/acepublishingchecklist\" class=\"ace-header-cta\" target=\"_blank\" rel=\"noopener\">\n      Download Publishing Checklist            <span class=\"ace-cta-badge\">\u2b07<\/span>\n          <\/a>\n\n  <\/div><!-- \/.ace-header-inner -->\n<\/div><!-- \/.ace-header -->\n\n\n        \n  <div class=\"bqr-shell\">\n    <!-- \u2500\u2500 CODE TYPE TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"bqr-type-tabs\" role=\"tablist\" aria-label=\"Code type\">\n      <button class=\"bqr-tab active\" role=\"tab\" data-type=\"EAN13\"\n              onclick=\"bqrSetType('EAN13', this)\" aria-selected=\"true\">\n        <span class=\"bqr-tab-icon\">\u2590\u258c<\/span> ISBN Barcode (EAN-13)\n      <\/button>\n      <button class=\"bqr-tab\" role=\"tab\" data-type=\"CODE128\"\n              onclick=\"bqrSetType('CODE128', this)\" aria-selected=\"false\">\n        <span class=\"bqr-tab-icon\">\u258c\u2590<\/span> Code 128\n      <\/button>\n      <button class=\"bqr-tab\" role=\"tab\" data-type=\"CODE39\"\n              onclick=\"bqrSetType('CODE39', this)\" aria-selected=\"false\">\n        <span class=\"bqr-tab-icon\">\u258d\u258c<\/span> Code 39\n      <\/button>\n      <button class=\"bqr-tab\" role=\"tab\" data-type=\"QR\"\n              onclick=\"bqrSetType('QR', this)\" aria-selected=\"false\">\n        <span class=\"bqr-tab-icon\">\u229e<\/span> QR Code\n      <\/button>\n    <\/div>\n\n    <!-- \u2500\u2500 TWO-COLUMN MAIN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"bqr-main\">\n\n      <!-- LEFT: Inputs -->\n      <div class=\"bqr-inputs\">\n\n        <!-- Input field -->\n        <div>\n          <label class=\"bqr-field-label\" for=\"toolInput\" id=\"inputLabel\">Enter ISBN, text or URL<\/label>\n          <div class=\"bqr-input-wrap\">\n            <span class=\"bqr-input-icon\" id=\"inputIcon\">\ud83d\udd22<\/span>\n            <input type=\"text\"\n                   id=\"toolInput\"\n                   placeholder=\"e.g. 9780306406157\"\n                   autocomplete=\"off\"\n                   autocorrect=\"off\"\n                   spellcheck=\"false\">\n          <\/div>\n        <\/div>\n\n        <!-- Sample values (barcode types) -->\n        <div id=\"sampleSection\">\n          <label class=\"bqr-field-label\">Quick Samples<\/label>\n          <div class=\"bqr-samples\" id=\"sampleBtns\">\n            <button class=\"bqr-sample-btn\" onclick=\"bqrSample('9780306406157')\">9780306406157<\/button>\n            <button class=\"bqr-sample-btn\" onclick=\"bqrSample('9780747532743')\">9780747532743<\/button>\n            <button class=\"bqr-sample-btn\" onclick=\"bqrSample('9780261103573')\">9780261103573<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- QR content type (hidden by default, shown for QR tab) -->\n        <div id=\"qrTypeSection\" style=\"display:none;\">\n          <label class=\"bqr-field-label\">Content Type<\/label>\n          <div class=\"bqr-qr-type-grid\">\n            <button class=\"bqr-qr-type-card active\" onclick=\"bqrSetQrType(this,'url','\ud83d\udd17','Enter URL','https:\/\/aceworldpgs.com')\">\n              <span class=\"qt-icon\">\ud83d\udd17<\/span><span class=\"qt-label\">URL<\/span>\n            <\/button>\n            <button class=\"bqr-qr-type-card\" onclick=\"bqrSetQrType(this,'text','\ud83d\udcdd','Enter text','Your custom text here')\">\n              <span class=\"qt-icon\">\ud83d\udcdd<\/span><span class=\"qt-label\">Text<\/span>\n            <\/button>\n            <button class=\"bqr-qr-type-card\" onclick=\"bqrSetQrType(this,'email','\ud83d\udce7','Enter email address','email@example.com')\">\n              <span class=\"qt-icon\">\ud83d\udce7<\/span><span class=\"qt-label\">Email<\/span>\n            <\/button>\n            <button class=\"bqr-qr-type-card\" onclick=\"bqrSetQrType(this,'phone','\ud83d\udcde','Enter phone number','+2348012345678')\">\n              <span class=\"qt-icon\">\ud83d\udcde<\/span><span class=\"qt-label\">Phone<\/span>\n            <\/button>\n            <button class=\"bqr-qr-type-card\" onclick=\"bqrSetQrType(this,'sms','\ud83d\udcac','Enter phone number for SMS','+2348012345678')\">\n              <span class=\"qt-icon\">\ud83d\udcac<\/span><span class=\"qt-label\">SMS<\/span>\n            <\/button>\n            <button class=\"bqr-qr-type-card\" onclick=\"bqrSetQrType(this,'whatsapp','\ud83d\udfe2','Enter WhatsApp number','+2348012345678')\">\n              <span class=\"qt-icon\">\ud83d\udfe2<\/span><span class=\"qt-label\">WhatsApp<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Bar width slider (barcode types only) -->\n        <div id=\"widthSliderSection\">\n          <label class=\"bqr-field-label\">Bar Width<\/label>\n          <div class=\"bqr-slider-row\">\n            <span style=\"font-size:11px; color:var(--bqr-gray-400);\">Narrow<\/span>\n            <input type=\"range\" class=\"bqr-slider\" id=\"barWidthSlider\" min=\"1\" max=\"4\" step=\"0.5\" value=\"2\"\n                   oninput=\"document.getElementById('barWidthVal').textContent=this.value+'\u00d7'\">\n            <span style=\"font-size:11px; color:var(--bqr-gray-400);\">Wide<\/span>\n            <span class=\"bqr-slider-val\" id=\"barWidthVal\">2\u00d7<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- Generate -->\n        <button class=\"bqr-generate-btn\"\n                onclick=\"trackTool('barcode_generator'); bqrGenerate()\">\n          <span class=\"btn-icon\">\u26a1<\/span>\n          Generate Code\n        <\/button>\n\n      <\/div><!-- \/.bqr-inputs -->\n\n      <!-- RIGHT: Output -->\n      <div class=\"bqr-output\">\n\n        <div style=\"display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;\">\n          <span class=\"bqr-output-label\">Generated Output<\/span>\n          <span class=\"bqr-success-tag\" id=\"successTag\">\u2713 Ready to download<\/span>\n        <\/div>\n\n        <div class=\"bqr-canvas-wrap\" id=\"resultContainer\">\n          <div id=\"placeholder\">\n            <div class=\"bqr-placeholder-icon\">\u2b1b<\/div>\n            <div class=\"bqr-placeholder-text\">\n              Your barcode or QR code<br>will appear here after generation.\n            <\/div>\n          <\/div>\n          <div class=\"bqr-spinner\" id=\"bqrSpinner\"><\/div>\n          <div id=\"barcodeBox\"><svg id=\"barcode\"><\/svg><\/div>\n          <div id=\"qrcode\"><\/div>\n        <\/div>\n\n        <div class=\"bqr-error\" id=\"errorMsg\"><\/div>\n\n        <button class=\"bqr-download-btn\" id=\"downloadBtn\"\n                onclick=\"trackTool('barcode_download'); bqrDownload()\">\n          \u2b07 Download PNG\n        <\/button>\n\n      <\/div><!-- \/.bqr-output -->\n\n    <\/div><!-- \/.bqr-main -->\n\n    <!-- \u2500\u2500 CODE TYPE INFO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div class=\"bqr-section\">\n      <div class=\"bqr-section-header\">\n        <span class=\"bqr-section-title\">Code Type Guide<\/span>\n        <span class=\"bqr-section-line\"><\/span>\n      <\/div>\n      <div class=\"bqr-specs-grid\">\n        <div class=\"bqr-spec-card\">\n          <span class=\"bqr-spec-icon\">\ud83d\udcd7<\/span>\n          <div>\n            <div class=\"bqr-spec-title\">ISBN Barcode (EAN-13)<\/div>\n            <div class=\"bqr-spec-desc\">Standard barcode for all published books. Required for retail and library distribution. Enter your 13-digit ISBN.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"bqr-spec-card\">\n          <span class=\"bqr-spec-icon\">\ud83c\udff7\ufe0f<\/span>\n          <div>\n            <div class=\"bqr-spec-title\">Code 128<\/div>\n            <div class=\"bqr-spec-desc\">High-density linear barcode. Ideal for shipping labels, internal inventory, and asset tracking.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"bqr-spec-card\">\n          <span class=\"bqr-spec-icon\">\u258c\u2590<\/span>\n          <div>\n            <div class=\"bqr-spec-title\">Code 39<\/div>\n            <div class=\"bqr-spec-desc\">Alphanumeric barcode widely used in non-retail settings such as military, automotive, and healthcare.<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"bqr-spec-card\">\n          <span class=\"bqr-spec-icon\">\u229e<\/span>\n          <div>\n            <div class=\"bqr-spec-title\">QR Code<\/div>\n            <div class=\"bqr-spec-desc\">2D code that stores URLs, text, contact info, or social links. Scannable by any smartphone camera.<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- \u2500\u2500 UPSELL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <div style=\"padding: 0 28px 24px;\">\n      <div class=\"bqr-upsell\">\n        <span style=\"font-size:18px; flex-shrink:0;\">\ud83d\udcda<\/span>\n        <span>\n          Need a valid ISBN for your book?\n          <a href=\"https:\/\/aceworldpgs.com\/tools\/publishing-calculator\/\" target=\"_blank\">Get an ISBN through our publishing calculator \u2192<\/a>\n        <\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"bqr-foot\"><\/div>\n\n  <\/div><!-- \/.bqr-shell -->\n<\/div><!-- \/.ace-tool -->\n\n<!-- External libraries (unchanged from original) -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsbarcode@3.11.6\/dist\/JsBarcode.all.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/qrcodejs\/qrcode.min.js\"><\/script>\n\n<!-- ============================================================\n     JAVASCRIPT\n============================================================ -->\n<script>\n(function() {\n\n\/\/ \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet currentType    = 'EAN13';\nlet currentQrType  = 'url';\nlet hasContent     = false;\n\n\/\/ \u2500\u2500 Tab switching \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction bqrSetType(type, tabEl) {\n  currentType = type;\n\n  \/\/ Update tab active state\n  document.querySelectorAll('.bqr-tab').forEach(t => {\n    t.classList.remove('active');\n    t.setAttribute('aria-selected', 'false');\n  });\n  tabEl.classList.add('active');\n  tabEl.setAttribute('aria-selected', 'true');\n\n  const isQR = type === 'QR';\n\n  \/\/ Toggle sections\n  document.getElementById('sampleSection').style.display      = isQR ? 'none'  : 'block';\n  document.getElementById('qrTypeSection').style.display      = isQR ? 'block' : 'none';\n  document.getElementById('widthSliderSection').style.display = isQR ? 'none'  : 'block';\n\n  \/\/ Update input icon & label & placeholder\n  const inputIcon  = document.getElementById('inputIcon');\n  const inputLabel = document.getElementById('inputLabel');\n  const inputEl    = document.getElementById('toolInput');\n\n  if (isQR) {\n    inputIcon.textContent  = '\ud83d\udd17';\n    inputLabel.textContent = 'Enter URL';\n    inputEl.placeholder    = 'https:\/\/aceworldpgs.com';\n  } else if (type === 'EAN13') {\n    inputIcon.textContent  = '\ud83d\udd22';\n    inputLabel.textContent = 'Enter ISBN, text or URL';\n    inputEl.placeholder    = 'e.g. 9780306406157';\n    \/\/ Refresh sample buttons for EAN13\n    document.getElementById('sampleBtns').innerHTML = [\n      '9780306406157','9780747532743','9780261103573'\n    ].map(s => `<button class=\"bqr-sample-btn\" onclick=\"bqrSample('${s}')\">${s}<\/button>`).join('');\n  } else {\n    inputIcon.textContent  = '\ud83d\udcdd';\n    inputLabel.textContent = 'Enter ISBN, text or URL';\n    inputEl.placeholder    = 'Enter any text or number';\n    document.getElementById('sampleBtns').innerHTML = [\n      'PRODUCT-001','BOOK-2026','MY-NEW-STORE'\n    ].map(s => `<button class=\"bqr-sample-btn\" onclick=\"bqrSample('${s}')\">${s}<\/button>`).join('');\n  }\n\n  \/\/ Reset output\n  bqrResetOutput();\n}\n\n\/\/ \u2500\u2500 QR content type \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction bqrSetQrType(card, type, icon, labelText, placeholder) {\n  currentQrType = type;\n  document.querySelectorAll('.bqr-qr-type-card').forEach(c => c.classList.remove('active'));\n  card.classList.add('active');\n  document.getElementById('inputIcon').textContent      = icon;\n  document.getElementById('inputLabel').textContent     = labelText;\n  document.getElementById('toolInput').placeholder      = placeholder;\n  document.getElementById('toolInput').value            = '';\n}\n\n\/\/ \u2500\u2500 Sample fill \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction bqrSample(value) {\n  document.getElementById('toolInput').value = value;\n  document.getElementById('toolInput').focus();\n}\n\n\/\/ \u2500\u2500 Reset output panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction bqrResetOutput() {\n  hasContent = false;\n  document.getElementById('placeholder').style.display   = 'flex';\n  document.getElementById('barcodeBox').style.display    = 'none';\n  document.getElementById('qrcode').innerHTML            = '';\n  document.getElementById('barcode').innerHTML           = '';\n  document.getElementById('errorMsg').textContent        = '';\n  document.getElementById('errorMsg').classList.remove('show');\n  document.getElementById('successTag').classList.remove('show');\n  document.getElementById('downloadBtn').classList.remove('ready');\n  document.getElementById('resultContainer').classList.remove('has-content');\n}\n\n\/\/ \u2500\u2500 Build QR content string based on type \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction bqrBuildQrContent(raw) {\n  switch (currentQrType) {\n    case 'url':       return raw.startsWith('http') ? raw : 'https:\/\/' + raw;\n    case 'email':     return 'mailto:' + raw;\n    case 'phone':     return 'tel:' + raw;\n    case 'sms':       return 'sms:' + raw;\n    case 'whatsapp':  return 'https:\/\/wa.me\/' + raw.replace(\/[^0-9]\/g, '');\n    default:          return raw;\n  }\n}\n\n\/\/ \u2500\u2500 Main generate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction bqrGenerate() {\n  const raw    = (document.getElementById('toolInput').value || '').trim();\n  const errEl  = document.getElementById('errorMsg');\n  const barW   = parseFloat(document.getElementById('barWidthSlider').value);\n\n  bqrResetOutput();\n\n  if (!raw) {\n    bqrShowError('Please enter a value before generating.');\n    return;\n  }\n\n  \/\/ Spinner\n  const spinner = document.getElementById('bqrSpinner');\n  spinner.style.display = 'block';\n  document.getElementById('placeholder').style.display = 'none';\n\n  \/\/ Small timeout to allow spinner to paint before heavy work\n  setTimeout(() => {\n    spinner.style.display = 'none';\n\n    if (currentType === 'QR') {\n      const content = bqrBuildQrContent(raw);\n      try {\n        new QRCode(document.getElementById('qrcode'), {\n          text: content,\n          width: 200,\n          height: 200,\n          correctLevel: QRCode.CorrectLevel.H,\n        });\n        document.getElementById('qrcode').classList.add('bqr-output-anim');\n        bqrSetSuccess();\n      } catch (e) {\n        bqrShowError('Could not generate QR code. Please check your input.');\n      }\n      return;\n    }\n\n    \/\/ Barcode types\n    const svgEl = document.getElementById('barcode');\n    svgEl.innerHTML = '';\n\n    try {\n      if (currentType === 'EAN13') {\n        const digits = raw.replace(\/-\/g, '');\n        if (!\/^\\d{13}$\/.test(digits)) {\n          throw new Error('ISBN barcode requires exactly 13 digits. Ensure your ISBN is 13 digits and remove all dashes.');\n        }\n        JsBarcode('#barcode', digits, { format:'EAN13', width: barW, height:90, displayValue:true });\n      } else if (currentType === 'CODE128') {\n        JsBarcode('#barcode', raw, { format:'CODE128', width: barW, height:90, displayValue:true });\n      } else if (currentType === 'CODE39') {\n        JsBarcode('#barcode', raw, { format:'CODE39',  width: barW, height:90, displayValue:true });\n      }\n\n      document.getElementById('barcodeBox').style.display = 'block';\n      document.getElementById('barcodeBox').classList.add('bqr-output-anim');\n      bqrSetSuccess();\n\n    } catch (e) {\n      bqrShowError(e.message || 'Could not generate barcode. Please check your input.');\n    }\n\n  }, 80);\n}\n\nfunction bqrSetSuccess() {\n  hasContent = true;\n  document.getElementById('resultContainer').classList.add('has-content');\n  document.getElementById('successTag').classList.add('show');\n  document.getElementById('downloadBtn').classList.add('ready');\n}\n\nfunction bqrShowError(msg) {\n  document.getElementById('placeholder').style.display = 'flex';\n  const errEl = document.getElementById('errorMsg');\n  errEl.textContent = msg;\n  errEl.classList.add('show');\n}\n\n\/\/ \u2500\u2500 Download \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction bqrDownload() {\n  if (!hasContent) return;\n\n  if (currentType === 'QR') {\n    const img = document.querySelector('#qrcode img') || document.querySelector('#qrcode canvas');\n    if (!img) return;\n    const link = document.createElement('a');\n    if (img.tagName === 'CANVAS') {\n      link.href     = img.toDataURL('image\/png');\n    } else {\n      link.href     = img.src;\n    }\n    link.download = 'qr-code.png';\n    link.click();\n    return;\n  }\n\n  const svg        = document.getElementById('barcode');\n  if (!svg.innerHTML) return;\n\n  const serializer = new XMLSerializer();\n  const source     = serializer.serializeToString(svg);\n  const image      = new Image();\n  image.src        = 'data:image\/svg+xml;charset=utf-8,' + encodeURIComponent(source);\n\n  const canvas     = document.createElement('canvas');\n  canvas.width     = svg.clientWidth  || 300;\n  canvas.height    = svg.clientHeight || 120;\n  const ctx        = canvas.getContext('2d');\n\n  image.onload = function() {\n    ctx.fillStyle = '#ffffff';\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n    ctx.drawImage(image, 0, 0);\n    const link      = document.createElement('a');\n    link.download   = 'barcode.png';\n    link.href       = canvas.toDataURL('image\/png');\n    link.click();\n  };\n}\n\n\/\/ \u2500\u2500 Expose globals for inline onclick \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nwindow.bqrSetType     = bqrSetType;\nwindow.bqrSetQrType   = bqrSetQrType;\nwindow.bqrSample      = bqrSample;\nwindow.bqrGenerate    = bqrGenerate;\nwindow.bqrDownload    = bqrDownload;\nwindow.generateCode   = bqrGenerate;   \/\/ backward compat\nwindow.downloadCode   = bqrDownload;   \/\/ backward compat\n\n\/\/ \u2500\u2500 Enter key to generate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\ndocument.getElementById('toolInput').addEventListener('keydown', function(e) {\n  if (e.key === 'Enter') { e.preventDefault(); bqrGenerate(); }\n});\n\n})();\n<\/script>\n\n<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<style>.kt-accordion-id76816_00ca83-91 .kt-accordion-inner-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:10px;}.kt-accordion-id76816_00ca83-91 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;background:#ffffff;padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #f2f2f2;border-right:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;border-left:1px solid #f2f2f2;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;color:var(--global-palette3, #1A202C);padding-top:13px;padding-right:15px;padding-bottom:13px;padding-left:15px;}.kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap .kt-blocks-accordion-icon-trigger:before{background:var(--global-palette3, #1A202C);}.kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-icon-trigger{background:var(--global-palette3, #1A202C);}.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id76816_00ca83-91 .kt-blocks-accordion-header:focus-visible{color:#444444;background:#eeeeee;border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}.kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion--visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle ) .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:#444444;}.kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger, body:not(.hide-focus-outline) .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger{background:#444444;}.kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger:before, body:not(.hide-focus-outline) .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:after, body:not(.hide-focus-outline) .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible .kt-blocks-accordion-icon-trigger:before{background:#eeeeee;}.kt-accordion-id76816_00ca83-91 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{color:#ffffff;background:#BE530B;border-top:1px solid #BE530B;border-right:1px solid #BE530B;border-bottom:1px solid #BE530B;border-left:1px solid #BE530B;}.kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basiccircle ):not( .kt-accodion-icon-style-xclosecircle ):not( .kt-accodion-icon-style-arrowcircle )  > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:#ffffff;}.kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger{background:#ffffff;}.kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:after, .kt-accordion-id76816_00ca83-91:not( .kt-accodion-icon-style-basic ):not( .kt-accodion-icon-style-xclose ):not( .kt-accodion-icon-style-arrow ) .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger:before{background:#BE530B;}@media all and (max-width: 1024px){.kt-accordion-id76816_00ca83-91 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}}@media all and (max-width: 1024px){.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #f2f2f2;border-right:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;border-left:1px solid #f2f2f2;}}@media all and (max-width: 1024px){.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id76816_00ca83-91 .kt-blocks-accordion-header:focus-visible{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}}@media all and (max-width: 1024px){.kt-accordion-id76816_00ca83-91 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid #BE530B;border-right:1px solid #BE530B;border-bottom:1px solid #BE530B;border-left:1px solid #BE530B;}}@media all and (max-width: 767px){.kt-accordion-id76816_00ca83-91 .kt-accordion-inner-wrap{display:block;}.kt-accordion-id76816_00ca83-91 .kt-accordion-inner-wrap .kt-accordion-pane:not(:first-child){margin-top:10px;}.kt-accordion-id76816_00ca83-91 .kt-accordion-panel-inner{border-top:0px solid transparent;border-right:0px solid transparent;border-bottom:0px solid transparent;border-left:0px solid transparent;}.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header{border-top:1px solid #f2f2f2;border-right:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;border-left:1px solid #f2f2f2;}.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:hover, \n\t\t\t\tbody:not(.hide-focus-outline) .kt-accordion-id76816_00ca83-91 .kt-blocks-accordion-header:focus-visible{border-top:1px solid #878787;border-right:1px solid #878787;border-bottom:1px solid #878787;border-left:1px solid #878787;}.kt-accordion-id76816_00ca83-91 .kt-accordion-header-wrap .kt-blocks-accordion-header:focus-visible,\n\t\t\t\t.kt-accordion-id76816_00ca83-91 > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header.kt-accordion-panel-active{border-top:1px solid #BE530B;border-right:1px solid #BE530B;border-bottom:1px solid #BE530B;border-left:1px solid #BE530B;}}<\/style>\n<div class=\"wp-block-kadence-accordion alignnone\"><div class=\"kt-accordion-wrap kt-accordion-id76816_00ca83-91 kt-accordion-has-2-panes kt-active-pane-0 kt-accordion-block kt-pane-header-alignment-left kt-accodion-icon-style-basic kt-accodion-icon-side-right\" style=\"max-width:none\"><div class=\"kt-accordion-inner-wrap\" data-allow-multiple-open=\"false\" data-start-open=\"none\">\n<div class=\"wp-block-kadence-pane kt-accordion-pane kt-accordion-pane-1 kt-pane76816_5e81d9-f7\"><div class=\"kt-accordion-header-wrap\"><button class=\"kt-blocks-accordion-header kt-acccordion-button-label-show\" type=\"button\"><span class=\"kt-blocks-accordion-title-wrap\"><span class=\"kt-blocks-accordion-title\">How it Works<\/span><\/span><span class=\"kt-blocks-accordion-icon-trigger\"><\/span><\/button><\/div><div class=\"kt-accordion-panel kt-accordion-panel-hidden\"><div class=\"kt-accordion-panel-inner\">\n<h2 class=\"wp-block-heading\">About the ISBN Barcode &amp; QR Code Generator<\/h2>\n\n\n\n<p>Barcodes and QR codes play an important role in modern book publishing and marketing. Whether you are preparing your book cover for printing or promoting your book online, having the right codes ensures your book can be easily identified, sold, and shared.<\/p>\n\n\n\n<p>The ISBN Barcode &amp; QR Code Generator in the ACEworld Self-Publishing Toolkit helps authors, publishers, and self-publishers create professional barcodes and QR codes instantly. With this tool, you can generate ISBN-13 barcodes for book covers as well as QR codes for websites, author pages, book trailers, and digital marketing campaigns.<\/p>\n\n\n\n<p><strong>Need an ISBN first?<\/strong> Learn <a href=\"https:\/\/aceworldpgs.com\/isbn\/\">how to get an ISBN for your book<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Generate ISBN Barcodes for Book Covers<\/h3>\n\n\n\n<p>Every retail book requires a barcode on the back cover so that bookstores and retailers can scan it at the point of sale. This tool allows you to quickly convert a valid 13-digit ISBN into a scannable EAN-13 barcode, the standard format used in the publishing industry.<\/p>\n\n\n\n<p>Simply enter your ISBN number and the tool will instantly generate a barcode that can be downloaded and used during your book cover design process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create QR Codes for Book Promotion<\/h3>\n\n\n\n<p>QR codes have become a powerful marketing tool for authors. By adding a QR code to your book, flyers, posters, or social media graphics, readers can quickly access your:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Book sales page<\/li>\n\n\n\n<li>Author website<\/li>\n\n\n\n<li>Book trailer or promotional video<\/li>\n\n\n\n<li>Email newsletter signup page<\/li>\n\n\n\n<li>Online store or catalog<\/li>\n<\/ul>\n\n\n\n<p>The QR code generator allows you to convert any link or text into a scannable code that readers can access using their smartphones.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why Authors Use This Tool<\/h3>\n\n\n\n<p>Self-publishing authors often need quick and reliable tools while preparing their books for print and promotion. This tool was designed to make the process simple and accessible by allowing you to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Generate ISBN barcodes instantly<\/li>\n\n\n\n<li>Create QR codes for book marketing<\/li>\n\n\n\n<li>Download codes for use in cover designs and promotional materials<\/li>\n\n\n\n<li>Prepare your book assets without specialized software<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Part of the ACEworld Self-Publishing Toolkit<\/h3>\n\n\n\n<p>This barcode and QR generator is part of the ACEworld Self-Publishing Toolkit, a collection of professional tools designed to help authors plan, publish, and promote their books more efficiently.<\/p>\n\n\n\n<p>From <a href=\"https:\/\/aceworldpgs.com\/tools\/publishing-calculator\/\">publishing calculators<\/a> to <a href=\"https:\/\/aceworldpgs.com\/sap\/\">publishing resources<\/a>, the toolkit provides practical solutions that simplify the self-publishing journey.<\/p>\n<\/div><\/div><\/div>\n<\/div><\/div><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generate professional ISBN barcodes and QR codes for book covers, author websites, and marketing links. Free tool for authors and self-publishers.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kb_optimizer_status":2,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[22,13,12,14,21],"class_list":["post-76816","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-barcode","tag-fast","tag-free","tag-isbn","tag-qr-code"],"acf":[],"_links":{"self":[{"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/posts\/76816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/comments?post=76816"}],"version-history":[{"count":8,"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/posts\/76816\/revisions"}],"predecessor-version":[{"id":77197,"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/posts\/76816\/revisions\/77197"}],"wp:attachment":[{"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/media?parent=76816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/categories?post=76816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aceworldpgs.com\/tools\/wp-json\/wp\/v2\/tags?post=76816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}