{% extends "base.html" %}
{% block content %}
<h2 class="text-2xl font-bold mb-4">📚 인터넷 강의 자동 넘기기</h2>

<p class="mb-2">
  아래 스크립트는 <strong>경고창(alert, confirm) 형식으로 다음 강의 안내가 나오는 경우에만</strong> 사용 가능합니다.
</p>
<p class="mb-4">
  강의 팝업 창에서 <strong>F12 → Console 탭</strong>을 연 뒤, 아래 코드를 복사해 붙여넣고 <strong>Enter</strong>를 눌러주세요.
</p>

<textarea id="codeBox" rows="20" class="w-full font-mono bg-slate-50 border border-slate-200 rounded-md p-3">
function overrideIframeAlertAndConfirm(iframe) {
  try {
    const iframeWindow = iframe?.contentWindow;
    if (iframeWindow) {
      iframeWindow.alert = function(message) {
        console.log('[자동 OK] alert 메시지 자동 무시됨:', message);
      };
      iframeWindow.confirm = function(message) {
        console.log('[자동 OK] confirm 메시지 자동 확인됨:', message);
        return true;
      };
      console.log('[적용됨] iframe alert 및 confirm 자동 처리기 작동 중...');
    }
  } catch (e) {
    console.warn('[경고] iframe 접근 실패:', e);
  }
}

const iframe = document.querySelector('#learningFrame');
overrideIframeAlertAndConfirm(iframe);

iframe.addEventListener('load', () => {
  console.log('[감지] iframe 새로 로드됨, alert/confirm 자동 처리 다시 적용');
  overrideIframeAlertAndConfirm(iframe);
});
</textarea>

<div class="my-4">
  <button onclick="copyCode()" class="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700">📋 코드 복사하기</button>
</div>

<script>
function copyCode() {
  const codeBox = document.getElementById("codeBox");
  codeBox.select();
  document.execCommand("copy");
  alert("✅ 복사되었습니다! 팝업창 Console(F12)에 붙여넣고 실행하세요.");
}
</script>

<hr class="my-10">
<h3 class="text-xl font-semibold mb-3">📌 사용 방법 요약</h3>
<ol class="list-decimal pl-6 space-y-1">
  <li>강의 수강 시 팝업 창이 열리면 <strong>F12</strong> 키를 눌러 개발자 도구를 엽니다.</li>
  <li><strong>Console</strong> 탭을 클릭합니다.</li>
  <li>위 코드를 복사하여 붙여넣고 <strong>Enter</strong>를 누릅니다.</li>
  <li>이후 강의 내 <code>alert</code> 또는 <code>confirm</code> 창이 자동으로 처리됩니다.</li>
</ol>
{% endblock %}