zio/kintex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
8509787016
kintex/stitch_kintex_ai_system_architect/scr_p7/code_manage.html
zio c3a695d70c feat(stitch): harvest all 39 pending screens (64/64 secured) 
- 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>
2026-07-12 03:27:05 +09:00

295 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ko"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<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&amp;family=Geist:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-bright": "#f9f9ff",
"on-tertiary-fixed-variant": "#005236",
"surface-dim": "#d2daf0",
"primary-fixed-dim": "#a2c9ff",
"background": "#f9f9ff",
"surface-container-highest": "#dbe2f9",
"surface-container-low": "#f1f3ff",
"on-primary-container": "#d2e3ff",
"inverse-on-surface": "#edf0ff",
"on-error-container": "#93000a",
"surface-container-high": "#e0e8ff",
"tertiary-fixed-dim": "#72daa9",
"tertiary": "#00583b",
"surface-container-lowest": "#ffffff",
"error-container": "#ffdad6",
"on-tertiary-container": "#8ef7c3",
"on-surface-variant": "#414751",
"outline": "#717782",
"on-primary-fixed-variant": "#004881",
"error": "#D92D20",
"secondary-container": "#6d4aff",
"secondary-fixed-dim": "#c9bfff",
"on-surface": "#141b2c",
"secondary-fixed": "#e5deff",
"inverse-primary": "#a2c9ff",
"surface-tint": "#0060a9",
"tertiary-container": "#00734e",
"surface": "#f9f9ff",
"inverse-surface": "#293041",
"outline-variant": "#c1c7d3",
"tertiary-fixed": "#8ef7c4",
"primary-fixed": "#d3e4ff",
"on-tertiary-fixed": "#002113",
"on-secondary-container": "#f3edff",
"on-background": "#141b2c",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"on-primary-fixed": "#001c38",
"surface-container": "#e9edff",
"primary-container": "#0066b3",
"primary": "#004e8b",
"on-secondary-fixed": "#1b0063",
"secondary": "#5427e6",
"on-secondary-fixed-variant": "#4500d8",
"on-error": "#ffffff",
"on-primary": "#ffffff",
"surface-variant": "#dbe2f9"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"container-padding": "24px",
"gutter": "16px",
"stack-sm": "8px",
"stack-lg": "24px",
"base": "4px",
"stack-md": "16px"
},
"fontFamily": {
"label-xs": ["Geist"],
"headline-md": ["Inter"],
"display-lg": ["Inter"],
"label-md": ["Geist"],
"display-lg-mobile": ["Inter"],
"title-sm": ["Inter"],
"body-sm": ["Inter"],
"body-base": ["Inter"]
},
"fontSize": {
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
}
},
},
}
</script>
<style>
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.booking-card-header-accent { border-left: 4px solid #005236; }
.violation-red { color: #D92D20; }
.ai-border { outline: 1px solid #6D4AFF; }
</style>
</head>
<body class="bg-surface-bright text-on-surface min-h-screen flex flex-col">
<!-- Top Navigation (Shared Component) -->
<nav class="bg-surface-bright dark:bg-surface w-full top-0 sticky border-b border-outline-variant dark:border-outline z-50">
<div class="flex justify-between items-center px-container-padding h-16 w-full max-w-7xl mx-auto">
<div class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed-dim">KINTEX AI System</div>
<div class="hidden md:flex items-center gap-stack-lg">
<a class="font-body-base text-body-base text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed-dim transition-colors" href="#">Exhibitions</a>
<a class="font-body-base text-body-base text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed-dim transition-colors" href="#">Facilities</a>
<a class="font-body-base text-body-base text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed-dim transition-colors" href="#">Services</a>
<a class="font-body-base text-body-base text-on-surface-variant dark:text-surface-variant hover:text-primary dark:hover:text-primary-fixed-dim transition-colors" href="#">Support</a>
<a class="font-body-base text-body-base text-primary dark:text-primary-fixed-dim border-b-2 border-primary dark:border-primary-fixed-dim pb-1" href="#">Booking Status</a>
</div>
<div class="flex gap-stack-md">
<button class="font-label-md text-label-md text-primary hover:underline">Contact Us</button>
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md text-label-md">Sign In</button>
</div>
</div>
</nav>
<main class="flex-grow w-full max-w-5xl mx-auto px-container-padding py-stack-lg">
<!-- Header -->
<header class="text-center mb-stack-lg">
<h1 class="font-display-lg text-display-lg text-on-surface">예매 확인 · 취소</h1>
<p class="font-body-base text-body-base text-on-surface-variant mt-2">비회원 예매 내역을 조회하고 취소하실 수 있습니다.</p>
</header>
<!-- Lookup Form Section -->
<section class="mb-stack-lg">
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl p-stack-md shadow-sm">
<div class="flex flex-col md:flex-row gap-stack-md items-end">
<div class="flex-1 w-full">
<label class="block font-label-md text-label-md text-on-surface mb-1">예매번호</label>
<input class="w-full border-outline-variant rounded-lg font-body-base px-3 py-2 focus:ring-2 focus:ring-primary-container focus:border-primary" placeholder="KTX-YYYY-XXXXXX" type="text"/>
</div>
<div class="flex-1 w-full">
<label class="block font-label-md text-label-md text-on-surface mb-1">이메일</label>
<input class="w-full border-outline-variant rounded-lg font-body-base px-3 py-2 focus:ring-2 focus:ring-primary-container focus:border-primary" placeholder="example@email.com" type="email"/>
</div>
<button class="bg-primary-container text-on-primary hover:bg-primary transition-colors px-stack-lg py-2 rounded-lg font-title-sm text-title-sm h-[42px] flex items-center justify-center">
조회하기
</button>
</div>
<div class="mt-stack-md text-center">
<a class="font-label-md text-label-md text-on-surface-variant hover:text-primary transition-colors underline decoration-outline-variant" href="#">로그인하여 내 예매 보기</a>
</div>
</div>
</section>
<!-- Search Results Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-stack-lg">
<!-- Left: Booking Details (Bento Grid Item 1) -->
<div class="lg:col-span-2 space-y-stack-md">
<article class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-md booking-card-header-accent">
<div class="flex justify-between items-start mb-stack-md">
<div class="space-y-1">
<span class="inline-block bg-on-tertiary-fixed-variant text-on-tertiary text-label-xs px-2 py-0.5 rounded-full mb-2">예매완료</span>
<h2 class="font-headline-md text-headline-md text-on-surface">스마트팩토리 코리아 2026</h2>
<p class="font-label-md text-label-md text-on-surface-variant">예매번호 <span class="font-mono">KTX-2026-018245</span></p>
</div>
<div class="text-right">
<p class="font-label-md text-label-md text-on-surface-variant">결제일시</p>
<p class="font-mono text-body-base">2025-10-24 14:32</p>
</div>
</div>
<div class="border-t border-outline-variant pt-stack-md">
<table class="w-full text-left">
<thead class="bg-surface-container-low">
<tr>
<th class="px-4 py-2 font-label-md text-label-md text-on-surface-variant">권종</th>
<th class="px-4 py-2 font-label-md text-label-md text-on-surface-variant">수량</th>
<th class="px-4 py-2 font-label-md text-label-md text-on-surface-variant text-right">상세</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant font-body-base">
<tr>
<td class="px-4 py-3 flex items-center gap-3">
<div class="w-10 h-10 bg-surface-container border border-outline-variant rounded flex items-center justify-center">
<span class="material-symbols-outlined text-on-surface-variant">qr_code_2</span>
</div>
<span>일반권 (Early Bird)</span>
</td>
<td class="px-4 py-3">2매</td>
<td class="px-4 py-3 text-right">
<span class="font-mono">₩ 30,000</span>
</td>
</tr>
<tr>
<td class="px-4 py-3 flex items-center gap-3">
<div class="w-10 h-10 bg-surface-container border border-outline-variant rounded flex items-center justify-center">
<span class="material-symbols-outlined text-on-surface-variant">qr_code_2</span>
</div>
<span>학생/군인 할인</span>
</td>
<td class="px-4 py-3">1매</td>
<td class="px-4 py-3 text-right">
<span class="font-mono">₩ 10,000</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-stack-md p-4 bg-surface-container-low rounded-lg flex items-center justify-between">
<div class="flex items-center gap-stack-md">
<span class="material-symbols-outlined text-primary">account_circle</span>
<div>
<p class="font-label-xs text-label-xs text-on-surface-variant">예매자 정보</p>
<p class="font-body-sm text-body-sm">jo***@ex***.com · 010-****-1234</p>
</div>
</div>
<div class="text-right">
<p class="font-label-xs text-label-xs text-on-surface-variant">총 결제 금액</p>
<p class="font-headline-md text-headline-md text-primary">₩ 40,000</p>
</div>
</div>
</article>
</div>
<!-- Right: Refund & Policy (Bento Grid Item 2) -->
<aside class="space-y-stack-md">
<div class="bg-surface-container-lowest border border-outline-variant rounded-lg p-stack-md">
<h3 class="font-title-sm text-title-sm text-on-surface mb-stack-md flex items-center gap-2">
<span class="material-symbols-outlined">info</span>
취소·환불 정책
</h3>
<div class="space-y-2 mb-stack-lg">
<div class="flex justify-between items-center p-2 rounded bg-surface-bright">
<span class="font-label-md text-label-md">방문 7일 전 (D-7)</span>
<span class="font-label-md text-label-md text-on-tertiary-fixed-variant">100% 환불</span>
</div>
<div class="flex justify-between items-center p-2 rounded bg-surface-bright">
<span class="font-label-md text-label-md">방문 3일 전 (D-3)</span>
<span class="font-label-md text-label-md text-secondary">50% 환불</span>
</div>
<div class="flex justify-between items-center p-2 rounded bg-surface-bright">
<span class="font-label-md text-label-md">방문 당일</span>
<span class="font-label-md text-label-md text-error">0% (환불불가)</span>
</div>
</div>
<div class="border-t border-outline-variant pt-stack-md mb-stack-md">
<div class="flex justify-between items-baseline">
<span class="font-body-base text-body-base text-on-surface-variant">현재 예상 환불액</span>
<span class="font-headline-md text-headline-md text-primary">₩ 40,000</span>
</div>
<p class="text-right font-label-xs text-label-xs text-on-surface-variant mt-1">(D-15일 기준 적용)</p>
</div>
<button class="w-full border border-error text-error hover:bg-error hover:text-white transition-all py-3 rounded-lg font-title-sm text-title-sm flex items-center justify-center gap-2">
<span class="material-symbols-outlined">cancel</span>
예매 취소
</button>
<p class="font-label-xs text-label-xs text-on-surface-variant mt-stack-md text-center">
환불은 PG사를 통해 원결제수단으로 처리됩니다.
</p>
</div>
<!-- AI Optimized Helper -->
<div class="ai-border bg-secondary-fixed rounded-lg p-stack-md flex gap-stack-md items-start">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
<div>
<p class="font-label-md text-label-md text-on-surface font-bold">AI 정산 도우미</p>
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">본 결제건은 신용카드 할부 결제 건으로, 취소 시 카드사를 통해 한도 복구까지 약 3-5영업일이 소요될 수 있습니다.</p>
</div>
</div>
</aside>
</div>
</main>
<!-- Footer (Shared Component) -->
<footer class="bg-surface-container dark:bg-surface-container-high border-t border-outline-variant dark:border-outline mt-auto">
<div class="flex flex-col md:flex-row justify-between items-center gap-stack-md px-container-padding py-stack-lg w-full max-w-7xl mx-auto">
<div class="flex flex-col gap-2">
<div class="font-title-sm text-title-sm font-bold text-on-surface dark:text-on-surface-variant">KINTEX</div>
<p class="font-label-md text-label-md text-on-surface-variant dark:text-surface-variant">© 2024 KINTEX. All rights reserved. Precision Exhibition Management Powered by AI.</p>
</div>
<div class="flex gap-stack-md flex-wrap justify-center">
<a class="font-label-md text-label-md text-on-surface-variant dark:text-surface-variant hover:underline hover:text-primary transition-all" href="#">Privacy Policy</a>
<a class="font-label-md text-label-md text-on-surface-variant dark:text-surface-variant hover:underline hover:text-primary transition-all" href="#">Terms of Service</a>
<a class="font-label-md text-label-md text-on-surface-variant dark:text-surface-variant hover:underline hover:text-primary transition-all" href="#">Safety Regulations</a>
<a class="font-label-md text-label-md text-on-surface-variant dark:text-surface-variant hover:underline hover:text-primary transition-all" href="#">Support Center</a>
<a class="font-label-md text-label-md text-on-surface-variant dark:text-surface-variant hover:underline hover:text-primary transition-all" href="#">Accessibility</a>
</div>
</div>
</footer>
<script>
// Micro-interactions for button clicks
document.querySelectorAll('button').forEach(btn => {
btn.addEventListener('click', function() {
this.classList.add('opacity-80');
setTimeout(() => this.classList.remove('opacity-80'), 150);
});
});
</script>
</body></html>
Reference in New Issue View Git Blame Copy Permalink