Update index.html

index.html

@@ -121,6 +121,66 @@ tr:last-child td{border-bottom:none;}
     <div class="drag-hint"><b>방법 1.</b> 위 버튼을 브라우저 북마크바로 드래그 &nbsp;|&nbsp; <b>방법 2.</b> 북마크바 안 보이면 <b>Ctrl+Shift+B</b></div>
   </div>
 </div>
+<!-- 얼리 액세스 -->
+<div style="max-width:800px;margin:0 auto 32px;padding:0 20px;">
+<div style="background:linear-gradient(135deg,#5856D6 0%,#4f46e5 100%);border-radius:16px;padding:32px 28px;color:#fff;text-align:center;position:relative;overflow:hidden;">
+  <div style="position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06);"></div>
+  <div style="position:absolute;bottom:-60px;left:-30px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04);"></div>
+  <div style="position:relative;z-index:1;">
+    <div style="font-size:13px;font-weight:600;opacity:.85;margin-bottom:6px;letter-spacing:1px;">EARLY ACCESS</div>
+    <h3 style="font-size:20px;font-weight:900;margin-bottom:8px;">크롬 확장 버전 얼리 액세스</h3>
+    <p style="font-size:13px;opacity:.8;line-height:1.7;margin-bottom:20px;">크롬 웹 스토어 출시 시 가장 먼저 알려드립니다.<br>얼리 액세스 사용자에게는 <b>프리미엄 기능 우선 체험</b> 기회를 드립니다.</p>
+    <div id="wl-form" style="max-width:440px;margin:0 auto;">
+      <div style="display:flex;gap:8px;margin-bottom:8px;">
+        <input type="email" id="wl-email" placeholder="이메일 주소" style="flex:1;padding:12px 14px;border:2px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:14px;outline:none;font-family:inherit;" onfocus="this.style.borderColor='rgba(255,255,255,.5)'" onblur="this.style.borderColor='rgba(255,255,255,.25)'">
+        <button onclick="submitWaitlist()" style="padding:12px 24px;background:#fff;color:#5856D6;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s;" onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">등록하기</button>
+      </div>
+      <div style="display:flex;gap:8px;max-width:300px;margin:0 auto;">
+        <select id="wl-interest" style="flex:1;padding:9px 12px;border:1.5px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;outline:none;font-family:inherit;cursor:pointer;">
+          <option value="" style="color:#333;">관심 분야 (선택)</option>
+          <option value="general" style="color:#333;">일반 사용</option>
+          <option value="business" style="color:#333;">비즈니스/업무</option>
+          <option value="developer" style="color:#333;">개발/기술</option>
+          <option value="creator" style="color:#333;">콘텐츠 제작</option>
+          <option value="research" style="color:#333;">연구/분석</option>
+          <option value="enterprise" style="color:#333;">기업 도입 검토</option>
+        </select>
+      </div>
+    </div>
+    <div id="wl-result" style="margin-top:12px;font-size:13px;font-weight:600;display:none;"></div>
+
+  </div>
+</div>
+</div>
+
+<script>
+async function submitWaitlist(){
+  var email=document.getElementById('wl-email').value.trim();
+  if(!email||!email.includes('@')){document.getElementById('wl-result').textContent='⚠️ 유효한 이메일을 입력해주세요.';document.getElementById('wl-result').style.display='block';return;}
+  
+  var interest=(document.getElementById('wl-interest')||{}).value||'';
+  try{
+    var r=await fetch('/api/waitlist',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,interest:interest,source:'landing'})});
+    var d=await r.json();
+    var el=document.getElementById('wl-result');
+    if(d.status==='ok'){
+      el.textContent='🎉 등록 완료! 출시 시 가장 먼저 알려드리겠습니다.';el.style.color='#6ee7b7';
+      document.getElementById('wl-form').style.display='none';
+    }else if(d.status==='already'){
+      el.textContent='✅ '+d.message;el.style.color='#fcd34d';
+    }else{
+      el.textContent='⚠️ '+(d.error||'오류가 발생했습니다.');el.style.color='#fca5a5';
+    }
+    el.style.display='block';
+  }catch(e){
+    document.getElementById('wl-result').textContent='⚠️ 서버 연결 실패. 잠시 후 다시 시도해주세요.';
+    document.getElementById('wl-result').style.display='block';
+  }
+}
+
+document.getElementById('wl-email').addEventListener('keydown',function(e){if(e.key==='Enter')submitWaitlist();});
+</script>
+
 <div class="sec-title">⚡ 12가지 AI 도구</div>
 <div class="feat-grid">
   <div class="feat"><div class="feat-ic">📝</div><div><h4>요약</h4><p>현재 페이지를 3줄로 요약</p></div></div>