@extends('layouts.app')
@section('title', 'Favicon Tester – Website-Icons prüfen für Browser, iOS, Android & Google | kotsch.tech')
@section('meta_description', 'Kostenloser Favicon Tester: URL eingeben und alle Favicons, Apple-Touch-Icons und das Web-Manifest prüfen – mit Live-Vorschau für Browser-Tab (hell & dunkel), iPhone, Android und Google. Oder Bild hochladen und kompletten Favicon-Pack herunterladen.')
@section('meta_extra')
<meta name="keywords" content="Favicon Tester, Favicon Checker, Favicon prüfen, apple-touch-icon, web manifest, theme-color, Favicon Vorschau, Favicon Generator, favicon.ico, PWA Icon">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.fav-hint { font-size:.82rem; color:var(--muted); margin-top:10px; line-height:1.55; }
.fav-inputrow { display:flex; gap:10px; }
.fav-inputrow .t-input { flex:1; }
@media (max-width:560px){ .fav-inputrow { flex-direction:column; } }
.fav-examples { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.fav-examples span { font-size:.78rem; color:var(--muted); font-weight:700; }

/* Score */
.fav-scorewrap { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.fav-ring { width:104px; height:104px; flex:0 0 auto; position:relative; }
.fav-ring svg { transform:rotate(-90deg); width:104px; height:104px; }
.fav-ring .rbg { fill:none; stroke:var(--line); stroke-width:3.4; }
.fav-ring .rfill { fill:none; stroke-width:3.4; stroke-linecap:round; transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1); }
.fav-ring-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.fav-ring-num b { font-size:1.9rem; font-weight:900; letter-spacing:-1px; line-height:1; }
.fav-ring-num small { font-size:.62rem; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:1px; }
.fav-scoremeta h3 { margin:0 0 4px; font-size:1.15rem; font-weight:900; }
.fav-scoremeta p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; }
.fav-scoremeta .host { font-weight:800; color:var(--ink); }

/* Checks */
.fav-checks { display:grid; gap:10px; margin-top:6px; }
.fav-check { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--card); align-items:start; }
.fav-check .cico { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:#fff; flex:0 0 auto; margin-top:1px; }
.fav-check.pass .cico { background:#10b981; }
.fav-check.warn .cico { background:#f59e0b; }
.fav-check.fail .cico { background:#ef4444; }
.fav-check.pass { border-color:rgba(16,185,129,.28); }
.fav-check.fail { border-color:rgba(239,68,68,.28); }
.fav-check .clabel { font-weight:800; font-size:.94rem; margin:0 0 2px; }
.fav-check .cmsg { color:var(--muted); font-size:.86rem; line-height:1.5; margin:0; }
.fav-fix { margin-top:9px; position:relative; }
.fav-fix pre { margin:0; background:#0f172a; color:#e2e8f0; border-radius:10px; padding:11px 40px 11px 13px; font-family:'JetBrains Mono',monospace; font-size:.76rem; line-height:1.5; overflow-x:auto; white-space:pre-wrap; word-break:break-all; }
.fav-copy { position:absolute; top:7px; right:7px; width:30px; height:30px; border-radius:8px; border:0; background:rgba(255,255,255,.12); color:#e2e8f0; cursor:pointer; font-size:.78rem; }
.fav-copy:hover { background:var(--accent); }

/* Surfaces (device previews) */
.fav-surfaces { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:680px){ .fav-surfaces { grid-template-columns:1fr; } }
.fav-surface { border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--card); }
.fav-surface > h4 { margin:0; padding:9px 14px; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:7px; }
.fav-stage { padding:18px; display:flex; align-items:center; justify-content:center; min-height:118px; }

/* Browser tab */
.fav-tabbar { width:100%; border-radius:10px 10px 0 0; padding:8px 8px 0; }
.fav-tabbar.light { background:#e8eaed; }
.fav-tabbar.dark { background:#2b2f36; }
.fav-tab { display:flex; align-items:center; gap:8px; max-width:230px; padding:9px 12px; border-radius:9px 9px 0 0; font-size:.8rem; font-weight:600; }
.fav-tabbar.light .fav-tab { background:#fff; color:#1f2937; }
.fav-tabbar.dark .fav-tab { background:#3a3f47; color:#e5e7eb; }
.fav-tab .fav-fi { width:16px; height:16px; border-radius:3px; flex:0 0 auto; object-fit:cover; }
.fav-tab .fav-ttl { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fav-tab .fav-x { margin-left:auto; opacity:.5; font-size:.9rem; }
.fav-addr { padding:8px; }
.fav-addr .bar { display:flex; align-items:center; gap:8px; border-radius:8px; padding:7px 12px; font-size:.76rem; }
.fav-tabbar.light .fav-addr .bar { background:#fff; color:#475569; }
.fav-tabbar.dark .fav-addr .bar { background:#20242b; color:#9aa4b2; }
.fav-addr .fav-fi { width:15px; height:15px; border-radius:3px; }

/* iOS / Android home */
.fav-home { width:100%; min-height:150px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:20px; }
.fav-home.ios { background:linear-gradient(150deg,#f0d9ff 0%,#c6e0ff 55%,#a5f3e0 100%); }
.fav-home.android { background:linear-gradient(150deg,#0b1220 0%,#1e293b 100%); }
.fav-appicon { width:62px; height:62px; object-fit:cover; box-shadow:0 8px 20px -6px rgba(0,0,0,.45); }
.fav-appicon.ios { border-radius:22.4%; }
.fav-appicon.and-circle { border-radius:50%; }
.fav-appicon.and-sq { border-radius:30%; }
.fav-applabel { font-size:.78rem; font-weight:700; max-width:110px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fav-home.ios .fav-applabel { color:#0f172a; text-shadow:0 1px 3px rgba(255,255,255,.5); }
.fav-home.android .fav-applabel { color:#fff; }
.fav-androw { display:flex; gap:26px; align-items:flex-start; }
.fav-androw > div { display:flex; flex-direction:column; align-items:center; gap:8px; }
.fav-androw small { font-size:.62rem; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }

/* Google result */
.fav-goo { width:100%; padding:6px 4px; font-family:arial,sans-serif; }
.fav-goo-top { display:flex; align-items:center; gap:11px; margin-bottom:5px; }
.fav-goo-fav { width:26px; height:26px; border-radius:50%; border:1px solid #ebebeb; object-fit:cover; background:#fff; padding:2px; box-sizing:border-box; }
.fav-goo-site { line-height:1.1; }
.fav-goo-site b { font-size:.82rem; color:#202124; font-weight:400; display:block; }
.fav-goo-site span { font-size:.72rem; color:#4d5156; }
.fav-goo-title { color:#1a0dab; font-size:1.15rem; line-height:1.3; margin:0; font-weight:400; }
.fav-goo-snip { color:#4d5156; font-size:.82rem; line-height:1.45; margin:4px 0 0; }

/* fallback letter tile */
.fav-letter { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#10b981,#0ea5a3); color:#fff; font-weight:900; }

/* Icon table */
.fav-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.fav-table th { text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:900; padding:8px 10px; border-bottom:2px solid var(--line); }
.fav-table td { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.fav-table tr:last-child td { border-bottom:0; }
.fav-thumb { width:30px; height:30px; border-radius:7px; object-fit:cover; border:1px solid var(--line); background:#fff; }
.fav-badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:.7rem; font-weight:900; }
.fav-badge.ok { background:rgba(16,185,129,.14); color:#047857; }
.fav-badge.no { background:rgba(239,68,68,.14); color:#b91c1c; }
.fav-tbl-rel { font-family:'JetBrains Mono',monospace; font-size:.76rem; color:var(--ink); }
.fav-tbl-src { font-size:.7rem; color:var(--muted); }
.fav-scroll { overflow-x:auto; }

/* Upload */
.fav-drop { border:2px dashed var(--line); border-radius:var(--radius-lg); background:var(--bg); padding:40px 22px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }
.fav-drop:hover, .fav-drop.drag { border-color:var(--accent); background:var(--accent-soft); }
.fav-drop i { font-size:2.4rem; color:var(--accent); margin-bottom:12px; }
.fav-drop-h { font-weight:900; font-size:1.08rem; margin:0 0 5px; }
.fav-drop-s { color:var(--muted); font-size:.86rem; margin:0; }
.fav-packgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; }
.fav-packcard { border:1px solid var(--line); border-radius:var(--radius-md); padding:12px; text-align:center; background:var(--card); }
.fav-packcard img { width:56px; height:56px; object-fit:contain; image-rendering:auto; }
.fav-packcard .ps { font-size:.72rem; color:var(--muted); font-weight:800; margin-top:7px; }
.fav-packcard a { display:inline-block; margin-top:8px; font-size:.72rem; font-weight:800; color:var(--accent); text-decoration:none; }
.fav-packcard a:hover { text-decoration:underline; }

.fav-spinner { display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:favspin .7s linear infinite; }
@keyframes favspin { to { transform:rotate(360deg); } }
.fav-sub-h { font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.fav-sub-h::after { content:''; flex:1; height:1px; background:var(--line); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-icons"></i> Web &amp; SEO</span>
        <h1 class="tool-h1">Favicon <span>Tester.</span></h1>
        <p class="tool-sub">Prüfe in Sekunden, ob deine Website-Icons überall sauber aussehen – Browser-Tab (hell &amp; dunkel), iPhone-Homescreen, Android und Google. Mit echten Live-Vorschauen, Bewertung und fertigem Code zum Nachbessern.</p>
    </div>

    <div class="t-tabs" role="tablist">
        <button class="t-tab active" id="tab-url" role="tab" aria-selected="true"><i class="fas fa-globe"></i> Website prüfen</button>
        <button class="t-tab" id="tab-up" role="tab" aria-selected="false"><i class="fas fa-cloud-arrow-up"></i> Eigenes Bild testen</button>
    </div>

    {{-- ============ URL CHECK ============ --}}
    <div class="t-tab-pane active" id="pane-url">
        <div class="t-panel">
            <label class="t-label" for="fav-url">Adresse der Website</label>
            <div class="fav-inputrow">
                <input type="url" class="t-input" id="fav-url" placeholder="z. B. github.com" autocomplete="off" spellcheck="false" inputmode="url">
                <button class="t-btn accent" id="fav-go" style="white-space:nowrap"><i class="fas fa-magnifying-glass"></i> Prüfen</button>
            </div>
            <div class="t-error" id="fav-err"></div>
            <div class="fav-examples">
                <span>Beispiele:</span>
                <button type="button" class="t-quick-btn fav-ex">github.com</button>
                <button type="button" class="t-quick-btn fav-ex">stripe.com</button>
                <button type="button" class="t-quick-btn fav-ex">kotsch.tech</button>
            </div>
            <p class="fav-hint"><i class="fas fa-shield-halved"></i> Wir laden nur die öffentliche Startseite und ihre Icon-Dateien. Nichts wird gespeichert. Interne/lokale Adressen sind aus Sicherheitsgründen blockiert.</p>
        </div>

        <div id="fav-out" style="display:none">
            {{-- Score --}}
            <div class="t-panel">
                <div class="fav-scorewrap">
                    <div class="fav-ring" id="fav-ring">
                        <svg viewBox="0 0 36 36">
                            <circle class="rbg" cx="18" cy="18" r="15.9155"></circle>
                            <circle class="rfill" id="fav-ring-fill" cx="18" cy="18" r="15.9155" stroke-dasharray="0 100"></circle>
                        </svg>
                        <div class="fav-ring-num"><b id="fav-score">0</b><small>von 100</small></div>
                    </div>
                    <div class="fav-scoremeta">
                        <h3 id="fav-verdict">—</h3>
                        <p>Geprüft: <span class="host" id="fav-host">—</span> · <span id="fav-count">0</span> Icon-Dateien gefunden</p>
                    </div>
                </div>
            </div>

            {{-- Previews --}}
            <div class="t-panel">
                <p class="fav-sub-h"><i class="fas fa-eye"></i> So sieht es überall aus</p>
                <div class="fav-surfaces" id="fav-preview"></div>
            </div>

            {{-- Checks --}}
            <div class="t-panel">
                <p class="fav-sub-h"><i class="fas fa-list-check"></i> Prüfung &amp; Empfehlungen</p>
                <div class="fav-checks" id="fav-checklist"></div>
            </div>

            {{-- Detected icons --}}
            <div class="t-panel">
                <p class="fav-sub-h"><i class="fas fa-images"></i> Gefundene Icon-Dateien</p>
                <div class="fav-scroll">
                    <table class="fav-table"><thead><tr>
                        <th></th><th>rel</th><th>Maße</th><th>Typ</th><th>Größe</th><th>Status</th>
                    </tr></thead><tbody id="fav-tbody"></tbody></table>
                </div>
            </div>

            {{-- Recommended head --}}
            <div class="t-panel">
                <p class="fav-sub-h"><i class="fas fa-code"></i> Empfohlener &lt;head&gt;-Code</p>
                <div class="fav-fix">
                    <pre id="fav-rec"></pre>
                    <button class="fav-copy" data-copy="fav-rec" title="Kopieren"><i class="fas fa-copy"></i></button>
                </div>
                <p class="fav-hint">Lege die passenden Dateien im Web-Root ab und binde sie wie oben ein. Das <code>favicon.svg</code> ist optional, aber sorgt für gestochen scharfe Tabs.</p>
            </div>
        </div>
    </div>

    {{-- ============ UPLOAD ============ --}}
    <div class="t-tab-pane" id="pane-up">
        <div class="t-panel">
            <div class="fav-drop" id="fav-updrop">
                <i class="fas fa-cloud-arrow-up"></i>
                <p class="fav-drop-h">Bild hierher ziehen oder klicken</p>
                <p class="fav-drop-s">PNG, JPG, SVG oder WebP · am besten quadratisch, mind. 512×512</p>
                <input type="file" id="fav-upfile" accept="image/png,image/jpeg,image/svg+xml,image/webp,.png,.jpg,.jpeg,.svg,.webp" hidden>
            </div>
            <div class="t-error" id="fav-uperr"></div>
        </div>

        <div id="fav-upout" style="display:none">
            <div class="t-panel">
                <p class="fav-sub-h"><i class="fas fa-eye"></i> Live-Vorschau deines Icons</p>
                <div class="fav-surfaces" id="fav-uppreview"></div>
            </div>
            <div class="t-panel">
                <p class="fav-sub-h"><i class="fas fa-box-open"></i> Fertiger Favicon-Pack</p>
                <p class="fav-hint" style="margin-top:0;margin-bottom:16px">Direkt im Browser erzeugt – nichts wird hochgeladen. Lade die Größen herunter, leg sie ins Web-Root und binde sie mit dem Code unten ein.</p>
                <div class="fav-packgrid" id="fav-pack"></div>
            </div>
            <div class="t-panel">
                <p class="fav-sub-h"><i class="fas fa-code"></i> &lt;head&gt;-Code zum Einbinden</p>
                <div class="fav-fix">
                    <pre id="fav-uprec"></pre>
                    <button class="fav-copy" data-copy="fav-uprec" title="Kopieren"><i class="fas fa-copy"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const CSRF = @json(csrf_token());
</script>
<script>
(function(){
'use strict';
// Endpunkt relativ (funktioniert auf Apex /webtools/favicon-tester UND auf webtools.kotsch.tech/favicon-tester)
const BASE = location.pathname.replace(/^\/(de|en)(?=\/|$)/, '').replace(/\/+$/, '');
const PROBE_URL = BASE + '/probe';

const $ = id => document.getElementById(id);
const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const initial = s => (String(s || '?').trim()[0] || '?').toUpperCase();

/* ---- Tabs ---- */
function switchTab(which){
    const url = which === 'url';
    $('tab-url').classList.toggle('active', url);
    $('tab-up').classList.toggle('active', !url);
    $('tab-url').setAttribute('aria-selected', url);
    $('tab-up').setAttribute('aria-selected', !url);
    $('pane-url').classList.toggle('active', url);
    $('pane-up').classList.toggle('active', !url);
}
$('tab-url').addEventListener('click', () => switchTab('url'));
$('tab-up').addEventListener('click', () => switchTab('up'));

/* ---- Shared: fav image or letter fallback ---- */
function favImg(url, cls, alt){
    if(url) return `<img class="${cls}" src="${esc(url)}" alt="${esc(alt||'')}" loading="lazy" onerror="this.replaceWith(Object.assign(document.createElement('div'),{className:'${cls} fav-letter',textContent:this.dataset.i,style:this.getAttribute('style')||''}))" data-i="${esc(initial(alt))}">`;
    return `<div class="${cls} fav-letter">${esc(initial(alt))}</div>`;
}

/* ---- Device preview surfaces ---- */
function surfaces(ic){
    const title = ic.title || ic.host || 'Website';
    const app = ic.appName || ic.host || 'App';
    const host = ic.host || 'example.com';
    const tab = ic.tab, apple = ic.apple || ic.tab, android = ic.android || ic.apple || ic.tab;
    return `
    <div class="fav-surface">
        <h4><i class="fas fa-window-maximize"></i> Browser-Tab · Hell</h4>
        <div class="fav-stage" style="background:#d6d9de">
            <div class="fav-tabbar light">
                <div class="fav-tab">${favImg(tab,'fav-fi',app)}<span class="fav-ttl">${esc(title)}</span><span class="fav-x">×</span></div>
                <div class="fav-addr"><div class="bar">${favImg(tab,'fav-fi',app)}<span>${esc(host)}</span></div></div>
            </div>
        </div>
    </div>
    <div class="fav-surface">
        <h4><i class="fas fa-moon"></i> Browser-Tab · Dunkel</h4>
        <div class="fav-stage" style="background:#1a1d23">
            <div class="fav-tabbar dark">
                <div class="fav-tab">${favImg(tab,'fav-fi',app)}<span class="fav-ttl">${esc(title)}</span><span class="fav-x">×</span></div>
                <div class="fav-addr"><div class="bar">${favImg(tab,'fav-fi',app)}<span>${esc(host)}</span></div></div>
            </div>
        </div>
    </div>
    <div class="fav-surface">
        <h4><i class="fab fa-apple"></i> iPhone · Homescreen</h4>
        <div class="fav-stage"><div class="fav-home ios">
            ${favImg(apple,'fav-appicon ios',app)}
            <div class="fav-applabel">${esc(app)}</div>
        </div></div>
    </div>
    <div class="fav-surface">
        <h4><i class="fab fa-android"></i> Android · Homescreen</h4>
        <div class="fav-stage"><div class="fav-home android">
            <div class="fav-androw">
                <div>${favImg(android,'fav-appicon and-circle',app)}<small>Kreis</small></div>
                <div>${favImg(android,'fav-appicon and-sq',app)}<small>Squircle</small></div>
            </div>
            <div class="fav-applabel">${esc(app)}</div>
        </div></div>
    </div>
    <div class="fav-surface" style="grid-column:1/-1">
        <h4><i class="fab fa-google"></i> Google-Suchergebnis</h4>
        <div class="fav-stage" style="justify-content:flex-start"><div class="fav-goo">
            <div class="fav-goo-top">
                ${favImg(tab,'fav-goo-fav',app)}
                <div class="fav-goo-site"><b>${esc(app)}</b><span>${esc('https://' + host)}</span></div>
            </div>
            <p class="fav-goo-title">${esc(title)}</p>
            <p class="fav-goo-snip">So erscheint deine Seite in der Google-Suche – das Favicon steht direkt neben dem Domainnamen und ist oft der erste Marken-Eindruck.</p>
        </div></div>
    </div>`;
}

/* ---- URL check ---- */
const goBtn = $('fav-go'), urlIn = $('fav-url'), errBox = $('fav-err');
function showErr(m){ errBox.textContent = m; errBox.style.display = 'block'; }
function clrErr(){ errBox.style.display = 'none'; }

document.querySelectorAll('.fav-ex').forEach(b => b.addEventListener('click', () => { urlIn.value = b.textContent; runCheck(); }));
urlIn.addEventListener('keydown', e => { if(e.key === 'Enter') runCheck(); });
goBtn.addEventListener('click', runCheck);

async function runCheck(){
    const url = urlIn.value.trim();
    clrErr();
    if(!url){ showErr('Bitte eine Adresse eingeben.'); return; }
    goBtn.disabled = true;
    const orig = goBtn.innerHTML;
    goBtn.innerHTML = '<span class="fav-spinner"></span> Prüfe…';
    try {
        const res = await fetch(PROBE_URL, {
            method:'POST',
            headers:{'Content-Type':'application/json','X-CSRF-TOKEN':CSRF,'Accept':'application/json'},
            body: JSON.stringify({ url })
        });
        const data = await res.json();
        if(!data.ok){ showErr(data.message || 'Prüfung fehlgeschlagen.'); return; }
        render(data);
    } catch(e){
        showErr('Verbindungsfehler. Bitte erneut versuchen.');
    } finally {
        goBtn.disabled = false;
        goBtn.innerHTML = orig;
    }
}

function render(d){
    const out = $('fav-out');
    // Score ring
    const sc = d.score|0;
    $('fav-score').textContent = sc;
    const col = sc >= 80 ? '#10b981' : sc >= 50 ? '#f59e0b' : '#ef4444';
    const fill = $('fav-ring-fill');
    fill.style.stroke = col;
    fill.setAttribute('stroke-dasharray', sc + ' 100');
    $('fav-score').style.color = col;
    $('fav-verdict').textContent = sc >= 80 ? 'Stark – deine Icons sitzen.' : sc >= 50 ? 'Solide, mit Luft nach oben.' : 'Da fehlt einiges.';
    $('fav-host').textContent = d.site.origin.replace(/^https?:\/\//,'');
    $('fav-count').textContent = d.icons.length;

    // Preview
    $('fav-preview').innerHTML = surfaces({
        tab: d.preview.tab, apple: d.preview.apple, android: d.preview.android,
        title: d.preview.title, appName: d.preview.appName, host: d.preview.host
    });

    // Checks
    $('fav-checklist').innerHTML = d.checks.map(c => {
        const ico = c.status === 'pass' ? '<i class="fas fa-check"></i>' : c.status === 'warn' ? '<i class="fas fa-exclamation"></i>' : '<i class="fas fa-xmark"></i>';
        const fix = c.fix ? `<div class="fav-fix"><pre>${esc(c.fix)}</pre><button class="fav-copy" title="Kopieren" data-copytext="${esc(c.fix)}"><i class="fas fa-copy"></i></button></div>` : '';
        return `<div class="fav-check ${c.status}"><div class="cico">${ico}</div><div><p class="clabel">${esc(c.label)}</p><p class="cmsg">${esc(c.msg)}</p>${fix}</div></div>`;
    }).join('');

    // Table
    $('fav-tbody').innerHTML = d.icons.map(i => {
        const dims = i.imgType === 'svg' ? 'Vektor' : (i.w && i.h ? `${i.w}×${i.h}` : (i.reachable ? '—' : '—'));
        const badge = i.reachable ? '<span class="fav-badge ok">OK</span>' : '<span class="fav-badge no">404</span>';
        const type = i.imgType ? i.imgType.toUpperCase() : (i.declaredType || '—');
        const size = i.bytes ? (i.bytes < 1024 ? i.bytes + ' B' : (i.bytes/1024).toFixed(1) + ' KB') : '—';
        const relTxt = i.rel + (i.source === 'implicit' ? ' (auto)' : i.source === 'manifest' ? ' (manifest)' : '');
        return `<tr><td>${favImg(i.reachable ? i.href : '', 'fav-thumb', i.rel)}</td>
            <td><span class="fav-tbl-rel">${esc(i.rel)}</span><br><span class="fav-tbl-src">${esc(i.declaredSizes || relTxt)}</span></td>
            <td>${esc(dims)}</td><td>${esc(type)}</td><td>${esc(size)}</td><td>${badge}</td></tr>`;
    }).join('');

    // Recommended head
    $('fav-rec').textContent = d.recommendedHead;

    out.style.display = 'block';
    out.scrollIntoView({ behavior:'smooth', block:'start' });
}

/* ---- Copy buttons (delegated) ---- */
document.addEventListener('click', e => {
    const btn = e.target.closest('.fav-copy'); if(!btn) return;
    const txt = btn.dataset.copytext != null ? btn.dataset.copytext : ($(btn.dataset.copy)?.textContent || '');
    navigator.clipboard.writeText(txt).then(() => {
        const old = btn.innerHTML; btn.innerHTML = '<i class="fas fa-check"></i>';
        setTimeout(() => btn.innerHTML = old, 1400);
    });
});

/* ---- Upload mode ---- */
const drop = $('fav-updrop'), upFile = $('fav-upfile'), upErr = $('fav-uperr');
drop.addEventListener('click', () => upFile.click());
['dragenter','dragover'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.add('drag'); }));
['dragleave','drop'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.remove('drag'); }));
drop.addEventListener('drop', e => { const f = e.dataTransfer.files[0]; if(f) handleUpload(f); });
upFile.addEventListener('change', () => { if(upFile.files[0]) handleUpload(upFile.files[0]); });

const PACK_SIZES = [16, 32, 48, 180, 192, 512];

function handleUpload(file){
    upErr.style.display = 'none';
    if(!/^image\//.test(file.type) && !/\.(png|jpe?g|svg|webp)$/i.test(file.name)){
        upErr.textContent = 'Bitte ein Bild wählen (PNG, JPG, SVG oder WebP).'; upErr.style.display = 'block'; return;
    }
    if(file.size > 8 * 1024 * 1024){ upErr.textContent = 'Datei zu groß (max. 8 MB).'; upErr.style.display = 'block'; return; }
    const reader = new FileReader();
    reader.onload = () => {
        const src = reader.result;
        const img = new Image();
        img.onload = () => renderUpload(img, src);
        img.onerror = () => { upErr.textContent = 'Bild konnte nicht gelesen werden.'; upErr.style.display = 'block'; };
        img.src = src;
    };
    reader.readAsDataURL(file);
}

function coverDraw(img, size){
    const c = document.createElement('canvas'); c.width = c.height = size;
    const ctx = c.getContext('2d');
    const s = Math.min(img.width, img.height);
    const sx = (img.width - s) / 2, sy = (img.height - s) / 2;
    ctx.imageSmoothingQuality = 'high';
    ctx.drawImage(img, sx, sy, s, s, 0, 0, size, size);
    return c;
}

function renderUpload(img, src){
    // Vorschau nutzt Originalbild
    $('fav-uppreview').innerHTML = surfaces({
        tab: src, apple: src, android: src,
        title: 'Deine Website', appName: 'Deine App', host: 'deine-domain.de'
    });
    // Pack per Canvas
    const pack = $('fav-pack'); pack.innerHTML = '';
    PACK_SIZES.forEach(sz => {
        const canvas = coverDraw(img, sz);
        const dataUrl = canvas.toDataURL('image/png');
        const name = sz === 180 ? 'apple-touch-icon.png' : sz === 192 ? 'icon-192.png' : sz === 512 ? 'icon-512.png' : `favicon-${sz}x${sz}.png`;
        const card = document.createElement('div');
        card.className = 'fav-packcard';
        card.innerHTML = `<img src="${dataUrl}" alt="${sz}px" style="width:${Math.min(sz,56)}px;height:${Math.min(sz,56)}px">
            <div class="ps">${sz}×${sz}</div>
            <a download="${name}" href="${dataUrl}"><i class="fas fa-download"></i> ${esc(name.replace(/\.png$/,''))}</a>`;
        pack.appendChild(card);
    });
    $('fav-uprec').textContent =
`<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">`;
    $('fav-upout').style.display = 'block';
    $('fav-upout').scrollIntoView({ behavior:'smooth', block:'start' });
}
})();
</script>

{{-- Inline SEO + FAQ --}}
<div class="twseo" style="max-width:820px;margin:8px auto 0;padding:0 20px 40px">
<style>
.twseo section { margin-top:30px; padding-top:30px; border-top:1px solid #e5e7eb; }
.twseo h2 { font-size:1.35rem; font-weight:800; color:#0f172a; letter-spacing:-.02em; margin:0 0 16px; }
.twseo-body { font-size:1rem; color:#334155; line-height:1.75; }
.twseo-body p { margin:0 0 14px; }
.twseo-faq { border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; margin-bottom:10px; background:#fff; }
.twseo-faq summary { padding:15px 18px; font-weight:700; color:#0f172a; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.twseo-faq summary::-webkit-details-marker { display:none; }
.twseo-faq summary::after { content:'+'; font-size:1.3rem; color:#10b981; }
.twseo-faq[open] summary::after { content:'\2212'; }
.twseo-faq p { padding:0 18px 16px; color:#475569; font-size:.95rem; line-height:1.65; margin:0; }
</style>
<section>
    <h2>Wozu dient der Favicon Tester?</h2>
    <div class="twseo-body">
        <p>Das Favicon ist das kleine Icon im Browser-Tab, im Lesezeichen, neben dem Domainnamen in der Google-Suche und – als Apple-Touch-Icon – auf dem Homescreen von iPhone und Android. Fehlt es oder ist es falsch eingebunden, wirkt eine Seite schnell unfertig. Dieser <strong>Favicon Tester</strong> lädt deine Website, findet alle deklarierten Icons, das Web-App-Manifest und die <code>theme-color</code>, prüft jede Datei auf Erreichbarkeit und Maße und zeigt in echten Vorschauen, wie das Icon im hellen und dunklen Browser-Tab, auf dem iPhone, auf Android und in den Google-Ergebnissen aussieht.</p>
        <p>Im Modus <strong>„Eigenes Bild testen"</strong> lädst du ein Logo hoch und bekommst – komplett im Browser, ohne Upload – einen fertigen Favicon-Pack in allen wichtigen Größen samt Einbau-Code. So siehst du vor dem Live-Gang, wie dein Icon überall wirkt.</p>
    </div>
</section>
<section>
    <h2>Häufige Fragen</h2>
    <details class="twseo-faq"><summary>Welche Favicon-Größen brauche ich wirklich?</summary><p>Für moderne Seiten reichen drei Bausteine: ein <code>favicon.ico</code> (oder ein 32×32-PNG) für Browser-Tabs, ein <code>apple-touch-icon.png</code> in 180×180 für iOS und ein Web-App-Manifest mit 192×192- und 512×512-Icons für Android und die Installierbarkeit als PWA. Ein zusätzliches SVG-Favicon hält den Tab auf jedem Display gestochen scharf.</p></details>
    <details class="twseo-faq"><summary>Warum sieht mein Favicon auf dem iPhone unscharf aus?</summary><p>Ohne <code>apple-touch-icon</code> nimmt iOS einen verkleinerten Screenshot der Seite. Lege ein 180×180-PNG mit deinem Logo an und binde es per <code>&lt;link rel="apple-touch-icon"&gt;</code> ein – dann sieht der Homescreen-Eintrag aus wie eine echte App.</p></details>
    <details class="twseo-faq"><summary>Werden meine Daten gespeichert?</summary><p>Nein. Beim URL-Check laden wir nur die öffentliche Startseite und ihre Icon-Dateien, um sie zu prüfen – es wird nichts gespeichert. Der Bild-Modus läuft vollständig in deinem Browser; das hochgeladene Bild verlässt dein Gerät nie.</p></details>
    <details class="twseo-faq"><summary>Mein Favicon ändert sich nicht – woran liegt das?</summary><p>Browser cachen Favicons sehr aggressiv. Nach einer Änderung hilft ein harter Reload, ein neuer Dateiname (z. B. <code>favicon.v2.ico</code>) oder auf dem Handy: die als Web-App gespeicherte Seite löschen und neu hinzufügen.</p></details>
</section>
</div>
@verbatim
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[
{"@type":"Question","name":"Welche Favicon-Größen brauche ich wirklich?","acceptedAnswer":{"@type":"Answer","text":"Ein favicon.ico oder 32x32-PNG für Browser-Tabs, ein apple-touch-icon.png in 180x180 für iOS und ein Web-App-Manifest mit 192x192- und 512x512-Icons für Android und PWA. Ein SVG-Favicon hält den Tab zusätzlich scharf."}},
{"@type":"Question","name":"Warum sieht mein Favicon auf dem iPhone unscharf aus?","acceptedAnswer":{"@type":"Answer","text":"Ohne apple-touch-icon nimmt iOS einen verkleinerten Screenshot der Seite. Ein 180x180-PNG mit dem Logo, eingebunden per link rel=apple-touch-icon, lässt den Homescreen-Eintrag wie eine echte App aussehen."}},
{"@type":"Question","name":"Werden meine Daten gespeichert?","acceptedAnswer":{"@type":"Answer","text":"Nein. Beim URL-Check wird nur die öffentliche Startseite samt Icon-Dateien geladen und geprüft, nichts gespeichert. Der Bild-Modus läuft vollständig im Browser."}},
{"@type":"Question","name":"Mein Favicon ändert sich nicht – woran liegt das?","acceptedAnswer":{"@type":"Answer","text":"Browser cachen Favicons stark. Ein harter Reload, ein neuer Dateiname oder das Neu-Hinzufügen der Web-App auf dem Handy erzwingt das neue Icon."}}
]}
</script>
@endverbatim
@endsection