🛡️ Mail Guard

Anti-Spam E-Mail Protection mit OctaPass Captcha

Mail Guard schützt E-Mail-Adressen vor Spam-Bots mit dem OctaPass Farb-Captcha. Ein Klick, DSGVO-konform, keine externen Abhängigkeiten.

✨ Features

• 🚫 Anti-Spam – E-Mail-Adresse nicht im Quellcode sichtbar
• ⚡ Ein Klick – Minimale Friction für echte Besucher
• 🔒 DSGVO-konform – Keine Cookies, keine externen Requests
• 📦 Zero Dependencies – Nur PHP, kein Framework nötig
• 🎨 Anpassbar – Farben passen sich deinem Design an

🚀 Wie funktioniert es?

OctaPass ist ein Farb-Captcha das auf einem simplen Prinzip basiert:

1. Die E-Mail wird Base64-kodiert gespeichert
2. Besucher sehen 5 Farbbuttons und die Aufforderung "Klicke auf ROT"
3. Bei richtigem Klick erscheint die E-Mail
4. Bots sehen nur unleserlichen Code

Das Captcha erfordert deutsches Sprachverständnis + visuelles Mapping – eine Kombination die 99% der automatisierten Scraper nicht beherrschen.

📦 Installation

Option 1: Generator nutzen (empfohlen)

Besuche den Mail Guard Generator und generiere deinen Code mit wenigen Klicks.

Der Generator bietet zwei Varianten:

Variante	Beschreibung	Geeignet für
🐘 PHP-Version	Farben werden bei jedem Seitenaufruf neu gemischt	WordPress, Joomla, eigene PHP-Projekte
⚡ HTML/JS-Version	Funktioniert ohne PHP	Statische HTML-Seiten, Squarespace, Wix, Webflow

Option 2: Manuell einbinden (PHP)

<?php
// Mail Guard mit OctaPass Captcha
$mailGuardEmail = 'deine@email.de';
$encodedEmail = base64_encode($mailGuardEmail);
$octapassColors = [
    'rot' => '#e74c3c',
    'blau' => '#3498db', 
    'grün' => '#27ae60',
    'gelb' => '#f1c40f',
    'lila' => '#9b59b6'
];
$colorNames = array_keys($octapassColors);
shuffle($colorNames);
$targetColor = $colorNames[0];
?>
<div id="octapass-captcha">
    <div style="font-size: 14px; margin-bottom: 8px;">
        🔒 Klicke auf <strong style="text-transform: uppercase;"><?php echo $targetColor; ?></strong>:
    </div>
    <div style="display: flex; gap: 6px;">
        <?php foreach($colorNames as $name): ?>
        <button type="button" onclick="checkOctaPass('<?php echo $name; ?>','<?php echo $targetColor; ?>','<?php echo $encodedEmail; ?>')" style="width: 28px; height: 28px; background: <?php echo $octapassColors[$name]; ?>; border: 2px solid #444; border-radius: 5px; cursor: pointer;"></button>
        <?php endforeach; ?>
    </div>
</div>
<a id="octapass-email" href="" style="display: none;"></a>
<script>
function checkOctaPass(c,t,e){
    if(c===t){
        var m=atob(e);
        var el=document.getElementById('octapass-email');
        el.href='mailto:'+m;
        el.textContent=m;
        el.style.display='inline';
        document.getElementById('octapass-captcha').style.display='none';
    }else{
        event.target.style.transform='scale(0.85)';
        setTimeout(function(){event.target.style.transform='';},120);
    }
}
</script>

Option 3: HTML/JS-Version (ohne PHP)

Wenn du keine PHP-Website hast, nutze diese Version:

<!-- Mail Guard - HTML/JS-Version -->
<div id="octapass-captcha">
    <div style="font-size: 14px; margin-bottom: 8px;">
        🔒 Klicke auf <strong>GELB</strong>:
    </div>
    <div style="display: flex; gap: 6px;">
        <button type="button" onclick="checkOctaPass('grün')" style="width: 28px; height: 28px; background: #27ae60; border: 2px solid #444; border-radius: 5px; cursor: pointer;"></button>
        <button type="button" onclick="checkOctaPass('rot')" style="width: 28px; height: 28px; background: #e74c3c; border: 2px solid #444; border-radius: 5px; cursor: pointer;"></button>
        <button type="button" onclick="checkOctaPass('gelb')" style="width: 28px; height: 28px; background: #f1c40f; border: 2px solid #444; border-radius: 5px; cursor: pointer;"></button>
        <button type="button" onclick="checkOctaPass('blau')" style="width: 28px; height: 28px; background: #3498db; border: 2px solid #444; border-radius: 5px; cursor: pointer;"></button>
        <button type="button" onclick="checkOctaPass('lila')" style="width: 28px; height: 28px; background: #9b59b6; border: 2px solid #444; border-radius: 5px; cursor: pointer;"></button>
    </div>
</div>
<a id="octapass-email" href="" style="display: none;"></a>
<script>
var _oc='gelb',_oe='ZGVpbmVAZW1haWwuZGU='; // Base64-kodierte E-Mail
function checkOctaPass(c){
    if(c===_oc){
        var m=atob(_oe);
        var el=document.getElementById('octapass-email');
        el.href='mailto:'+m;
        el.textContent=m;
        el.style.display='inline';
        document.getElementById('octapass-captcha').style.display='none';
    }else{
        event.target.style.transform='scale(0.85)';
        setTimeout(function(){event.target.style.transform='';},120);
    }
}
</script>

Hinweis: Bei der HTML/JS-Version ist die Farbreihenfolge fix. Nutze den Generator um eine neue Reihenfolge zu erhalten.

🎯 Anwendungsfälle

• Impressum
• Footer
• Kontaktseiten
• Überall wo E-Mail-Adressen öffentlich stehen

🛡️ Sicherheit

Mail Guard schützt gegen:

• ✅ Automatisierte E-Mail-Harvester
• ✅ Regex-basierte Scraper
• ✅ Simple Bots

Mail Guard schützt nicht gegen:

• ❌ Gezielte Angriffe mit KI + Headless Browser
• ❌ Manuelles Abschreiben

Aber: 99% aller Spam-Bots sind simpel. Mail Guard stoppt diese effektiv.

🔧 Anpassungen

Andere Farben

$octapassColors = [
    'orange' => '#e67e22',
    'türkis' => '#1abc9c',
    'pink' => '#e91e63',
    // ...
];

Inline-Variante (für "E-Mail: [captcha]")

<span id="octapass-captcha" style="display: inline-flex; align-items: center; gap: 8px;">
    <!-- ... -->
</span>

Mit PHP-Konstante

$mailGuardEmail = COMPANY_EMAIL; // Statt hartcodierter E-Mail

📄 Lizenz

MIT License – Nutze es frei für private und kommerzielle Projekte.

🤝 Contributing

Pull Requests willkommen! Ideen:

• Weitere Sprachen (EN, FR, ...)
• Accessibility-Verbesserungen
• Zusätzliche Captcha-Varianten (Formen, Icons, ...)

---

Made with ❤️ by Wolfram Consult