@extends('layouts.app')
@section('title', 'Spiegelschrift Generator – Text spiegeln, flippen, ROT13 | kotsch.tech')
@section('meta_description', 'Text spiegeln, flippen, umkehren – Spiegelschrift online generieren. Plus ROT13, Binär, Bubble-Text und mehr. Kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Spiegelschrift, Text spiegeln, Text flippen, ROT13, Binär Text, Bubble Text, Text umkehren, Spiegelschrift Generator">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.result-card { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; }
.rc-label { display:flex; justify-content:space-between; align-items:center; font-size:0.72rem; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.rc-text { font-size:1.1rem; font-weight:700; color:var(--ink); word-break:break-all; min-height:26px; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-magic"></i> Textwerkzeuge</span>
        <h1 class="tool-h1">Spiegel<span>schrift.</span></h1>
        <p class="tool-sub">Text spiegeln, flippen, codieren – alle Varianten live und auf einmal.</p>
    </div>

    <div class="t-panel">
        <div class="t-field">
            <label class="t-label">Eingabe</label>
            <textarea class="t-textarea" id="input" placeholder="Text hier eingeben…" oninput="transform()">Hallo Welt</textarea>
        </div>
        <div style="display:flex;gap:8px;margin-top:8px">
            <button class="t-btn sm ghost" onclick="document.getElementById('input').value='';transform()"><i class="fas fa-trash"></i> Leeren</button>
        </div>
    </div>

    <div id="results"></div>
</div>
@include('tools._ads_banner')
</div>

<script>
const flipMap={'a':'ɐ','b':'q','c':'ɔ','d':'p','e':'ǝ','f':'ɟ','g':'ƃ','h':'ɥ','i':'ᴉ','j':'ɾ','k':'ʞ','l':'l','m':'ɯ','n':'u','o':'o','p':'d','q':'b','r':'ɹ','s':'s','t':'ʇ','u':'n','v':'ʌ','w':'ʍ','x':'x','y':'ʎ','z':'z','A':'∀','B':'ᗺ','C':'Ɔ','D':'ᗡ','E':'Ǝ','F':'Ⅎ','G':'פ','H':'H','I':'I','L':'˥','M':'W','N':'N','O':'O','P':'Ԁ','Q':'Q','T':'┴','U':'∩','V':'Λ','W':'M','X':'X','Y':'⅄','Z':'Z','0':'0','1':'ı','2':'ᄅ','3':'Ɛ','4':'ᔭ','5':'ϛ','6':'9','7':'ㄥ','8':'8','9':'6','.':'˙',',':'\'','?':'¿','!':'¡','(':')',')'  :'('};
const bubbleLo='ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ';
const bubbleUp='ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ';

const TRANSFORMS=[
    {label:'Rückwärts', fn:t=>t.split('').reverse().join('')},
    {label:'Upside-Down (umgekippt)', fn:t=>t.split('').reverse().map(c=>flipMap[c]||c).join('')},
    {label:'Breit (Fullwidth)', fn:t=>t.split('').map(c=>{const code=c.charCodeAt(0);return(code>=33&&code<=126)?String.fromCharCode(code+65248):c;}).join('')},
    {label:'ROT13', fn:t=>t.replace(/[a-zA-Z]/g,c=>String.fromCharCode(c.charCodeAt(0)+(c.toLowerCase()<'n'?13:-13)))},
    {label:'Bubble-Text', fn:t=>t.split('').map(c=>{const code=c.charCodeAt(0);if(code>=97&&code<=122)return bubbleLo[code-97];if(code>=65&&code<=90)return bubbleUp[code-65];return c;}).join('')},
    {label:'Binär (ASCII)', fn:t=>t.split('').map(c=>c.charCodeAt(0).toString(2).padStart(8,'0')).join(' ')},
    {label:'Gesperrt (mit Leerzeichen)', fn:t=>t.split('').join(' ')},
    {label:'Wörter umkehren', fn:t=>t.split(/\s+/).reverse().join(' ')},
];

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

function transform(){
    const input=document.getElementById('input').value;
    const container=document.getElementById('results');
    container.innerHTML='';
    if(!input) return;
    TRANSFORMS.forEach(tr=>{
        const result=tr.fn(input);
        const card=document.createElement('div');
        card.className='result-card';
        card.innerHTML=`<div class="rc-label"><span>${tr.label}</span><button class="t-btn sm ghost" onclick="navigator.clipboard.writeText(this.closest('.result-card').querySelector('.rc-text').textContent)"><i class="fas fa-copy"></i></button></div><div class="rc-text">${esc(result)}</div>`;
        container.appendChild(card);
    });
}
transform();
</script>

@include('tools._seo_content', ['toolSlug' => 'spiegelschrift', 'toolName' => 'Spiegelschrift'])

@endsection