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>
236 lines
12 KiB
HTML
236 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=390, user-scalable=no" name="viewport"/>
|
|
<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" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<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"/>
|
|
<style>
|
|
body {
|
|
width: 390px;
|
|
margin: 0 auto;
|
|
background-color: #faf8ff;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.qr-gradient {
|
|
background: linear-gradient(135deg, #003765 0%, #0066B3 100%);
|
|
}
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"primary": "#0066B3", /* Adjusted to user specific primary blue */
|
|
"primary-dark": "#003765",
|
|
"success": "#0E8A5F",
|
|
"surface-bright": "#faf8ff",
|
|
"outline-variant": "#c1c7d3",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface": "#141b2c",
|
|
"on-surface-variant": "#424750",
|
|
"surface": "#faf8ff",
|
|
"secondary-container": "#6d4aff",
|
|
"on-secondary-container": "#f3edff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "8px", /* User specified 8px */
|
|
"lg": "8px",
|
|
"xl": "12px",
|
|
"full": "9999px"
|
|
},
|
|
"fontSize": {
|
|
"headline-lg-mobile": ["22px", {"lineHeight": "28px", "fontWeight": "700"}],
|
|
"label-lg": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
|
|
"title-sm": ["16px", {"lineHeight": "24px", "fontWeight": "600"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="text-on-surface">
|
|
<!-- Top App Bar -->
|
|
<header class="fixed top-0 w-[390px] h-16 flex items-center justify-between px-6 bg-surface z-50">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-primary" data-icon="signal_cellular_off">signal_cellular_off</span>
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-primary">내 티켓</h1>
|
|
</div>
|
|
<button class="material-symbols-outlined text-on-surface-variant p-2 hover:opacity-80 transition-opacity">notifications</button>
|
|
</header>
|
|
<main class="pt-16 pb-24 px-6">
|
|
<!-- Offline Badge -->
|
|
<div class="mt-4 mb-4 flex justify-center">
|
|
<div class="inline-flex items-center gap-1.5 bg-surface-container-highest px-3 py-1 rounded-full text-on-surface-variant text-[11px] font-medium border border-outline-variant/30">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
|
|
오프라인 — 저장된 티켓 표시 중
|
|
</div>
|
|
</div>
|
|
<!-- Filter Tabs (Segmented Control) -->
|
|
<div class="flex bg-surface-container-low p-1 rounded-lg mb-6">
|
|
<button class="flex-1 py-2 text-label-lg rounded-md bg-white shadow-sm text-primary transition-all">진행중</button>
|
|
<button class="flex-1 py-2 text-label-lg text-on-surface-variant hover:text-on-surface">예정</button>
|
|
<button class="flex-1 py-2 text-label-lg text-on-surface-variant hover:text-on-surface">지난</button>
|
|
</div>
|
|
<!-- Info Banner -->
|
|
<div class="bg-primary/5 rounded-lg p-4 mb-8 flex gap-3 items-start border border-primary/10">
|
|
<span class="material-symbols-outlined text-primary text-[20px]" data-icon="info">info</span>
|
|
<p class="text-body-sm text-primary leading-tight font-medium">
|
|
티켓 QR로 현장 체크인하면 모바일 배지로 전환됩니다
|
|
</p>
|
|
</div>
|
|
<!-- Active Ticket Card -->
|
|
<div class="relative bg-surface-container-lowest rounded-xl border border-outline-variant shadow-sm overflow-hidden mb-8 transition-transform active:scale-[0.98] cursor-pointer" id="active-ticket" onclick="openQRModal()">
|
|
<div class="h-1 w-full bg-primary"></div>
|
|
<div class="p-5">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<h2 class="text-title-sm text-on-surface max-w-[200px]">스마트팩토리 코리아 2026</h2>
|
|
<span class="bg-success/10 text-success text-[11px] font-bold px-2 py-0.5 rounded border border-success/20">사용가능</span>
|
|
</div>
|
|
<div class="space-y-2 mb-6">
|
|
<div class="flex items-center gap-2 text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-[18px]">calendar_today</span>
|
|
<span class="text-body-sm">2026. 03.14(금) - 03.16(일)</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-[18px]">location_on</span>
|
|
<span class="text-body-sm">KINTEX 제1전시장 3-4홀</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 py-4 border-t border-dashed border-outline-variant mb-6">
|
|
<div>
|
|
<p class="text-body-sm text-on-surface-variant mb-0.5">권종</p>
|
|
<p class="font-bold text-on-surface">바이어권</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-body-sm text-on-surface-variant mb-0.5">수량</p>
|
|
<p class="font-bold text-on-surface">1매</p>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<p class="text-body-sm text-on-surface-variant mb-0.5">티켓 번호</p>
|
|
<p class="font-mono text-body-sm text-on-surface">No. 2026-0314-88</p>
|
|
</div>
|
|
</div>
|
|
<button class="w-full bg-primary text-white font-bold py-3.5 rounded-lg flex items-center justify-center gap-2 shadow-lg shadow-primary/20 hover:bg-primary-dark transition-colors">
|
|
<span class="material-symbols-outlined">qr_code_2</span>
|
|
입장 QR 보기
|
|
</button>
|
|
<button class="w-full mt-4 text-center text-body-sm text-on-surface-variant underline underline-offset-4 decoration-outline-variant">
|
|
예매 상세·취소
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Secondary Card (Used/Inactive) -->
|
|
<div class="bg-surface-container-low rounded-xl border border-outline-variant/50 p-5 opacity-60 pointer-events-none">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<h3 class="text-title-sm text-on-surface-variant">2026 서울 국제 인공지능 컨퍼런스</h3>
|
|
<span class="bg-outline-variant/30 text-on-surface-variant text-[11px] font-bold px-2 py-0.5 rounded">입장 대기 중</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant mb-1">2026. 02.10 - 02.12</p>
|
|
<p class="text-body-sm text-on-surface-variant">KINTEX 제2전시장</p>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Navigation -->
|
|
<nav class="fixed bottom-0 w-[390px] z-50 flex justify-around items-center px-2 py-3 bg-surface border-t border-outline-variant">
|
|
<button class="flex flex-col items-center justify-center text-on-surface-variant px-4 py-1 hover:opacity-80">
|
|
<span class="material-symbols-outlined">home</span>
|
|
<span class="font-label-lg text-[10px] mt-1">홈</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center bg-secondary-container text-on-secondary-container rounded-full px-5 py-1.5">
|
|
<span class="material-symbols-outlined">confirmation_number</span>
|
|
<span class="font-label-lg text-[10px] mt-1">티켓</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center text-on-surface-variant px-4 py-1">
|
|
<span class="material-symbols-outlined">map</span>
|
|
<span class="font-label-lg text-[10px] mt-1">지도</span>
|
|
</button>
|
|
<button class="flex flex-col items-center justify-center text-on-surface-variant px-4 py-1">
|
|
<span class="material-symbols-outlined">person</span>
|
|
<span class="font-label-lg text-[10px] mt-1">내 정보</span>
|
|
</button>
|
|
</nav>
|
|
<!-- QR Full Screen Modal -->
|
|
<div class="fixed inset-0 z-[100] hidden bg-black/60 backdrop-blur-md flex items-center justify-center px-6 transition-opacity duration-300 opacity-0" id="qr-modal">
|
|
<div class="relative w-full max-w-[340px] bg-white rounded-3xl overflow-hidden shadow-2xl scale-95 transition-transform duration-300" id="modal-content">
|
|
<!-- Modal Header -->
|
|
<div class="qr-gradient h-32 flex flex-col items-center justify-center text-white relative">
|
|
<button class="absolute top-4 right-4 text-white/80 hover:text-white" onclick="closeQRModal()">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
<h2 class="font-headline-lg-mobile text-[20px]">입장 QR 코드</h2>
|
|
<p class="text-white/80 text-body-sm mt-1">스마트팩토리 코리아 2026</p>
|
|
</div>
|
|
<!-- Modal Content -->
|
|
<div class="px-8 pt-8 pb-10 flex flex-col items-center text-center">
|
|
<div class="relative group">
|
|
<div class="absolute -inset-2 bg-primary/5 rounded-2xl border border-primary/10"></div>
|
|
<img alt="Entrance QR Code" class="relative w-48 h-48 mb-6 shadow-inner" data-alt="A clean, high-contrast minimalist black and white QR code for a professional exhibition entrance ticket. The QR code is perfectly square, sharp and detailed, set against a pristine white background. The aesthetic is modern and corporate, intended for a premium digital wallet interface." src="https://lh3.googleusercontent.com/aida/AP1WRLtuw-_ZtE3fJiWg2x1zisjpqpHAreJJWnze6bN1enMpcn27ebm6U7LE7Wb3ApA20vNhXnA7HTXlpQsfcfF_qmahVpqK3x3r4jDOVmLu8j0ias1OWDp6z7Jf3EXMgY6AUqU-pQtMkTvbu3icwbOaEaBoArnujk3JzaTR5F4GTgPZjL2CG4Km56g29mAakJITbcW1vyw53bqNBYc4Ha9HpLJLnJoVwg8Mz7ixcuEek3IDFHJ1F2d6WqcumIo"/>
|
|
</div>
|
|
<div class="space-y-1 mb-6">
|
|
<p class="text-headline-lg-mobile font-bold text-on-surface">정관람 <span class="text-body-base font-medium text-on-surface-variant">바이어</span></p>
|
|
<p class="text-body-sm text-primary font-mono bg-primary/5 px-2 py-0.5 rounded-full inline-block">KTX-****-8245</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-surface-container p-3 rounded-xl mb-6">
|
|
<span class="material-symbols-outlined text-primary text-[20px]">lightbulb</span>
|
|
<p class="text-body-sm text-on-surface-variant leading-tight text-left">
|
|
입장 시 화면을 <span class="text-on-surface font-bold">최대 밝기</span>로 유지하세요
|
|
</p>
|
|
</div>
|
|
<!-- Swipe Indicators -->
|
|
<div class="flex gap-2 mb-4">
|
|
<span class="w-6 h-1.5 rounded-full bg-primary"></span>
|
|
<span class="w-1.5 h-1.5 rounded-full bg-outline-variant"></span>
|
|
<span class="w-1.5 h-1.5 rounded-full bg-outline-variant"></span>
|
|
</div>
|
|
<p class="text-[11px] text-on-surface-variant uppercase tracking-widest">Swipe for more tickets</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function openQRModal() {
|
|
const modal = document.getElementById('qr-modal');
|
|
const content = document.getElementById('modal-content');
|
|
modal.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
modal.classList.remove('opacity-0');
|
|
content.classList.remove('scale-95');
|
|
content.classList.add('scale-100');
|
|
}, 10);
|
|
|
|
// Interaction to simulate brightness hint
|
|
console.log("Setting screen brightness to max...");
|
|
}
|
|
|
|
function closeQRModal() {
|
|
const modal = document.getElementById('qr-modal');
|
|
const content = document.getElementById('modal-content');
|
|
modal.classList.add('opacity-0');
|
|
content.classList.add('scale-95');
|
|
setTimeout(() => {
|
|
modal.classList.add('hidden');
|
|
}, 300);
|
|
}
|
|
|
|
// Close on backdrop click
|
|
document.getElementById('qr-modal').addEventListener('click', function(e) {
|
|
if (e.target === this) closeQRModal();
|
|
});
|
|
</script>
|
|
</body></html> |