@extends('layouts.app')
@section('title', 'QR-Code Generator – QR Code kostenlos erstellen | kotsch.tech')
@section('meta_description', 'QR-Code Generator kostenlos: QR Code online erstellen für URLs, Text, WLAN und mehr. Sofort im Browser generieren, kein Konto nötig. QR Code herunterladen.')
@section('meta_extra')
<meta name="keywords" content="QR Code Generator, QR Code erstellen, QR Code online, QR Code kostenlos, QR Generator, QR Code für URL, WLAN QR Code, QR Code Download">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.qr-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.qr-preview-wrap {
    aspect-ratio: 1; border-radius: var(--radius-lg);
    background: #fff; border: 2px dashed var(--line);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; margin-bottom: 14px;
}
.qr-preview-wrap canvas, .qr-preview-wrap img { border-radius: 8px; }
.qr-placeholder { color: var(--muted); font-size: 0.9rem; font-weight: 600; text-align: center; padding: 20px; }
.color-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.color-field { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.color-field input[type=color] { width: 36px; height: 36px; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; padding: 2px; }
.size-row { display: flex; gap: 8px; margin-bottom: 14px; }
.size-btn { padding: 7px 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; color: var(--muted); transition: all 0.15s; }
.size-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
@media(max-width:700px){ .qr-layout { grid-template-columns: 1fr; } }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-qrcode"></i> Developer</span>
        <h1 class="tool-h1">QR-Code<br><span>erstellen.</span></h1>
        <p class="tool-sub">URL, Text, WLAN, vCard oder E-Mail – live generiert, anpassbar und direkt downloadbar.</p>
    </div>

    <div class="qr-layout">
        <div class="t-panel">
            <div class="t-tabs">
                <button class="t-tab active" onclick="setMode('url',this)">URL</button>
                <button class="t-tab" onclick="setMode('text',this)">Text</button>
                <button class="t-tab" onclick="setMode('wifi',this)">WLAN</button>
                <button class="t-tab" onclick="setMode('email',this)">E-Mail</button>
                <button class="t-tab" onclick="setMode('vcard',this)">vCard</button>
            </div>

            <div class="t-tab-pane active" id="mode-url">
                <div class="t-field">
                    <label class="t-label">URL / Link</label>
                    <input type="url" class="t-input" id="url-val" placeholder="https://kotsch.tech" value="https://kotsch.tech" oninput="autoGen()">
                </div>
            </div>
            <div class="t-tab-pane" id="mode-text">
                <div class="t-field">
                    <label class="t-label">Text</label>
                    <textarea class="t-input t-textarea" id="text-val" placeholder="Beliebiger Text…" oninput="autoGen()"></textarea>
                </div>
            </div>
            <div class="t-tab-pane" id="mode-wifi">
                <div class="t-field"><label class="t-label">Netzwerkname (SSID)</label><input type="text" class="t-input" id="wifi-ssid" placeholder="Mein WLAN" oninput="autoGen()"></div>
                <div class="t-field"><label class="t-label">Passwort</label><input type="text" class="t-input" id="wifi-pass" placeholder="Passwort" oninput="autoGen()"></div>
                <div class="t-field"><label class="t-label">Verschlüsselung</label>
                    <select class="t-input t-select" id="wifi-enc" onchange="autoGen()">
                        <option value="WPA">WPA/WPA2</option>
                        <option value="WEP">WEP</option>
                        <option value="">Offen (kein Passwort)</option>
                    </select>
                </div>
            </div>
            <div class="t-tab-pane" id="mode-email">
                <div class="t-field"><label class="t-label">E-Mail-Adresse</label><input type="email" class="t-input" id="email-to" placeholder="name@beispiel.de" oninput="autoGen()"></div>
                <div class="t-field"><label class="t-label">Betreff (optional)</label><input type="text" class="t-input" id="email-sub" placeholder="Betreff" oninput="autoGen()"></div>
                <div class="t-field"><label class="t-label">Nachricht (optional)</label><textarea class="t-input t-textarea" id="email-body" placeholder="Nachrichtentext…" style="min-height:80px" oninput="autoGen()"></textarea></div>
            </div>
            <div class="t-tab-pane" id="mode-vcard">
                <div class="t-grid-2">
                    <div class="t-field"><label class="t-label">Vorname</label><input type="text" class="t-input" id="vc-first" placeholder="Max" oninput="autoGen()"></div>
                    <div class="t-field"><label class="t-label">Nachname</label><input type="text" class="t-input" id="vc-last" placeholder="Mustermann" oninput="autoGen()"></div>
                </div>
                <div class="t-field"><label class="t-label">Telefon</label><input type="tel" class="t-input" id="vc-phone" placeholder="+49 123 456789" oninput="autoGen()"></div>
                <div class="t-field"><label class="t-label">E-Mail</label><input type="email" class="t-input" id="vc-email" placeholder="max@beispiel.de" oninput="autoGen()"></div>
                <div class="t-field"><label class="t-label">Webseite</label><input type="url" class="t-input" id="vc-url" placeholder="https://…" oninput="autoGen()"></div>
            </div>

            <div style="display:flex;justify-content:space-between;align-items:center;margin:14px 0 4px;font-size:0.82rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:1px">Farben</div>
            <div class="color-row">
                <div class="color-field">
                    <input type="color" id="qr-fg" value="#0f172a" onchange="autoGen()">
                    <span>Vordergrund</span>
                </div>
                <div class="color-field">
                    <input type="color" id="qr-bg" value="#ffffff" onchange="autoGen()">
                    <span>Hintergrund</span>
                </div>
            </div>
            <div style="font-size:0.82rem;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Größe</div>
            <div class="size-row">
                <button class="size-btn" onclick="setSize(150,this)">S</button>
                <button class="size-btn active" onclick="setSize(240,this)">M</button>
                <button class="size-btn" onclick="setSize(360,this)">L</button>
                <button class="size-btn" onclick="setSize(512,this)">XL</button>
            </div>
            <div class="t-error" id="qr-error">Bitte Inhalt eingeben.</div>
        </div>

        <div>
            <div class="t-panel" style="text-align:center">
                <div class="qr-preview-wrap" id="qr-output">
                    <div class="qr-placeholder"><i class="fas fa-qrcode" style="font-size:2rem;display:block;margin-bottom:8px;opacity:0.3"></i>QR-Code erscheint hier</div>
                </div>
                <label class="t-toggle-row" style="justify-content:center;gap:10px;margin-bottom:10px">
                    <input type="checkbox" class="t-check" id="qr-logo" checked onchange="autoGen()">
                    <span style="font-size:0.85rem;font-weight:700;color:var(--muted)">Logo in der Mitte</span>
                </label>
                <button class="t-btn full" onclick="downloadQR()">
                    <i class="fas fa-download"></i> PNG herunterladen
                </button>
            </div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

@include('tools._qr_logo')
<script>
let currentMode = 'url', currentSize = 240, lastQrCanvas = null;
function setMode(m, btn) {
    currentMode = m;
    document.querySelectorAll('.t-tab').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.t-tab-pane').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('mode-' + m).classList.add('active');
    autoGen();
}
function setSize(s, btn) {
    currentSize = s;
    document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    autoGen();
}
function getContent() {
    if (currentMode === 'url')   return document.getElementById('url-val').value;
    if (currentMode === 'text')  return document.getElementById('text-val').value;
    if (currentMode === 'wifi')  {
        const s = document.getElementById('wifi-ssid').value;
        const p = document.getElementById('wifi-pass').value;
        const e = document.getElementById('wifi-enc').value;
        return `WIFI:T:${e};S:${s};P:${p};;`;
    }
    if (currentMode === 'email') {
        const to   = document.getElementById('email-to').value;
        const sub  = document.getElementById('email-sub').value;
        const body = document.getElementById('email-body').value;
        let out = `mailto:${to}`;
        const params = [];
        if (sub)  params.push('subject=' + encodeURIComponent(sub));
        if (body) params.push('body='    + encodeURIComponent(body));
        if (params.length) out += '?' + params.join('&');
        return out;
    }
    if (currentMode === 'vcard') {
        const f = document.getElementById('vc-first').value;
        const l = document.getElementById('vc-last').value;
        return `BEGIN:VCARD\nVERSION:3.0\nN:${l};${f}\nFN:${f} ${l}\nTEL:${document.getElementById('vc-phone').value}\nEMAIL:${document.getElementById('vc-email').value}\nURL:${document.getElementById('vc-url').value}\nEND:VCARD`;
    }
    return '';
}
let genTimer = null;
function autoGen() { clearTimeout(genTimer); genTimer = setTimeout(generateQR, 250); }
function generateQR() {
    const content = getContent();
    const err     = document.getElementById('qr-error');
    if (!content.trim()) { err.style.display = 'block'; return; }
    err.style.display = 'none';
    const out  = document.getElementById('qr-output');
    const fg   = document.getElementById('qr-fg').value;
    const bg   = document.getElementById('qr-bg').value;
    const logo = document.getElementById('qr-logo').checked;
    KTQr.render({ text: content, size: currentSize, fg: fg, bg: bg, logo: logo }).then(function (canvas) {
        lastQrCanvas = canvas;
        out.innerHTML = '';
        out.appendChild(canvas);
    });
}
function downloadQR() {
    if (!lastQrCanvas) { alert('Bitte zuerst einen QR-Code generieren.'); return; }
    KTQr.download(lastQrCanvas, 'qr-code.png');
}
generateQR();
</script>

@include('tools._seo_content', ['toolSlug' => 'qr-generator', 'toolName' => 'QR-Code Generator'])

@endsection