Text

<h2 style="white-space:pre-line">Generator kodów kreskowych online</h2>
<p class="normal">Generator SimpleTag umożliwia szybkie tworzenie poprawnych kodów wykorzystywanych w sprzedaży i logistyce. Narzędzie obsługuje EAN-13, EAN-8, UPC-A, Code 128, Code 39 oraz ITF-14, zgodnie z zasadami GS1.</p>
<p class="normal">Są one podstawą identyfikacji produktów w handlu detalicznym, e-commerce, systemach POS oraz magazynach. Narzędzie uwzględnia cyfrę kontrolną, co zapewnia poprawne skanowanie.</p>
<p class="normal"><strong>Zastosowania:</strong></p>
<ul>
<li class="normal">sprzedaż detaliczna i hurtowa</li>
<li class="normal">sklepy internetowe i marketplace’y</li>
<li class="normal">magazyny i logistyka</li>
<li class="normal">identyfikacja produktów i jednostek zbiorczych<br /><br />Jeśli nie masz pewności, który typ kodu wybrać lub czy numer jest poprawny, <a href="https://simpletag.pl/kontakt" target="_blank">skontaktuj się</a> — pomogę to zweryfikować.</li>
</ul>

Embed

<div class="bc-card" id="bcApp">
  <div class="bc-header">
    <div class="bc-title-row">
      <h2>Generator kodów kreskowych</h2>
      <span class="bc-badge">Multi</span>
    </div>
    <p>Wybierz typ kodu, wpisz wartość i wygeneruj. Możesz zmienić wysokość, marginesy i pobrać PNG/SVG.</p>
  </div>

  <div class="bc-grid">
    <div class="bc-field">
      <label>Typ kodu</label>
      <select id="bcType">
        <option value="ean13" selected>EAN-13</option>
        <option value="ean8">EAN-8</option>
        <option value="upca">UPC-A</option>
        <option value="code128">Code 128</option>
        <option value="code39">Code 39</option>
        <option value="itf14">ITF-14</option>
      </select>
      <div class="bc-hint" id="typeHint">EAN-13: 12 lub 13 cyfr (jeśli 12, dopiszemy cyfrę kontrolną).</div>
    </div>

    <div class="bc-field">
      <label>Wartość (tekst/cyfry)</label>
      <input id="bcValue" placeholder="Np. 5901234123457" />
      <div class="bc-hint" id="valueHint">Wpisz 12 cyfr, a generator dopisze cyfrę kontrolną EAN-13.</div>
    </div>
  </div>

  <div class="bc-section">
    <div class="bc-section-head">
      <div class="bc-section-title">Ustawienia</div>
      <button id="toggleAdv" class="bc-adv-btn" type="button">Pokaż / ukryj</button>
    </div>

    <div id="advBox" class="bc-adv-box" style="display:none">
      <div class="bc-adv-grid">
        <div class="bc-field">
          <label>Szerokość (skala)</label>
          <select id="bcScale">
            <option value="2" selected>Standard</option>
            <option value="3">Duża</option>
            <option value="4">Bardzo duża</option>
          </select>
          <div class="bc-hint">Im większa skala, tym wyższa jakość i “grubsze kreski”.</div>
        </div>

        <div class="bc-field">
          <label>Wysokość (mm / przybliżenie)</label>
          <select id="bcHeight">
            <option value="10">Niska</option>
            <option value="15" selected>Standard</option>
            <option value="20">Wysoka</option>
            <option value="25">Bardzo wysoka</option>
          </select>
          <div class="bc-hint">Dla etykiet produktowych zwykle lepiej wybrać “Standard” lub “Wysoka”.</div>
        </div>

        <div class="bc-field">
          <label>Margines</label>
          <select id="bcPadding">
            <option value="0">0</option>
            <option value="4" selected>4</option>
            <option value="8">8</option>
            <option value="12">12</option>
          </select>
          <div class="bc-hint">Margines pomaga w skanowaniu i przy druku.</div>
        </div>

        <div class="bc-field">
          <label>Tekst pod kodem</label>
          <select id="bcText">
            <option value="1" selected>Pokaż</option>
            <option value="0">Ukryj</option>
          </select>
          <div class="bc-hint">Dla EAN/UPC zwykle zostawia się tekst pod kodem.</div>
        </div>
      </div>
    </div>
  </div>

  <div class="bc-actions-top">
    <button id="genBtn" class="bc-primary" type="button">Generuj</button>
    <button id="clearBtn" class="bc-secondary" type="button">Wyczyść</button>
  </div>

  <div class="bc-output">
    <div class="bc-box">
      <div id="bcRender"></div>
    </div>

    <div id="dlRow" class="bc-dl" style="display:none">
      <button id="dlPng" type="button">Pobierz PNG</button>
      <button id="dlSvg" type="button">Pobierz SVG</button>
      <button id="copyVal" type="button">Skopiuj wartość</button>
    </div>
  </div>

  <div class="bc-alerts">
    <div id="msg" class="bc-alert" style="display:none"></div>
    <div id="note" class="bc-alert note" style="display:none">
      ⚠️ Ten generator nie potwierdza legalności użycia kodu ani zgodności z GS1. Sprawdza tylko podstawowe błędy techniczne / format.
    </div>
  </div>
</div>

<style>
.bc-card{
  max-width: 920px;
  padding: 28px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 38px rgba(0,0,0,.12);
  font-family: inherit;
}
.bc-header{margin-bottom:14px}
.bc-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bc-header h2{ margin:0; font-size:22px; letter-spacing:-0.02em; }
.bc-header p{ margin:8px 0 0; opacity:.72; font-size:14px; line-height:1.5; }
.bc-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font-weight:900; font-size:12px;
  background: rgba(17,17,17,.06);
  border:1px solid rgba(0,0,0,.10);
}

.bc-grid{display:grid; grid-template-columns: 1fr 1.2fr; gap: 12px;}
.bc-field label{ display:block; font-size:12px; font-weight:900; opacity:.75; margin-bottom:6px; }
.bc-field input, .bc-field select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1.5px solid rgba(0,0,0,.14);
  background:#fff;
  font-size:14px;
  box-sizing:border-box;
}
.bc-hint{ margin-top:8px; font-size:13px; opacity:.72; line-height:1.45; }

.bc-section{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fafafa;
}
.bc-section-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.bc-section-title{ font-weight:1000; font-size:13px; opacity:.85; }
.bc-adv-btn{
  border:none; background:transparent; font-weight:900;
  cursor:pointer; text-decoration:underline; padding:0; opacity:.85;
}
.bc-adv-box{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.bc-adv-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 12px;}

.bc-actions-top{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap;}
.bc-primary{
  display:inline-block; width:100%; max-width:220px;
  padding:14px 18px; border-radius:12px; border:none;
  background:#111; color:#fff; font-weight:1000; cursor:pointer;
}
.bc-secondary{
  display:inline-block; width:100%; max-width:180px;
  padding:14px 18px; border-radius:12px;
  border:1px solid rgba(0,0,0,.16);
  background:#f6f6f6; color:#111; font-weight:1000; cursor:pointer;
}

.bc-output{margin-top:16px;}
.bc-box{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fafafa;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height: 140px;
}
#bcRender img, #bcRender object, #bcRender svg{
  max-width: 100%;
  height: auto;
  display:block;
  border-radius: 12px;
  background:#fff;
}

.bc-dl{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; justify-content:center;}
.bc-dl button{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:#f6f6f6;
  cursor:pointer;
  font-weight:900;
}

.bc-alerts{ margin-top: 16px; display:grid; gap:10px; }
.bc-alert{
  padding:12px 14px;
  border-radius:12px;
  background:#f6f7f8;
  font-size:14px;
  line-height:1.45;
  display:none;
}
.bc-alert.ok{ border-left:6px solid #2e7d32; }
.bc-alert.err{ border-left:6px solid #c62828; }
.bc-alert.note{ border-left:6px solid #ed8f00; }

@media (max-width:820px){
  .bc-grid{ grid-template-columns: 1fr; }
  .bc-adv-grid{ grid-template-columns: 1fr; }
  .bc-primary,.bc-secondary{ max-width: 100%; }
}
</style>


<h3 style="white-space:pre-line;text-align:center">⚠️ Ten generator nie potwierdza legalności użycia kodu ani zgodności z GS1. Pokazuje tylko podstawowe błędy techniczne.</h3>