ここに入力したHTMLソースを難読化します。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>難読化されたHTMLの実行</title>
    <!-- Tailwind CSSを読み込み、モダンなデザインを適用 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Interフォントを適用 */
        body {
            font-family: 'Inter', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
    <div class="bg-white p-8 rounded-lg shadow-xl max-w-2xl w-full">
        <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">難読化されたHTMLの表示</h1>
        <p class="text-gray-600 mb-6 text-center">
            以下に、JavaScriptによって動的に挿入されたHTMLコンテンツが表示されます。
        </p>

        <!-- ここに難読化されたHTMLが挿入されます -->
        <div id="dynamic-content-area" class="border-2 border-dashed border-gray-300 p-6 rounded-md bg-gray-50 text-gray-700 overflow-auto">
            <p class="text-center text-gray-500">コンテンツを読み込み中...</p>
        </div>

        <div class="mt-8 text-center text-sm text-gray-500">
            <p>このページは、JavaScriptでHTML文字列をDOMに挿入する例です。</p>
        </div>
    </div>

    <script>
        // ここに難読化されたHTMLコンテンツ（JavaScriptの文字列として）を貼り付けます。
        // 例として、シンプルなHTML文字列を定義しています。
        // 実際の難読化されたコードは、通常、もっと複雑なJavaScriptの形式で、
        // この 'obfuscatedHtmlString' 変数に代入されるような形になるでしょう。
        // あるいは、特定の関数を呼び出すことでHTML文字列が生成される場合もあります。
        const obfuscatedHtmlString = `
            <div class="p-4 bg-blue-100 rounded-lg shadow-md mb-4">
                <h2 class="text-xl font-semibold text-blue-800">こんにちは、動的に生成されたコンテンツです！</h2>
                <p class="text-blue-700 mt-2">これは、JavaScriptによってこのページに挿入されました。</p>
                <ul class="list-disc list-inside mt-3 text-blue-700">
                    <li>難読化されたHTMLは通常、読み取りにくい形式です。</li>
                    <li>しかし、ブラウザはそれを解析して表示できます。</li>
                </ul>
            </div>
            <p class="text-gray-700">難読化された元のHTMLは、この`obfuscatedHtmlString`変数の中身に相当します。</p>
        `;

        // ページが完全に読み込まれた後に実行されるようにします
        window.onload = function() {
            // コンテンツを挿入する要素を取得
            const contentArea = document.getElementById('dynamic-content-area');

            if (contentArea) {
                // 取得したHTML文字列をinnerHTMLとして設定
                // これにより、文字列がHTMLとして解析され、DOMに挿入されます。
                contentArea.innerHTML = obfuscatedHtmlString;
                console.log("難読化されたHTMLコンテンツが挿入されました。");
            } else {
                console.error("ID 'dynamic-content-area' を持つ要素が見つかりませんでした。");
            }
        };
    </script>
</body>
</html>