@extends('layouts.app')
@section('title', 'Text Decoder – Base64, URL, HTML, Hex & SHA256 | kotsch.tech')
@section('meta_description', 'Text online kodieren und dekodieren: Base64, URL-Encoding, HTML-Entities, Hex und SHA-256. Live im Browser, kein Server nötig.')
@section('meta_extra')
<meta name="keywords" content="Base64 Decoder, URL Encode, HTML Entities, Text Encoder, Decoder online, Hex Encoder, SHA256 Hash">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.mode-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-bottom:18px; }
.mode-btn { padding:10px 14px; border-radius:var(--radius-sm); border:2px solid var(--line); background:var(--card); font:inherit; font-size:0.82rem; font-weight:700; cursor:pointer; color:var(--muted); transition:all 0.15s; text-align:center; }
.mode-btn:hover { border-color:var(--ink); color:var(--ink); }
.mode-btn.active { border-color:var(--accent); background:var(--accent); color:#fff; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-code"></i> Developer</span>
        <h1 class="tool-h1">Text<span> Decoder.</span></h1>
        <p class="tool-sub">Base64, URL, HTML, Hex und SHA-256 – kodieren und dekodieren direkt im Browser.</p>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-cog"></i> Modus wählen</div>
        <div class="mode-grid">
            <button class="mode-btn active" onclick="setMode('base64',this)">Base64</button>
            <button class="mode-btn" onclick="setMode('url',this)">URL Encoding</button>
            <button class="mode-btn" onclick="setMode('html',this)">HTML Entities</button>
            <button class="mode-btn" onclick="setMode('hex',this)">Hex</button>
            <button class="mode-btn" onclick="setMode('sha256',this)">SHA-256 Hash</button>
        </div>

        <div id="sha-note" style="display:none" class="t-info">SHA-256 ist ein einweg-Hash – es gibt kein Dekodieren. Nur Kodieren verfügbar.</div>

        <div class="t-field">
            <label class="t-label">Eingabe</label>
            <div class="t-copy-wrap">
                <textarea class="t-textarea" id="inp" placeholder="Text eingeben…"></textarea>
            </div>
        </div>

        <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px">
            <button class="t-btn accent" onclick="run('encode')"><i class="fas fa-lock"></i> Kodieren</button>
            <button class="t-btn ghost" id="decode-btn" onclick="run('decode')"><i class="fas fa-lock-open"></i> Dekodieren</button>
            <button class="t-btn ghost" onclick="swapIO()"><i class="fas fa-exchange-alt"></i> Tauschen</button>
            <button class="t-btn ghost" onclick="clearIO()"><i class="fas fa-trash"></i> Leeren</button>
        </div>

        <div class="t-field">
            <label class="t-label">Ausgabe</label>
            <div class="t-copy-wrap">
                <textarea class="t-textarea" id="out" readonly style="font-family:'JetBrains Mono','Fira Mono',monospace;font-size:0.85rem"></textarea>
                <button class="t-copy-btn" onclick="copyOut()"><i class="fas fa-copy"></i></button>
            </div>
        </div>

        <div class="t-error" id="err"></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let mode='base64';
function setMode(m,btn){
    mode=m;
    document.querySelectorAll('.mode-btn').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('sha-note').style.display=m==='sha256'?'':'none';
    document.getElementById('decode-btn').style.display=m==='sha256'?'none':'';
    document.getElementById('err').style.display='none';
}

const htmlEnc=t=>t.replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[c]));
const htmlDec=t=>{const d=document.createElement('textarea');d.innerHTML=t;return d.value;};
const toHex=t=>t.split('').map(c=>c.charCodeAt(0).toString(16).padStart(2,'0')).join(' ');
const fromHex=t=>t.replace(/\s+/g,'').match(/.{1,2}/g).map(b=>String.fromCharCode(parseInt(b,16))).join('');

async function sha256(t){
    const buf=await crypto.subtle.digest('SHA-256',new TextEncoder().encode(t));
    return Array.from(new Uint8Array(buf)).map(b=>b.toString(16).padStart(2,'0')).join('');
}

async function run(dir){
    const inp=document.getElementById('inp').value;
    const errEl=document.getElementById('err');
    errEl.style.display='none';
    try{
        let res=inp;
        if(mode==='base64'){
            if(dir==='encode')res=btoa(unescape(encodeURIComponent(inp)));
            else res=decodeURIComponent(escape(atob(inp)));
        } else if(mode==='url'){
            res=dir==='encode'?encodeURIComponent(inp):decodeURIComponent(inp);
        } else if(mode==='html'){
            res=dir==='encode'?htmlEnc(inp):htmlDec(inp);
        } else if(mode==='hex'){
            res=dir==='encode'?toHex(inp):fromHex(inp);
        } else if(mode==='sha256'){
            res=await sha256(inp);
        }
        document.getElementById('out').value=res;
    }catch(e){
        errEl.textContent='Fehler: '+e.message;
        errEl.style.display='block';
    }
}

function swapIO(){
    const inp=document.getElementById('inp'),out=document.getElementById('out');
    inp.value=out.value;out.value='';
}
function clearIO(){
    document.getElementById('inp').value='';
    document.getElementById('out').value='';
    document.getElementById('err').style.display='none';
}
function copyOut(){
    const val=document.getElementById('out').value;
    if(!val)return;
    navigator.clipboard.writeText(val).then(()=>{
        const btn=document.querySelector('.t-copy-btn');
        btn.innerHTML='<i class="fas fa-check"></i>';
        setTimeout(()=>btn.innerHTML='<i class="fas fa-copy"></i>',2000);
    });
}
</script>

@include('tools._seo_content', ['toolSlug' => 'decoder', 'toolName' => 'Text Decoder'])

@endsection