@extends('layouts.app')
@section('title', 'Zahlensystem Konverter – Binär Dezimal Hex Oktal | kotsch.tech')
@section('meta_description', 'Zahlensystem Konverter online: Dezimal, Binär, Oktal, Hexadezimal und benutzerdefinierte Basis gleichzeitig umrechnen. Mit Gruppenformat und Validierung.')
@section('meta_extra')
<meta name="keywords" content="Zahlensystem Konverter, Binär Dezimal, Hexadezimal, Oktal, Zahlenbasis, Base Converter, Binär rechnen">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.zs-card { border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; background:var(--bg); }
.zs-card.source { border-color:var(--accent); background:var(--accent-soft); }
.zs-badge { display:inline-flex; padding:2px 8px; border-radius:999px; background:var(--accent-soft); font-size:0.7rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.zs-val { font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:700; color:var(--ink); word-break:break-all; line-height:1.5; margin-bottom:4px; }
.zs-sub { font-size:0.72rem; color:var(--muted); font-weight:600; }
.bit-row { display:flex; flex-wrap:wrap; gap:3px; margin-top:8px; font-family:'JetBrains Mono',monospace; }
.bit-cell { width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:3px; font-size:0.78rem; font-weight:900; }
.bit-cell.one { background:#dbeafe; color:#1e40af; }
.bit-cell.zero { background:var(--line); color:var(--muted); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-hashtag"></i> Konverter</span>
        <h1 class="tool-h1">Zahlen<span>systeme.</span></h1>
        <p class="tool-sub">Dezimal, Binär, Oktal, Hex und beliebige Basis – gleichzeitig umrechnen mit Bit-Visualisierung.</p>
    </div>

    <div class="t-panel">
        <div class="t-field">
            <label class="t-label">Zahl eingeben</label>
            <input type="text" class="t-input" id="num-input" placeholder="Zahl eingeben…" oninput="onInput()" autocomplete="off" spellcheck="false" style="font-family:'JetBrains Mono',monospace;font-size:1.4rem;font-weight:700;letter-spacing:1px">
            <div id="error-msg" style="color:#ef4444;font-size:0.82rem;font-weight:700;margin-top:4px;display:none"></div>
        </div>

        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:10px">
            <button class="t-btn ghost sm active" id="pill-10" onclick="setBase(10,this)">Dezimal (10)</button>
            <button class="t-btn ghost sm" id="pill-2" onclick="setBase(2,this)">Binär (2)</button>
            <button class="t-btn ghost sm" id="pill-8" onclick="setBase(8,this)">Oktal (8)</button>
            <button class="t-btn ghost sm" id="pill-16" onclick="setBase(16,this)">Hexadezimal (16)</button>
            <button class="t-btn ghost sm" id="pill-custom" onclick="setBase('custom',this)">Eigene Basis</button>
        </div>

        <div id="custom-base-wrap" style="display:none;margin-top:10px">
            <div class="t-field">
                <label class="t-label">Basis (2–36)</label>
                <input type="number" class="t-input" id="custom-base-val" min="2" max="36" value="12" oninput="onInput()" style="max-width:120px">
            </div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-exchange-alt"></i> Ergebnisse</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px">
            <div class="zs-card source" id="card-10">
                <div style="display:flex;justify-content:space-between;align-items:start">
                    <span class="zs-badge">Dezimal</span>
                    <button class="t-btn ghost sm" style="padding:2px 8px;font-size:0.72rem" onclick="copyVal('dec')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="zs-val" id="val-dec">–</div>
                <div class="zs-sub">Basis 10</div>
            </div>
            <div class="zs-card" id="card-2">
                <div style="display:flex;justify-content:space-between;align-items:start">
                    <span class="zs-badge">Binär</span>
                    <button class="t-btn ghost sm" style="padding:2px 8px;font-size:0.72rem" onclick="copyVal('bin')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="zs-val" id="val-bin">–</div>
                <div class="zs-sub">Basis 2</div>
            </div>
            <div class="zs-card" id="card-8">
                <div style="display:flex;justify-content:space-between;align-items:start">
                    <span class="zs-badge">Oktal</span>
                    <button class="t-btn ghost sm" style="padding:2px 8px;font-size:0.72rem" onclick="copyVal('oct')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="zs-val" id="val-oct">–</div>
                <div class="zs-sub">Basis 8</div>
            </div>
            <div class="zs-card" id="card-16">
                <div style="display:flex;justify-content:space-between;align-items:start">
                    <span class="zs-badge">Hexadezimal</span>
                    <button class="t-btn ghost sm" style="padding:2px 8px;font-size:0.72rem" onclick="copyVal('hex')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="zs-val" id="val-hex">–</div>
                <div class="zs-sub" id="sub-hex">Basis 16</div>
            </div>
            <div class="zs-card" id="card-custom" style="display:none">
                <div style="display:flex;justify-content:space-between;align-items:start">
                    <span class="zs-badge" id="custom-badge">Basis ?</span>
                    <button class="t-btn ghost sm" style="padding:2px 8px;font-size:0.72rem" onclick="copyVal('custom')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="zs-val" id="val-custom">–</div>
                <div class="zs-sub" id="sub-custom">Eigene Basis</div>
            </div>
        </div>

        <div id="bit-vis" style="margin-top:16px;display:none">
            <div style="font-size:0.78rem;font-weight:700;color:var(--muted);margin-bottom:8px">Bit-Visualisierung (8-Bit-Gruppen)</div>
            <div class="bit-row" id="bit-row"></div>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-lightbulb"></i> Schnellreferenz</div>
        <div style="overflow-x:auto">
            <table style="width:100%;border-collapse:collapse;font-size:0.82rem;font-family:'JetBrains Mono',monospace">
                <thead><tr style="border-bottom:2px solid var(--line)"><th style="padding:6px 10px;text-align:left;color:var(--muted);font-size:0.72rem;text-transform:uppercase">Dez</th><th style="padding:6px 10px;text-align:left;color:var(--muted);font-size:0.72rem;text-transform:uppercase">Bin</th><th style="padding:6px 10px;text-align:left;color:var(--muted);font-size:0.72rem;text-transform:uppercase">Okt</th><th style="padding:6px 10px;text-align:left;color:var(--muted);font-size:0.72rem;text-transform:uppercase">Hex</th></tr></thead>
                <tbody id="ref-body"></tbody>
            </table>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let currentBase = 10;
const validChars = { 10:/^-?[0-9]*$/, 2:/^[01]*$/, 8:/^[0-7]*$/, 16:/^[0-9a-fA-F]*$/ };

function setBase(base, btn) {
    currentBase = base;
    document.querySelectorAll('[id^="pill-"]').forEach(b => { b.style.background=''; b.style.borderColor=''; b.style.color=''; });
    btn.style.background='var(--accent)'; btn.style.borderColor='var(--accent)'; btn.style.color='#fff';
    document.getElementById('custom-base-wrap').style.display = base==='custom' ? '' : 'none';
    document.getElementById('card-custom').style.display = base==='custom' ? '' : 'none';
    document.getElementById('num-input').value = '';
    clearResults();
    highlightSource();
}

function highlightSource() {
    ['card-10','card-2','card-8','card-16','card-custom'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.className = 'zs-card';
    });
    if (currentBase === 10) document.getElementById('card-10').className = 'zs-card source';
    else if (currentBase === 2) document.getElementById('card-2').className = 'zs-card source';
    else if (currentBase === 8) document.getElementById('card-8').className = 'zs-card source';
    else if (currentBase === 16) document.getElementById('card-16').className = 'zs-card source';
    else document.getElementById('card-custom').className = 'zs-card source';
}

function clearResults() {
    ['val-dec','val-bin','val-oct','val-hex','val-custom'].forEach(id => document.getElementById(id).textContent='–');
    document.getElementById('bit-vis').style.display='none';
    document.getElementById('error-msg').style.display='none';
}

function onInput() {
    const raw = document.getElementById('num-input').value.trim();
    const err = document.getElementById('error-msg');
    if (!raw) { clearResults(); return; }

    const base = currentBase === 'custom' ? parseInt(document.getElementById('custom-base-val').value)||10 : currentBase;

    if (currentBase !== 'custom') {
        const valid = validChars[currentBase];
        if (valid && !valid.test(raw)) {
            err.textContent = `Ungültige Zeichen für Basis ${currentBase}.`;
            err.style.display='';
            clearResults(); return;
        }
    }
    err.style.display='none';

    let decimal;
    try { decimal = parseInt(raw, base); } catch(e) { clearResults(); return; }
    if (isNaN(decimal)) { clearResults(); return; }

    document.getElementById('val-dec').textContent = decimal.toLocaleString('de-DE');

    const bin = decimal.toString(2);
    const padLen = Math.ceil(bin.length/8)*8;
    const binPadded = bin.padStart(padLen,'0');
    const binFmt = binPadded.match(/.{1,4}/g).join(' ');
    document.getElementById('val-bin').textContent = binFmt;

    document.getElementById('val-oct').textContent = decimal.toString(8);

    const hexUp = decimal.toString(16).toUpperCase();
    document.getElementById('val-hex').textContent = hexUp;
    document.getElementById('sub-hex').textContent = `Basis 16 · Klein: ${decimal.toString(16)} · Groß: ${hexUp}`;

    if (currentBase === 'custom') {
        const customBase = parseInt(document.getElementById('custom-base-val').value)||10;
        document.getElementById('val-custom').textContent = decimal.toString(customBase).toUpperCase();
        document.getElementById('custom-badge').textContent = `Basis ${customBase}`;
        document.getElementById('sub-custom').textContent = `Eigene Basis ${customBase}`;
    }

    if (decimal >= 0 && decimal <= 65535) {
        const bits = binPadded.split('');
        document.getElementById('bit-row').innerHTML = bits.map(b =>
            `<div class="bit-cell ${b==='1'?'one':'zero'}">${b}</div>`
        ).join('');
        document.getElementById('bit-vis').style.display='';
    } else {
        document.getElementById('bit-vis').style.display='none';
    }
}

const valMap = { dec:'val-dec', bin:'val-bin', oct:'val-oct', hex:'val-hex', custom:'val-custom' };
function copyVal(key) {
    const text = document.getElementById(valMap[key]).textContent;
    if (text==='–') return;
    navigator.clipboard.writeText(text.replace(/\s/g,''));
}

function buildRefTable() {
    const refs = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,32,64,128,255,256,512,1024];
    document.getElementById('ref-body').innerHTML = refs.map(n =>
        `<tr style="border-bottom:1px solid var(--line);cursor:pointer" onclick="quickSet(${n})"><td style="padding:5px 10px;font-weight:700">${n}</td><td style="padding:5px 10px;color:#1e40af">${n.toString(2).padStart(4,'0')}</td><td style="padding:5px 10px;color:#15803d">${n.toString(8)}</td><td style="padding:5px 10px;color:#7c3aed">${n.toString(16).toUpperCase()}</td></tr>`
    ).join('');
}

function quickSet(n) {
    if (currentBase === 'custom') { setBase(10, document.getElementById('pill-10')); }
    document.getElementById('num-input').value = n;
    onInput();
}

document.getElementById('pill-10').style.background='var(--accent)';
document.getElementById('pill-10').style.borderColor='var(--accent)';
document.getElementById('pill-10').style.color='#fff';
highlightSource();
buildRefTable();
document.getElementById('num-input').value = '255';
onInput();
</script>

@include('tools._seo_content', ['toolSlug' => 'zahlensystem', 'toolName' => 'Zahlensystem Umrechner'])

@endsection