Dieses Tool ermöglicht es, einen Artikel zunächst unscharf und halbtransparent darzustellen und ihn erst nach Eingabe eines korrekten Passworts klar sichtbar zu machen.

Es besteht aus drei Bausteinen:

• CSS‑Klassen: Steuern den Unschärfe Effekt und die klare Darstellung.
• HTML‑Struktur: Trennt den geschützten Artikelbereich vom Passwortformular.
• JavaScript‑Logik: Prüft das Passwort und schaltet den Artikel frei.

Damit eignet sich das Tool ideal, um Inhalte optisch zu schützen und erst nach einer bewussten Aktion (Passworteingabe) vollständig lesbar zu machen.

🔧 1. CSS‑Effekt für „unscharf“

Füge in dein Template oder Plugin‑CSS ein:

.password-blur {
    filter: blur(6px);
    opacity: 0.5;
    pointer-events: none;
    transition: filter 0.5s ease, opacity 0.5s ease;
}

.password-clear {
    filter: none;
    opacity: 1;
    pointer-events: auto;
}

Damit wird der Artikel zunächst unscharf und halbtransparent angezeigt.

🧩 2. HTML‑Struktur

Im Plugin‑Output (z. B. in renderForm() oder direkt im Artikel‑Wrapper):

<div id="protected-article" class="password-blur">
    <!-- Hier steht dein Artikelinhalt -->
</div>

<div id="password-form" style="text-align:center;margin-top:2rem;">
    <form id="unlock-form">
        <input type="password" id="password-input" placeholder="Passwort eingeben" style="padding:0.5rem;">
        <button type="submit" style="padding:0.5rem 1rem;">Freischalten</button>
    </form>
</div>

⚙️ 3. JavaScript‑Freischaltung

Füge diesen kleinen JS‑Block hinzu (am Ende der Seite oder im Plugin):

<script>
document.getElementById('unlock-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const pw = document.getElementById('password-input').value;
    const correct = 'DEIN_PASSWORT_HIER'; // Passwort hier eintragen

    if (pw === correct) {
        document.getElementById('protected-article').classList.remove('password-blur');
        document.getElementById('protected-article').classList.add('password-clear');
        document.getElementById('password-form').style.display = 'none';
    } else {
        alert('Falsches Passwort.');
    }
});
</script>

🎨 Ergebnis

• Beim Laden der Seite ist der Artikel unscharf und halbtransparent.
• Nach Eingabe des Passworts wird er klar und vollständig sichtbar.
• Du kannst den Effekt beliebig anpassen (z. B. blur(10px) oder opacity:0.3).