<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML → JS(Base64) 変換ツール</title>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
    textarea { width: 100%; height: 200px; margin: 10px 0; font-family: monospace; }
    .output { background: #fff; padding: 10px; border: 1px solid #ccc; }
    .button { padding: 10px 20px; margin: 5px 0; }
  </style>
</head>
<body>
  <h2>🔐 HTML → JavaScript(Base64) 変換ツール</h2>

  <label>📄 HTMLファイル選択：</label>
  <input type="file" id="fileInput"><br><br>

  <label>✏️ HTMLを直接貼り付け：</label>
  <textarea id="htmlInput" placeholder="ここにHTMLを貼り付けるか、ファイルを選んでください"></textarea>

  <button class="button" onclick="convert()">🔁 変換する</button>

  <h3>📦 変換されたJSコード（Blogger等に貼り付けOK）</h3>
  <textarea class="output" id="jsOutput" readonly></textarea>

  <script>
    document.getElementById("fileInput").addEventListener("change", function () {
      const reader = new FileReader();
      reader.onload = function () {
        document.getElementById("htmlInput").value = reader.result;
      };
      reader.readAsText(this.files[0]);
    });

    function convert() {
      const html = document.getElementById("htmlInput").value;
      const base64 = btoa(unescape(encodeURIComponent(html)));
      const jsCode = `
<!-- ▼以下を埋め込み先にコピペ ▼ -->
<div id="myApp"></div>
<script>
  const data = "${base64}";
  const html = decodeURIComponent(escape(atob(data)));
  document.getElementById("myApp").innerHTML = html;
</script>`;
      document.getElementById("jsOutput").value = jsCode.trim();
    }
  </script>
</body>
</html>
