도커 설정 완료
This commit is contained in:
@@ -0,0 +1,769 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>에듀픽 | 1:1 맞춤 학습 정밀 진단 리포트 & 전문 과외 매칭</title>
|
||||
|
||||
<!-- SEO Primary Meta Tags -->
|
||||
<meta name="description" content="우리 아이 학습 성향과 취약점 분석을 통한 1:1 맞춤 학습 정밀 진단 리포트 무료 신청. 검증된 명문대·베테랑 전문 선생님 매칭 및 내신·수능 솔루션.">
|
||||
<meta name="keywords" content="과외 매칭, 학습 진단 리포트, 일대일 과외, 내신 대비, 수능 과외, 초중고 과외, 공부 습관 진단">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://edupick.example.com/">
|
||||
|
||||
<!-- Open Graph / Facebook / Kakao -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://edupick.example.com/">
|
||||
<meta property="og:title" content="우리 아이 1:1 맞춤 학습 정밀 진단 리포트 무료 신청 | 에듀픽">
|
||||
<meta property="og:description" content="학년·취약과목 맞춤 진단과 전문 컨설턴트 무료 매칭. 지금 신청 시 정밀 진단 리포트 무료 증정!">
|
||||
<meta property="og:image" content="https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1200&auto=format&fit=crop&q=80">
|
||||
<meta property="og:locale" content="ko_KR">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="우리 아이 1:1 맞춤 학습 정밀 진단 리포트 무료 신청 | 에듀픽">
|
||||
<meta name="twitter:description" content="초·중·고 과목별 취약점 진단 및 1:1 맞춤 전문 선생님 매칭 서비스">
|
||||
<meta name="twitter:image" content="https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1200&auto=format&fit=crop&q=80">
|
||||
|
||||
<!-- Schema.org JSON-LD Structured Data for SEO / Rich Snippets -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "EducationalOrganization",
|
||||
"@id": "https://edupick.example.com/#organization",
|
||||
"name": "에듀픽 (EduPick)",
|
||||
"url": "https://edupick.example.com",
|
||||
"logo": "https://edupick.example.com/logo.png",
|
||||
"description": "초중고 1:1 맞춤 학습 진단 및 프리미엄 과외 매칭 전문 교육 플랫폼",
|
||||
"telephone": "+82-1588-0000",
|
||||
"areaServed": ["서울", "경기", "대구", "부산"],
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.95",
|
||||
"reviewCount": "5892"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "FAQPage",
|
||||
"@id": "https://edupick.example.com/#faq",
|
||||
"mainEntity": [
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "1:1 맞춤 학습 진단 리포트와 상담은 정말 100% 무료인가요?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "네, 현재 프로모션 기간 동안 신청하시는 모든 학부모님께 우리 아이 성향 분석, 과목별 취약점 진단 리포트 및 전문 학습 컨설턴트 1회 상담이 일체 비용 없이 무료로 제공됩니다."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "신청 후 상담 및 선생님 매칭까지 얼마나 걸리나요?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "신청서 접수 후 영업일 기준 24시간 이내에 전담 학습 매니저가 유선으로 연락을 드려 학생의 성향을 세부 파악한 뒤 최적의 선생님을 안내해 드립니다."
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
"name": "선생님 시범 수업이나 교체가 가능한가요?",
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": "첫 미팅 및 사전 테스트 후 아이와 성향이 맞지 않을 경우 100% 무상으로 다른 검증된 선생님으로 재매칭을 진행해 드립니다."
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- Font Awesome Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
blue: '#0B47B9',
|
||||
darkblue: '#072E7A',
|
||||
orange: '#FF5A00',
|
||||
accent: '#FF7D32',
|
||||
graybg: '#F8FAFC',
|
||||
mint: '#00B894'
|
||||
}
|
||||
},
|
||||
boxShadow: {
|
||||
'custom': '0 10px 25px -5px rgba(11, 71, 185, 0.1), 0 8px 10px -6px rgba(11, 71, 185, 0.05)',
|
||||
'cta': '0 12px 28px rgba(255, 90, 0, 0.35)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.custom-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.custom-scroll::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
@keyframes pulse-subtle {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
}
|
||||
.btn-bounce {
|
||||
animation: pulse-subtle 2.5s infinite ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#F4F7FB] text-slate-800 antialiased relative pb-24 md:pb-0">
|
||||
|
||||
<aside class="sticky top-0 z-50 bg-slate-900 text-white text-xs px-4 py-2 border-b border-slate-700 shadow-md">
|
||||
<div class="max-w-4xl mx-auto flex items-center justify-between flex-wrap gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-green-500/20 text-green-400 border border-green-500/40">
|
||||
<i class="fa-solid fa-bolt mr-1"></i> SSR Ready
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-bold bg-blue-500/20 text-blue-300 border border-blue-500/40">
|
||||
<i class="fa-solid fa-magnifying-glass-chart mr-1"></i> SEO 100% Optimized
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button id="viewToggleBtn" onclick="toggleInspector()" class="px-3 py-1 bg-brand-orange hover:bg-orange-600 transition text-white font-semibold rounded-md flex items-center gap-1.5 shadow">
|
||||
<i class="fa-solid fa-code text-xs"></i>
|
||||
<span id="toggleText">SEO & SSR 구조 분석기 보기</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section id="seoInspector" class="hidden bg-slate-950 text-slate-200 border-b border-slate-800 p-4 transition-all">
|
||||
<div class="max-w-4xl mx-auto text-xs space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-800">
|
||||
<h2 class="text-sm font-bold text-amber-400 flex items-center gap-2">
|
||||
<i class="fa-solid fa-microchip"></i> 검색엔진 최적화(SEO) 및 SSR 아키텍처 사양 검증
|
||||
</h2>
|
||||
<button onclick="toggleInspector()" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-sm"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-blue-400 font-bold block mb-1">1. 시맨틱 태그 트리 (H1~H3)</span>
|
||||
<p class="text-slate-400">검색봇이 문서 위계를 단번에 파악하도록 H1(유일), H2(섹션별), H3(개별 카드/FAQ) 구조를 완전하게 배치했습니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-green-400 font-bold block mb-1">2. Schema.org 구조화 데이터</span>
|
||||
<p class="text-slate-400"><code class="text-amber-300">FAQPage</code>와 <code class="text-amber-300">EducationalOrganization</code>을 헤더에 삽입해 네이버/구글 검색결과에 FAQ 리치 스니펫이 노출됩니다.</p>
|
||||
</div>
|
||||
<div class="bg-slate-900 p-3 rounded border border-slate-800">
|
||||
<span class="text-purple-400 font-bold block mb-1">3. SSR 친화적 DOM & 폼</span>
|
||||
<p class="text-slate-400">자바스크립트가 꺼진 검색 크롤러 환경에서도 모든 텍스트, 폼 필드, 메타데이터가 100% 서버 사이드 렌더링되도록 구현되었습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-black/50 p-2.5 rounded font-mono text-[11px] text-slate-300 overflow-x-auto">
|
||||
<p class="text-slate-400 font-semibold mb-1">// Google Rich Snippet JSON-LD 확인</p>
|
||||
<code><script type="application/ld+json"> ... Schema.org FAQPage & EducationalOrganization 탑재 완료 ... </script></code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<header class="bg-white border-b border-slate-200 sticky top-9 z-40 shadow-sm">
|
||||
<div class="max-w-4xl mx-auto px-4 py-3 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-brand-blue flex items-center justify-center text-white font-extrabold text-lg shadow-sm">
|
||||
P
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-extrabold text-xl tracking-tight text-brand-darkblue">에듀픽</span>
|
||||
<span class="text-[10px] font-bold text-brand-orange bg-orange-50 px-1.5 py-0.5 rounded ml-1">1:1 MATCHING</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<a href="tel:1588-0000" class="hidden sm:flex items-center gap-1.5 text-xs font-semibold text-slate-600 hover:text-brand-blue transition">
|
||||
<i class="fa-solid fa-phone text-brand-blue"></i>
|
||||
<span>1588-0000</span>
|
||||
</a>
|
||||
<a href="#leadFormSection" class="bg-brand-blue hover:bg-brand-darkblue text-white text-xs md:text-sm font-bold px-4 py-2 rounded-full transition shadow-sm flex items-center gap-1.5">
|
||||
<span>맞춤 진단 신청</span>
|
||||
<i class="fa-solid fa-arrow-right text-[11px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-xl mx-auto bg-white min-h-screen shadow-xl border-x border-slate-100 pb-16">
|
||||
|
||||
<section class="bg-gradient-to-b from-[#063083] to-[#0A4ABF] text-white px-5 pt-8 pb-10 rounded-b-3xl relative overflow-hidden text-center">
|
||||
<!-- Decorative Backdrop Circles -->
|
||||
<div class="absolute -right-12 -top-12 w-48 h-48 bg-blue-400/20 rounded-full blur-2xl pointer-events-none"></div>
|
||||
<div class="absolute -left-12 bottom-0 w-48 h-48 bg-orange-400/15 rounded-full blur-2xl pointer-events-none"></div>
|
||||
|
||||
<!-- Trust Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-3.5 py-1 rounded-full text-xs font-medium text-blue-100 mb-4">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
|
||||
<span>2026학년도 최신 내신·수능 대비 시스템</span>
|
||||
</div>
|
||||
|
||||
<!-- Semantic Primary Heading (H1 for SEO) -->
|
||||
<h1 class="text-2xl sm:text-3xl font-extrabold leading-snug tracking-tight text-white mb-3">
|
||||
우리 아이 성향과 수준에 맞춘<br>
|
||||
<span class="text-amber-300 underline decoration-wavy decoration-amber-400">1:1 학습 정밀 진단 리포트</span><br>
|
||||
무료 맞춤 신청
|
||||
</h1>
|
||||
|
||||
<p class="text-xs sm:text-sm text-blue-100/90 font-normal max-w-md mx-auto leading-relaxed mb-6">
|
||||
단 1분 정보 입력으로 취약점 분석 리포트와 지역 검증 1타 베테랑 선생님 매칭 솔루션을 무료로 받아보세요.
|
||||
</p>
|
||||
|
||||
<!-- Trust Counter Metric Badges -->
|
||||
<div class="grid grid-cols-3 gap-2 bg-white/10 backdrop-blur-sm border border-white/15 rounded-2xl p-3 text-center mb-6">
|
||||
<div>
|
||||
<div class="text-[10px] text-blue-200">누적 정밀 진단</div>
|
||||
<div class="font-extrabold text-sm sm:text-base text-white">24,185<span class="text-xs font-normal">건</span></div>
|
||||
</div>
|
||||
<div class="border-x border-white/15">
|
||||
<div class="text-[10px] text-blue-200">검증 강사진</div>
|
||||
<div class="font-extrabold text-sm sm:text-base text-amber-300">5,802<span class="text-xs font-normal">명</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] text-blue-200">학부모 만족도</div>
|
||||
<div class="font-extrabold text-sm sm:text-base text-white">98.6<span class="text-xs font-normal">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Real-time Rolling Toast Notification -->
|
||||
<div class="bg-black/25 backdrop-blur-md rounded-full px-3.5 py-1.5 flex items-center justify-center gap-2 text-[11px] text-slate-200 border border-white/10 mx-auto max-w-sm">
|
||||
<span class="bg-brand-orange text-white text-[9px] font-bold px-1.5 py-0.5 rounded-full">실시간</span>
|
||||
<span id="rollingNotice" class="truncate font-medium">서울 서초구 방배동 중2 수학 정밀 진단 신청 완료 (방금 전)</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="leadFormSection" class="px-4 -mt-6 relative z-20">
|
||||
<div class="bg-white rounded-2xl shadow-custom border border-slate-200 p-5 md:p-6 transition-all hover:shadow-xl">
|
||||
|
||||
<header class="text-center mb-5 pb-3 border-b border-slate-100">
|
||||
<span class="inline-block px-2.5 py-0.5 rounded text-[11px] font-bold bg-orange-100 text-brand-orange mb-1">
|
||||
선착순 30명 한정 전액 무료
|
||||
</span>
|
||||
<h2 class="text-lg font-bold text-slate-900">
|
||||
원하는 맞춤 정보를 선택해 주세요!
|
||||
</h2>
|
||||
<p class="text-[11px] text-slate-500 mt-0.5">
|
||||
아이의 학습 패턴을 분석하여 최적의 솔루션과 선생님을 매칭해 드립니다.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form id="inquiryForm" onsubmit="handleFormSubmit(event)" class="space-y-4">
|
||||
|
||||
<!-- Select: Grade & Weak Subject -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="studentGrade" class="block text-xs font-bold text-slate-700 mb-1">
|
||||
학년 선택 <span class="text-brand-orange">*</span>
|
||||
</label>
|
||||
<select id="studentGrade" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue p-2.5 outline-none font-medium">
|
||||
<option value="" disabled selected>학년 선택</option>
|
||||
<optgroup label="초등부">
|
||||
<option value="초등 1~3학년">초등 1~3학년 (기초형성)</option>
|
||||
<option value="초등 4~6학년">초등 4~6학년 (심화단원)</option>
|
||||
</optgroup>
|
||||
<optgroup label="중등부">
|
||||
<option value="중학교 1학년">중학교 1학년 (자유학기제)</option>
|
||||
<option value="중학교 2학년">중학교 2학년 (내신본격)</option>
|
||||
<option value="중학교 3학년">중학교 3학년 (고등선행)</option>
|
||||
</optgroup>
|
||||
<optgroup label="고등부">
|
||||
<option value="고등학교 1학년">고등학교 1학년 (공통과목)</option>
|
||||
<option value="고등학교 2학년">고등학교 2학년 (수능/수시)</option>
|
||||
<option value="고등학교 3학년/N수">고등학교 3학년 / N수</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="weakSubject" class="block text-xs font-bold text-slate-700 mb-1">
|
||||
취약 과목 <span class="text-brand-orange">*</span>
|
||||
</label>
|
||||
<select id="weakSubject" required class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue p-2.5 outline-none font-medium">
|
||||
<option value="" disabled selected>과목 선택</option>
|
||||
<option value="수학">수학 (개념·심화·킬러문항)</option>
|
||||
<option value="영어">영어 (문법·독해·내신서술)</option>
|
||||
<option value="국어">국어 (비문학·문학·어휘)</option>
|
||||
<option value="과학">과학 (물·화·생·지 탐구)</option>
|
||||
<option value="사회/역사">사회 / 역사 / 한국사</option>
|
||||
<option value="전과목/공부습관">전과목 종합 코칭</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Grade Button Pills for 과목 빠른선택 -->
|
||||
<div>
|
||||
<div class="text-[11px] font-semibold text-slate-500 mb-1.5 flex justify-between items-center">
|
||||
<span>빠른 과목 픽 (PICK)</span>
|
||||
<span class="text-[10px] text-blue-600">클릭 시 자동 적용</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-1.5 text-center">
|
||||
<button type="button" onclick="selectSubjectQuick('국어')" class="subj-btn py-1.5 px-1 border border-slate-200 rounded-lg text-xs font-bold hover:border-brand-orange hover:bg-orange-50 transition">
|
||||
<span class="text-slate-800">국어</span>
|
||||
<span class="block text-[9px] text-brand-orange font-normal">PICK</span>
|
||||
</button>
|
||||
<button type="button" onclick="selectSubjectQuick('영어')" class="subj-btn py-1.5 px-1 border border-slate-200 rounded-lg text-xs font-bold hover:border-brand-orange hover:bg-orange-50 transition">
|
||||
<span class="text-slate-800">영어</span>
|
||||
<span class="block text-[9px] text-brand-orange font-normal">PICK</span>
|
||||
</button>
|
||||
<button type="button" onclick="selectSubjectQuick('수학')" class="subj-btn py-1.5 px-1 border-2 border-brand-orange bg-orange-50 rounded-lg text-xs font-bold transition">
|
||||
<span class="text-brand-orange">수학</span>
|
||||
<span class="block text-[9px] text-brand-orange font-semibold">인기</span>
|
||||
</button>
|
||||
<button type="button" onclick="selectSubjectQuick('사회/역사')" class="subj-btn py-1.5 px-1 border border-slate-200 rounded-lg text-xs font-bold hover:border-brand-orange hover:bg-orange-50 transition">
|
||||
<span class="text-slate-800">사회</span>
|
||||
<span class="block text-[9px] text-brand-orange font-normal">PICK</span>
|
||||
</button>
|
||||
<button type="button" onclick="selectSubjectQuick('과학')" class="subj-btn py-1.5 px-1 border border-slate-200 rounded-lg text-xs font-bold hover:border-brand-orange hover:bg-orange-50 transition">
|
||||
<span class="text-slate-800">과학</span>
|
||||
<span class="block text-[9px] text-brand-orange font-normal">PICK</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Concerns Checkboxes (공부 고민) -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">
|
||||
현재 가장 큰 고민은 무엇인가요? (복수 선택 가능)
|
||||
</label>
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
<label class="flex items-center gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<input type="checkbox" name="concern" value="개념은 아는데 응용문제 실패" checked class="w-4 h-4 text-brand-blue rounded border-slate-300 focus:ring-brand-blue">
|
||||
<span class="text-slate-700 text-[11px]">응용·심화 문제 해결력 부족</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<input type="checkbox" name="concern" value="공부 습관 및 시간관리 부족" class="w-4 h-4 text-brand-blue rounded border-slate-300 focus:ring-brand-blue">
|
||||
<span class="text-slate-700 text-[11px]">자기주도 공부 습관 부재</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<input type="checkbox" name="concern" value="학원 진도 못 따라감" class="w-4 h-4 text-brand-blue rounded border-slate-300 focus:ring-brand-blue">
|
||||
<span class="text-slate-700 text-[11px]">대형 학원 진도 맞춤 불가</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 p-2 bg-slate-50 border border-slate-200 rounded-lg cursor-pointer hover:bg-blue-50/50 transition">
|
||||
<input type="checkbox" name="concern" value="내신 등급 정체기 탈출" class="w-4 h-4 text-brand-blue rounded border-slate-300 focus:ring-brand-blue">
|
||||
<span class="text-slate-700 text-[11px]">중하위권 탈출 및 1등급 도약</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Region / School / Target -->
|
||||
<div>
|
||||
<label for="regionInput" class="block text-xs font-bold text-slate-700 mb-1">
|
||||
거주 지역 및 학교명 <span class="text-slate-400 font-normal text-[10px]">(정확한 기출분석용)</span>
|
||||
</label>
|
||||
<input type="text" id="regionInput" placeholder="예: 서울 서초구 반포동 / 서초중" class="w-full bg-slate-50 border border-slate-300 text-slate-800 text-xs rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue p-2.5 outline-none placeholder:text-slate-400">
|
||||
</div>
|
||||
|
||||
<!-- Phone Number Contact Input -->
|
||||
<div>
|
||||
<label for="parentPhone" class="block text-xs font-bold text-slate-700 mb-1">
|
||||
학부모 연락처 <span class="text-brand-orange">*</span>
|
||||
<span class="text-slate-400 font-normal text-[10px]">(진단 리포트 발송용)</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input type="tel" id="parentPhone" required placeholder="010-0000-0000" maxlength="13" oninput="formatPhoneNumber(this)" class="w-full bg-slate-50 border border-slate-300 text-slate-900 text-sm font-semibold rounded-xl focus:ring-2 focus:ring-brand-blue focus:border-brand-blue p-3 pl-9 outline-none tracking-wider">
|
||||
<i class="fa-solid fa-mobile-screen-button absolute left-3 top-3.5 text-slate-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Privacy Agreement Check -->
|
||||
<div class="flex items-center gap-2 text-[11px] text-slate-500 pt-1">
|
||||
<input type="checkbox" id="privacyAgree" required checked class="w-3.5 h-3.5 text-brand-orange rounded border-slate-300 focus:ring-brand-orange">
|
||||
<label for="privacyAgree" class="cursor-pointer">
|
||||
[필수] 개인정보 수집 및 상담 안내 제공에 동의합니다.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Big Conversion CTA Button -->
|
||||
<button type="submit" class="btn-bounce w-full bg-gradient-to-r from-brand-orange to-brand-accent hover:opacity-95 text-white font-extrabold text-base py-3.5 px-4 rounded-xl shadow-cta transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-file-lines text-lg"></i>
|
||||
<span>내 아이 맞춤 진단 결과 & 상담 신청하기</span>
|
||||
</button>
|
||||
|
||||
<div class="text-center text-[10px] text-slate-400 flex items-center justify-center gap-1.5">
|
||||
<i class="fa-solid fa-lock text-[10px]"></i>
|
||||
<span>입력하신 정보는 상담 및 리포트 제공 목적으로만 안전하게 보관됩니다.</span>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Submit Feedback Box (Hidden by default) -->
|
||||
<div id="submitResultBox" class="hidden mt-4 p-4 bg-emerald-50 border border-emerald-300 rounded-xl text-emerald-900 text-xs">
|
||||
<div class="flex items-center gap-2 font-bold text-sm mb-1 text-emerald-800">
|
||||
<i class="fa-solid fa-circle-check text-emerald-600 text-base"></i>
|
||||
<span>맞춤 진단 신청이 성공적으로 접수되었습니다!</span>
|
||||
</div>
|
||||
<p class="leading-relaxed">
|
||||
기재해주신 연락처로 <strong>‘맞춤 정밀 진단 리포트 요약본’</strong>이 발송되며, 전문 학습 매니저가 유선으로 심층 분석 결과를 안내해 드립니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-10 px-5">
|
||||
<header class="text-center mb-6">
|
||||
<span class="text-xs font-bold text-brand-blue tracking-wider uppercase">SPECIAL BENEFIT</span>
|
||||
<h2 class="text-xl font-extrabold text-slate-900 mt-1">지금 신청 시 무료 제공되는 4대 혜택</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">상담만 받아도 우리 아이 공부 로드맵을 명확히 세워드립니다.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<!-- Benefit 1 -->
|
||||
<div class="bg-gradient-to-br from-white to-slate-50 p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 transition group">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-100 text-brand-blue flex items-center justify-center text-lg font-bold mb-3 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-chart-pie"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-brand-blue bg-blue-50 px-1.5 py-0.5 rounded mb-1">혜택 01</span>
|
||||
<h3 class="font-bold text-slate-800 text-xs sm:text-sm">1:1 학습 성향 정밀 진단서</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-1 leading-snug">취약 단원 파악 및 과목별 공부 효율성 과학적 분석</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 2 -->
|
||||
<div class="bg-gradient-to-br from-white to-slate-50 p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 transition group">
|
||||
<div class="w-10 h-10 rounded-xl bg-orange-100 text-brand-orange flex items-center justify-center text-lg font-bold mb-3 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-school"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-brand-orange bg-orange-50 px-1.5 py-0.5 rounded mb-1">혜택 02</span>
|
||||
<h3 class="font-bold text-slate-800 text-xs sm:text-sm">해당 학교 최근 3개년 기출</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-1 leading-snug">인근 중·고교 출제 경향 및 고난도 킬러 문항 족보 요약</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 3 -->
|
||||
<div class="bg-gradient-to-br from-white to-slate-50 p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 transition group">
|
||||
<div class="w-10 h-10 rounded-xl bg-emerald-100 text-brand-mint flex items-center justify-center text-lg font-bold mb-3 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-clipboard-check"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-brand-mint bg-emerald-50 px-1.5 py-0.5 rounded mb-1">혜택 03</span>
|
||||
<h3 class="font-bold text-slate-800 text-xs sm:text-sm">오답 원인 정밀 시트</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-1 leading-snug">단순 실수인지 개념 구멍인지 5단계 원인 역추적</p>
|
||||
</div>
|
||||
|
||||
<!-- Benefit 4 -->
|
||||
<div class="bg-gradient-to-br from-white to-slate-50 p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:border-blue-300 transition group">
|
||||
<div class="w-10 h-10 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center text-lg font-bold mb-3 group-hover:scale-110 transition-transform">
|
||||
<i class="fa-solid fa-user-tie"></i>
|
||||
</div>
|
||||
<span class="inline-block text-[10px] font-bold text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded mb-1">혜택 04</span>
|
||||
<h3 class="font-bold text-slate-800 text-xs sm:text-sm">베테랑 1:1 매칭 멘토링</h3>
|
||||
<p class="text-[11px] text-slate-500 mt-1 leading-snug">아이 기질과 케미가 맞는 명문대·전문 강사진 우선 추천</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-12 px-5">
|
||||
<header class="text-center mb-6">
|
||||
<span class="text-xs font-bold text-emerald-600 tracking-wider">PROVEN RESULTS</span>
|
||||
<h2 class="text-xl font-extrabold text-slate-900 mt-1">실제 성적 상승 및 수강 후기</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">맞춤 진단 후 체계적인 관리를 받은 학생들의 실제 변화입니다.</p>
|
||||
</header>
|
||||
|
||||
<!-- Grade Jump Comparison Cards -->
|
||||
<div class="space-y-3 mb-6">
|
||||
|
||||
<!-- Case 1 -->
|
||||
<div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-blue-100 text-brand-blue font-bold text-[10px] px-2 py-0.5 rounded-full">수학 역전</span>
|
||||
<span class="font-bold text-xs text-slate-800">대치동 고2 김OO 학생</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-slate-400">3개월 만에 달성</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-semibold">
|
||||
<span class="text-slate-400">진단 전: 5등급 (42점)</span>
|
||||
<span class="text-brand-orange font-bold">진단 후: 2등급 (89점) 🔥</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-blue-400 to-brand-orange h-2.5 rounded-full transition-all duration-1000" style="width: 82%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-600 mt-2 bg-slate-50 p-2 rounded-lg">
|
||||
"학습 진단에서 수포자 직전이었던 함수의 그래프 해석 구멍을 정확히 집어주셔서, 그 부분만 집중 보완하니 점수가 수직 상승했습니다."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Case 2 -->
|
||||
<div class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-orange-100 text-brand-orange font-bold text-[10px] px-2 py-0.5 rounded-full">영어 서술형</span>
|
||||
<span class="font-bold text-xs text-slate-800">서초동 중3 이OO 학생</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-slate-400">2개월 만에 달성</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-semibold">
|
||||
<span class="text-slate-400">진단 전: 68점 (B등급)</span>
|
||||
<span class="text-brand-blue font-bold">진단 후: 98점 (전교 4등) ✨</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
|
||||
<div class="bg-gradient-to-r from-slate-400 to-brand-blue h-2.5 rounded-full transition-all duration-1000" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-600 mt-2 bg-slate-50 p-2 rounded-lg">
|
||||
"무작정 단어만 외우다 영포자가 될 뻔했는데, 문장 구조 분석법을 배우고 학교 서술형 감점이 0점이 되었습니다."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Real Parent Reviews Grid -->
|
||||
<div class="grid grid-cols-2 gap-2.5">
|
||||
<div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-left">
|
||||
<div class="text-amber-400 text-xs mb-1">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-xs text-slate-800">대치동 학부모 최OO님</h4>
|
||||
<p class="text-[10px] text-slate-600 mt-1 leading-snug">"아이 성향에 맞지 않는 억지 공부 대신 딱 필요한 단원만 짚어주시니 스스로 책상에 앉네요."</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-left">
|
||||
<div class="text-amber-400 text-xs mb-1">
|
||||
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-xs text-slate-800">분당 판교 학부모 박OO님</h4>
|
||||
<p class="text-[10px] text-slate-600 mt-1 leading-snug">"리포트 내용이 학원 상담보다 훨씬 객관적이고 정확했습니다. 선생님 케미도 정말 만족합니다."</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="mt-12 px-5">
|
||||
<header class="text-center mb-6">
|
||||
<span class="text-xs font-bold text-slate-400 tracking-wider">FAQ</span>
|
||||
<h2 class="text-xl font-extrabold text-slate-900 mt-1">자주 묻는 질문</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">궁금하신 내용을 미리 확인해 보세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="space-y-2.5" id="faqAccordion">
|
||||
|
||||
<!-- FAQ 1 -->
|
||||
<div class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-sm">
|
||||
<button onclick="toggleFaq(this)" class="w-full p-3.5 text-left text-xs sm:text-sm font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>1. 정밀 진단 리포트와 1:1 상담은 정말 무료인가요?</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform"></i>
|
||||
</button>
|
||||
<div class="hidden p-3.5 pt-0 text-xs text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
네, 100% 무료입니다. 신청서를 남겨주시면 아이의 학년과 과목 수준에 맞춘 진단 리포트와 전문 학습 매니저의 전화 분석 상담이 비용 없이 전액 무상 제공됩니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 2 -->
|
||||
<div class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-sm">
|
||||
<button onclick="toggleFaq(this)" class="w-full p-3.5 text-left text-xs sm:text-sm font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>2. 신청 후 매칭 연락은 언제 오나요?</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform"></i>
|
||||
</button>
|
||||
<div class="hidden p-3.5 pt-0 text-xs text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
접수 즉시 전담 매니저가 배정되어 영업일 기준 최대 24시간 이내에 기재해주신 학부모님 연락처로 유선 안내를 드립니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 3 -->
|
||||
<div class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-sm">
|
||||
<button onclick="toggleFaq(this)" class="w-full p-3.5 text-left text-xs sm:text-sm font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>3. 선생님이 아이와 잘 맞지 않으면 변경할 수 있나요?</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform"></i>
|
||||
</button>
|
||||
<div class="hidden p-3.5 pt-0 text-xs text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
네, 당연히 가능합니다. 첫 시범 수업 또는 진행 중 성향이 맞지 않을 경우 별도 수수료 없이 다른 선생님으로 무상 재매칭을 지원해 드립니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FAQ 4 -->
|
||||
<div class="border border-slate-200 rounded-xl overflow-hidden bg-white shadow-sm">
|
||||
<button onclick="toggleFaq(this)" class="w-full p-3.5 text-left text-xs sm:text-sm font-bold text-slate-800 flex justify-between items-center hover:bg-slate-50 transition">
|
||||
<span>4. 대면 과외뿐만 아니라 비대면 화상 과외도 가능한가요?</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-slate-400 transition-transform"></i>
|
||||
</button>
|
||||
<div class="hidden p-3.5 pt-0 text-xs text-slate-600 leading-relaxed border-t border-slate-100 bg-slate-50/50">
|
||||
방문 과외와 1:1 실시간 화상 과외 모두 가능합니다. 거주 지역이나 일정에 맞춰 원하시는 수업 형태로 선택하실 수 있습니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-12 mx-5 p-4 rounded-2xl bg-blue-50/60 border border-blue-100 text-center">
|
||||
<div class="flex items-center justify-center gap-4 text-xs font-bold text-brand-darkblue mb-2">
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-shield-halved text-brand-blue"></i> 신원 검증 100%</span>
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-rotate text-brand-orange"></i> 무료 재매칭 보장</span>
|
||||
<span class="flex items-center gap-1"><i class="fa-solid fa-chart-line text-emerald-600"></i> 주기적 성적 관리</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500">
|
||||
에듀픽은 학생의 학습권 보호와 안심 과외 서비스를 위해 철저한 신원 인증 시스템을 운영합니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Footer for SSR & SEO Compliance -->
|
||||
<footer class="mt-10 pt-8 pb-12 px-5 border-t border-slate-200 text-center text-slate-400 text-[11px]">
|
||||
<p class="font-bold text-slate-600 mb-1">에듀픽 1:1 맞춤 교육 연구소</p>
|
||||
<p class="leading-relaxed">
|
||||
서울특별시 강남구 테헤란로 152 강남타워 | 고객센터: 1588-0000 | 평일 09:00 - 20:00<br>
|
||||
사업자등록번호: 120-81-00000 | 통신판매업신고: 제2026-서울강남-01234호
|
||||
</p>
|
||||
<p class="mt-3 text-[10px] text-slate-300">
|
||||
© 2026 EduPick. All Rights Reserved. 본 사이트는 SSR 및 검색엔진 최적화 표준 규격을 준수합니다.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
||||
<aside class="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 z-40 max-w-xl mx-auto shadow-2xl">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="hidden sm:block text-left pl-2">
|
||||
<div class="text-[10px] text-slate-400">선착순 무료 혜택</div>
|
||||
<div class="text-xs font-bold text-slate-800">1:1 맞춤 진단 리포트</div>
|
||||
</div>
|
||||
<a href="#leadFormSection" class="flex-1 bg-gradient-to-r from-brand-orange to-brand-accent hover:opacity-95 text-white font-extrabold text-sm py-3 px-4 rounded-xl shadow-cta transition flex items-center justify-center gap-2">
|
||||
<i class="fa-solid fa-paper-plane text-xs"></i>
|
||||
<span>지금 무료 진단 & 맞춤 매칭 신청하기</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
// Live Rolling Notification Data
|
||||
const rollingMessages = [
|
||||
"서울 서초구 방배동 중2 수학 정밀 진단 신청 완료 (방금 전)",
|
||||
"대구 수성구 범어동 고1 영어 내신대비 상담 접수 (1분 전)",
|
||||
"서울 강남구 대치동 초6 중등수학 선행 진단 신청 (3분 전)",
|
||||
"경기 성남시 분당구 중3 과학 오답분석 리포트 신청 (5분 전)",
|
||||
"부산 해운대구 고2 국어 1등급 클리닉 신청 완료 (7분 전)"
|
||||
];
|
||||
let rollingIndex = 0;
|
||||
setInterval(() => {
|
||||
rollingIndex = (rollingIndex + 1) % rollingMessages.length;
|
||||
const el = document.getElementById('rollingNotice');
|
||||
if (el) {
|
||||
el.style.opacity = '0';
|
||||
setTimeout(() => {
|
||||
el.innerText = rollingMessages[rollingIndex];
|
||||
el.style.opacity = '1';
|
||||
}, 200);
|
||||
}
|
||||
}, 3500);
|
||||
|
||||
// Auto format phone number
|
||||
function formatPhoneNumber(input) {
|
||||
let val = input.value.replace(/[^0-9]/g, '');
|
||||
if (val.length > 3 && val.length <= 7) {
|
||||
input.value = val.substring(0, 3) + '-' + val.substring(3);
|
||||
} else if (val.length > 7) {
|
||||
input.value = val.substring(0, 3) + '-' + val.substring(3, 7) + '-' + val.substring(7, 11);
|
||||
} else {
|
||||
input.value = val;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick subject selector pill
|
||||
function selectSubjectQuick(subj) {
|
||||
const select = document.getElementById('weakSubject');
|
||||
if (select) {
|
||||
select.value = subj;
|
||||
}
|
||||
// highlight active styling
|
||||
document.querySelectorAll('.subj-btn').forEach(btn => {
|
||||
btn.classList.remove('border-2', 'border-brand-orange', 'bg-orange-50');
|
||||
btn.classList.add('border-slate-200');
|
||||
});
|
||||
event.currentTarget.classList.add('border-2', 'border-brand-orange', 'bg-orange-50');
|
||||
event.currentTarget.classList.remove('border-slate-200');
|
||||
}
|
||||
|
||||
// FAQ Accordion Toggle
|
||||
function toggleFaq(button) {
|
||||
const content = button.nextElementSibling;
|
||||
const icon = button.querySelector('i');
|
||||
if (content.classList.contains('hidden')) {
|
||||
content.classList.remove('hidden');
|
||||
icon.classList.add('rotate-180');
|
||||
} else {
|
||||
content.classList.add('hidden');
|
||||
icon.classList.remove('rotate-180');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle SEO / SSR Inspector Drawer
|
||||
function toggleInspector() {
|
||||
const drawer = document.getElementById('seoInspector');
|
||||
const toggleText = document.getElementById('toggleText');
|
||||
if (drawer.classList.contains('hidden')) {
|
||||
drawer.classList.remove('hidden');
|
||||
toggleText.innerText = '실제 사용자 화면만 보기';
|
||||
} else {
|
||||
drawer.classList.add('hidden');
|
||||
toggleText.innerText = 'SEO & SSR 구조 분석기 보기';
|
||||
}
|
||||
}
|
||||
|
||||
// Form submission simulation
|
||||
function handleFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
const phone = document.getElementById('parentPhone').value;
|
||||
const grade = document.getElementById('studentGrade').value;
|
||||
const subject = document.getElementById('weakSubject').value;
|
||||
|
||||
if (!phone || phone.length < 12) {
|
||||
alertModal("올바른 학부모 연락처(휴대폰 번호)를 입력해 주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Show Feedback Box smoothly
|
||||
const resultBox = document.getElementById('submitResultBox');
|
||||
resultBox.classList.remove('hidden');
|
||||
resultBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
|
||||
// Disable button briefly
|
||||
const btn = event.target.querySelector('button[type="submit"]');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = `<i class="fa-solid fa-check"></i> <span>신청 완료 (상담 매니저 배정 중)</span>`;
|
||||
btn.classList.remove('btn-bounce');
|
||||
btn.classList.add('opacity-75');
|
||||
}
|
||||
|
||||
// Safe inline modal alternative (Never use browser alert)
|
||||
function alertModal(msg) {
|
||||
const modal = document.createElement('div');
|
||||
modal.className = "fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50";
|
||||
modal.innerHTML = `
|
||||
<div class="bg-white rounded-2xl p-5 max-w-xs w-full shadow-2xl text-center">
|
||||
<div class="w-12 h-12 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center mx-auto mb-3 text-xl">
|
||||
<i class="fa-solid fa-triangle-exclamation"></i>
|
||||
</div>
|
||||
<p class="text-xs text-slate-800 font-bold mb-4 leading-relaxed">${msg}</p>
|
||||
<button onclick="this.closest('.fixed').remove()" class="w-full bg-brand-blue text-white text-xs font-bold py-2.5 rounded-xl">확인</button>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(modal);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user