@extends('layouts.app')
@section('title', 'ASCII Tabelle – Alle ASCII & Unicode Codes | kotsch.tech')
@section('meta_description', 'Vollständige ASCII Tabelle online: Dezimal, Hexadezimal, Binär, HTML-Entity. Suche nach Zeichen, Code oder Kategorie. Unicode-Erweiterung bis U+FFFF.')
@section('meta_extra')
<meta name="keywords" content="ASCII Tabelle, ASCII Code, ASCII Zeichen, Zeichentabelle, Unicode Tabelle, HTML Entity, ASCII to Hex">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.ascii-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.ascii-table th { text-align:left; padding:8px 10px; border-bottom:2px solid var(--line); font-weight:700; color:var(--muted); font-size:0.72rem; text-transform:uppercase; white-space:nowrap; }
.ascii-table td { padding:6px 10px; border-bottom:1px solid var(--line); font-family:'JetBrains Mono',monospace; white-space:nowrap; }
.ascii-table tr:hover { background:var(--accent-soft); cursor:pointer; }
.ascii-table .char-cell { font-size:1.1rem; font-weight:900; color:var(--ink); }
.ascii-table .ctrl-cell { font-size:0.72rem; color:var(--muted); font-weight:700; background:var(--bg); padding:2px 4px; border-radius:3px; }
.char-detail { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.char-detail-item { padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); }
.char-detail-item .dl { font-size:0.72rem; font-weight:700; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.char-detail-item .dv { font-family:'JetBrains Mono',monospace; font-weight:900; color:var(--ink); font-size:0.9rem; word-break:break-all; }
.cat-btn { padding:6px 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; }
.cat-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-keyboard"></i> Developer</span>
        <h1 class="tool-h1">ASCII<span> Tabelle.</span></h1>
        <p class="tool-sub">Alle ASCII-Codes mit Dezimal, Hex, Binär und HTML-Entity – plus Zeichensuche und Unicode.</p>
    </div>

    <div class="t-panel">
        <div class="t-grid-2" style="gap:12px;margin-bottom:14px">
            <div class="t-field">
                <label class="t-label">Zeichen oder Code eingeben</label>
                <input type="text" class="t-input" id="asc-search" placeholder="A, 65, 0x41, 01000001…" oninput="searchChar()">
            </div>
            <div class="t-field">
                <label class="t-label">In Kategorie suchen</label>
                <input type="text" class="t-input" id="asc-filter" placeholder="Text filtern…" oninput="filterTable()">
            </div>
        </div>

        <div id="asc-detail" style="display:none;margin-bottom:16px;padding:16px;background:var(--bg);border:2px solid var(--accent);border-radius:var(--radius-sm)">
            <div style="display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap">
                <div style="font-size:3rem;font-weight:900;font-family:'JetBrains Mono',monospace;min-width:60px;text-align:center" id="asc-big-char">A</div>
                <div class="char-detail" style="flex:1" id="asc-detail-grid"></div>
            </div>
        </div>

        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px">
            <button class="cat-btn active" onclick="setRange(0,31,this)">Steuerzeichen</button>
            <button class="cat-btn" onclick="setRange(32,47,this)">Leerzeichen+Interpunktion</button>
            <button class="cat-btn" onclick="setRange(48,57,this)">Ziffern 0–9</button>
            <button class="cat-btn" onclick="setRange(65,90,this)">A–Z</button>
            <button class="cat-btn" onclick="setRange(97,122,this)">a–z</button>
            <button class="cat-btn" onclick="setRange(128,255,this)">Erweitert</button>
            <button class="cat-btn" onclick="setRange(0,127,this)">Alle (0–127)</button>
        </div>
    </div>

    <div class="t-panel">
        <div style="overflow-x:auto">
            <table class="ascii-table">
                <thead>
                    <tr>
                        <th>Dez</th><th>Hex</th><th>Bin</th><th>Zeichen</th><th>HTML</th><th>Beschreibung</th>
                    </tr>
                </thead>
                <tbody id="ascii-tbody"></tbody>
            </table>
        </div>
        <div id="ascii-count" style="font-size:0.78rem;color:var(--muted);margin-top:8px;text-align:right"></div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const CTRL = ['NUL','SOH','STX','ETX','EOT','ENQ','ACK','BEL','BS','HT','LF','VT','FF','CR','SO','SI','DLE','DC1','DC2','DC3','DC4','NAK','SYN','ETB','CAN','EM','SUB','ESC','FS','GS','RS','US'];
const CTRL_DESC = ['Null','Start of Heading','Start of Text','End of Text','End of Transmission','Enquiry','Acknowledge','Bell','Backspace','Horizontal Tab','Line Feed','Vertical Tab','Form Feed','Carriage Return','Shift Out','Shift In','Data Link Escape','Device Control 1','Device Control 2','Device Control 3','Device Control 4','Negative Acknowledge','Synchronous Idle','End of Transmission Block','Cancel','End of Medium','Substitute','Escape','File Separator','Group Separator','Record Separator','Unit Separator'];

const SPECIAL_DESC = {32:'Leerzeichen',127:'DEL (Löschen)'};

let currentRange = [0,31];
let filterText = '';

function getDesc(n) {
    if (n < 32) return CTRL_DESC[n];
    if (SPECIAL_DESC[n]) return SPECIAL_DESC[n];
    if (n >= 33 && n <= 126) return 'Druckbares Zeichen';
    if (n >= 128 && n <= 159) return 'Erweitertes Steuerzeichen';
    return 'Erweitertes ASCII';
}

function getChar(n) {
    if (n < 32 || n === 127) return null;
    try { return String.fromCharCode(n); } catch(e) { return null; }
}

function htmlEntity(n) {
    if (n < 32) return '–';
    return `&#${n};`;
}

function renderRow(n) {
    const ch = getChar(n);
    const hex = n.toString(16).toUpperCase().padStart(2,'0');
    const bin = n.toString(2).padStart(8,'0');
    const desc = getDesc(n);
    const charCell = ch
        ? `<td class="char-cell">${ch === '<' ? '&lt;' : ch === '>' ? '&gt;' : ch === '&' ? '&amp;' : ch}</td>`
        : `<td><span class="ctrl-cell">${CTRL[n]||'?'}</span></td>`;
    const entity = n >= 32 ? `&#${n};` : '–';
    const tr = document.createElement('tr');
    tr.innerHTML = `<td style="font-weight:700">${n}</td><td style="color:#7c3aed">0x${hex}</td><td style="font-size:0.72rem;color:var(--muted)">${bin}</td>${charCell}<td style="color:#1e40af">${entity}</td><td style="color:var(--muted);font-family:inherit">${desc}</td>`;
    tr.onclick = () => showDetail(n);
    return tr;
}

function setRange(from, to, btn) {
    currentRange = [from, to];
    document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    filterText = '';
    document.getElementById('asc-filter').value = '';
    buildTable();
}

function buildTable() {
    const tbody = document.getElementById('ascii-tbody');
    tbody.innerHTML = '';
    const [from, to] = currentRange;
    let count = 0;
    for (let i=from; i<=to; i++) {
        if (filterText) {
            const ch = getChar(i)||'';
            const desc = getDesc(i).toLowerCase();
            const q = filterText.toLowerCase();
            if (!ch.includes(q) && !String(i).includes(q) && !i.toString(16).includes(q) && !desc.includes(q)) continue;
        }
        tbody.appendChild(renderRow(i));
        count++;
    }
    document.getElementById('ascii-count').textContent = `${count} Zeichen angezeigt`;
}

function filterTable() {
    filterText = document.getElementById('asc-filter').value;
    buildTable();
}

function showDetail(n) {
    const ch = getChar(n);
    const hex = n.toString(16).toUpperCase().padStart(2,'0');
    const hex4 = n.toString(16).toUpperCase().padStart(4,'0');
    const bin = n.toString(2).padStart(8,'0');
    document.getElementById('asc-big-char').textContent = ch || (CTRL[n]||'?');
    document.getElementById('asc-big-char').style.color = ch ? 'var(--ink)' : 'var(--muted)';
    document.getElementById('asc-detail-grid').innerHTML = [
        ['Dezimal', n],
        ['Hexadezimal', '0x'+hex],
        ['Oktal', '0'+n.toString(8)],
        ['Binär', bin],
        ['HTML Entity', ch ? `&#${n};` : '–'],
        ['HTML Named', ch === '&' ? '&amp;amp;' : ch === '<' ? '&amp;lt;' : ch === '>' ? '&amp;gt;' : ch === '"' ? '&amp;quot;' : '–'],
        ['Unicode', `U+${hex4}`],
        ['Kategorie', getDesc(n)],
    ].map(([l,v]) => `<div class="char-detail-item"><div class="dl">${l}</div><div class="dv">${v}</div></div>`).join('');
    document.getElementById('asc-detail').style.display = '';
}

function searchChar() {
    const q = document.getElementById('asc-search').value.trim();
    if (!q) { document.getElementById('asc-detail').style.display='none'; return; }
    let n;
    if (q.startsWith('0x') || q.startsWith('0X')) n = parseInt(q, 16);
    else if (/^[01]{8}$/.test(q)) n = parseInt(q, 2);
    else if (/^\d+$/.test(q)) n = parseInt(q);
    else n = q.charCodeAt(0);
    if (!isNaN(n) && n >= 0 && n <= 65535) showDetail(n);
}

buildTable();
</script>

@include('tools._seo_content', ['toolSlug' => 'ascii-tabelle', 'toolName' => 'ASCII Tabelle'])

@endsection