@extends('layouts.app')
@section('title', 'URL Encoder & Decoder – URLs kodieren und dekodieren | kotsch.tech')
@section('meta_description', 'URL Encoder und Decoder online: encodeURIComponent, encodeURI, Base64 und URL-Parser. Query-String aufschlüsseln – kostenlos und lokal im Browser.')
@section('meta_extra')
<meta name="keywords" content="URL Encoder, URL Decoder, encodeURIComponent, URL kodieren, URL dekodieren, Query String, Base64, URL Parser">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.mode-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.mode-tab { padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.mode-tab.active { border-color:var(--accent); background:var(--accent); color:#fff; }
.enc-type-chip { padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:0.78rem; font-weight:700; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.enc-type-chip.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.url-part { border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; overflow:hidden; }
.url-part-head { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--bg); font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); }
.url-part-val { padding:8px 12px; font-family:'JetBrains Mono',monospace; font-size:0.82rem; word-break:break-all; color:var(--ink); }
.qs-row { display:flex; gap:8px; align-items:center; padding:6px 0; border-bottom:1px solid var(--line); font-size:0.82rem; }
.qs-row:last-child { border-bottom:none; }
.qs-key { font-weight:700; color:#1e40af; font-family:'JetBrains Mono',monospace; flex-shrink:0; min-width:120px; word-break:break-all; }
.qs-val { color:var(--ink); font-family:'JetBrains Mono',monospace; word-break:break-all; flex:1; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-link"></i> Developer</span>
        <h1 class="tool-h1">URL<span> Encoder.</span></h1>
        <p class="tool-sub">Kodieren, Dekodieren, Base64 und URL-Analyse – alles lokal im Browser.</p>
    </div>

    <div class="t-panel">
        <div class="mode-tabs">
            <button class="mode-tab active" onclick="setMode('encode',this)"><i class="fas fa-lock"></i> Kodieren</button>
            <button class="mode-tab" onclick="setMode('decode',this)"><i class="fas fa-unlock"></i> Dekodieren</button>
            <button class="mode-tab" onclick="setMode('base64',this)"><i class="fas fa-code"></i> Base64</button>
            <button class="mode-tab" onclick="setMode('parse',this)"><i class="fas fa-sitemap"></i> URL parsen</button>
        </div>

        <!-- Encode mode -->
        <div id="mode-encode">
            <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px" id="enc-types">
                <button class="enc-type-chip active" onclick="setEncType('component',this)">encodeURIComponent</button>
                <button class="enc-type-chip" onclick="setEncType('uri',this)">encodeURI</button>
                <button class="enc-type-chip" onclick="setEncType('rfc3986',this)">RFC 3986</button>
            </div>
            <div class="t-field">
                <label class="t-label">Eingabe</label>
                <textarea class="t-textarea" id="enc-inp" placeholder="Text oder URL zum Kodieren…" oninput="doEncode()" style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;min-height:80px"></textarea>
            </div>
            <div class="t-field">
                <label class="t-label">Kodiert</label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="enc-out" readonly style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;min-height:80px"></textarea>
                    <button class="t-copy-btn" onclick="copyField('enc-out')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
            <div style="font-size:0.78rem;color:var(--muted)" id="enc-stats"></div>
        </div>

        <!-- Decode mode -->
        <div id="mode-decode" style="display:none">
            <div class="t-field">
                <label class="t-label">Kodierter Text / URL</label>
                <textarea class="t-textarea" id="dec-inp" placeholder="Kodierten Text einfügen…" oninput="doDecode()" style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;min-height:80px"></textarea>
            </div>
            <div class="t-field">
                <label class="t-label">Dekodiert</label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="dec-out" readonly style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;min-height:80px"></textarea>
                    <button class="t-copy-btn" onclick="copyField('dec-out')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
            <div class="t-error" id="dec-err" style="display:none;margin-top:8px"></div>
        </div>

        <!-- Base64 mode -->
        <div id="mode-base64" style="display:none">
            <div class="t-field">
                <label class="t-label">Eingabe (Text oder Base64)</label>
                <textarea class="t-textarea" id="b64-inp" placeholder="Text eingeben…" style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;min-height:80px"></textarea>
            </div>
            <div style="display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap">
                <button class="t-btn ghost" onclick="doB64Enc()"><i class="fas fa-arrow-right"></i> Kodieren</button>
                <button class="t-btn ghost" onclick="doB64Dec()"><i class="fas fa-arrow-left"></i> Dekodieren</button>
                <button class="t-btn ghost" onclick="doB64EncUrl()"><i class="fas fa-link"></i> URL-safe kodieren</button>
            </div>
            <div class="t-field">
                <label class="t-label">Ergebnis</label>
                <div class="t-copy-wrap">
                    <textarea class="t-textarea" id="b64-out" readonly style="font-family:'JetBrains Mono',monospace;font-size:0.85rem;min-height:80px"></textarea>
                    <button class="t-copy-btn" onclick="copyField('b64-out')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
            <div class="t-error" id="b64-err" style="display:none;margin-top:8px"></div>
        </div>

        <!-- Parse mode -->
        <div id="mode-parse" style="display:none">
            <div class="t-field">
                <label class="t-label">URL eingeben</label>
                <input type="text" class="t-input" id="parse-inp" placeholder="https://example.com/path?foo=bar&baz=qux#section" oninput="parseURL()" style="font-family:'JetBrains Mono',monospace;font-size:0.85rem">
            </div>
            <div id="parse-out" style="display:none;margin-top:12px"></div>
        </div>
    </div>

    <div class="t-panel" id="ref-panel">
        <div class="t-panel-title"><i class="fas fa-book"></i> Häufige Zeichen</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px">
            <div style="font-size:0.78rem;font-family:'JetBrains Mono',monospace;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)"><span style="color:#1e40af">Leerzeichen</span> → %20</div>
            <div style="font-size:0.78rem;font-family:'JetBrains Mono',monospace;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)"><span style="color:#1e40af">&</span> → %26</div>
            <div style="font-size:0.78rem;font-family:'JetBrains Mono',monospace;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)"><span style="color:#1e40af">=</span> → %3D</div>
            <div style="font-size:0.78rem;font-family:'JetBrains Mono',monospace;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)"><span style="color:#1e40af">+</span> → %2B</div>
            <div style="font-size:0.78rem;font-family:'JetBrains Mono',monospace;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)"><span style="color:#1e40af">#</span> → %23</div>
            <div style="font-size:0.78rem;font-family:'JetBrains Mono',monospace;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)"><span style="color:#1e40af">?</span> → %3F</div>
            <div style="font-size:0.78rem;font-family:'JetBrains Mono',monospace;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)"><span style="color:#1e40af">/</span> → %2F</div>
            <div style="font-size:0.78rem;font-family:'JetBrains Mono',monospace;padding:6px 10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)"><span style="color:#1e40af">@</span> → %40</div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let encType = 'component';
let currentMode = 'encode';

function setMode(mode, btn) {
    currentMode = mode;
    document.querySelectorAll('.mode-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    ['encode','decode','base64','parse'].forEach(m => {
        document.getElementById('mode-'+m).style.display = m===mode ? '' : 'none';
    });
    document.getElementById('ref-panel').style.display = mode==='parse' ? 'none' : '';
}

function setEncType(t, btn) {
    encType = t;
    document.querySelectorAll('.enc-type-chip').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    doEncode();
}

function doEncode() {
    const inp = document.getElementById('enc-inp').value;
    let out;
    try {
        if (encType === 'component') out = encodeURIComponent(inp);
        else if (encType === 'uri')  out = encodeURI(inp);
        else out = encodeURIComponent(inp).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
    } catch(e) { out = 'Fehler: ' + e.message; }
    document.getElementById('enc-out').value = out;
    const diff = out.length - inp.length;
    document.getElementById('enc-stats').textContent =
        inp.length + ' → ' + out.length + ' Zeichen (' + (diff>0?'+':'') + diff + ')';
}

function doDecode() {
    const inp = document.getElementById('dec-inp').value;
    const err = document.getElementById('dec-err');
    err.style.display = 'none';
    try {
        document.getElementById('dec-out').value = decodeURIComponent(inp);
    } catch(e) {
        try { document.getElementById('dec-out').value = unescape(inp); }
        catch(e2) { err.textContent = 'Ungültiges Encoding: ' + e.message; err.style.display='block'; }
    }
}

function doB64Enc() {
    const inp = document.getElementById('b64-inp').value;
    const err = document.getElementById('b64-err');
    err.style.display = 'none';
    try { document.getElementById('b64-out').value = btoa(unescape(encodeURIComponent(inp))); }
    catch(e) { err.textContent = 'Fehler: ' + e.message; err.style.display='block'; }
}

function doB64Dec() {
    const inp = document.getElementById('b64-inp').value.trim();
    const err = document.getElementById('b64-err');
    err.style.display = 'none';
    try { document.getElementById('b64-out').value = decodeURIComponent(escape(atob(inp))); }
    catch(e) { err.textContent = 'Ungültiges Base64: ' + e.message; err.style.display='block'; }
}

function doB64EncUrl() {
    const inp = document.getElementById('b64-inp').value;
    const err = document.getElementById('b64-err');
    err.style.display = 'none';
    try {
        const b64 = btoa(unescape(encodeURIComponent(inp)));
        document.getElementById('b64-out').value = b64.replace(/\+/g,'-').replace(/\//g,'_').replace(/=/g,'');
    } catch(e) { err.textContent = 'Fehler: ' + e.message; err.style.display='block'; }
}

function parseURL() {
    const raw = document.getElementById('parse-inp').value.trim();
    const out = document.getElementById('parse-out');
    if (!raw) { out.style.display='none'; return; }
    out.style.display = '';
    try {
        const u = new URL(raw.includes('://') ? raw : 'https://' + raw);
        let html = '';

        const parts = [
            { k:'Protokoll', v: u.protocol },
            { k:'Host',      v: u.hostname },
            { k:'Port',      v: u.port || '(Standard)' },
            { k:'Pfad',      v: u.pathname },
            { k:'Query',     v: u.search || '(leer)' },
            { k:'Fragment',  v: u.hash || '(leer)' },
        ];
        html += parts.map(p => `<div class="url-part"><div class="url-part-head">${p.k}</div><div class="url-part-val">${escH(p.v)}</div></div>`).join('');

        if (u.search) {
            const qs = [...u.searchParams.entries()];
            html += `<div class="url-part"><div class="url-part-head">Query-Parameter (${qs.length})</div><div class="url-part-val">` +
                qs.map(([k,v]) => `<div class="qs-row"><div class="qs-key">${escH(k)}</div><div class="qs-val">${escH(v) || '<em style="color:var(--muted)">(leer)</em>'}</div></div>`).join('') +
                `</div></div>`;
        }

        out.innerHTML = html;
    } catch(e) {
        out.innerHTML = `<div class="t-error" style="display:block">Ungültige URL: ${escH(e.message)}</div>`;
    }
}

function copyField(id) {
    const val = document.getElementById(id).value;
    if (!val) return;
    navigator.clipboard.writeText(val);
}

function escH(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
</script>

@include('tools._seo_content', ['toolSlug' => 'url-encoder', 'toolName' => 'URL Encoder & Decoder'])

@endsection