@extends('layouts.app')
@section('title', 'Zeichen-Info – Unicode, HTML-Entity & Zeichendetails | kotsch.tech')
@section('meta_description', 'Zeichen-Info online: Unicode-Codepoint, HTML-Entity, UTF-8-Bytes, CSS-Escape, Kategorie und mehr zu jedem Zeichen. Emoji, Sonderzeichen, Mathe.')
@section('meta_extra')
<meta name="keywords" content="Unicode Zeichen, Zeichen Info, HTML Entity, UTF-8 Bytes, Codepoint, Emoji Unicode, Sonderzeichen Info">
@endsection
@section('content')
@include('tools._tool_base')
<style>
#char-input { width:90px; height:90px; text-align:center; font-size:2.8rem; border:2px solid var(--line); border-radius:var(--radius-sm); outline:none; transition:border-color 0.15s; background:var(--bg); color:var(--ink); font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif; }
#char-input:focus { border-color:var(--accent); }
.char-big { font-size:120px; line-height:1; font-weight:700; color:var(--ink); font-family:'Segoe UI Emoji','Apple Color Emoji','Georgia',serif; user-select:all; text-align:center; }
.info-rows { border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.info-row { display:flex; align-items:center; padding:10px 14px; gap:12px; border-bottom:1px solid var(--line); }
.info-row:last-child { border-bottom:none; }
.info-row:nth-child(even) { background:var(--bg); }
.info-key { font-size:0.72rem; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:var(--muted); min-width:160px; flex-shrink:0; }
.info-val { font-family:'JetBrains Mono',monospace; font-size:0.88rem; font-weight:600; color:var(--ink); flex:1; word-break:break-all; }
.char-chip { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--bg); font-size:1.2rem; cursor:pointer; transition:all 0.12s; font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif; }
.char-chip:hover { background:var(--accent); border-color:var(--accent); transform:scale(1.15); }
.char-chip.active { background:var(--accent); border-color:var(--accent); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-font"></i> Text</span>
        <h1 class="tool-h1">Zeichen<span>info.</span></h1>
        <p class="tool-sub">Unicode-Codepoint, HTML-Entity, UTF-8-Bytes, CSS-Escape – alles zu jedem Zeichen.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;align-items:center;gap:20px;flex-wrap:wrap">
            <input type="text" id="char-input" maxlength="2" placeholder="A" oninput="onCharInput(this)" autocomplete="off" spellcheck="false">
            <div style="color:var(--muted);font-size:0.85rem;line-height:1.7">Tippe ein beliebiges Zeichen<br>oder wähle eines aus den Sets unten.</div>
        </div>

        <div style="margin-top:16px">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px">Lateinisch & Zahlen</div>
            <div style="display:flex;flex-wrap:wrap;gap:4px" id="set-latin"></div>
        </div>
        <div style="margin-top:12px">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px">Sonderzeichen & Interpunktion</div>
            <div style="display:flex;flex-wrap:wrap;gap:4px" id="set-special"></div>
        </div>
        <div style="margin-top:12px">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px">Pfeile</div>
            <div style="display:flex;flex-wrap:wrap;gap:4px" id="set-arrows"></div>
        </div>
        <div style="margin-top:12px">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px">Mathematik</div>
            <div style="display:flex;flex-wrap:wrap;gap:4px" id="set-math"></div>
        </div>
        <div style="margin-top:12px">
            <div style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px">Emoji</div>
            <div style="display:flex;flex-wrap:wrap;gap:4px" id="set-emoji"></div>
        </div>
    </div>

    <div id="info-card" style="display:none">
        <div class="t-panel">
            <div style="display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:16px">
                <div class="char-big" id="char-display"></div>
                <div style="flex:1;min-width:160px">
                    <div style="font-size:1.3rem;font-weight:800;color:var(--accent);font-family:'JetBrains Mono',monospace;margin-bottom:4px" id="char-codepoint"></div>
                    <div style="font-size:1rem;font-weight:700;margin-bottom:6px" id="char-uname"></div>
                    <span style="display:inline-flex;padding:4px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:0.75rem;font-weight:800" id="char-category"></span>
                </div>
            </div>

            <div class="info-rows">
                <div class="info-row">
                    <div class="info-key">Unicode</div>
                    <div class="info-val" id="r-unicode"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-unicode')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="info-row">
                    <div class="info-key">HTML-Entity (Dez.)</div>
                    <div class="info-val" id="r-html-dec"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-html-dec')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="info-row">
                    <div class="info-key">HTML-Entity (Name)</div>
                    <div class="info-val" id="r-html-name"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-html-name')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="info-row">
                    <div class="info-key">CSS Escape</div>
                    <div class="info-val" id="r-css"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-css')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="info-row">
                    <div class="info-key">UTF-8 Bytes (Hex)</div>
                    <div class="info-val" id="r-utf8"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-utf8')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="info-row">
                    <div class="info-key">JS Escape (\uXXXX)</div>
                    <div class="info-val" id="r-js"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-js')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="info-row">
                    <div class="info-key">Dezimalwert</div>
                    <div class="info-val" id="r-dec"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-dec')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="info-row">
                    <div class="info-key">Hexadezimalwert</div>
                    <div class="info-val" id="r-hex"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-hex')"><i class="fas fa-copy"></i></button>
                </div>
                <div class="info-row">
                    <div class="info-key">Binär</div>
                    <div class="info-val" id="r-bin"></div>
                    <button class="t-btn ghost sm" onclick="copyField('r-bin')"><i class="fas fa-copy"></i></button>
                </div>
            </div>
        </div>
    </div>

    <div id="empty-panel" class="t-panel" style="text-align:center;color:var(--muted);padding:32px">
        <i class="fas fa-font" style="font-size:2rem;opacity:0.3;margin-bottom:12px;display:block"></i>
        Zeichen eingeben oder auswählen.
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const UNICODE_NAMES = {
    0x20:'SPACE',0x21:'EXCLAMATION MARK',0x22:'QUOTATION MARK',0x23:'NUMBER SIGN',
    0x24:'DOLLAR SIGN',0x25:'PERCENT SIGN',0x26:'AMPERSAND',0x27:'APOSTROPHE',
    0x28:'LEFT PARENTHESIS',0x29:'RIGHT PARENTHESIS',0x2A:'ASTERISK',0x2B:'PLUS SIGN',
    0x2C:'COMMA',0x2D:'HYPHEN-MINUS',0x2E:'FULL STOP',0x2F:'SOLIDUS',
    0x3A:'COLON',0x3B:'SEMICOLON',0x3C:'LESS-THAN SIGN',0x3D:'EQUALS SIGN',
    0x3E:'GREATER-THAN SIGN',0x3F:'QUESTION MARK',0x40:'COMMERCIAL AT',
    0x5B:'LEFT SQUARE BRACKET',0x5C:'REVERSE SOLIDUS',0x5D:'RIGHT SQUARE BRACKET',
    0x5E:'CIRCUMFLEX ACCENT',0x5F:'LOW LINE',0x60:'GRAVE ACCENT',
    0x7B:'LEFT CURLY BRACKET',0x7C:'VERTICAL LINE',0x7D:'RIGHT CURLY BRACKET',
    0x7E:'TILDE',0xA9:'COPYRIGHT SIGN',0xAE:'REGISTERED SIGN',0xB0:'DEGREE SIGN',
    0xB1:'PLUS-MINUS SIGN',0xBD:'VULGAR FRACTION ONE HALF',
    0xC4:'LATIN CAPITAL LETTER A WITH DIAERESIS',0xD6:'LATIN CAPITAL LETTER O WITH DIAERESIS',
    0xDC:'LATIN CAPITAL LETTER U WITH DIAERESIS',0xDF:'LATIN SMALL LETTER SHARP S',
    0xE4:'LATIN SMALL LETTER A WITH DIAERESIS',0xF6:'LATIN SMALL LETTER O WITH DIAERESIS',
    0xFC:'LATIN SMALL LETTER U WITH DIAERESIS',
    0x20AC:'EURO SIGN',0x2013:'EN DASH',0x2014:'EM DASH',
    0x2018:'LEFT SINGLE QUOTATION MARK',0x2019:'RIGHT SINGLE QUOTATION MARK',
    0x201C:'LEFT DOUBLE QUOTATION MARK',0x201D:'RIGHT DOUBLE QUOTATION MARK',
    0x2026:'HORIZONTAL ELLIPSIS',0x2022:'BULLET',
    0x2190:'LEFTWARDS ARROW',0x2191:'UPWARDS ARROW',0x2192:'RIGHTWARDS ARROW',
    0x2193:'DOWNWARDS ARROW',0x21D0:'LEFTWARDS DOUBLE ARROW',0x21D2:'RIGHTWARDS DOUBLE ARROW',
    0x21D4:'LEFT RIGHT DOUBLE ARROW',0x2194:'LEFT RIGHT ARROW',
    0x2200:'FOR ALL',0x2202:'PARTIAL DIFFERENTIAL',0x2203:'THERE EXISTS',
    0x2205:'EMPTY SET',0x2207:'NABLA',0x2208:'ELEMENT OF',0x2209:'NOT AN ELEMENT OF',
    0x2211:'N-ARY SUMMATION',0x221A:'SQUARE ROOT',0x221E:'INFINITY',
    0x222B:'INTEGRAL',0x2248:'ALMOST EQUAL TO',0x2260:'NOT EQUAL TO',
    0x2264:'LESS-THAN OR EQUAL TO',0x2265:'GREATER-THAN OR EQUAL TO',
    0x2605:'BLACK STAR',0x2606:'WHITE STAR',0x2665:'BLACK HEART SUIT',
    0x2713:'CHECK MARK',0x2717:'BALLOT X',0x2764:'HEAVY BLACK HEART',
    0x1F600:'GRINNING FACE',0x1F602:'FACE WITH TEARS OF JOY',0x1F60A:'SMILING FACE WITH SMILING EYES',
    0x1F44D:'THUMBS UP SIGN',0x1F44E:'THUMBS DOWN SIGN',0x1F525:'FIRE',
    0x1F4A1:'ELECTRIC LIGHT BULB',0x1F4BB:'PERSONAL COMPUTER',0x1F680:'ROCKET',
};

const HTML_ENTITIES = {
    0x22:'&quot;',0x26:'&amp;',0x27:'&apos;',0x3C:'&lt;',0x3E:'&gt;',
    0xA9:'&copy;',0xAE:'&reg;',0xB0:'&deg;',0xB1:'&plusmn;',0xBD:'&frac12;',
    0xC4:'&Auml;',0xD6:'&Ouml;',0xDC:'&Uuml;',0xDF:'&szlig;',
    0xE4:'&auml;',0xF6:'&ouml;',0xFC:'&uuml;',0x20AC:'&euro;',0x2013:'&ndash;',
    0x2014:'&mdash;',0x2018:'&lsquo;',0x2019:'&rsquo;',0x201C:'&ldquo;',
    0x201D:'&rdquo;',0x2026:'&hellip;',0x2022:'&bull;',0x2190:'&larr;',
    0x2191:'&uarr;',0x2192:'&rarr;',0x2193:'&darr;',0x2194:'&harr;',
    0x2200:'&forall;',0x2202:'&part;',0x2203:'&exist;',0x2205:'&empty;',
    0x2207:'&nabla;',0x2208:'&isin;',0x2209:'&notin;',0x2211:'&sum;',
    0x221A:'&radic;',0x221E:'&infin;',0x222B:'&int;',0x2248:'&asymp;',
    0x2260:'&ne;',0x2264:'&le;',0x2265:'&ge;',0x2665:'&hearts;',
};

function getCategory(cp) {
    if ((cp>=0x41&&cp<=0x5A)||(cp>=0x61&&cp<=0x7A)) return 'Letter (Buchstabe)';
    if (cp>=0x30&&cp<=0x39) return 'Decimal Digit (Ziffer)';
    if (cp===0x20) return 'Space Separator (Leerzeichen)';
    if ((cp>=0x21&&cp<=0x2F)||(cp>=0x3A&&cp<=0x40)) return 'Interpunktion / Symbol';
    if (cp>=0xC0&&cp<=0x2AF) return 'Letter (Lateinisch Erweitert)';
    if (cp>=0x2190&&cp<=0x21FF) return 'Symbol (Pfeil)';
    if (cp>=0x2200&&cp<=0x22FF) return 'Symbol (Mathematisch)';
    if (cp>=0x2600&&cp<=0x26FF) return 'Symbol (Verschiedenes)';
    if (cp>=0x1F300&&cp<=0x1FAFF) return 'Symbol (Emoji)';
    if (cp>=0x2000&&cp<=0x206F) return 'Interpunktion (Allgemein)';
    return 'Sonstiges';
}

function getUtf8Bytes(cp) {
    const bytes=[];
    if(cp<0x80) bytes.push(cp);
    else if(cp<0x800) bytes.push(0xC0|(cp>>6),0x80|(cp&0x3F));
    else if(cp<0x10000) bytes.push(0xE0|(cp>>12),0x80|((cp>>6)&0x3F),0x80|(cp&0x3F));
    else bytes.push(0xF0|(cp>>18),0x80|((cp>>12)&0x3F),0x80|((cp>>6)&0x3F),0x80|(cp&0x3F));
    return bytes.map(b=>b.toString(16).toUpperCase().padStart(2,'0')).join(' ');
}

let activeChip = null;

function showCharInfo(char) {
    if(!char||char.trim()===''){
        document.getElementById('info-card').style.display='none';
        document.getElementById('empty-panel').style.display='';
        return;
    }
    const cp = char.codePointAt(0);
    const cpHex = cp.toString(16).toUpperCase().padStart(4,'0');
    document.getElementById('char-display').textContent = char;
    document.getElementById('char-codepoint').textContent = 'U+'+cpHex;
    document.getElementById('char-uname').textContent = UNICODE_NAMES[cp]||'(kein Name in Datenbank)';
    document.getElementById('char-category').textContent = getCategory(cp);
    document.getElementById('r-unicode').textContent = 'U+'+cpHex;
    document.getElementById('r-html-dec').textContent = '&#'+cp+';';
    document.getElementById('r-html-name').textContent = HTML_ENTITIES[cp]||'–';
    document.getElementById('r-css').textContent = '\\'+cpHex.toLowerCase();
    document.getElementById('r-utf8').textContent = getUtf8Bytes(cp);
    document.getElementById('r-js').textContent = cp<=0xFFFF?'\\u'+cpHex:'\\u{'+cpHex+'}';
    document.getElementById('r-dec').textContent = cp;
    document.getElementById('r-hex').textContent = '0x'+cpHex;
    document.getElementById('r-bin').textContent = cp.toString(2).padStart(8,'0');
    document.getElementById('info-card').style.display='';
    document.getElementById('empty-panel').style.display='none';
}

function onCharInput(el) {
    const val = el.value;
    if(!val){showCharInfo('');return;}
    const codePoints = Array.from(val);
    const char = codePoints[codePoints.length-1];
    el.value = char;
    showCharInfo(char);
    if(activeChip){activeChip.classList.remove('active');activeChip=null;}
}

function pickChar(char, chipEl) {
    document.getElementById('char-input').value = char;
    showCharInfo(char);
    if(activeChip) activeChip.classList.remove('active');
    chipEl.classList.add('active');
    activeChip = chipEl;
}

function buildSet(id, chars) {
    const el = document.getElementById(id);
    chars.forEach(ch => {
        const btn = document.createElement('button');
        btn.className = 'char-chip';
        btn.textContent = ch;
        btn.title = 'U+'+ch.codePointAt(0).toString(16).toUpperCase().padStart(4,'0');
        btn.onclick = () => pickChar(ch, btn);
        el.appendChild(btn);
    });
}

buildSet('set-latin','ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789ÄÖÜäöüß'.split(''));
buildSet('set-special','!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~©®°±µ¶½€–—""…•'.split('').filter(c=>c.codePointAt(0)>31));
buildSet('set-arrows',['←','↑','→','↓','↔','↕','⇐','⇒','⇔','↩','↪','↖','↗','↘','↙','⟵','⟶','⟷','↺','↻']);
buildSet('set-math',['∀','∂','∃','∅','∇','∈','∉','∑','√','∞','∫','≈','≠','≤','≥','±','×','÷','π','∩','∪','⊂','⊃']);
buildSet('set-emoji',Array.from('😀😁😂😊👍👎🔥💡💻🚀⭐❤️✓✗💯🎉🌍🧠🤖🦊🐧🌙☀️🌈'));

function copyField(id) {
    const text = document.getElementById(id).textContent;
    if(text==='–') return;
    navigator.clipboard.writeText(text);
}
</script>

@include('tools._seo_content', ['toolSlug' => 'zeichen-info', 'toolName' => 'Zeichen-Info'])

@endsection