@extends('layouts.app')
@section('title', 'Passphrase Generator – Sichere Passphrases erstellen | kotsch.tech')
@section('meta_description', 'Passphrase Generator online: Merkbare Passwortsätze aus deutschen und englischen Wörtern. Zahlen, Sonderzeichen und mehr – 100% lokal im Browser.')
@section('meta_extra')
<meta name="keywords" content="Passphrase Generator, Passphrase erstellen, Passwort merkbar, Diceware, Passwortsatz, sichere Passphrase">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.pp-output { font-family:'JetBrains Mono',monospace; font-size:1.3rem; font-weight:700; word-break:break-all; padding:20px; background:var(--bg); border:2px solid var(--line); border-radius:var(--radius-sm); line-height:1.6; min-height:80px; cursor:pointer; transition:border-color 0.15s; }
.pp-output:hover { border-color:var(--accent); }
.word-chip { display:inline-block; padding:2px 6px; border-radius:4px; }
.word-chip.w0 { background:#dbeafe; }
.word-chip.w1 { background:#dcfce7; }
.word-chip.w2 { background:#fce7f3; }
.word-chip.w3 { background:#fef9c3; }
.word-chip.w4 { background:#ede9fe; }
.sep-chip { color:var(--accent); font-weight:900; }
.hist-row { font-family:'JetBrains Mono',monospace; font-size:0.85rem; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); margin-bottom:6px; display:flex; align-items:center; gap:10px; word-break:break-all; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-shield-alt"></i> Security</span>
        <h1 class="tool-h1">Passphrase<span>generator.</span></h1>
        <p class="tool-sub">Merkbare Passwortsätze aus echten Wörtern – sicherer als zufällige Zeichen. 100% lokal.</p>
    </div>

    <div class="t-panel">
        <div class="t-copy-wrap" style="margin-bottom:10px">
            <div class="pp-output" id="pp-out" onclick="copyPhrase()" title="Klicken zum Kopieren"></div>
            <button class="t-copy-btn" onclick="copyPhrase()"><i class="fas fa-copy"></i></button>
        </div>
        <div class="t-strength-bar" style="margin-bottom:6px">
            <div class="t-strength-fill" id="pp-fill"></div>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px">
            <span id="pp-strength" style="font-size:0.82rem;font-weight:700;color:var(--muted)">–</span>
            <span id="pp-entropy" style="font-size:0.75rem;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:#065f46;font-weight:900"></span>
        </div>

        <div class="t-toggle-row" style="border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px">
            <div><span style="font-weight:700">Wörter</span><span id="word-count-val" style="margin-left:10px;color:var(--accent);font-weight:900;font-size:1.1rem">4</span></div>
            <input type="range" class="t-range" id="word-count" min="3" max="8" value="4" oninput="document.getElementById('word-count-val').textContent=this.value;generate()">
        </div>

        <div class="t-field">
            <label class="t-label">Sprache / Wortliste</label>
            <select class="t-select" id="lang" onchange="generate()">
                <option value="de">Deutsch (500+ Wörter)</option>
                <option value="en">Englisch (500+ Wörter)</option>
                <option value="mix">Mix (DE + EN)</option>
            </select>
        </div>

        <div class="t-field">
            <label class="t-label">Trennzeichen</label>
            <div style="display:flex;gap:6px;flex-wrap:wrap" id="sep-chips">
                <button class="t-btn ghost sm active" onclick="setSep('-',this)">Bindestrich -</button>
                <button class="t-btn ghost sm" onclick="setSep('.',this)">Punkt .</button>
                <button class="t-btn ghost sm" onclick="setSep('_',this)">Unterstrich _</button>
                <button class="t-btn ghost sm" onclick="setSep(' ',this)">Leerzeichen</button>
                <button class="t-btn ghost sm" onclick="setSep('',this)">Kein</button>
            </div>
        </div>

        <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
            <label for="opt-cap">Erstes Zeichen groß</label>
            <input type="checkbox" id="opt-cap" class="t-check" checked onchange="generate()">
        </div>
        <div class="t-toggle-row" style="border-bottom:1px solid var(--line)">
            <label for="opt-num">Zahl hinzufügen</label>
            <input type="checkbox" id="opt-num" class="t-check" onchange="generate()">
        </div>
        <div class="t-toggle-row">
            <label for="opt-sym">Sonderzeichen hinzufügen</label>
            <input type="checkbox" id="opt-sym" class="t-check" onchange="generate()">
        </div>

        <div style="display:flex;gap:10px;margin-top:20px">
            <button class="t-btn full" onclick="generate()"><i class="fas fa-rotate-right"></i> Neue Passphrase</button>
        </div>
    </div>

    <div class="t-panel">
        <div class="t-panel-title"><i class="fas fa-history"></i> Verlauf</div>
        <div id="pp-history"></div>
        <button class="t-btn ghost sm" onclick="history=[]; renderHistory()" style="margin-top:8px"><i class="fas fa-trash"></i> Leeren</button>
    </div>

    <div class="t-panel" style="background:var(--accent-soft);border-color:var(--accent)">
        <div style="font-size:0.82rem;color:#065f46"><i class="fas fa-info-circle"></i> <strong>Warum Passphrases?</strong> 4 zufällige Wörter haben mehr Entropie als ein kurzes komplexes Passwort – und sind viel leichter zu merken. Alle Berechnungen erfolgen lokal.</div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const DE_WORDS = ['anker','atlas','bach','birke','blatt','boot','brücke','burg','datum','decke','delta','dorf','echo','eiche','eimer','energie','erde','feder','feuer','filter','firma','fluss','fokus','form','frost','fuchs','gabel','garten','glas','gleis','grad','grenze','gurt','hafen','hand','herz','hilfe','honig','hügel','hütte','idee','igel','insel','joker','kabel','karte','kegel','kette','kiefer','kiste','kitze','klang','klima','klippe','knopf','köche','kraft','kran','kreis','kreuz','kunst','lachs','lampe','laptop','laser','licht','liste','lokal','löwe','luft','magnet','mantel','markt','maske','mauer','meile','meister','messer','minute','mobil','mond','motor','mücke','nacht','nadel','natur','netz','niveau','nord','notiz','nuss','ofen','option','orbit','otter','palme','pappe','park','pegel','pfad','pfeil','pferd','phase','pinsel','pixel','plan','platte','platz','presse','probe','puls','punkt','quelle','radar','rahmen','rang','raum','regen','reich','reihe','reise','riff','ritze','rolle','röhre','rote','rucksack','ruder','sand','säge','sattel','schiff','schloss','schnee','schrott','schulter','schwarm','see','seife','seite','signal','silber','sinn','sonne','spiegel','sport','spross','staat','stab','stamm','storch','strahl','strom','sturm','tabelle','tal','tempo','tiger','titan','ton','traum','truhe','tunnel','turm','ufer','ulme','umlauf','urban','vektor','velo','vision','vogel','volke','wand','wasser','watte','welle','welt','werk','wolke','wort','wurzel','xenon','yacht','yoga','zebra','zeder','zeile','zelt','zenit','ziel','ziegel','zone','zufall'];

const EN_WORDS = ['anchor','arrow','atlas','badge','beach','bench','blade','blast','bloom','board','brave','brick','bridge','brook','brush','cabin','cable','carry','castle','chain','chalk','chess','cliff','clock','cloud','coast','coral','craft','crane','cross','crown','curve','cycle','delta','dense','depth','ditch','dome','draft','drift','drive','eagle','earth','ember','empty','epoch','error','event','field','flame','flash','fleet','float','flute','focus','force','forge','frame','frost','glade','glass','globe','gloom','gloss','grace','graph','grasp','gravel','green','greet','grove','guide','gulch','haven','heart','hedge','helps','herbs','hinge','hover','index','inlet','ivory','joker','judge','kraft','label','lance','layer','lemon','light','limit','liner','magic','manor','maple','march','metal','might','minor','misty','model','month','moose','mount','nexus','night','noble','north','notes','novel','nymph','ocean','olive','orbit','order','otter','oxide','paint','panel','patch','pearl','perch','phase','pilot','pixel','plain','plank','plant','plaza','plume','point','polar','pouch','power','press','prime','probe','proof','pulse','quest','quote','radar','range','rapid','ratio','reach','realm','relay','remix','ridge','river','rocky','rouge','route','royal','rusty','scale','scout','servo','shade','shark','shell','shift','shine','shore','skill','slack','slate','slope','small','smoke','solid','south','space','spark','speed','spine','sport','spray','stack','stamp','stark','state','steel','steep','stern','stone','storm','straw','street','strip','surge','swift','table','tempo','terms','tiger','title','torch','tower','track','trade','trail','train','trait','trend','tribe','trick','trust','truth','tulip','ultra','unity','upper','urban','vapor','vault','viola','viral','vista','voice','voter','watch','water','world','worth','yeast','yield','zebra','zenith','zonal'];

let sep = '-';
let ppHistory = [];
let currentPhrase = '';

function setSep(s, btn) {
    sep = s;
    document.querySelectorAll('#sep-chips .t-btn').forEach(b => b.style.background = '');
    btn.style.background = 'var(--accent-soft)';
    btn.style.borderColor = 'var(--accent)';
    btn.style.color = 'var(--accent)';
    generate();
}

function getWordList() {
    const lang = document.getElementById('lang').value;
    if (lang === 'de') return DE_WORDS;
    if (lang === 'en') return EN_WORDS;
    return [...DE_WORDS, ...EN_WORDS];
}

function pick(arr) { return arr[Math.floor(Math.random()*arr.length)]; }

function generate() {
    const n = parseInt(document.getElementById('word-count').value);
    const words = getWordList();
    const cap = document.getElementById('opt-cap').checked;
    const addNum = document.getElementById('opt-num').checked;
    const addSym = document.getElementById('opt-sym').checked;

    let parts = Array.from({length:n}, () => pick(words));
    if (cap) parts = parts.map(w => w.charAt(0).toUpperCase()+w.slice(1));

    let phrase = parts.join(sep);
    if (addNum) phrase += sep + (Math.floor(Math.random()*90)+10);
    if (addSym) phrase += '!@#$%&*'[Math.floor(Math.random()*7)];

    currentPhrase = phrase;
    const entropy = Math.round(n * Math.log2(words.length) + (addNum?7:0) + (addSym?3:0));
    const colors = ['#ef4444','#f97316','#eab308','#10b981','#059669'];
    const labels = ['Schwach','Mittel','Gut','Stark','Sehr stark'];
    const idx = Math.min(4, Math.floor(entropy/20));
    const pct = Math.min(100, entropy*1.2);

    document.getElementById('pp-fill').style.width = pct+'%';
    document.getElementById('pp-fill').style.background = colors[idx];
    document.getElementById('pp-strength').textContent = 'Stärke: '+labels[idx];
    document.getElementById('pp-entropy').textContent = entropy+' Bit Entropie';

    // Render with colored words
    const chips = ['w0','w1','w2','w3','w4'];
    const html = parts.map((w,i) => `<span class="word-chip ${chips[i%5]}">${w}</span>`).join(`<span class="sep-chip">${sep||''}</span>`);
    const extra = (addNum ? `<span class="sep-chip">${sep}</span><span style="color:#7c3aed;font-weight:900">${phrase.match(/\d+/)?.[0]||''}</span>` : '') + (addSym ? `<span style="color:#dc2626;font-weight:900">${phrase.slice(-1)}</span>` : '');
    document.getElementById('pp-out').innerHTML = html + extra;

    addHistory(phrase);
}

function addHistory(phrase) {
    ppHistory.unshift(phrase);
    if (ppHistory.length > 6) ppHistory.pop();
    renderHistory();
}

function renderHistory() {
    const el = document.getElementById('pp-history');
    el.innerHTML = ppHistory.map(p => `
        <div class="hist-row">
            <span style="flex:1">${escH(p)}</span>
            <button class="t-copy-btn" style="position:static;flex-shrink:0" onclick="navigator.clipboard.writeText('${p.replace(/'/g,"\\'")}')"><i class="fas fa-copy"></i></button>
        </div>`).join('');
}

function copyPhrase() {
    if (!currentPhrase) return;
    navigator.clipboard.writeText(currentPhrase);
    const el = document.getElementById('pp-out');
    el.style.borderColor = 'var(--accent)';
    setTimeout(() => el.style.borderColor = '', 1000);
}

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

generate();
</script>

@include('tools._seo_content', ['toolSlug' => 'passphrase-generator', 'toolName' => 'Passphrase-Generator'])

@endsection