gallery.html

<!DOCTYPE html><html><head><meta charset="utf-8"><title>milon/barcode examples</title><style>
body{font-family:ui-sans-serif,system-ui,sans-serif;margin:0;background:#f6f7f9;color:#111}
header{padding:28px 32px;background:#111;color:#fff}
header h1{margin:0 0 6px;font-size:28px}
header p{margin:0;opacity:.8}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:28px;max-width:920px;margin:0 auto}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px}
.card h2{margin:0 0 12px;font-size:16px}
.card img{max-width:100%;height:auto;image-rendering:pixelated;background:#fff}
.card code{display:block;margin-top:12px;font-size:11px;background:#f3f4f6;padding:10px;border-radius:8px;overflow:auto;white-space:pre-wrap}
.dark{background:#1f2937;color:#fff}
.dark code{background:#111827;color:#e5e7eb}
.pair{display:flex;gap:16px;align-items:center}
.pair figure{margin:0;flex:1;text-align:center}
.pair figcaption{font-size:12px;margin-top:8px;opacity:.8}
</style></head><body><header><h1>milon/barcode</h1><p>Generated examples for documentation screenshots</p></header><section class="grid"><article class="card" id="c39"><h2>CODE 39</h2><img src="c39.png" alt="CODE 39"><code>DNS1D::getBarcodePNG(&#039;CODE39DEMO&#039;, &#039;C39&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="c39-plus"><h2>CODE 39+</h2><img src="c39-plus.png" alt="CODE 39+"><code>DNS1D::getBarcodePNG(&#039;CODE39&#039;, &#039;C39+&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="c128"><h2>CODE 128</h2><img src="c128.png" alt="CODE 128"><code>DNS1D::getBarcodePNG(&#039;Code128Demo&#039;, &#039;C128&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="c128a"><h2>CODE 128A</h2><img src="c128a.png" alt="CODE 128A"><code>DNS1D::getBarcodePNG(&#039;CODE128A&#039;, &#039;C128A&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="c128b"><h2>CODE 128B</h2><img src="c128b.png" alt="CODE 128B"><code>DNS1D::getBarcodePNG(&#039;Code128B&#039;, &#039;C128B&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="c128c"><h2>CODE 128C</h2><img src="c128c.png" alt="CODE 128C"><code>DNS1D::getBarcodePNG(&#039;12345678&#039;, &#039;C128C&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="ean13"><h2>EAN-13</h2><img src="ean13.png" alt="EAN-13"><code>DNS1D::getBarcodePNG(&#039;5901234123457&#039;, &#039;EAN13&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="ean8"><h2>EAN-8</h2><img src="ean8.png" alt="EAN-8"><code>DNS1D::getBarcodePNG(&#039;96385074&#039;, &#039;EAN8&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="upca"><h2>UPC-A</h2><img src="upca.png" alt="UPC-A"><code>DNS1D::getBarcodePNG(&#039;042100005264&#039;, &#039;UPCA&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="i25"><h2>Interleaved 2 of 5</h2><img src="i25.png" alt="Interleaved 2 of 5"><code>DNS1D::getBarcodePNG(&#039;12345670&#039;, &#039;I25&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="codabar"><h2>Codabar</h2><img src="codabar.png" alt="Codabar"><code>DNS1D::getBarcodePNG(&#039;A123456A&#039;, &#039;CODABAR&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="pharma"><h2>Pharmacode</h2><img src="pharma.png" alt="Pharmacode"><code>DNS1D::getBarcodePNG(&#039;123456&#039;, &#039;PHARMA&#039;, 3, 80, [0,0,0], true, [255,255,255])</code></article><article class="card" id="c39-green"><h2>Green CODE 39</h2><img src="c39-green.png" alt="Green CODE 39"><code>DNS1D::getBarcodePNG(&#039;GREENDEMO&#039;, &#039;C39&#039;, 3, 80, [0,128,0], true, [255,255,255])</code></article><article class="card" id="c128-white-bg"><h2>CODE 128 white background</h2><img src="c128-white-bg.png" alt="CODE 128 white background"><code>DNS1D::getBarcodePNG(&#039;WHITEBG&#039;, &#039;C128&#039;, 3, 70, [0,0,0], false, [255,255,255])</code></article><article class="card" id="upca-retail"><h2>UPC-A retail layout</h2><img src="upca-retail.png" alt="UPC-A retail layout"><code>DNS1D::getBarcodePNG(&#039;042100005264&#039;, &#039;UPCA&#039;, 3, 90, [0,0,0], true, [255,255,255])</code></article><article class="card" id="c128-padding"><h2>Quiet zone padding</h2><img src="c128-padding.png" alt="Quiet zone padding"><code>DNS1D::setPadding(20); DNS1D::getBarcodePNG(&#039;QUIETZONE&#039;, &#039;C128&#039;, 2, 70, [0,0,0], true, [255,255,255])</code></article><article class="card" id="qrcode-logo"><h2>QR Code with logo</h2><img src="qrcode-logo.png" alt="QR Code with logo"><code>DNS2D::setLogo(&#039;logo.png&#039;, 0.22); DNS2D::getBarcodePNG(&#039;https://milon.im&#039;, &#039;QRCODE,H&#039;, 8, 8, [0,0,0], [255,255,255])</code></article><article class="card" id="qrcode"><h2>QR Code</h2><img src="qrcode.png" alt="QR Code"><code>DNS2D::getBarcodePNG(&#039;https://milon.im&#039;, &#039;QRCODE&#039;, 6, 6, [0,0,0], [255,255,255])</code></article><article class="card" id="datamatrix"><h2>Data Matrix</h2><img src="datamatrix.png" alt="Data Matrix"><code>DNS2D::getBarcodePNG(&#039;DM-DEMO-12345&#039;, &#039;DATAMATRIX&#039;, 6, 6, [0,0,0], [255,255,255])</code></article><article class="card" id="pdf417"><h2>PDF417</h2><img src="pdf417.png" alt="PDF417"><code>DNS2D::getBarcodePNG(&#039;PDF417 Demo Payload&#039;, &#039;PDF417&#039;, 3, 3, [0,0,0], [255,255,255])</code></article><article class="card dark" id="background"><h2>PNG background for dark UI / email</h2><div class="pair"><figure><img src="qrcode-transparent.png" alt="transparent QR on dark"><figcaption>Transparent (hard to scan on dark)</figcaption></figure><figure><img src="qrcode-on-white.png" alt="white background QR"><figcaption>White background (recommended)</figcaption></figure></div><code>DNS2D::getBarcodePNG($url, 'QRCODE', 6, 6, [0,0,0], [255,255,255])</code></article></section></body></html>