tools/barcode.html at main · jubilancy/tools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Barcode Generator | tools.eliana.lol</title>
  <link rel="stylesheet" href="../global.css" />
  <link rel="icon" type="image/x-icon" href="../favicon.svg" />
  <style>
    .tool-layout { display: flex; flex-direction: column; gap: 20px; }
    .action-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
    label { display: block; font-size: 0.7rem; text-transform: uppercase; font-weight: bold; color: var(--puny); margin-bottom: 5px; }
    #barcode-wrap { border: 1px solid var(--puny); padding: 20px; display: inline-block; background: #fff; min-height: 80px; }
    #error { color: var(--accent); font-size: 0.8rem; min-height: 1.2rem; }
    select { background: var(--bg); color: var(--text); border: 1px solid var(--puny); font-family: monospace; padding: 4px 8px; }
    input[type=range] { accent-color: var(--accent); width: 120px; }
    input[type=color] { width: 40px; height: 28px; padding: 2px; border: 1px solid var(--puny); background: var(--bg); cursor: pointer; }
    .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
    .cg { display: flex; flex-direction: column; gap: 4px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; }
    .presets button { font-size: 0.75rem; padding: 3px 8px; }
  </style>
</head>
<body>
  <nav>
    <div class="left"><a href="../index.html">home</a> | <a href="../extra.html">extra</a> | <a href="../credits.html">credits</a> | <a href="../changelog.html">logs</a></div>
    <div class="right"><button id="theme-toggle">[theme]</button> | <a href="https://eliana.lol">site</a></div>
  </nav>
  <main>
    <h1>Barcode Generator</h1>
    <p class="puny">Generate barcodes in multiple formats — CODE128, EAN, UPC, ITF, and more.</p>
    <div class="tool-layout">
      <div>
        <label>Value</label>
        <input type="text" id="bc-value" value="012345678901" oninput="debounce()" />
      </div>
      <div class="row">
        <div class="cg">
          <label>Format</label>
          <select id="bc-format" onchange="debounce()">
            <option value="CODE128">CODE128</option>
            <option value="CODE39">CODE39</option>
            <option value="EAN13">EAN-13</option>
            <option value="EAN8">EAN-8</option>
            <option value="UPC">UPC</option>
            <option value="ITF14">ITF-14</option>
            <option value="MSI">MSI</option>
            <option value="pharmacode">Pharmacode</option>
          </select>
        </div>
        <div class="cg">
          <label>Width <span id="w-val">2</span></label>
          <input type="range" id="bc-width" min="1" max="4" step="0.5" value="2" oninput="document.getElementById('w-val').textContent=this.value;debounce()" />
        </div>
        <div class="cg">
          <label>Height <span id="h-val">100</span>px</label>
          <input type="range" id="bc-height" min="30" max="200" value="100" oninput="document.getElementById('h-val').textContent=this.value;debounce()" />
        </div>
        <div class="cg">
          <label>Color</label>
          <input type="color" id="bc-color" value="#000000" oninput="debounce()" />
        </div>
        <div class="cg">
          <label><input type="checkbox" id="bc-text" checked onchange="debounce()" /> Show text</label>
        </div>
      </div>
      <div>
        <label>Sample values</label>
        <div class="presets">
          <button onclick="setVal('012345678901','EAN13')">EAN-13</button>
          <button onclick="setVal('01234565','EAN8')">EAN-8</button>
          <button onclick="setVal('012345678901','UPC')">UPC</button>
          <button onclick="setVal('HELLO-WORLD','CODE128')">CODE128</button>
          <button onclick="setVal('00012345678905','ITF14')">ITF-14</button>
        </div>
      </div>
      <div id="error"></div>
      <div id="barcode-wrap"><svg id="barcode"></svg></div>
      <div class="action-bar">
        <button onclick="downloadSVG()">Download SVG</button>
        <button onclick="downloadPNG()">Download PNG</button>
      </div>
    </div>
  </main>
  <footer style="margin-top:4rem;text-align:center" class="puny">© 2026 eliana.lol • <a href="../credits.html">credits</a></footer>
  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
  <script>
    const htmlEl = document.documentElement;
    const toggle = document.getElementById('theme-toggle');
    const saved = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    htmlEl.setAttribute('data-theme', saved);
    if (toggle) toggle.innerText = saved === 'dark' ? '[light]' : '[dark]';
    if (toggle) toggle.onclick = () => { const now = htmlEl.getAttribute('data-theme'); const next = now==='dark'?'light':'dark'; htmlEl.setAttribute('data-theme',next); localStorage.setItem('theme',next); toggle.innerText=next==='dark'?'[light]':'[dark]'; };

    function generate() {
      const val = document.getElementById('bc-value').value;
      const fmt = document.getElementById('bc-format').value;
      const width = parseFloat(document.getElementById('bc-width').value);
      const height = parseInt(document.getElementById('bc-height').value);
      const color = document.getElementById('bc-color').value;
      const showText = document.getElementById('bc-text').checked;
      const err = document.getElementById('error');
      try {
        JsBarcode('#barcode', val, { format: fmt, width, height, lineColor: color, displayValue: showText, margin: 10 });
        err.textContent = '';
      } catch(e) {
        err.textContent = e.message;
      }
    }

    function setVal(v, fmt) {
      document.getElementById('bc-value').value = v;
      document.getElementById('bc-format').value = fmt;
      generate();
    }

    let timer;
    function debounce() { clearTimeout(timer); timer = setTimeout(generate, 300); }

    function downloadSVG() {
      const svg = document.getElementById('barcode');
      const a = document.createElement('a');
      a.href = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svg.outerHTML);
      a.download = 'barcode.svg'; a.click();
    }

    function downloadPNG() {
      const svg = document.getElementById('barcode');
      const canvas = document.createElement('canvas');
      const bb = svg.getBoundingClientRect();
      canvas.width = bb.width; canvas.height = bb.height;
      const img = new Image();
      img.onload = () => { canvas.getContext('2d').drawImage(img,0,0); const a=document.createElement('a'); a.href=canvas.toDataURL('image/png'); a.download='barcode.png'; a.click(); };
      img.src = 'data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svg.outerHTML);
    }

    generate();
  </script>
</body>
</html>