<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Obfuscator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #output {
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ccc;
            margin-top: 20px;
            font-family: monospace;
        }
        textarea {
            width: 100%;
            height: 150px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <h1>HTML Obfuscator</h1>
    <p>Gib deinen HTML-Code unten ein und klicke auf "Obfuscate", um den verschlüsselten HTML-Code zu erhalten.</p>
    
    <textarea id="input" placeholder="Gib hier deinen HTML-Code ein..."></textarea>
    <br><br>
    <button onclick="obfuscateHTML()">Obfuscate</button>
    
    <div id="output"></div>

    <script>
        // Funktion zum Ersetzen von Zeichenfolgen
        function replaceString(str) {
            const replacements = {
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;',
                '&': '&amp;'
            };
            return str.replace(/[<>"&']/g, match => replacements[match]);
        }

        // Funktion zum Ersetzen von Tags und Attributen mit zufälligen Zeichen
        function obfuscateHTML() {
            let inputHTML = document.getElementById('input').value;

            // Ersetze Tags durch zufällige Buchstaben
            inputHTML = inputHTML.replace(/<([a-zA-Z]+)([^>]*)>/g, (match, p1, p2) => {
                const obfuscatedTag = generateRandomString(5);
                return `<${obfuscatedTag}${p2}>`;
            });

            // Ersetze Attribute durch zufällige Zeichenfolgen
            inputHTML = inputHTML.replace(/([a-zA-Z-]+)=["']([^"']+)["']/g, (match, p1, p2) => {
                const obfuscatedAttr = generateRandomString(5);
                return `${obfuscatedAttr}="${replaceString(p2)}"`;
            });

            // Ersetze Textinhalte durch verschlüsselte Zeichen
            inputHTML = inputHTML.replace(/>([^<]+)</g, (match, p1) => {
                return `>${encodeBase64(p1)}<`;
            });

            // Zeige den verschlüsselten HTML-Code an
            document.getElementById('output').textContent = inputHTML;
        }

        // Funktion zum Generieren einer zufälligen Zeichenkette
        function generateRandomString(length) {
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            let result = '';
            for (let i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return result;
        }

        // Funktion zum Verschlüsseln von Text in Base64
        function encodeBase64(text) {
            return btoa(text);
        }

        // Dynamische Dekodierung des verschlüsselten HTML-Codes
        (function() {
            const encodedHTML = document.documentElement.innerHTML;
            const decodedHTML = decodeHTML(encodedHTML);
            document.documentElement.innerHTML = decodedHTML;
        })();

        // Funktion zur Dekodierung von Base64 und Rückwandlung in HTML
        function decodeHTML(encodedHTML) {
            const base64Pattern = />([^<]+)</g;
            return encodedHTML.replace(base64Pattern, (match, p1) => {
                return `>${atob(p1)}<`;
            });
        }
    </script>
</body>
</html>
