AI 교육자료 공개 전 실행 점검

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI 교육자료 공개 전 실행 점검</title>
<style>
*{box-sizing:border-box}body{margin:0;background:#edf4ff;color:#162a45;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;line-height:1.55}.page{width:min(760px,calc(100% - 32px));margin:34px auto}.head{padding:30px;border-radius:24px 24px 0 0;background:#155dc2;color:#fff}.head span{font-weight:900;color:#d4e6ff}.head h1{margin:8px 0;font-size:clamp(30px,5vw,44px)}.head p{margin:0;color:#e3efff}.sheet{padding:24px;border:1px solid #cfdced;border-top:0;border-radius:0 0 24px 24px;background:#fff}.item{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-bottom:1px solid #e4eaf2}.item:last-of-type{border-bottom:0}.item input{width:24px;height:24px;margin:2px 0;accent-color:#167249}.item input:focus-visible,.publish:focus-visible{outline:3px solid #f0a600;outline-offset:3px}.item strong,.item span{display:block}.item span{margin-top:3px;color:#5a6b80}.progress{height:12px;margin:22px 0 12px;border-radius:999px;background:#e6ecf3;overflow:hidden}.progress span{display:block;width:0;height:100%;background:#167249;transition:width .2s}.status{font-weight:900;color:#155dc2}.publish{width:100%;min-height:56px;margin-top:18px;border:0;border-radius:15px;background:#b9c5d5;color:#fff;font:inherit;font-weight:950}.publish.ready{background:#167249;cursor:pointer}@media(max-width:480px){.page{margin:16px auto}.head,.sheet{padding:22px}}
</style>
</head>
<body>
<main class="page">
  <header class="head"><span>Vibe Studio → AI 교육자료</span><h1>공개 전에는 직접 실행합니다</h1><p>업로드했다는 기억이 아니라 현재 공개할 결과를 확인하세요.</p></header>
  <section class="sheet">
    <label class="item"><input type="checkbox"><span><strong>실행</strong><span>핵심 행동·피드백·다시 시작을 눌렀습니다.</span></span></label>
    <label class="item"><input type="checkbox"><span><strong>모바일</strong><span>375px에서 가로로 밀리지 않습니다.</span></span></label>
    <label class="item"><input type="checkbox"><span><strong>개인정보</strong><span>학생 실명·사진·연락처·건강 정보가 없습니다.</span></span></label>
    <label class="item"><input type="checkbox"><span><strong>외부 연결</strong><span>원치 않는 전송·새 창·다운로드가 없습니다.</span></span></label>
    <label class="item"><input type="checkbox"><span><strong>다른 사용자</strong><span>시크릿 창에서 공개 링크를 실행했습니다.</span></span></label>
    <div class="progress" aria-hidden="true"><span></span></div><p class="status" aria-live="polite">0 / 5 확인</p>
    <button class="publish" type="button" disabled>확인 뒤 공개</button>
  </section>
</main>
<script>
const checks=[...document.querySelectorAll("input")],bar=document.querySelector(".progress span"),status=document.querySelector(".status"),publish=document.querySelector(".publish");checks.forEach(check=>check.addEventListener("change",()=>{const count=checks.filter(item=>item.checked).length;bar.style.width=`${count/checks.length*100}%`;status.textContent=count===checks.length?"5 / 5 확인 · 공개할 수 있습니다.":`${count} / 5 확인`;publish.disabled=count!==checks.length;publish.classList.toggle("ready",count===checks.length);publish.textContent=count===checks.length?"내 AI 교육자료 공개":"확인 뒤 공개";}));publish.addEventListener("click",()=>{status.textContent="공개 흐름 준비 완료 · 실제 연수에서는 내 자료 링크를 시크릿 창에서 다시 엽니다.";});
</script>
</body>
</html>