286 lines
16 KiB
HTML
286 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>티켓 예매 - KINTEX 스마트팩토리 코리아 2026</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@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"/>
|
|
<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": {
|
|
"primary": "#003765",
|
|
"primary-container": "#004e8b",
|
|
"on-primary": "#ffffff",
|
|
"on-primary-container": "#91c0ff",
|
|
"secondary": "#5427e6",
|
|
"secondary-container": "#6d4aff",
|
|
"surface": "#faf8ff",
|
|
"surface-bright": "#f9f9ff",
|
|
"surface-dim": "#d3d9f1",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-low": "#f1f3ff",
|
|
"surface-container": "#eaedff",
|
|
"surface-container-high": "#e1e7ff",
|
|
"surface-container-highest": "#dbe2fa",
|
|
"on-surface": "#141b2c",
|
|
"on-surface-variant": "#424750",
|
|
"outline": "#727781",
|
|
"outline-variant": "#c2c7d1",
|
|
"error": "#ba1a1a",
|
|
"tertiary": "#003e28",
|
|
"tertiary-container": "#00583b",
|
|
"brand-blue": "#0066B3"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "8px",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-sm": "8px",
|
|
"stack-md": "16px",
|
|
"stack-lg": "24px",
|
|
"gutter": "16px",
|
|
"section-padding": "96px",
|
|
},
|
|
"fontFamily": {
|
|
"body-sm": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"display-lg": ["Inter"],
|
|
"headline-md": ["Inter"],
|
|
"label-md": ["Geist"]
|
|
},
|
|
"fontSize": {
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.step-active { color: #0066B3; font-weight: 700; border-bottom: 2px solid #0066B3; }
|
|
.glass-card { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.8); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#f8f9fa] font-body-base text-on-surface">
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 w-full bg-surface-bright dark:bg-surface-dim shadow-sm border-b border-outline-variant dark:border-outline z-50">
|
|
<div class="flex justify-between items-center max-w-[1280px] mx-auto px-gutter h-20">
|
|
<div class="font-display-lg text-display-lg text-primary dark:text-primary-fixed cursor-pointer">KINTEX</div>
|
|
<nav class="hidden md:flex gap-8">
|
|
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-body-base" href="#">Exhibitions</a>
|
|
<a class="text-primary dark:text-primary-fixed font-bold border-b-2 border-primary transition-colors font-body-base" href="#">Tickets</a>
|
|
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-body-base" href="#">Schedule</a>
|
|
<a class="text-on-surface-variant dark:text-on-surface-variant hover:text-primary transition-colors font-body-base" href="#">About</a>
|
|
</nav>
|
|
<div class="flex items-center gap-4">
|
|
<div class="material-symbols-outlined cursor-pointer">search</div>
|
|
<button class="bg-primary text-on-primary px-6 py-2 rounded transition-all duration-200 hover:bg-primary-container">Login</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="pt-24 pb-section-padding max-w-[1024px] mx-auto px-4">
|
|
<!-- Event Summary Bar -->
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-outline-variant flex items-center gap-6 mb-6">
|
|
<img class="w-16 h-20 object-cover rounded shadow-sm" data-alt="A cinematic and futuristic promotional poster for the Smart Factory and AI Expo 2026. The visual features glowing blue and orange data streams, robotic arms on an automated production line, and professional attendees wearing augmented reality headsets. The overall mood is high-tech and innovative, using a clean corporate aesthetic with vibrant neon accents against a dark, sophisticated industrial background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCN7IjM8zDt1vwdVYiqlBZLgaJ7U8IsHGHmvcjwnuW8k0X8fd_Id6Yp_7_nrYFT-WGuMYhwZzlPIWWBAUAkELrMjqVaerFVVU2QN3HWX90s1pjKfIg8XH4hHecaczm-Wq32Y9rk4n3MYAP5pitM_ToSxcqZ5nTAMgQ7bMiypdOvxReiCSF54--VSnsXPBCsiAPUxnhb8DepAA7OJvgjwW5y53lxh3JiERPEXdFP5Z5UhGVVfwThu-IkjJzehMgjleOJmUmvcKrMec4"/>
|
|
<div class="flex-grow">
|
|
<h1 class="text-xl font-bold text-on-surface mb-1">스마트팩토리 코리아 2026</h1>
|
|
<div class="flex gap-4 text-on-surface-variant font-body-sm">
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">calendar_today</span> 2026.09.05 - 09.08</span>
|
|
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-sm">location_on</span> 제2전시장 홀7</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Step Indicator -->
|
|
<div class="flex justify-center gap-8 mb-8 border-b border-outline-variant pb-2">
|
|
<div class="px-4 pb-2 step-active">01 행사·권종</div>
|
|
<div class="px-4 pb-2 text-on-surface-variant">02 예매자</div>
|
|
<div class="px-4 pb-2 text-on-surface-variant">03 결제</div>
|
|
<div class="px-4 pb-2 text-on-surface-variant">04 완료</div>
|
|
</div>
|
|
<!-- Subtle Blue Banner -->
|
|
<div class="bg-blue-50 border border-blue-100 rounded-lg p-3 flex items-center justify-center gap-2 mb-10">
|
|
<span class="material-symbols-outlined text-blue-600 text-lg">info</span>
|
|
<span class="text-blue-800 text-sm">로그인하면 예매 내역이 자동 저장됩니다.</span>
|
|
<a class="text-blue-600 font-bold text-sm underline ml-2" href="#">로그인하기</a>
|
|
</div>
|
|
<!-- Main Layout (2 Columns) -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-10 gap-8 items-start">
|
|
<!-- Left Column: Tickets (7/10) -->
|
|
<div class="lg:col-span-7 space-y-8">
|
|
<section>
|
|
<h2 class="text-lg font-bold mb-4 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-brand-blue">confirmation_number</span>
|
|
티켓 권종 선택
|
|
</h2>
|
|
<div class="space-y-4">
|
|
<!-- Card 1: 일반권 -->
|
|
<div class="bg-white border-l-4 border-l-primary border border-outline-variant rounded p-5 flex justify-between items-center hover:shadow-md transition-shadow">
|
|
<div>
|
|
<h3 class="font-bold text-base mb-1">일반권</h3>
|
|
<p class="text-on-surface-variant text-sm">일반 관람객 및 개인 참가자</p>
|
|
<p class="text-brand-blue font-bold mt-2">₩0 <span class="text-xs font-normal text-on-surface-variant">(사전등록 할인가)</span></p>
|
|
</div>
|
|
<div class="flex items-center border border-outline-variant rounded overflow-hidden">
|
|
<button class="px-3 py-1 bg-surface-container hover:bg-surface-container-high transition-colors text-lg">-</button>
|
|
<span class="px-4 font-bold">0</span>
|
|
<button class="px-3 py-1 bg-surface-container hover:bg-surface-container-high transition-colors text-lg">+</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2: 바이어권 (AI Badge) -->
|
|
<div class="bg-white border-l-4 border-l-secondary border border-outline-variant rounded p-5 flex justify-between items-center hover:shadow-md transition-shadow">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<h3 class="font-bold text-base">바이어권</h3>
|
|
<span class="bg-secondary-fixed text-on-secondary-fixed-variant text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider">AI OPTIMIZED</span>
|
|
</div>
|
|
<p class="text-on-surface-variant text-sm">유관 기업 종사자 및 바이어 전용</p>
|
|
<p class="text-brand-blue font-bold mt-2">무료 · <span class="text-xs text-on-surface-variant">자격심사 필요</span></p>
|
|
</div>
|
|
<div class="flex items-center border border-outline-variant rounded overflow-hidden">
|
|
<button class="px-3 py-1 bg-surface-container hover:bg-surface-container-high transition-colors text-lg">-</button>
|
|
<span class="px-4 font-bold">0</span>
|
|
<button class="px-3 py-1 bg-surface-container hover:bg-surface-container-high transition-colors text-lg">+</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3: 단체권 -->
|
|
<div class="bg-white border-l-4 border-l-tertiary border border-outline-variant rounded p-5 flex justify-between items-center hover:shadow-md transition-shadow">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<h3 class="font-bold text-base">단체권 (10매 이상)</h3>
|
|
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant text-[10px] px-2 py-0.5 rounded-full font-bold">10% OFF</span>
|
|
</div>
|
|
<p class="text-on-surface-variant text-sm">기업 단체 관람 전용</p>
|
|
<p class="text-brand-blue font-bold mt-2">₩9,000 <span class="text-xs font-normal text-on-surface-variant">/ 1인</span></p>
|
|
</div>
|
|
<div class="flex items-center border border-outline-variant rounded overflow-hidden">
|
|
<button class="px-3 py-1 bg-surface-container hover:bg-surface-container-high transition-colors text-lg">-</button>
|
|
<span class="px-4 font-bold">0</span>
|
|
<button class="px-3 py-1 bg-surface-container hover:bg-surface-container-high transition-colors text-lg">+</button>
|
|
</div>
|
|
</div>
|
|
<!-- Card 4: VIP권 (Disabled) -->
|
|
<div class="bg-surface-container-low border border-outline-variant rounded p-5 flex justify-between items-center opacity-60">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<h3 class="font-bold text-base">VIP권</h3>
|
|
<span class="bg-error-container text-on-error-container text-[10px] px-2 py-0.5 rounded-full font-bold">매진</span>
|
|
</div>
|
|
<p class="text-on-surface-variant text-sm">전시회 올패스 + VIP 라운지 이용권</p>
|
|
<p class="text-on-surface-variant font-bold mt-2">₩50,000</p>
|
|
</div>
|
|
<div class="flex items-center border border-outline-variant rounded overflow-hidden bg-white/50">
|
|
<button class="px-3 py-1 cursor-not-allowed" disabled="">-</button>
|
|
<span class="px-4 font-bold">0</span>
|
|
<button class="px-3 py-1 cursor-not-allowed" disabled="">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Payment Info -->
|
|
<section>
|
|
<h2 class="text-lg font-bold mb-4 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-brand-blue">payments</span>
|
|
결제 수단 안내
|
|
</h2>
|
|
<div class="flex flex-wrap gap-3 mb-6">
|
|
<div class="px-4 py-2 bg-white border border-outline-variant rounded-full text-sm font-medium hover:border-brand-blue cursor-pointer transition-colors">신용카드</div>
|
|
<div class="px-4 py-2 bg-white border border-outline-variant rounded-full text-sm font-medium hover:border-brand-blue cursor-pointer transition-colors">간편결제</div>
|
|
<div class="px-4 py-2 bg-white border border-outline-variant rounded-full text-sm font-medium hover:border-brand-blue cursor-pointer transition-colors">계좌이체</div>
|
|
</div>
|
|
<div class="bg-surface-container-low p-4 rounded text-on-surface-variant text-xs leading-relaxed border border-outline-variant/30 flex gap-3">
|
|
<span class="material-symbols-outlined text-lg text-outline">verified_user</span>
|
|
<p>결제는 PG사 보안 페이지에서 진행되며, 카드정보는 본 사이트에 저장되지 않습니다. 모든 거래는 256비트 SSL 암호화로 보호됩니다.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Right Column: Summary (3/10) -->
|
|
<aside class="lg:col-span-3 sticky top-24">
|
|
<div class="bg-white border border-outline-variant rounded-xl shadow-sm p-6 overflow-hidden">
|
|
<h3 class="text-lg font-bold mb-6 border-b border-outline-variant pb-4">예매 내역 요약</h3>
|
|
<div class="space-y-4 mb-6">
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-on-surface-variant">소계</span>
|
|
<span>₩0</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-on-surface-variant">할인</span>
|
|
<span class="text-error">-₩0</span>
|
|
</div>
|
|
<hr class="border-outline-variant"/>
|
|
<div class="flex flex-col gap-1">
|
|
<span class="text-sm font-medium">최종 결제 금액</span>
|
|
<span class="text-2xl font-extrabold text-brand-blue">₩0</span>
|
|
</div>
|
|
</div>
|
|
<button class="w-full bg-brand-blue text-white py-4 rounded-lg font-bold text-base hover:bg-primary-container transition-all shadow-lg active:scale-[0.98]">
|
|
다음 단계로 이동
|
|
</button>
|
|
<p class="mt-4 text-[11px] text-center text-on-surface-variant">다음 단계에서 예매자 정보를 입력합니다.</p>
|
|
</div>
|
|
<!-- Support Info -->
|
|
<div class="mt-4 px-2">
|
|
<div class="flex items-center gap-2 text-xs text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-sm">support_agent</span>
|
|
고객센터: 1588-XXXX (평일 09-18시)
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="w-full py-section-padding bg-surface-container-low dark:bg-surface-container-highest border-t border-outline-variant">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 max-w-[1280px] mx-auto px-gutter gap-10">
|
|
<div>
|
|
<div class="font-headline-md text-headline-md text-on-surface mb-4">KINTEX</div>
|
|
<p class="text-on-surface-variant font-body-sm leading-relaxed mb-6">대한민국 대표 마이스 산업의 중심, 킨텍스는 글로벌 수준의 전시 컨벤션 서비스를 제공하며 혁신적인 미래 가치를 창출합니다.</p>
|
|
<div class="text-on-surface-variant font-body-sm">
|
|
© 2024 KINTEX. All Rights Reserved.
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-3">
|
|
<h4 class="font-bold text-sm mb-2">Company</h4>
|
|
<a class="block text-on-surface-variant hover:text-primary transition-opacity font-body-sm" href="#">Privacy Policy</a>
|
|
<a class="block text-on-surface-variant hover:text-primary transition-opacity font-body-sm" href="#">Terms of Service</a>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<h4 class="font-bold text-sm mb-2">Support</h4>
|
|
<a class="block text-on-surface-variant hover:text-primary transition-opacity font-body-sm" href="#">Contact Us</a>
|
|
<a class="block text-on-surface-variant hover:text-primary transition-opacity font-body-sm" href="#">Corporate Info</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
// Simple stepper interaction logic for demo purposes
|
|
document.querySelectorAll('.flex.items-center.border').forEach(stepper => {
|
|
const buttons = stepper.querySelectorAll('button');
|
|
const span = stepper.querySelector('span');
|
|
|
|
buttons[0].addEventListener('click', () => {
|
|
let val = parseInt(span.textContent);
|
|
if (val > 0) span.textContent = val - 1;
|
|
});
|
|
|
|
buttons[1].addEventListener('click', () => {
|
|
let val = parseInt(span.textContent);
|
|
span.textContent = val + 1;
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |