Text

<h2>Darmowy generator kodów QR </h2>
<p class="normal">Generator SimpleTag umożliwia szybkie tworzenie kodów QR do stron internetowych, linków, tekstów i innych danych. Są one wykorzystywane w marketingu, sprzedaży, logistyce oraz na opakowaniach produktów.</p>
<p>Narzędzie działa w pełni online — nie wymaga rejestracji ani instalowania dodatkowego oprogramowania. Wystarczy wpisać treść, wygenerować kod i zapisać go na komputerze lub telefonie.</p>
<p><strong>Zastosowania kodów QR:</strong></p>
<ul>
<li>etykiety produktowe i materiały marketingowe</li>
<li>wizytówki i strony firmowe</li>
<li>instrukcje i dokumentacja</li>
<li>opakowania i logistyka</li>
</ul>
<p>Jeśli nie masz pewności, jak wykorzystać kody QR w swoim przypadku, <a href="https://simpletag.pl/kontakt" target="_blank">skontaktuj się</a> — pomogę to sprawdzić.</p>

Embed

<div class="qr-card" id="qrApp">
  <div class="qr-header">
    <div class="qr-title-row">
      <h2>Generator QR</h2>
      <span class="qr-badge">Premium</span>
    </div>
    <p>Wybierz typ, uzupełnij dane i wygeneruj kod. Możesz dodać logo, zmienić kolor i margines (quiet zone).</p>
  </div>

  
  <div class="qr-limitbar" aria-live="polite">
    <div class="qr-limit-left">
      <span class="qr-dot"></span>
      <span class="qr-limit-text">
        Pozostało: <b><span id="gensLeft">3</span></b> / 3 darmowe generacje
      </span>
    </div>
    <a class="qr-limit-link" href="https://simpletag.pl/kontakt">Chcesz więcej? Skontaktuj się</a>
  </div>

  
  <div class="qr-tabs" role="tablist" aria-label="Typ QR">
    <button class="qr-tab is-active" type="button" data-type="url">🌐 Strona</button>
    <button class="qr-tab" type="button" data-type="text">📝 Tekst</button>
    <button class="qr-tab" type="button" data-type="tel">📞 Telefon</button>
    <button class="qr-tab" type="button" data-type="vcard">📇 Wizytówka</button>
    <button class="qr-tab" type="button" data-type="wifi">📶 Wi-Fi</button>
  </div>

  
  <div class="qr-panel" data-panel="url">
    <div class="qr-form">
      <label class="qr-label">Adres strony</label>
      <input id="urlValue" placeholder="Np. twojadomena.pl lub https://twojadomena.pl" />
      <div class="qr-hint">Jeśli wpiszesz samą domenę, dopiszemy automatycznie https://</div>
    </div>
  </div>

  <div class="qr-panel" data-panel="text" style="display:none">
    <div class="qr-form">
      <label class="qr-label">Tekst</label>
      <textarea id="textValue" rows="3" placeholder="Wpisz dowolny tekst (może zawierać polskie znaki)"></textarea>
      <div class="qr-hint">W razie problemów z odczytem w iPhone, zwiększ margines (quiet zone) i użyj ciemniejszego koloru.</div>
    </div>
  </div>

  <div class="qr-panel" data-panel="tel" style="display:none">
    <div class="qr-form">
      <label class="qr-label">Numer telefonu</label>
      <input id="telValue" placeholder="Np. +48 123 456 789" />
      <div class="qr-hint">Po zeskanowaniu telefon zaproponuje połączenie.</div>
    </div>
  </div>

  <div class="qr-panel" data-panel="vcard" style="display:none">
    <div class="qr-grid">
      <div class="qr-field">
        <label>Imię i nazwisko (wymagane)</label>
        <input id="vcName" placeholder="Np. Jan Kowalski" />
      </div>
      <div class="qr-field">
        <label>Firma</label>
        <input id="vcOrg" placeholder="Np. Twoja Firma" />
      </div>
      <div class="qr-field">
        <label>Telefon</label>
        <input id="vcTel" placeholder="Np. +48 123 456 789" />
      </div>
      <div class="qr-field">
        <label>E-mail</label>
        <input id="vcEmail" placeholder="Np. kontakt@twojadomena.pl" />
      </div>
      <div class="qr-field" style="grid-column:1/-1">
        <label>Strona WWW</label>
        <input id="vcUrl" placeholder="Np. twojadomena.pl" />
      </div>
    </div>
    <div class="qr-hint">Wizytówka (vCard) zapisuje kontakt w telefonie. Obsługa polskich znaków jest “iPhone-proof”.</div>
  </div>

  <div class="qr-panel" data-panel="wifi" style="display:none">
    <div class="qr-grid">
      <div class="qr-field">
        <label>Nazwa sieci (SSID)</label>
        <input id="wifiSsid" placeholder="Np. MojeWiFi" />
      </div>
      <div class="qr-field">
        <label>Hasło</label>
        <input id="wifiPass" placeholder="Np. haslo1234" />
      </div>
      <div class="qr-field">
        <label>Zabezpieczenie</label>
        <select id="wifiAuth">
          <option value="WPA" selected>WPA/WPA2/WPA3</option>
          <option value="WEP">WEP</option>
          <option value="nopass">Brak hasła</option>
        </select>
      </div>
      <div class="qr-field">
        <label>Sieć ukryta?</label>
        <select id="wifiHidden">
          <option value="false" selected>Nie</option>
          <option value="true">Tak</option>
        </select>
      </div>
    </div>
    <div class="qr-hint">Uwaga: SSID/hasło z polskimi znakami może nie działać na każdym urządzeniu.</div>
  </div>

  
  <div class="qr-section">
    <div class="qr-section-title">Logo</div>

    <label class="qr-check">
      <input type="checkbox" id="logoToggle" />
      <span>Dodaj logo w środku</span>
      <span class="qr-mini-badge">max 24%</span>
    </label>

    <div id="logoRow" class="qr-logo-row" style="display:none">
      <div class="qr-drop">
        <div class="qr-drop-title">Wgraj plik logo</div>
        <input type="file" id="logoFile" accept="image/*" />
        <div class="qr-hint">Najlepiej PNG (przezroczyste tło).</div>
      </div>

      <div class="qr-range">
        <div class="qr-range-top">
          <div class="qr-range-title">Rozmiar logo</div>
          <div id="logoPct" class="qr-range-value">20%</div>
        </div>
        <input type="range" id="logoSize" min="12" max="24" value="20" />
        <div class="qr-hint">Bezpieczny zakres: 12–24%. Więcej może przestać się skanować.</div>
      </div>
    </div>
  </div>

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

    <div id="advBox" class="qr-adv-box" style="display:none">
      <div class="qr-adv-grid">
        <div class="qr-field">
          <label>Rozmiar (px)</label>
          <select id="qrSize">
            <option value="240">240</option>
            <option value="400" selected>400</option>
            <option value="600">600</option>
          </select>
        </div>

        <div class="qr-field">
          <label>Odporność (ECC)</label>
          <select id="qrEcc">
            <option value="L">L</option>
            <option value="M" selected>M</option>
            <option value="Q">Q</option>
            <option value="H">H</option>
          </select>
          <div class="qr-hint">Gdy włączysz logo, minimalnie ustawimy Q.</div>
        </div>

        <div class="qr-field" style="grid-column:1/-1">
          <label>Margines (quiet zone)</label>
          <div class="qr-margin-row">
            <input type="range" id="qrMargin" min="0" max="12" value="4" />
            <div class="qr-margin-value"><span id="qrMarginValue">4</span></div>
          </div>
          <div class="qr-hint">Najbezpieczniej: 3–6. Przy logo/kolorach warto dać większy margines.</div>
        </div>

        <div class="qr-field" style="grid-column:1/-1">
          <label>Kolor kodu</label>
          <div class="qr-color-row">
            <div class="qr-presets" role="group" aria-label="Presety koloru">
              <button type="button" class="qr-preset is-active" data-color="#000000">Czarny</button>
              <button type="button" class="qr-preset" data-color="#0B1B3A">Granat</button>
              <button type="button" class="qr-preset" data-color="#0B3A2B">Ciemna zieleń</button>
              <button type="button" class="qr-preset" data-color="#4A2B0B">Brąz</button>
            </div>

            <div class="qr-color-picker">
              <input type="color" id="qrColor" value="#000000" />
              <div class="qr-color-value" id="qrColorValue">#000000</div>
            </div>
          </div>
          <div class="qr-hint">Zalecane: ciemne kolory na białym tle. Zbyt jasny kolor może nie skanować.</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="qr-generate">
    <button id="genBtn" class="qr-primary" type="button">Generuj QR</button>
    <button id="clearBtn" class="qr-secondary" type="button">Wyczyść</button>
  </div>

  
  <div class="qr-output">
    <div class="qr-box">
      <div class="qr-stage">
        <div id="qrRender"></div>

        <div id="logoOverlay" class="qr-logo-overlay" style="display:none">
          <div class="qr-logo-bg"></div>
          <img id="logoPreview" alt="Logo" />
        </div>
      </div>
    </div>

    <div id="actions" class="qr-actions" style="display:none">
      <button id="downloadPng" type="button">Pobierz PNG</button>
      <button id="copyBtn" type="button">Skopiuj</button>
    </div>
  </div>

  
  <div class="qr-alerts">
    <div id="msg" class="qr-alert" style="display:none"></div>
    <div id="warn" class="qr-alert warn" style="display:none">
      ⚠️ Ten generator nie weryfikuje treści ani bezpieczeństwa danych. Sprawdza tylko podstawowe błędy techniczne.
    </div>
  </div>
</div>

<style>
.qr-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}
.qr-header{margin-bottom:14px}
.qr-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qr-header h2{margin:0;font-size:22px;letter-spacing:-0.02em}
.qr-header p{margin:8px 0 0;opacity:.72;font-size:14px;line-height:1.5}
.qr-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)}
.qr-mini-badge{margin-left:auto;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:900;background:#f3f4f6;border:1px solid rgba(0,0,0,.08);opacity:.9}

/* Limit bar */
.qr-limitbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fafafa;
  margin: 10px 0 14px;
}
.qr-limit-left{display:flex;align-items:center;gap:10px}
.qr-dot{
  width:10px;height:10px;border-radius:999px;
  background:#2e7d32;
  box-shadow:0 0 0 3px rgba(46,125,50,.15);
}
.qr-limit-text{font-size:13px;opacity:.82}
.qr-limit-link{
  font-size:13px;
  font-weight:1000;
  text-decoration:underline;
  color:#111;
}
.qr-limitbar.is-zero .qr-dot{
  background:#c62828;
  box-shadow:0 0 0 3px rgba(198,40,40,.15);
}

.qr-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 14px}
.qr-tab{padding:10px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.14);background:#f7f7f7;cursor:pointer;font-weight:900;font-size:14px}
.qr-tab.is-active{background:#111;color:#fff;border-color:#111}

.qr-label{display:block;font-size:12px;font-weight:900;opacity:.75;margin:0 0 6px}
.qr-form input,.qr-form textarea{width:100%;padding:14px 14px;font-size:16px;border-radius:12px;border:1.5px solid rgba(0,0,0,.18);box-sizing:border-box;background:#fff}
.qr-form textarea{resize:vertical}
.qr-hint{margin-top:8px;font-size:13px;opacity:.72;line-height:1.45}

.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr-field label{display:block;font-size:12px;font-weight:900;opacity:.75;margin-bottom:6px}
.qr-field input,.qr-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}

.qr-section{margin-top:14px;padding:14px 14px;border-radius:16px;border:1px solid rgba(0,0,0,.08);background:#fafafa}
.qr-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qr-section-title{font-weight:1000;font-size:13px;letter-spacing:-0.01em;opacity:.85}
.qr-check{display:flex;align-items:center;gap:10px;font-weight:900;margin-top:10px}
.qr-check input{transform:scale(1.08)}

.qr-logo-row{margin-top:12px;display:grid;grid-template-columns:1fr 1.3fr;gap:12px;align-items:start}
.qr-drop{padding:12px;border-radius:14px;border:1px dashed rgba(0,0,0,.18);background:#fff}
.qr-drop-title{font-weight:900;font-size:12px;margin-bottom:8px;opacity:.8}
.qr-drop input[type=file]{width:100%;padding:10px;border-radius:12px;border:1.5px dashed rgba(0,0,0,.18);background:#fff;box-sizing:border-box}
.qr-range{padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,0.10);background:#fff}
.qr-range-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.qr-range-title{font-weight:900;font-size:12px}
.qr-range-value{font-weight:1000;font-size:12px;opacity:.75}
#logoSize{width:100%}

.qr-adv-btn{border:none;background:transparent;font-weight:900;cursor:pointer;text-decoration:underline;padding:0;opacity:.85}
.qr-adv-box{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:#fff}
.qr-adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.qr-margin-row{display:flex;align-items:center;gap:12px}
#qrMargin{width:100%}
.qr-margin-value{min-width:44px;text-align:center;font-weight:1000;font-size:12px;opacity:.78;padding:8px 10px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fafafa}

.qr-color-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.qr-presets{display:flex;gap:8px;flex-wrap:wrap}
.qr-preset{padding:8px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.14);background:#f6f6f6;font-weight:900;cursor:pointer;font-size:12px}
.qr-preset.is-active{background:#111;color:#fff;border-color:#111}
.qr-color-picker{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fafafa}
#qrColor{width:44px;height:34px;border:none;padding:0;background:transparent;cursor:pointer}
.qr-color-value{font-weight:1000;font-size:12px;opacity:.75;min-width:70px;text-transform:uppercase}

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

.qr-output{margin-top:16px}
.qr-box{padding:14px;border-radius:16px;border:1px solid rgba(0,0,0,.08);background:#fafafa;display:flex;justify-content:center}
.qr-stage{position:relative;display:inline-block}
#qrRender img{display:block;border-radius:12px}

.qr-logo-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:10;width:20%;height:20%}
.qr-logo-bg{position:absolute;inset:-14%;background:#fff;border-radius:16%}
.qr-logo-overlay img{position:relative;width:100%;height:100%;object-fit:contain;border-radius:12%}

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

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

@media (max-width:820px){
  .qr-limitbar{align-items:flex-start; flex-direction:column}
  .qr-grid{grid-template-columns:1fr}
  .qr-adv-grid{grid-template-columns:1fr}
  .qr-logo-row{grid-template-columns:1fr}
  .qr-primary,.qr-secondary{max-width:100%}
  .qr-color-row{align-items:flex-start}
}
</style>