<?php
// ============================================================
//  ipcheck.tools – QR-Code Generator
// ============================================================

require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/../includes/functions.php';

$page_title   = 'QR-Code Generator – free QR-Codes erstellen';
$page_desc    = 'QR-Code Generator: URLs, Text, E-Mail oder Telefonnummern free als QR-Code erstellen und herunterladen – auf ipcheck.tools.';
$page_current = 'qr-generator';

require_once __DIR__ . '/header.php';
?>

<div class="hero">
  <div class="hero-label">Tool</div>
  <div class="hero-title">QR-Code Generator</div>
  <div class="hero-sub">Create and download QR codes for free</div>
</div>

<div class="wrap">

  <div class="ad-slot"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8287576653347400" data-ad-slot="2715725452" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div>

  <div class="grid2">
    <!-- Input -->
    <div class="card card-blue">
      <div class="card-title"><i class="ti ti-qrcode"></i> Inhalt</div>

      <!-- Type-Auswahl -->
      <div style="display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;">
        <button onclick="setTypee('url')"   id="tab-url"   class="copy-btn active-tab" style="margin-top:0;"><i class="ti ti-link"></i> URL</button>
        <button onclick="setTypee('text')"  id="tab-text"  class="copy-btn" style="margin-top:0;"><i class="ti ti-text-size"></i> Text</button>
        <button onclick="setTypee('email')" id="tab-email" class="copy-btn" style="margin-top:0;"><i class="ti ti-mail"></i> E-Mail</button>
        <button onclick="setTypee('tel')"   id="tab-tel"   class="copy-btn" style="margin-top:0;"><i class="ti ti-phone"></i> Telefon</button>
        <button onclick="setTypee('wifi')"  id="tab-wifi"  class="copy-btn" style="margin-top:0;"><i class="ti ti-wifi"></i> WLAN</button>
      </div>

      <!-- URL -->
      <div id="input-url">
        <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">URL</label>
        <input class="input-text" type="url" id="val-url" placeholder="https://example.com" oninput="generate()" style="width:100%;">
      </div>

      <!-- Text -->
      <div id="input-text" style="display:none;">
        <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Text</label>
        <textarea class="input-text" id="val-text" placeholder="Beliebiger Text..." oninput="generate()" style="width:100%; min-height:80px; resize:vertical;"></textarea>
      </div>

      <!-- E-Mail -->
      <div id="input-email" style="display:none;">
        <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">E-Mail-Adresse</label>
        <input class="input-text" type="email" id="val-email" placeholder="name@example.com" oninput="generate()" style="width:100%; margin-bottom:8px;">
        <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Betreff (optional)</label>
        <input class="input-text" type="text" id="val-email-subject" placeholder="Betreff..." oninput="generate()" style="width:100%;">
      </div>

      <!-- Telefon -->
      <div id="input-tel" style="display:none;">
        <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Telefonnummer</label>
        <input class="input-text" type="tel" id="val-tel" placeholder="+49 123 456789" oninput="generate()" style="width:100%;">
      </div>

      <!-- WLAN -->
      <div id="input-wifi" style="display:none;">
        <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">WLAN-Name (SSID)</label>
        <input class="input-text" type="text" id="val-wifi-ssid" placeholder="MeinNetwork" oninput="generate()" style="width:100%; margin-bottom:8px;">
        <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Passwort</label>
        <input class="input-text" type="text" id="val-wifi-pass" placeholder="Passwort" oninput="generate()" style="width:100%; margin-bottom:8px;">
        <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Encryption</label>
        <select class="input-select" id="val-wifi-enc" onchange="generate()" style="width:100%;">
          <option value="WPA">WPA/WPA2</option>
          <option value="WEP">WEP</option>
          <option value="nopass">Kein Passwort</option>
        </select>
      </div>

      <!-- Optionen -->
      <div style="margin-top:20px; padding-top:16px; border-top:1px solid var(--border2);">
        <div class="card-title" style="margin-bottom:12px;"><i class="ti ti-adjustments"></i> Optionen</div>

        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
          <div>
            <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Size</label>
            <select class="input-select" id="opt-size" onchange="generate()" style="width:100%;">
              <option value="128">Klein (128px)</option>
              <option value="200" selected>Mittel (200px)</option>
              <option value="300">Large (300px)</option>
              <option value="400">Extra large (400px)</option>
            </select>
          </div>
          <div>
            <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Errorkorrektur</label>
            <select class="input-select" id="opt-ecc" onchange="generate()" style="width:100%;">
              <option value="L">L – 7%</option>
              <option value="M" selected>M – 15%</option>
              <option value="Q">Q – 25%</option>
              <option value="H">H – 30%</option>
            </select>
          </div>
          <div>
            <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Vordergrundfarbe</label>
            <div style="display:flex; gap:8px; align-items:center;">
              <input type="color" id="opt-fg" value="#000000" onchange="generate()" style="width:40px; height:34px; border:none; background:none; cursor:pointer;">
              <input class="input-text" type="text" id="opt-fg-text" value="#000000" oninput="syncColor('fg')" style="flex:1; font-family:var(--font-mono); font-size:12px;">
            </div>
          </div>
          <div>
            <label style="font-size:11px; color:var(--text4); letter-spacing:0.8px; text-transform:uppercase; display:block; margin-bottom:6px;">Hintergrundfarbe</label>
            <div style="display:flex; gap:8px; align-items:center;">
              <input type="color" id="opt-bg" value="#ffffff" onchange="generate()" style="width:40px; height:34px; border:none; background:none; cursor:pointer;">
              <input class="input-text" type="text" id="opt-bg-text" value="#ffffff" oninput="syncColor('bg')" style="flex:1; font-family:var(--font-mono); font-size:12px;">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- QR-Code Anzeige -->
    <div class="card" style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;">
      <div id="qr-placeholder" style="text-align:center; color:var(--text4);">
        <i class="ti ti-qrcode" style="font-size:80px; display:block; margin-bottom:12px; opacity:0.2;"></i>
        <p style="font-size:13px;">QR-Code erscheint hier</p>
      </div>
      <div id="qr-output" style="display:none; flex-direction:column; align-items:center; gap:16px;">
        <div id="qr-container" style="padding:16px; background:#fff; border-radius:10px; display:inline-block;"></div>
        <div style="display:flex; gap:8px;">
          <button onclick="downloadQR('png')" class="btn btn-primary" style="font-size:13px;">
            <i class="ti ti-download"></i> PNG herunterladen
          </button>
          <button onclick="downloadQR('svg')" class="btn btn-ghost" style="font-size:13px;">
            <i class="ti ti-file-vector"></i> SVG
          </button>
        </div>
        <div id="qr-content-preview" style="font-size:11px; color:var(--text4); text-align:center; max-width:250px; word-break:break-all;"></div>
      </div>
    </div>
  </div>

  <!-- Beispiele -->
  <div class="card">
    <div class="card-title"><i class="ti ti-bookmark"></i> Beispiele laden</div>
    <div style="display:flex; gap:8px; flex-wrap:wrap;">
      <button onclick="loadExample('url', 'https://ipcheck.tools')" class="copy-btn" style="margin-top:0;">ipcheck.tools</button>
      <button onclick="loadExample('url', 'https://google.de')" class="copy-btn" style="margin-top:0;">google.de</button>
      <button onclick="loadExample('text', 'Hallo Welt! Dies ist ein QR-Code.')" class="copy-btn" style="margin-top:0;">Text</button>
      <button onclick="loadExample('email', 'info@example.com')" class="copy-btn" style="margin-top:0;">E-Mail</button>
      <button onclick="loadExample('tel', '+49123456789')" class="copy-btn" style="margin-top:0;">Telefon</button>
    </div>
  </div>

  <div class="ad-slot"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8287576653347400" data-ad-slot="2715725452" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div>

  <div class="tools-row">
    <a href="/en/"               class="tool-btn"><i class="ti ti-home"></i><span>My IP</span></a>
    <a href="/en/qr-generator.php" class="tool-btn current"><i class="ti ti-qrcode"></i><span>QR-Code</span></a>
    <a href="/en/base64.php"     class="tool-btn"><i class="ti ti-code"></i><span>Base64</span></a>
    <a href="/en/url-encoder.php" class="tool-btn"><i class="ti ti-link"></i><span>URL Encoder</span></a>
    <a href="/en/passwort.php"   class="tool-btn"><i class="ti ti-lock-password"></i><span>Password</span></a>
  </div>

  <div class="seo-box">
    <h2>Create QR codes for free</h2>
    <p>With this QR code generator you can create free QR codes for URLs, text, email addresses, phone numbers and WiFi credentials. The QR code is generated directly in your browser – no data is sent to any server. You can download the QR code as PNG or SVG and use it immediately.</p>
  </div>

<!-- QR-Code Bibliothek -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<style>
.active-tab { background: #1a3a6a !important; border-color: #2d5aa0 !important; color: #93c5fd !important; }
</style>

<script>
let currentTypee = 'url';
let qrInstance  = null;

function setTypee(type) {
  currentTypee = type;
  ['url','text','email','tel','wifi'].forEach(t => {
    document.getElementById('input-' + t).style.display = t === type ? 'block' : 'none';
    document.getElementById('tab-' + t).className = 'copy-btn' + (t === type ? ' active-tab' : '');
    document.getElementById('tab-' + t).style.marginTop = '0';
  });
  generate();
}

function getValue() {
  switch(currentTypee) {
    case 'url':   return document.getElementById('val-url').value.trim();
    case 'text':  return document.getElementById('val-text').value.trim();
    case 'email': {
      const email = document.getElementById('val-email').value.trim();
      const subj  = document.getElementById('val-email-subject').value.trim();
      if (!email) return '';
      return 'mailto:' + email + (subj ? '?subject=' + encodeURIComponent(subj) : '');
    }
    case 'tel': {
      const tel = document.getElementById('val-tel').value.trim().replace(/\s/g, '');
      return tel ? 'tel:' + tel : '';
    }
    case 'wifi': {
      const ssid = document.getElementById('val-wifi-ssid').value.trim();
      const pass = document.getElementById('val-wifi-pass').value;
      const enc  = document.getElementById('val-wifi-enc').value;
      if (!ssid) return '';
      return `WIFI:T:${enc};S:${ssid};P:${pass};;`;
    }
  }
  return '';
}

function generate() {
  const val  = getValue();
  const size = parseInt(document.getElementById('opt-size').value);
  const ecc  = document.getElementById('opt-ecc').value;
  const fg   = document.getElementById('opt-fg').value;
  const bg   = document.getElementById('opt-bg').value;

  if (!val) {
    document.getElementById('qr-placeholder').style.display = 'block';
    document.getElementById('qr-output').style.display = 'none';
    return;
  }

  document.getElementById('qr-placeholder').style.display = 'none';
  document.getElementById('qr-output').style.display = 'flex';

  const container = document.getElementById('qr-container');
  container.innerHTML = '';

  try {
    qrInstance = new QRCode(container, {
      text:           val,
      width:          size,
      height:         size,
      colorDark:      fg,
      colorLight:     bg,
      correctLevel:   QRCode.CorrectLevel[ecc]
    });
    document.getElementById('qr-content-preview').textContent = val.length > 60 ? val.substring(0, 60) + '…' : val;
  } catch(e) {
    container.innerHTML = '<p style="color:var(--red); font-size:12px;">Error: Content too long or invalid.</p>';
  }
}

function downloadQR(format) {
  const val = getValue();
  if (!val) return;

  if (format === 'png') {
    const canvas = document.querySelector('#qr-container canvas');
    if (!canvas) return;
    const link = document.createElement('a');
    link.download = 'qrcode.png';
    link.href = canvas.toDataURL('image/png');
    link.click();
  } else if (format === 'svg') {
    const size = parseInt(document.getElementById('opt-size').value);
    const fg   = document.getElementById('opt-fg').value;
    const bg   = document.getElementById('opt-bg').value;
    // SVG via API
    const url = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(val)}&color=${fg.replace('#','')}&bgcolor=${bg.replace('#','')}&format=svg`;
    const link = document.createElement('a');
    link.download = 'qrcode.svg';
    link.href = url;
    link.target = '_blank';
    link.click();
  }
}

function syncColor(which) {
  const text  = document.getElementById('opt-' + which + '-text').value;
  const color = document.getElementById('opt-' + which);
  if (/^#[0-9A-Fa-f]{6}$/.test(text)) {
    color.value = text;
    generate();
  }
}

function loadExample(type, value) {
  setTypee(type);
  if (type === 'url')   document.getElementById('val-url').value   = value;
  if (type === 'text')  document.getElementById('val-text').value  = value;
  if (type === 'email') document.getElementById('val-email').value = value;
  if (type === 'tel')   document.getElementById('val-tel').value   = value;
  generate();
}

// Farbfelder synchronisieren
document.getElementById('opt-fg').addEventListener('input', function() {
  document.getElementById('opt-fg-text').value = this.value;
  generate();
});
document.getElementById('opt-bg').addEventListener('input', function() {
  document.getElementById('opt-bg-text').value = this.value;
  generate();
});
</script>

<?php require_once __DIR__ . '/footer.php'; ?>
