zio
c3a695d70c
- Web core SCR-22/23/25-27/29/30/32-50 (26), admin A5/A6/A8/A9, public P1-P7, mobile M15 - +5 supplementary variants (P4 3-step, P7 manage, M15 ticket-select), 43 files, 0 failures - All delayed generations recovered server-side (project 27 -> 155 screens), no regeneration needed - WORK_STATUS: stitch 64/64 + real-data/2FA track close-out recorded Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
417 lines
24 KiB
HTML
417 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>KINTEX Visitor Registration</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface": "#faf8ff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary-container": "#91c0ff",
|
|
"on-secondary-container": "#f3edff",
|
|
"on-error-container": "#93000a",
|
|
"inverse-surface": "#293042",
|
|
"tertiary-container": "#00583b",
|
|
"primary": "#003765",
|
|
"secondary": "#5427e6",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"inverse-primary": "#a2c9ff",
|
|
"on-error": "#ffffff",
|
|
"tertiary-fixed-dim": "#72daa9",
|
|
"background": "#faf8ff",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"surface-container-high": "#e1e7ff",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"error": "#ba1a1a",
|
|
"primary-fixed": "#d3e4ff",
|
|
"on-tertiary-fixed": "#002113",
|
|
"primary-container": "#004e8b",
|
|
"secondary-fixed": "#e5deff",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"tertiary": "#003e28",
|
|
"secondary-container": "#6d4aff",
|
|
"outline-variant": "#c1c7d3",
|
|
"on-surface-variant": "#424750",
|
|
"surface-container-low": "#f1f3ff",
|
|
"on-primary-fixed": "#001c38",
|
|
"on-primary": "#ffffff",
|
|
"on-tertiary-container": "#68d1a0",
|
|
"on-surface": "#141b2c",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"on-secondary": "#ffffff",
|
|
"surface-container": "#eaedff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-variant": "#dbe2fa",
|
|
"error-red": "#ba1a1a",
|
|
"surface-tint": "#24609e",
|
|
"surface-container-highest": "#dbe2fa",
|
|
"outline": "#727781",
|
|
"surface-dim": "#d3d9f1",
|
|
"surface-bright": "#f9f9ff",
|
|
"error-container": "#ffdad6",
|
|
"inverse-on-surface": "#eef0ff",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"on-background": "#141b2c"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-lg": "24px",
|
|
"stack-md": "16px",
|
|
"section-padding": "96px",
|
|
"stack-sm": "8px",
|
|
"gutter": "16px",
|
|
"container-padding": "24px",
|
|
"base": "4px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Inter"],
|
|
"title-sm": ["Inter"],
|
|
"display-lg": ["Inter"],
|
|
"label-xs": ["Geist"],
|
|
"body-base": ["Inter"],
|
|
"label-md": ["Geist"],
|
|
"display-lg-mobile": ["Inter"],
|
|
"body-sm": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.step-transition { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
|
|
.hidden-step { display: none; opacity: 0; transform: translateY(10px); }
|
|
.active-step { display: block; opacity: 1; transform: translateY(0); }
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface min-h-screen flex flex-col">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-surface-bright dark:bg-surface-dim shadow-sm border-b border-outline-variant sticky top-0 z-50">
|
|
<div class="flex justify-between items-center w-full px-container-padding max-w-[1280px] mx-auto h-16">
|
|
<div class="flex items-center gap-4">
|
|
<img alt="KINTEX Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCR6dSJzvC2KV8NF52ZH7dw5EY_Lz78Morv0lhcecU3ELpN79XUMqO7_4UShtICuz8CDi0ZVBbMAtWAdj2LuOM2OURR1NiBRU8AzxXGVnvi4VvWkwLCbHMvQOcWb6d40QmyDRqgCPOG1zNK55NcPpLx2iv67s1SCcV5rfBeJy2iHUuZfz2BwAPKA4Zu4ByYJ0AYFJWdWFkRvQFYIML0rNjRr6PC85H5BK__4TFrl2fwpSSx-XGGywk8I8CrH-3Nlk2J7vL_vqHVm24"/>
|
|
<span class="font-headline-md text-headline-md font-bold text-primary">KINTEX Registration</span>
|
|
</div>
|
|
<nav class="hidden md:flex gap-8">
|
|
<a class="text-primary font-bold border-b-2 border-primary pb-1 font-body-base text-body-base" href="#">Exhibitions</a>
|
|
<a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200 font-body-base text-body-base" href="#">Venue Info</a>
|
|
<a class="text-on-surface-variant font-medium hover:text-primary transition-colors duration-200 font-body-base text-body-base" href="#">Support</a>
|
|
</nav>
|
|
<button class="bg-primary text-on-primary px-6 py-2 rounded-xl font-body-base font-bold transition-all active:opacity-80">
|
|
Check Status
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<main class="flex-grow flex items-center justify-center p-gutter relative overflow-hidden">
|
|
<!-- Background decorative element -->
|
|
<div class="absolute top-0 right-0 w-96 h-96 bg-primary-fixed opacity-20 blur-[120px] rounded-full -mr-48 -mt-48"></div>
|
|
<div class="absolute bottom-0 left-0 w-96 h-96 bg-secondary-fixed opacity-20 blur-[120px] rounded-full -ml-48 -mb-48"></div>
|
|
<div class="w-full max-w-2xl bg-surface-container-lowest border border-outline-variant rounded-xl shadow-md p-stack-lg relative z-10">
|
|
<!-- Progress Indicator -->
|
|
<div class="mb-10 px-stack-md">
|
|
<div class="flex justify-between items-center relative">
|
|
<!-- Progress Line -->
|
|
<div class="absolute top-1/2 left-0 w-full h-[2px] bg-surface-container-high -translate-y-1/2 z-0"></div>
|
|
<div class="absolute top-1/2 left-0 w-[33%] h-[2px] bg-primary -translate-y-1/2 z-0 transition-all duration-500" id="progress-line"></div>
|
|
<!-- Steps -->
|
|
<div class="relative z-10 flex flex-col items-center gap-2 group">
|
|
<div class="step-circle w-10 h-10 rounded-full flex items-center justify-center bg-primary text-on-primary font-bold shadow-sm" data-step="1">1</div>
|
|
<span class="font-label-md text-label-md text-primary font-bold">유형</span>
|
|
</div>
|
|
<div class="relative z-10 flex flex-col items-center gap-2 group">
|
|
<div class="step-circle w-10 h-10 rounded-full flex items-center justify-center bg-surface-container-high text-on-surface-variant font-bold border border-outline-variant" data-step="2">2</div>
|
|
<span class="font-label-md text-label-md text-on-surface-variant">정보</span>
|
|
</div>
|
|
<div class="relative z-10 flex flex-col items-center gap-2 group">
|
|
<div class="step-circle w-10 h-10 rounded-full flex items-center justify-center bg-surface-container-high text-on-surface-variant font-bold border border-outline-variant" data-step="3">3</div>
|
|
<span class="font-label-md text-label-md text-on-surface-variant">관심분야</span>
|
|
</div>
|
|
<div class="relative z-10 flex flex-col items-center gap-2 group">
|
|
<div class="step-circle w-10 h-10 rounded-full flex items-center justify-center bg-surface-container-high text-on-surface-variant font-bold border border-outline-variant" data-step="4">4</div>
|
|
<span class="font-label-md text-label-md text-on-surface-variant">완료</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form class="space-y-stack-lg" id="registration-form">
|
|
<!-- Step 1: 유형 선택 -->
|
|
<div class="step-content active-step step-transition" id="step-content-1">
|
|
<div class="text-center mb-8">
|
|
<h2 class="font-display-lg text-display-lg text-on-surface mb-2">참가 유형 선택</h2>
|
|
<p class="font-body-base text-body-base text-on-surface-variant">KINTEX AI 컨퍼런스에 참여하실 자격을 선택해 주세요.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
|
<!-- Visitor Card -->
|
|
<label class="relative flex flex-col p-stack-md bg-surface-container-low border border-outline-variant rounded-xl cursor-pointer hover:border-primary transition-all group active:scale-95">
|
|
<input checked="" class="absolute opacity-0" name="visitor_type" type="radio" value="general"/>
|
|
<div class="w-12 h-12 rounded-full bg-primary-fixed flex items-center justify-center mb-4 text-primary group-hover:bg-primary group-hover:text-on-primary transition-colors">
|
|
<span class="material-symbols-outlined text-3xl">person</span>
|
|
</div>
|
|
<span class="font-title-sm text-title-sm text-on-surface mb-1">일반 관람객</span>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">전시 및 공개 세션 참관이 가능한 일반 방문객</p>
|
|
<div class="mt-4 border-l-4 border-primary h-1"></div>
|
|
</label>
|
|
<!-- Buyer Card -->
|
|
<label class="relative flex flex-col p-stack-md bg-surface-container-low border border-outline-variant rounded-xl cursor-pointer hover:border-primary transition-all group active:scale-95">
|
|
<input class="absolute opacity-0" name="visitor_type" type="radio" value="buyer"/>
|
|
<div class="w-12 h-12 rounded-full bg-secondary-fixed flex items-center justify-center mb-4 text-secondary group-hover:bg-secondary group-hover:text-on-primary transition-colors">
|
|
<span class="material-symbols-outlined text-3xl">shopping_cart</span>
|
|
</div>
|
|
<span class="font-title-sm text-title-sm text-on-surface mb-1">바이어</span>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">B2B 매칭 및 비즈니스 상담을 위한 기업 구매 담당자</p>
|
|
<div class="mt-4 border-l-4 border-secondary h-1"></div>
|
|
</label>
|
|
<!-- VIP Card -->
|
|
<label class="relative flex flex-col p-stack-md bg-surface-container-low border border-outline-variant rounded-xl cursor-pointer hover:border-primary transition-all group active:scale-95">
|
|
<input class="absolute opacity-0" name="visitor_type" type="radio" value="vip"/>
|
|
<div class="w-12 h-12 rounded-full bg-tertiary-fixed flex items-center justify-center mb-4 text-tertiary group-hover:bg-tertiary group-hover:text-on-primary transition-colors">
|
|
<span class="material-symbols-outlined text-3xl">workspace_premium</span>
|
|
</div>
|
|
<span class="font-title-sm text-title-sm text-on-surface mb-1">VIP</span>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">초청 인사 전용 라운지 및 모든 세션 입장이 가능한 귀빈</p>
|
|
<div class="mt-4 border-l-4 border-tertiary h-1"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- Step 2: 정보 입력 -->
|
|
<div class="step-content hidden-step step-transition" id="step-content-2">
|
|
<div class="mb-8">
|
|
<h2 class="font-headline-md text-headline-md text-on-surface">기본 정보 입력</h2>
|
|
<p class="font-body-base text-body-base text-on-surface-variant">연락 및 출입증 발급을 위한 정보를 입력해 주세요.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-stack-md">
|
|
<div class="space-y-1">
|
|
<label class="font-label-md text-label-md text-on-surface-variant">이름</label>
|
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-xl p-3 focus:ring-2 focus:ring-primary focus:border-primary font-body-base" placeholder="성함을 입력하세요" type="text"/>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<label class="font-label-md text-label-md text-on-surface-variant">연락처 (Mobile)</label>
|
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-xl p-3 focus:ring-2 focus:ring-primary focus:border-primary font-body-base" placeholder="010-0000-0000" type="tel"/>
|
|
</div>
|
|
<div class="md:col-span-2 space-y-1">
|
|
<label class="font-label-md text-label-md text-on-surface-variant">이메일</label>
|
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-xl p-3 focus:ring-2 focus:ring-primary focus:border-primary font-body-base" placeholder="example@domain.com" type="email"/>
|
|
</div>
|
|
<div class="md:col-span-2 space-y-1">
|
|
<label class="font-label-md text-label-md text-on-surface-variant">소속 (Company/Org)</label>
|
|
<input class="w-full bg-surface-container-low border-outline-variant rounded-xl p-3 focus:ring-2 focus:ring-primary focus:border-primary font-body-base" placeholder="회사명 또는 학교명을 입력하세요" type="text"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Step 3: 관심분야 -->
|
|
<div class="step-content hidden-step step-transition" id="step-content-3">
|
|
<div class="mb-8">
|
|
<h2 class="font-headline-md text-headline-md text-on-surface">관심 분야 선택</h2>
|
|
<p class="font-body-base text-body-base text-on-surface-variant">관심 있는 분야를 선택하시면 맞춤형 정보를 제공해 드립니다.</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2 mb-10">
|
|
<label class="cursor-pointer">
|
|
<input class="hidden peer" type="checkbox"/>
|
|
<div class="px-6 py-2 rounded-full border border-outline-variant bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary font-body-base transition-all">AI 솔루션</div>
|
|
</label>
|
|
<label class="cursor-pointer">
|
|
<input class="hidden peer" type="checkbox"/>
|
|
<div class="px-6 py-2 rounded-full border border-outline-variant bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary font-body-base transition-all">스마트 팩토리</div>
|
|
</label>
|
|
<label class="cursor-pointer">
|
|
<input class="hidden peer" type="checkbox"/>
|
|
<div class="px-6 py-2 rounded-full border border-outline-variant bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary font-body-base transition-all">로보틱스</div>
|
|
</label>
|
|
<label class="cursor-pointer">
|
|
<input class="hidden peer" type="checkbox"/>
|
|
<div class="px-6 py-2 rounded-full border border-outline-variant bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary font-body-base transition-all">빅데이터</div>
|
|
</label>
|
|
<label class="cursor-pointer">
|
|
<input class="hidden peer" type="checkbox"/>
|
|
<div class="px-6 py-2 rounded-full border border-outline-variant bg-surface-container-low peer-checked:bg-primary-container peer-checked:text-on-primary-container peer-checked:border-primary font-body-base transition-all">클라우드</div>
|
|
</label>
|
|
</div>
|
|
<div class="bg-surface-container border border-outline-variant p-4 rounded-xl space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input class="w-5 h-5 text-primary rounded-lg border-outline" type="checkbox"/>
|
|
<span class="font-body-sm text-body-sm text-on-surface">개인정보 수집·이용 동의 (필수)</span>
|
|
</label>
|
|
<a class="text-primary font-label-md hover:underline" href="#">상세보기</a>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input class="w-5 h-5 text-primary rounded-lg border-outline" type="checkbox"/>
|
|
<span class="font-body-sm text-body-sm text-on-surface">마케팅 수신 동의 (선택)</span>
|
|
</label>
|
|
<a class="text-primary font-label-md hover:underline" href="#">상세보기</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Buttons -->
|
|
<div class="flex gap-stack-md pt-stack-lg mt-6">
|
|
<button class="hidden px-8 py-4 border border-outline-variant rounded-xl font-body-base font-bold text-on-surface-variant hover:bg-surface-container-high transition-all" id="prev-btn" type="button">
|
|
이전
|
|
</button>
|
|
<button class="flex-grow px-8 py-4 bg-primary text-on-primary rounded-xl font-body-base font-bold shadow-md hover:opacity-90 active:scale-[0.98] transition-all" id="next-btn" type="button">
|
|
다음
|
|
</button>
|
|
<button class="hidden flex-grow px-8 py-4 bg-primary text-on-primary rounded-xl font-body-base font-bold shadow-md hover:opacity-90 active:scale-[0.98] transition-all" id="submit-btn" type="submit">
|
|
등록하기
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
<!-- Success Modal -->
|
|
<div class="fixed inset-0 z-[100] hidden items-center justify-center p-gutter" id="success-modal">
|
|
<div class="absolute inset-0 bg-on-surface/40 backdrop-blur-sm"></div>
|
|
<div class="bg-surface-container-lowest p-stack-lg rounded-xl max-w-sm w-full relative z-10 text-center shadow-xl border border-outline-variant">
|
|
<div class="w-16 h-16 bg-tertiary-fixed text-tertiary rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">등록 완료!</h3>
|
|
<p class="font-body-base text-body-base text-on-surface-variant mb-8">KINTEX AI 사전 등록이 성공적으로 완료되었습니다. 등록번호가 이메일로 발송됩니다.</p>
|
|
<button class="w-full py-4 bg-primary text-on-primary rounded-xl font-bold font-body-base" onclick="window.location.reload()">확인</button>
|
|
</div>
|
|
</div>
|
|
<footer class="bg-surface-container-high dark:bg-surface-container-highest border-t border-outline-variant">
|
|
<div class="w-full py-stack-lg px-container-padding max-w-[1280px] mx-auto flex flex-col md:flex-row justify-between items-center gap-stack-md">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-title-sm text-title-sm font-bold text-on-surface">KINTEX</span>
|
|
<span class="font-body-sm text-body-sm text-on-surface-variant">© 2024 KINTEX. All rights reserved.</span>
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<a class="text-on-surface-variant font-body-sm hover:text-primary underline transition-all duration-200" href="#">Privacy Policy</a>
|
|
<a class="text-on-surface-variant font-body-sm hover:text-primary underline transition-all duration-200" href="#">Terms of Service</a>
|
|
<a class="text-on-surface-variant font-body-sm hover:text-primary underline transition-all duration-200" href="#">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
const nextBtn = document.getElementById('next-btn');
|
|
const prevBtn = document.getElementById('prev-btn');
|
|
const submitBtn = document.getElementById('submit-btn');
|
|
const progressLine = document.getElementById('progress-line');
|
|
const form = document.getElementById('registration-form');
|
|
const modal = document.getElementById('success-modal');
|
|
|
|
let currentStep = 1;
|
|
const totalSteps = 3;
|
|
|
|
function updateUI() {
|
|
// Update step content visibility
|
|
document.querySelectorAll('.step-content').forEach((content, idx) => {
|
|
if (idx + 1 === currentStep) {
|
|
content.classList.remove('hidden-step');
|
|
content.classList.add('active-step');
|
|
} else {
|
|
content.classList.add('hidden-step');
|
|
content.classList.remove('active-step');
|
|
}
|
|
});
|
|
|
|
// Update Circles
|
|
document.querySelectorAll('.step-circle').forEach((circle, idx) => {
|
|
const stepNum = idx + 1;
|
|
const label = circle.nextElementSibling;
|
|
|
|
if (stepNum < currentStep) {
|
|
circle.innerHTML = `<span class="material-symbols-outlined text-sm">check</span>`;
|
|
circle.classList.add('bg-primary', 'text-on-primary');
|
|
circle.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
|
|
label.classList.add('text-primary', 'font-bold');
|
|
} else if (stepNum === currentStep) {
|
|
circle.innerText = stepNum;
|
|
circle.classList.add('bg-primary', 'text-on-primary');
|
|
circle.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
|
|
label.classList.add('text-primary', 'font-bold');
|
|
} else {
|
|
circle.innerText = stepNum;
|
|
circle.classList.remove('bg-primary', 'text-on-primary');
|
|
circle.classList.add('bg-surface-container-high', 'text-on-surface-variant');
|
|
label.classList.remove('text-primary', 'font-bold');
|
|
}
|
|
});
|
|
|
|
// Progress Line
|
|
const progress = ((currentStep - 1) / (4 - 1)) * 100;
|
|
progressLine.style.width = `${progress}%`;
|
|
|
|
// Buttons
|
|
prevBtn.classList.toggle('hidden', currentStep === 1);
|
|
if (currentStep === totalSteps) {
|
|
nextBtn.classList.add('hidden');
|
|
submitBtn.classList.remove('hidden');
|
|
} else {
|
|
nextBtn.classList.remove('hidden');
|
|
submitBtn.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
if (currentStep < totalSteps) {
|
|
currentStep++;
|
|
updateUI();
|
|
}
|
|
});
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
if (currentStep > 1) {
|
|
currentStep--;
|
|
updateUI();
|
|
}
|
|
});
|
|
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
// Final step visual update
|
|
currentStep = 4;
|
|
updateUI();
|
|
// Show Success
|
|
setTimeout(() => {
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
}, 500);
|
|
});
|
|
|
|
// Radio card selection styling
|
|
document.querySelectorAll('input[name="visitor_type"]').forEach(input => {
|
|
input.addEventListener('change', () => {
|
|
document.querySelectorAll('label.relative.flex.flex-col').forEach(l => l.classList.remove('border-primary', 'bg-primary-container/10'));
|
|
if (input.checked) {
|
|
input.parentElement.classList.add('border-primary', 'bg-primary-container/10');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize first card style
|
|
document.querySelector('input[name="visitor_type"]:checked').parentElement.classList.add('border-primary', 'bg-primary-container/10');
|
|
</script>
|
|
</body></html> |